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";
 
@@ -26,7 +26,7 @@ export default function ConfirmationModal(props: {
     ];
 
     if (props.warningText) {
-        children.unshift(<AlertBox>{props.warningText}</AlertBox>);
+        children.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";
@@ -132,17 +132,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";
@@ -751,7 +751,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";
@@ -737,12 +737,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

@@ -7,7 +7,7 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
 import { getGitpodService } from "../service/service";
-import AlertBox from "../components/AlertBox";
+import Alert from "../components/Alert";
 import Modal from "../components/Modal";
 import {
     AssigneeIdentifier,
@@ -727,7 +727,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)}>
@@ -829,7 +829,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)}>