Adding Toasts

components/dashboard/src/components/toasts/Toast.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023 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 classNames from "classnames";
+import { FC, useCallback, useEffect, useRef } from "react";
+import { useId } from "../../hooks/useId";
+import { ToastEntry } from "./reducer";
+
+type Props = ToastEntry & {
+    onRemove: (id: string) => void;
+};
+
+export const Toast: FC<Props> = ({ id, message, duration = 5000, autoHide = true, onRemove }) => {
+    const elId = useId();
+    const hideTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const handleRemove = useCallback(
+        (e) => {
+            e.preventDefault();
+
+            onRemove(id);
+        },
+        [id, onRemove],
+    );
+
+    useEffect(() => {
+        if (!autoHide) {
+            return;
+        }
+
+        hideTimeout.current = setTimeout(() => {
+            onRemove(id);
+        }, duration);
+
+        return () => {
+            if (hideTimeout.current) {
+                clearTimeout(hideTimeout.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const onMouseEnter = useCallback(() => {
+        if (hideTimeout.current) {
+            clearTimeout(hideTimeout.current);
+        }
+    }, []);
+
+    const onMouseLeave = useCallback(() => {
+        if (!autoHide) {
+            return;
+        }
+
+        if (hideTimeout.current) {
+            clearTimeout(hideTimeout.current);
+        }
+
+        hideTimeout.current = setTimeout(() => {
+            onRemove(id);
+        }, duration);
+    }, [autoHide, duration, id, onRemove]);
+
+    return (
+        <div
+            className={classNames(
+                "relative flex justify-between items-center",
+                "w-full md:w-96 max-w-full",
+                "p-4 md:rounded-md",
+                "bg-gray-800 dark:bg-gray-100",
+                "text-white dark:text-gray-800",
+                "transition-transform animate-toast-in-right",
+            )}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            role="alert"
+            aria-labelledby={elId}
+        >
+            <p className="text-white dark:text-gray-800" id={elId}>
+                {message}
+            </p>
+            <button
+                className={classNames(
+                    "cursor-pointer p-2",
+                    "bg-transparent hover:bg-transparent",
+                    "text-white hover:text-gray-300 dark:text-gray-800 dark:hover:text-gray-600",
+                )}
+                onClick={handleRemove}
+            >
+                <svg version="1.1" width="10px" height="10px" viewBox="0 0 100 100">
+                    <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="20" />
+                    <line x1="0" y1="100" x2="100" y2="0" stroke="currentColor" strokeWidth="20" />
+                </svg>
+            </button>
+        </div>
+    );
+};

components/dashboard/src/components/toasts/Toasts.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023 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 classNames from "classnames";
+import { createContext, FC, memo, useCallback, useContext, useMemo, useReducer } from "react";
+import { Portal } from "react-portal";
+import { ToastEntry, toastReducer } from "./reducer";
+import { Toast } from "./Toast";
+
+type ToastFnProps = string | (Pick<ToastEntry, "message"> & Partial<ToastEntry>);
+
+const ToastContext = createContext<{
+    toast: (toast: ToastFnProps, opts?: Partial<ToastEntry>) => void;
+}>({
+    toast: () => undefined,
+});
+
+export const useToast = () => {
+    return useContext(ToastContext);
+};
+
+export const ToastContextProvider: FC = ({ children }) => {
+    const [toasts, dispatch] = useReducer(toastReducer, []);
+
+    const removeToast = useCallback((id) => {
+        dispatch({ type: "remove", id });
+    }, []);
+
+    const addToast = useCallback((message: ToastFnProps, opts = {}) => {
+        let newToast: ToastEntry = {
+            ...(typeof message === "string"
+                ? {
+                      id: `${Math.random()}`,
+                      message,
+                  }
+                : {
+                      id: `${Math.random()}`,
+                      ...message,
+                  }),
+            ...opts,
+        };
+
+        dispatch({ type: "add", toast: newToast });
+    }, []);
+
+    const ctxValue = useMemo(() => ({ toast: addToast }), [addToast]);
+
+    return (
+        <ToastContext.Provider value={ctxValue}>
+            {children}
+            <ToastsList toasts={toasts} onRemove={removeToast} />
+        </ToastContext.Provider>
+    );
+};
+
+type ToastsListProps = {
+    toasts: ToastEntry[];
+    onRemove: (id: string) => void;
+};
+const ToastsList: FC<ToastsListProps> = memo(({ toasts, onRemove }) => {
+    return (
+        <Portal>
+            <div
+                className={classNames(
+                    "fixed box-border space-y-2",
+                    "w-full md:w-auto",
+                    "bottom-0 md:bottom-2 right-0 md:right-2",
+                )}
+                tabIndex={-1}
+                role="region"
+                aria-label="Notifications"
+            >
+                {toasts.map((toast) => {
+                    return <Toast key={toast.id} {...toast} onRemove={onRemove} />;
+                })}
+            </div>
+        </Portal>
+    );
+});

components/dashboard/src/components/toasts/reducer.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023 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.
+ */
+
+export type ToastEntry = {
+    id: string;
+    message: string;
+    duration?: number;
+    autoHide?: boolean;
+};
+
+type ToastAction =
+    | {
+          type: "add";
+          toast: ToastEntry;
+      }
+    | {
+          type: "remove";
+          id: string;
+      };
+export const toastReducer = (state: ToastEntry[], action: ToastAction) => {
+    if (action.type === "add") {
+        return [...state, action.toast];
+    }
+
+    if (action.type === "remove") {
+        return state.filter((toast) => toast.id !== action.id);
+    }
+
+    return state;
+};

components/dashboard/src/data/current-user/update-mutation.ts

@@ -6,7 +6,9 @@
 
 import { User } from "@gitpod/gitpod-protocol";
 import { useMutation } from "@tanstack/react-query";
+import { trackEvent } from "../../Analytics";
 import { getGitpodService } from "../../service/service";
+import { useCurrentUser } from "../../user-context";
 
 type UpdateCurrentUserArgs = Partial<User>;
 
@@ -17,3 +19,37 @@ export const useUpdateCurrentUserMutation = () => {
         },
     });
 };
+
+export const useUpdateCurrentUserDotfileRepoMutation = () => {
+    const user = useCurrentUser();
+    const updateUser = useUpdateCurrentUserMutation();
+
+    return useMutation({
+        mutationFn: async (dotfileRepo: string) => {
+            if (!user) {
+                throw new Error("No user present");
+            }
+
+            const additionalData = {
+                ...(user.additionalData || {}),
+                dotfileRepo,
+            };
+            const updatedUser = await updateUser.mutateAsync({ additionalData });
+
+            return updatedUser;
+        },
+        onMutate: async () => {
+            return {
+                previousDotfileRepo: user?.additionalData?.dotfileRepo || "",
+            };
+        },
+        onSuccess: (updatedUser, _, context) => {
+            if (updatedUser?.additionalData?.dotfileRepo !== context?.previousDotfileRepo) {
+                trackEvent("dotfile_repo_changed", {
+                    previous: context?.previousDotfileRepo ?? "",
+                    current: updatedUser?.additionalData?.dotfileRepo ?? "",
+                });
+            }
+        },
+    });
+};

components/dashboard/src/index.tsx

@@ -25,6 +25,7 @@ import { setupQueryClientProvider } from "./data/setup";
 import { ConfettiContextProvider } from "./contexts/ConfettiContext";
 import { GitpodErrorBoundary } from "./components/ErrorBoundary";
 import "./index.css";
+import { ToastContextProvider } from "./components/toasts/Toasts";
 
 const bootApp = () => {
     // gitpod.io specific boot logic
@@ -59,25 +60,27 @@ const bootApp = () => {
             <GitpodErrorBoundary>
                 <GitpodQueryClientProvider>
                     <ConfettiContextProvider>
-                        <UserContextProvider>
-                            <AdminContextProvider>
-                                <PaymentContextProvider>
-                                    <LicenseContextProvider>
-                                        <ProjectContextProvider>
-                                            <ThemeContextProvider>
-                                                <BrowserRouter>
-                                                    <StartWorkspaceModalContextProvider>
-                                                        <FeatureFlagContextProvider>
-                                                            <App />
-                                                        </FeatureFlagContextProvider>
-                                                    </StartWorkspaceModalContextProvider>
-                                                </BrowserRouter>
-                                            </ThemeContextProvider>
-                                        </ProjectContextProvider>
-                                    </LicenseContextProvider>
-                                </PaymentContextProvider>
-                            </AdminContextProvider>
-                        </UserContextProvider>
+                        <ToastContextProvider>
+                            <UserContextProvider>
+                                <AdminContextProvider>
+                                    <PaymentContextProvider>
+                                        <LicenseContextProvider>
+                                            <ProjectContextProvider>
+                                                <ThemeContextProvider>
+                                                    <BrowserRouter>
+                                                        <StartWorkspaceModalContextProvider>
+                                                            <FeatureFlagContextProvider>
+                                                                <App />
+                                                            </FeatureFlagContextProvider>
+                                                        </StartWorkspaceModalContextProvider>
+                                                    </BrowserRouter>
+                                                </ThemeContextProvider>
+                                            </ProjectContextProvider>
+                                        </LicenseContextProvider>
+                                    </PaymentContextProvider>
+                                </AdminContextProvider>
+                            </UserContextProvider>
+                        </ToastContextProvider>
                     </ConfettiContextProvider>
                 </GitpodQueryClientProvider>
             </GitpodErrorBoundary>