feat(client): template store redesign

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

client/cypress/e2e/apps/vx-instances.cy.ts

@@ -17,7 +17,7 @@ describe("The Vertex Containers app", () => {
         // Navigate to the create container page
         cy.visit("/containers");
         cy.contains("Create container").click();
-        cy.url().should("include", "/containers/add");
+        cy.url().should("include", "/containers/templates");
 
         // Create an container
         cy.contains("Postgres").click();

client/src/App.tsx

@@ -18,7 +18,7 @@ import SettingsAbout from "./apps/AdminSettings/SettingsAbout/SettingsAbout";
 import SettingsUpdates from "./apps/AdminSettings/SettingsUpdates/SettingsUpdates";
 import ContainerDocker from "./apps/Containers/pages/ContainerDocker/ContainerDocker";
 import ContainerSettings from "./apps/Containers/pages/ContainerSettings/ContainerSettings";
-import ContainersStore from "./apps/Containers/pages/ContainersStore/ContainersStore";
+import Templates from "./apps/Containers/pages/Templates/Templates";
 import Dock from "./components/Dock/Dock";
 import ContainerUpdate from "./apps/Containers/pages/ContainerUpdate/ContainerUpdate";
 import ReverseProxyApp from "./apps/ReverseProxy/ReverseProxyApp/ReverseProxyApp";
@@ -121,8 +121,8 @@ function AllRoutes() {
                         />
                         <Route path="/containers" element={<ContainersApp />} />
                         <Route
-                            path="/containers/add"
-                            element={<ContainersStore />}
+                            path="/containers/templates"
+                            element={<Templates />}
                         />
                         <Route path="/sql" element={<SqlApp />}>
                             <Route

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

@@ -33,7 +33,7 @@ const ToolbarContainers = (props: ToolbarProps) => {
             <Spacer />
             <Button
                 variant="colored"
-                onClick={() => navigate("/containers/add")}
+                onClick={() => navigate("/containers/templates")}
                 rightIcon={<Plus />}
             >
                 Create container

client/src/apps/Containers/pages/ContainersStore/ContainersStore.tsx → client/src/apps/Containers/pages/Templates/Templates.tsx

@@ -1,20 +1,15 @@
 import { Template as ServiceModel } from "../../backend/template";
 import React, { useState } from "react";
-import styles from "./ContainersStore.module.sass";
+import styles from "./Templates.module.sass";
 import Service from "../../../../components/Service/Service";
 import { APIError } from "../../../../components/Error/APIError";
 import { ProgressOverlay } from "../../../../components/Progress/Progress";
 import ServiceInstallPopup from "../../../../components/ServiceInstallPopup/ServiceInstallPopup";
 import { useQuery } from "@tanstack/react-query";
 import {
-    List,
-    ListActions,
-    ListDescription,
-    ListIcon,
-    ListInfo,
-    ListItem,
-    ListTitle,
-    Title,
+    Button,
+    Grid,
+    Input,
     useTitle,
     Vertical,
 } from "@vertex-center/components";
@@ -23,13 +18,14 @@ import Content from "../../../../components/Content/Content";
 import { SiDocker } from "@icons-pack/react-simple-icons";
 import ManualInstallPopup from "./ManualInstallPopup";
 import { useCreateContainer } from "../../hooks/useCreateContainer";
-import { DownloadSimple } from "@phosphor-icons/react";
+import Spacer from "../../../../components/Spacer/Spacer";
+import Toolbar from "../../../../components/Toolbar/Toolbar";
 
 type Downloading = {
     service: ServiceModel;
 };
 
-export default function ContainersStore() {
+export default function Templates() {
     useTitle("Create container");
 
     const queryServices = useQuery({
@@ -107,28 +103,24 @@ export default function ContainersStore() {
                     isCreatingContainer
                 }
             />
-            <Vertical gap={30} className={styles.content}>
-                <List>
-                    <ListItem onClick={openManualInstallPopup}>
-                        <ListIcon>
-                            <SiDocker />
-                        </ListIcon>
-                        <ListInfo>
-                            <ListTitle>
-                                Manually from a Docker Registry
-                            </ListTitle>
-                            <ListDescription>
-                                This will need manual configuration
-                            </ListDescription>
-                        </ListInfo>
-                        <ListActions>
-                            <DownloadSimple />
-                        </ListActions>
-                    </ListItem>
-                </List>
-                <Title variant="h2">From template</Title>
+            <Vertical gap={12} className={styles.content}>
                 <APIError error={error} />
-                <List>
+                <Toolbar>
+                    <Input
+                        placeholder="Search templates..."
+                        style={{ width: 300 }}
+                        disabled
+                    />
+                    <Spacer />
+                    <Button
+                        variant="colored"
+                        rightIcon={<SiDocker size={20} />}
+                        onClick={openManualInstallPopup}
+                    >
+                        Or install manually
+                    </Button>
+                </Toolbar>
+                <Grid rowSize={200}>
                     {services?.map((template) => (
                         <Service
                             key={template.id}
@@ -144,7 +136,7 @@ export default function ContainersStore() {
                             }
                         />
                     ))}
-                </List>
+                </Grid>
             </Vertical>
             <ServiceInstallPopup
                 service={selectedTemplate}

client/src/components/Service/Service.tsx

@@ -1,17 +1,7 @@
 import { Template as TemplateModel } from "../../apps/Containers/backend/template";
-
-import styles from "./Service.module.sass";
-import { Caption } from "../Text/Text";
 import Progress from "../Progress";
 import ServiceLogo from "../ServiceLogo/ServiceLogo";
-import {
-    ListActions,
-    ListIcon,
-    ListInfo,
-    ListItem,
-    ListTitle,
-} from "@vertex-center/components";
-import { DownloadSimple } from "@phosphor-icons/react";
+import { Card, Title, Vertical } from "@vertex-center/components";
 
 type Props = {
     template: TemplateModel;
@@ -23,31 +13,13 @@ type Props = {
 export default function Service(props: Readonly<Props>) {
     const { template, onInstall, downloading, installedCount } = props;
 
-    let installedCountText = "";
-    if (installedCount === 1) {
-        installedCountText = "Installed in 1 container";
-    } else if (installedCount > 1) {
-        installedCountText = `Installed in ${installedCount} containers`;
-    }
-
     return (
-        <ListItem onClick={onInstall}>
-            <ListIcon>
+        <Card onClick={onInstall}>
+            <Vertical gap={40}>
                 <ServiceLogo template={template} />
-            </ListIcon>
-            <ListInfo>
-                <ListTitle>{template?.name}</ListTitle>
-                <Caption>{template?.description}</Caption>
-            </ListInfo>
-            <ListActions>
-                {installedCountText && (
-                    <Caption className={styles.count}>
-                        {installedCountText}
-                    </Caption>
-                )}
-                {downloading && <Progress infinite />}
-                <DownloadSimple />
-            </ListActions>
-        </ListItem>
+                <Title>{template?.name}</Title>
+            </Vertical>
+            {downloading && <Progress infinite />}
+        </Card>
     );
 }

client/src/components/ServiceLogo/ServiceLogo.tsx

@@ -1,5 +1,6 @@
 import { Template } from "../../apps/Containers/backend/template";
 import { MaterialIcon } from "@vertex-center/components";
+import { PuzzlePiece } from "@phosphor-icons/react";
 
 type Props = {
     template?: Template;
@@ -13,17 +14,18 @@ export default function ServiceLogo(props: Readonly<Props>) {
     iconURL.pathname = `/api/templates/icons/${template?.icon}`;
 
     if (!template?.icon) {
-        return <MaterialIcon icon="extension" style={{ opacity: 0.8 }} />;
+        return <PuzzlePiece size={32} style={{ opacity: 0.8 }} />;
     }
 
     if (template?.icon.endsWith(".svg")) {
         return (
             <span
                 style={{
+                    display: "inline-block",
                     maskImage: `url(${iconURL.href})`,
                     backgroundColor: template?.color,
-                    width: 24,
-                    height: 24,
+                    width: 32,
+                    height: 32,
                 }}
             />
         );
@@ -34,8 +36,8 @@ export default function ServiceLogo(props: Readonly<Props>) {
             alt="Service icon"
             src={iconURL.href}
             style={{
-                width: 24,
-                height: 24,
+                width: 32,
+                height: 32,
             }}
         />
     );