Replace AlertBox with Alert component

This replaces the old AlertBox with the new Alert (type `warning`) in
the dashboard.

Author: KevSlashNull

components/dashboard/src/components/AlertBox.tsx

@@ -4,7 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import AlertBox from "./AlertBox";
+import Alert from "./Alert";
 import Modal from "./Modal";
 import { useRef, useEffect } from "react";
 
@@ -22,7 +22,7 @@ export default function ConfirmationModal(props: {
     const child: React.ReactChild[] = [<p className="mt-3 mb-3 text-base text-gray-500">{props.areYouSureText}</p>];
 
     if (props.warningText) {
-        child.unshift(<AlertBox>{props.warningText}</AlertBox>);
+        child.unshift(<Alert type="warning">{props.warningText}</Alert>);
     }
 
     const isEntity = (x: any): x is Entity => typeof x === "object" && "name" in x;

components/dashboard/src/components/ConfirmationModal.tsx

@@ -6,7 +6,7 @@
 
 import { Project, ProjectEnvVar } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
-import AlertBox from "../components/AlertBox";
+import Alert from "../components/Alert";
 import CheckBox from "../components/CheckBox";
 import InfoBox from "../components/InfoBox";
 import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
@@ -131,17 +131,17 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
         >
             <h3 className="mb-4">New Variable</h3>
             <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 flex flex-col">
-                <AlertBox>
+                <Alert type="warning">
                     <strong>Project environment variables can be exposed.</strong>
                     <br />
                     Even if <strong>Hide Variable in Workspaces</strong> is enabled, anyone with read access to your
                     repository can access secret values if they are printed in the terminal, logged, or persisted to the
                     file system.
-                </AlertBox>
+                </Alert>
                 {error && (
-                    <AlertBox className="mt-4">
+                    <Alert type="error" className="mt-4">
                         {String(error).replace(/Error: Request \w+ failed with message: /, "")}
-                    </AlertBox>
+                    </Alert>
                 )}
                 <div className="mt-8">
                     <h4>Name</h4>

components/dashboard/src/projects/ProjectVariables.tsx

@@ -7,7 +7,7 @@
 import { AuthProviderEntry, AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import React, { useContext, useEffect, useState } from "react";
-import AlertBox from "../components/AlertBox";
+import Alert from "../components/Alert";
 import CheckBox from "../components/CheckBox";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { ContextMenuEntry } from "../components/ContextMenu";
@@ -748,7 +748,7 @@ export function GitIntegrationModal(
             <h3 className="pb-2">{mode === "new" ? "New Git Integration" : "Git Integration"}</h3>
             <div className="space-y-4 border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
                 {mode === "edit" && providerEntry?.status !== "verified" && (
-                    <AlertBox>You need to activate this integration.</AlertBox>
+                    <Alert type="warning">You need to activate this integration.</Alert>
                 )}
                 <div className="flex flex-col">
                     <span className="text-gray-500">

components/dashboard/src/settings/Integrations.tsx

@@ -16,7 +16,7 @@ import {
 import { PlanCoupon, GithubUpgradeURL } from "@gitpod/gitpod-protocol/lib/payment-protocol";
 import { Plans, Plan, PlanType } from "@gitpod/gitpod-protocol/lib/plans";
 import { ChargebeeClient } from "../chargebee/chargebee-client";
-import AlertBox from "../components/AlertBox";
+import Alert from "../components/Alert";
 import InfoBox from "../components/InfoBox";
 import Modal from "../components/Modal";
 import SelectableCard from "../components/SelectableCard";
@@ -741,12 +741,12 @@ export default function () {
                                     ). The new total will be effective from the next billing cycle.
                                 </InfoBox>
                             )}
-                            <AlertBox className="mb-4">
+                            <Alert type="warning" className="mb-4">
                                 Total:{" "}
                                 {(confirmUpgradeToPlan.currency === "EUR" ? "€" : "$") +
                                     confirmUpgradeToPlan.pricePerMonth}{" "}
                                 per month
-                            </AlertBox>
+                            </Alert>
                         </div>
                         <div className="flex justify-end mt-6">
                             <button onClick={doUpgrade}>Upgrade Plan</button>

components/dashboard/src/settings/Plans.tsx

@@ -8,7 +8,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { getGitpodService } from "../service/service";
-import AlertBox from "../components/AlertBox";
+import Alert from "../components/Alert";
 import Modal from "../components/Modal";
 import {
     AssigneeIdentifier,
@@ -730,7 +730,7 @@ function AddMembersModal(props: {
                     </select>
                 </div>
 
-                <AlertBox>Additional Charge: {expectedPrice} per month</AlertBox>
+                <Alert type="warning">Additional Charge: {expectedPrice} per month</Alert>
             </div>
             <div className="flex justify-end mt-6">
                 <button className={"ml-2"} onClick={() => props.onBuy(getPlan(), quantity, props.sub)}>
@@ -831,7 +831,9 @@ function NewTeamModal(props: {
                     </select>
                 </div>
 
-                <AlertBox className="mt-2">Total: {expectedPrice} per month</AlertBox>
+                <Alert type="warning" className="mt-2">
+                    Total: {expectedPrice} per month
+                </Alert>
             </div>
             <div className="flex justify-end mt-6">
                 <button className={"ml-2"} onClick={() => props.onBuy(plan, quantity)}>

components/dashboard/src/settings/Teams.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import Modal from "../components/Modal";
 import Tooltip from "../components/Tooltip";
 import copy from "../images/copy.svg";
-import AlertBox from "../components/AlertBox";
+import Alert from "../components/Alert";
 import InfoBox from "../components/InfoBox";
 
 function InputWithCopy(props: { value: string; tip?: string; className?: string }) {
@@ -62,12 +62,12 @@ function SSHView(props: SSHProps) {
     return (
         <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-6">
             <div className="mt-1 mb-4">
-                <AlertBox>
+                <Alert type="warning">
                     <p className="text-red-500 whitespace-normal text-base">
                         <b>Anyone</b> on the internet with this command can access the running workspace. The command
                         includes a generated access token that resets on every workspace restart.
                     </p>
-                </AlertBox>
+                </Alert>
                 <InfoBox className="mt-4">
                     <p className="text-gray-500 whitespace-normal text-base">
                         Before connecting via SSH, make sure you have an existing SSH private key on your machine. You