[dashboard] add alert component and display page

Author: mustard-mh

components/dashboard/src/App.tsx

@@ -77,6 +77,7 @@ const AdminSettings = React.lazy(() => import(/* webpackPrefetch: true */ "./adm
 const ProjectsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "./admin/ProjectsSearch"));
 const TeamsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "./admin/TeamsSearch"));
 const OAuthClientApproval = React.lazy(() => import(/* webpackPrefetch: true */ "./OauthClientApproval"));
+const ComponentsDispay = React.lazy(() => import(/* webpackPrefetch: true */ "./components/Dispay"));
 
 function Loading() {
     return <></>;
@@ -479,6 +480,9 @@ function App() {
         url.pathname = "/";
         window.location.replace(url);
         return <div></div>;
+    } else if (window.location.pathname === "/components/display") {
+        // } else if (window.location.pathname === "/components/display" && process.env.NODE_ENV !== "production") {
+        toRender = <ComponentsDispay />;
     }
 
     return <Suspense fallback={<Loading />}>{toRender}</Suspense>;

components/dashboard/src/components/Alert.tsx

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { useState } from "react";
+import { ReactComponent as Exclamation } from "../images/exclamation.svg";
+import { ReactComponent as Exclamation2 } from "../images/exclamation2.svg";
+import { ReactComponent as InfoSvg } from "../images/info.svg";
+import { ReactComponent as XSvg } from "../images/x.svg";
+
+export type AlertType =
+    // Yellow
+    | "warning"
+    // Gray alert
+    | "info"
+    // Red
+    | "error"
+    // Blue
+    | "message";
+
+export interface AlertProps {
+    className?: string;
+    type?: AlertType;
+    closable?: boolean;
+    showIcon?: boolean;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+
+interface AlertInfo {
+    cls: string;
+    icon: React.ReactNode;
+    iconColor?: string;
+}
+
+const infoMap: Record<AlertType, AlertInfo> = {
+    warning: {
+        cls: "bg-yellow-100 dark:bg-yellow-700 text-yellow-600 dark:text-yellow-50",
+        icon: <Exclamation2 className="w-4 h-4"></Exclamation2>,
+        iconColor: "text-yellow-400 dark:text-yellow-900",
+    },
+    info: {
+        cls: "bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-300",
+        icon: <InfoSvg className="w-4 h-4"></InfoSvg>,
+        iconColor: "text-gray-400",
+    },
+    message: {
+        cls: "bg-blue-50 dark:bg-blue-700 text-blue-800 dark:text-blue-100",
+        icon: <InfoSvg className="w-4 h-4"></InfoSvg>,
+        iconColor: "text-blue-400",
+    },
+    error: {
+        cls: "bg-red-50 dark:bg-red-800 dark:bg-opacity-50 text-red-600 dark:text-red-200",
+        icon: <Exclamation className="w-4 h-4"></Exclamation>,
+        iconColor: "text-red-400",
+    },
+};
+
+export default function Alert(props: AlertProps) {
+    const [visible, setVisible] = useState(true);
+    if (!visible) {
+        return null;
+    }
+    const type: AlertType = props.type ?? "info";
+    const info = infoMap[type];
+    const showIcon = props.showIcon ?? true;
+    return (
+        <div className={`flex relative rounded p-4 ${info.cls} ${props.className || ""}`}>
+            {showIcon && <span className={`mt-1 mr-4 h-4 w-4 ${info.iconColor}`}>{props.icon ?? info.icon}</span>}
+            <span className="flex-1 text-left">{props.children}</span>
+            {props.closable && (
+                <XSvg onClick={() => setVisible(false)} className="mt-1 ml-4 w-3 h-3 cursor-pointer"></XSvg>
+            )}
+        </div>
+    );
+}

components/dashboard/src/components/Dispay.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import Alert from "./Alert";
+
+export function Section(props: { title: string; children: React.ReactNode | React.ReactNode[]; darkMode?: boolean }) {
+    const darkMode = props.darkMode ?? true;
+    return (
+        <>
+            <h3 className="text-yellow-800 mt-4">{props.title}</h3>
+            <div className={`grid gap-2 ${darkMode ? "grid-cols-2" : "grid-cols-1"}`}>
+                <div className="space-y-2 p-4 bg-white rounded">{props.children}</div>
+                {darkMode && <div className="space-y-2 p-4 dark bg-black rounded">{props.children}</div>}
+            </div>
+        </>
+    );
+}
+
+export default function Display() {
+    return (
+        <div className="bg-gitpod-kumquat pb-20">
+            <div className="container">
+                <h1 className="text-yellow-800">Components Display</h1>
+                <Section title="Alert">
+                    <Alert closable={true} type="error">
+                        error
+                    </Alert>
+                    <Alert closable={true} type="info">
+                        <strong>Info:</strong> Cupidatat minim culpa voluptate incididunt ad consectetur magna fugiat
+                        pariatur. Nisi aliquip nostrud sunt laboris laboris incididunt Lorem officia qui id. Consectetur
+                        qui nulla deserunt excepteur consectetur deserunt qui qui nisi sint eiusmod ad fugiat tempor.
+                    </Alert>
+                    <Alert closable={true} type="warning">
+                        warning
+                    </Alert>
+                    <Alert closable={true} type="message">
+                        message
+                    </Alert>
+                    <Alert showIcon={false} type="warning">
+                        warning without icon shown and closable. Ea consequat in sint in deserunt adipisicing commodo
+                        mollit aliquip est nostrud. Minim exercitation pariatur non cupidatat consectetur pariatur.
+                        Velit deserunt minim id laboris magna fugiat proident laborum velit laboris amet tempor
+                        consequat in. Amet voluptate qui commodo adipisicing cillum sit duis dolore fugiat ipsum
+                        deserunt.
+                    </Alert>
+                    <Alert showIcon={false} closable type="info">
+                        Aute irure esse officia fugiat ullamco. Amet mollit ipsum esse cillum nostrud sit enim ullamco
+                        pariatur eiusmod cillum. Nisi dolor in duis aute eu adipisicing irure sunt cillum in.
+                    </Alert>
+                </Section>
+            </div>
+        </div>
+    );
+}