feat(client): refactor all popups

Signed-off-by: Quentin Guidée <[email protected]>

client/src/apps/AdminSettings/SettingsData/SettingsDb.tsx

@@ -90,8 +90,8 @@ export default function SettingsDb() {
         onMutate: () => {
             setShowPopup(false);
         },
-        onSuccess: () => {
-            queryClient.invalidateQueries({
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({
                 queryKey: ["admin_db_dbms"],
             });
         },
@@ -141,30 +141,28 @@ export default function SettingsDb() {
                     <Progress infinite />
                 </Vertical>
             )}
-            <Popup
-                show={showPopup}
-                onDismiss={dismissPopup}
-                title="Migrate database?"
-            >
-                <Paragraph>
-                    Are you sure you want to migrate from {dbms} to {selectedDB}
-                    ? All the data will be copied to the new database. The
-                    previous database will deleted if the migration is
-                    successful.
-                </Paragraph>
-                <PopupActions>
-                    <Button variant="outlined" onClick={dismissPopup}>
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="danger"
-                        rightIcon={<MaterialIcon icon="restart_alt" />}
-                        onClick={() => migrate(selectedDB)}
-                    >
-                        Migrate
-                    </Button>
-                </PopupActions>
-            </Popup>
+            {showPopup && (
+                <Popup onDismiss={dismissPopup} title="Migrate database?">
+                    <Paragraph>
+                        Are you sure you want to migrate from {dbms} to{" "}
+                        {selectedDB}? All the data will be copied to the new
+                        database. The previous database will deleted if the
+                        migration is successful.
+                    </Paragraph>
+                    <PopupActions>
+                        <Button variant="outlined" onClick={dismissPopup}>
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="danger"
+                            rightIcon={<MaterialIcon icon="restart_alt" />}
+                            onClick={() => migrate(selectedDB)}
+                        >
+                            Migrate
+                        </Button>
+                    </PopupActions>
+                </Popup>
+            )}
         </Content>
     );
 }

client/src/apps/Auth/pages/Account/AccountEmails.tsx

@@ -34,15 +34,14 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Email } from "../../backend/models";
 
 type DeleteEmailPopupProps = {
-    show: boolean;
     onDismiss: () => void;
     email: Partial<Email>;
 };
 
 function DeleteEmailPopup(props: DeleteEmailPopupProps) {
     const queryClient = useQueryClient();
 
-    const { show, onDismiss, email } = props;
+    const { onDismiss, email } = props;
 
     const { deleteEmail, isDeletingEmail, errorDeleteEmail } =
         useDeleteCurrentUserEmail({
@@ -55,7 +54,7 @@ function DeleteEmailPopup(props: DeleteEmailPopupProps) {
         });
 
     return (
-        <Popup show={show} onDismiss={onDismiss} title="Delete email?">
+        <Popup onDismiss={onDismiss} title="Delete email?">
             <Paragraph>
                 Are you sure you want to delete this email address?
             </Paragraph>
@@ -79,7 +78,6 @@ function DeleteEmailPopup(props: DeleteEmailPopupProps) {
 }
 
 type CreateEmailPopupProps = {
-    show: boolean;
     onDismiss: () => void;
 };
 
@@ -90,7 +88,7 @@ const createEmailSchema = yup.object().shape({
 function CreateEmailPopup(props: CreateEmailPopupProps) {
     const queryClient = useQueryClient();
 
-    const { show, onDismiss: _onDismiss } = props;
+    const { onDismiss: _onDismiss } = props;
 
     const {
         register,
@@ -101,28 +99,27 @@ function CreateEmailPopup(props: CreateEmailPopupProps) {
         resolver: yupResolver(createEmailSchema),
     });
 
-    const onDismiss = () => {
-        reset();
-        _onDismiss();
-    };
-
     const { createEmail, isCreatingEmail, errorCreateEmail } =
         useCreateCurrentUserEmail({
             onSuccess: async () => {
                 await queryClient.invalidateQueries({
                     queryKey: ["user_emails"],
                 });
                 onDismiss();
-                reset();
             },
         });
 
+    const onDismiss = () => {
+        reset();
+        _onDismiss();
+    };
+
     const onSubmit = handleSubmit((data) => {
         createEmail(data);
     });
 
     return (
-        <Popup show={show} onDismiss={onDismiss} title="Add email address">
+        <Popup onDismiss={onDismiss} title="Add email address">
             <form onSubmit={onSubmit}>
                 <Vertical gap={12}>
                     <FormItem
@@ -135,7 +132,11 @@ function CreateEmailPopup(props: CreateEmailPopupProps) {
                     <APIError error={errorCreateEmail} />
                     {isCreatingEmail && <Progress />}
                     <PopupActions>
-                        <Button variant="outlined" onClick={onDismiss}>
+                        <Button
+                            type="button"
+                            variant="outlined"
+                            onClick={onDismiss}
+                        >
                             Cancel
                         </Button>
                         <Button
@@ -214,15 +215,15 @@ export default function AccountEmails() {
                     Add email
                 </Button>
             </div>
-            <CreateEmailPopup
-                show={showCreatePopup}
-                onDismiss={dismissCreatePopup}
-            />
-            <DeleteEmailPopup
-                show={showDeletePopup}
-                onDismiss={dismissDeletePopup}
-                email={email}
-            />
+            {showCreatePopup && (
+                <CreateEmailPopup onDismiss={dismissCreatePopup} />
+            )}
+            {showDeletePopup && (
+                <DeleteEmailPopup
+                    onDismiss={dismissDeletePopup}
+                    email={email}
+                />
+            )}
         </Content>
     );
 }

client/src/apps/Containers/components/ContainerInstalledPopup/ContainerInstalledPopup.tsx

@@ -0,0 +1,52 @@
+import Popup, { PopupActions } from "../../../../components/Popup/Popup";
+import { Container } from "../../backend/models";
+import { Button, Horizontal } from "@vertex-center/components";
+import styles from "../../../../components/TemplateInstallPopup/TemplateInstallPopup.module.sass";
+import Spacer from "../../../../components/Spacer/Spacer";
+import { CaretRight, CheckCircle } from "@phosphor-icons/react";
+import { useNavigate } from "react-router-dom";
+import TemplateImage from "../TemplateImage/TemplateImage";
+
+type Props = {
+    container: Container;
+    onDismiss: () => void;
+};
+
+export default function ContainerInstalledPopup(props: Readonly<Props>) {
+    const { container, onDismiss } = props;
+    const navigate = useNavigate();
+
+    if (!container) return null;
+
+    const open = () => navigate(`/containers/${container.id}/logs`);
+
+    const image = (
+        <TemplateImage icon={container.icon} color={container.color} />
+    );
+
+    return (
+        <Popup title={container?.name} onDismiss={onDismiss} image={image}>
+            <PopupActions>
+                <Horizontal
+                    gap={8}
+                    alignItems="center"
+                    className={styles.installed}
+                >
+                    <CheckCircle />
+                    Installed successfully
+                </Horizontal>
+                <Spacer />
+                <Button onClick={onDismiss} variant="outlined">
+                    Close
+                </Button>
+                <Button
+                    variant="colored"
+                    onClick={open}
+                    rightIcon={<CaretRight />}
+                >
+                    Open
+                </Button>
+            </PopupActions>
+        </Popup>
+    );
+}

client/src/apps/Containers/components/ContainerSelect/ContainerSelect.tsx

@@ -37,7 +37,9 @@ export default function ContainerSelect(props: Readonly<Props>) {
 
     const value = (
         <Fragment>
-            {container && <ServiceLogo template={container?.service} />}
+            {container && (
+                <ServiceLogo icon={container.icon} color={container.color} />
+            )}
             {container?.name ?? "Select an container"}
         </Fragment>
     );
@@ -48,7 +50,7 @@ export default function ContainerSelect(props: Readonly<Props>) {
             <SelectOption value="">None</SelectOption>
             {Object.entries(containers ?? [])?.map(([, c]) => (
                 <SelectOption key={c?.id} value={c?.id}>
-                    <ServiceLogo template={c?.service} />
+                    <ServiceLogo color={c?.color} icon={c?.icon} />
                     {c?.name}
                 </SelectOption>
             ))}

client/src/apps/Containers/components/TemplateImage/TemplateImage.module.sass

@@ -0,0 +1,5 @@
+.logo
+    position: relative
+    width: 100%
+    padding: 48px
+    box-sizing: border-box

client/src/apps/Containers/components/TemplateImage/TemplateImage.tsx

@@ -0,0 +1,19 @@
+import ServiceLogo from "../../../../components/ServiceLogo/ServiceLogo";
+import styles from "./TemplateImage.module.sass";
+
+type Props = {
+    icon: string;
+    color: string;
+};
+
+export default function TemplateImage(props: Readonly<Props>) {
+    const { icon, color } = props;
+
+    const backgroundColor = `${color ?? "#000000"}08`;
+
+    return (
+        <div className={styles.logo} style={{ backgroundColor }}>
+            <ServiceLogo icon={icon} color={color} />
+        </div>
+    );
+}

client/src/apps/Containers/pages/Container/Container.tsx

@@ -143,31 +143,37 @@ export default function ContainerDetails() {
                     <Outlet />
                 </div>
             )}
-            <Popup
-                show={showDeletePopup}
-                onDismiss={dismissDeletePopup}
-                title={`Delete ${container?.name}?`}
-            >
-                <Paragraph>
-                    Are you sure you want to delete {container?.name}? All data
-                    will be permanently deleted.
-                </Paragraph>
-                {isDeleting && <Progress infinite />}
-                <APIError style={{ margin: 0 }} error={errorDeleting} />
-                <PopupActions>
-                    <Button onClick={dismissDeletePopup} disabled={isDeleting}>
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="danger"
-                        onClick={async () => mutationDeleteContainer.mutate()}
-                        disabled={isDeleting}
-                        rightIcon={<Trash />}
-                    >
-                        Confirm
-                    </Button>
-                </PopupActions>
-            </Popup>
+            {showDeletePopup && container && (
+                <Popup
+                    onDismiss={dismissDeletePopup}
+                    title={`Delete ${container?.name}?`}
+                >
+                    <Paragraph>
+                        Are you sure you want to delete {container?.name}? All
+                        data will be permanently deleted.
+                    </Paragraph>
+                    {isDeleting && <Progress infinite />}
+                    <APIError style={{ margin: 0 }} error={errorDeleting} />
+                    <PopupActions>
+                        <Button
+                            onClick={dismissDeletePopup}
+                            disabled={isDeleting}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="danger"
+                            onClick={async () =>
+                                mutationDeleteContainer.mutate()
+                            }
+                            disabled={isDeleting}
+                            rightIcon={<Trash />}
+                        >
+                            Confirm
+                        </Button>
+                    </PopupActions>
+                </Popup>
+            )}
         </Horizontal>
     );
 

client/src/apps/Containers/pages/Templates/ManualInstallPopup.tsx

@@ -9,7 +9,6 @@ import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 
 type Props = {
-    show: boolean;
     dismiss: () => void;
 };
 
@@ -20,7 +19,7 @@ const schema = yup
     .required();
 
 export default function ManualInstallPopup(props: Readonly<Props>) {
-    const { show, dismiss } = props;
+    const { dismiss } = props;
 
     const {
         register,
@@ -78,11 +77,7 @@ export default function ManualInstallPopup(props: Readonly<Props>) {
     }
 
     return (
-        <Popup
-            show={show}
-            onDismiss={dismiss}
-            title="Install from Docker Registry"
-        >
+        <Popup onDismiss={dismiss} title="Install from Docker Registry">
             <form onSubmit={onSubmit}>
                 <Vertical gap={20}>
                     <FormItem