Use vertex-components for TextFields and SelectFields

Signed-off-by: Quentin Guidée <[email protected]>
vertex-center · Oct 27, 2023 · 378570e · 378570e
1 parent 91e5b6a
commit 378570e
Show file tree

Hide file tree

Showing 20 changed files with 555 additions and 983 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/byte-size": "^8.1.0",
         "@types/uuid": "^9.0.1",
-        "@vertex-center/components": "^0.2.0",
+        "@vertex-center/components": "^0.3.1",
         "axios": "^1.3.4",
         "byte-size": "^8.1.1",
         "immer": "^10.0.3",
@@ -58,16 +58,16 @@
     "devDependencies": {
         "@types/jest": "^29.4.0",
         "@types/node": "^18.14.1",
-        "@types/react": "^18.0.28",
-        "@types/react-dom": "^18.0.11",
+        "@types/react": "^18.2.33",
+        "@types/react-dom": "^18.2.14",
         "@types/react-syntax-highlighter": "^15.5.6",
         "@vitejs/plugin-react": "^3.1.0",
         "classnames": "^2.3.2",
         "csstype": "^3.1.1",
         "cypress": "^13.3.0",
         "sass": "^1.58.3",
         "start-server-and-test": "^2.0.1",
-        "typescript": "^5.0.3",
+        "typescript": "^5.2.2",
         "vite": "^4.2.1"
     }
 }
diff --git a/src/components/Input/ContainerSelect.tsx → ...nents/ContainerSelect/ContainerSelect.tsx b/src/components/Input/ContainerSelect.tsx → ...nents/ContainerSelect/ContainerSelect.tsx
@@ -1,10 +1,11 @@
-import Select, { SelectOption, SelectValue } from "./Select";
-import { Container, ContainerQuery } from "../../models/container";
-import { api } from "../../backend/api/backend";
-import Progress from "../Progress";
-import ServiceLogo from "../ServiceLogo/ServiceLogo";
+import { SelectField, SelectOption } from "@vertex-center/components";
+import { Container, ContainerQuery } from "../../../../models/container";
+import { api } from "../../../../backend/api/backend";
+import Progress from "../../../../components/Progress";
+import ServiceLogo from "../../../../components/ServiceLogo/ServiceLogo";
 import { useQuery } from "@tanstack/react-query";
-import { APIError } from "../Error/APIError";
+import { APIError } from "../../../../components/Error/APIError";
+import { Fragment } from "react";
 
 type Props = {
     container?: Container;
@@ -36,24 +37,24 @@ export default function ContainerSelect(props: Readonly<Props>) {
     };
 
     const value = (
-        <SelectValue>
+        <Fragment>
             {container && <ServiceLogo service={container?.service} />}
             {container?.display_name ??
                 container?.service?.name ??
                 "Select an container"}
-        </SelectValue>
+        </Fragment>
     );
 
     return (
         // @ts-ignore
-        <Select onChange={onContainerChange} value={value}>
+        <SelectField onChange={onContainerChange} value={value}>
             <SelectOption value="">None</SelectOption>
             {Object.entries(containers ?? [])?.map(([, container]) => (
                 <SelectOption key={container.uuid} value={container.uuid}>
                     <ServiceLogo service={container?.service} />
                     {container?.display_name ?? container?.service?.name}
                 </SelectOption>
             ))}
-        </Select>
+        </SelectField>
     );
 }
diff --git a/...nts/EnvVariableInput/EnvVariableInput.tsx → ...nts/EnvVariableInput/EnvVariableInput.tsx b/...nts/EnvVariableInput/EnvVariableInput.tsx → ...nts/EnvVariableInput/EnvVariableInput.tsx
@@ -1,20 +1,20 @@
-import PortInput from "../Input/PortInput";
-import Input from "../Input/Input";
-import { Vertical } from "../Layouts/Layouts";
-import TimezoneInput from "../Input/TimezoneInput";
-import { EnvVariable } from "../../models/service";
+import { TextField } from "@vertex-center/components";
+import TimezoneField from "../../../../components/TimezoneField/TimezoneField";
+import { EnvVariable } from "../../../../models/service";
 
 type Props = {
+    id: string;
     env: EnvVariable;
     value: any;
     onChange: (value: any) => void;
     disabled?: boolean;
 };
 
 export default function EnvVariableInput(props: Readonly<Props>) {
-    const { env, value, onChange, disabled } = props;
+    const { id, env, value, onChange, disabled } = props;
 
     const inputProps = {
+        id,
         value,
         label: env.display_name,
         name: env.name,
@@ -25,18 +25,16 @@ export default function EnvVariableInput(props: Readonly<Props>) {
     };
 
     let input: any;
-    if (env.type === "port") {
-        input = <PortInput {...inputProps} />;
-    } else if (env.type === "timezone") {
+    if (env.type === "timezone") {
         input = (
-            <TimezoneInput
+            <TimezoneField
                 {...inputProps}
                 onChange={(value: any) => onChange(value)}
             />
         );
     } else {
-        input = <Input {...inputProps} />;
+        input = <TextField {...inputProps} />;
     }
 
-    return <Vertical gap={6}>{input}</Vertical>;
+    return input;
 }
diff --git a/src/apps/Containers/components/SelectTags/SelectTags.tsx b/src/apps/Containers/components/SelectTags/SelectTags.tsx
@@ -1,7 +1,4 @@
-import Select, {
-    SelectOption,
-    SelectValue,
-} from "../../../../components/Input/Select";
+import { SelectField, SelectOption } from "@vertex-center/components";
 import { useContainersTags } from "../../hooks/useContainers";
 
 type Props = {
@@ -17,10 +14,6 @@ export default function SelectTags(props: Readonly<Props>) {
 
     const count = selected?.length;
 
-    let value = (
-        <SelectValue>Tags{count !== 0 ? ` (${count})` : undefined}</SelectValue>
-    );
-
     const onChange = (value: any) => {
         let updated: any[];
         if (selected.includes(value)) {
@@ -32,23 +25,21 @@ export default function SelectTags(props: Readonly<Props>) {
     };
 
     return (
-        // @ts-ignore
-        <Select
+        <SelectField
             multiple
-            value={value}
+            value={`Tags${count !== 0 ? ` (${count})` : ""}`}
             onChange={onChange}
             disabled={isLoading || isError || !tags || tags.length === 0}
         >
             {tags?.map((tag) => (
                 <SelectOption
-                    multiple
                     key={tag}
                     value={tag}
                     selected={selected.includes(tag)}
                 >
                     {tag}
                 </SelectOption>
             ))}
-        </Select>
+        </SelectField>
     );
 }
diff --git a/src/apps/Containers/pages/ContainerDatabase/ContainerDetailsDatabase.tsx b/src/apps/Containers/pages/ContainerDatabase/ContainerDetailsDatabase.tsx
@@ -8,18 +8,17 @@ import {
 } from "../../../../components/KeyValueInfo/KeyValueInfo";
 import useContainer from "../../hooks/useContainer";
 import { useParams } from "react-router-dom";
-import ContainerSelect from "../../../../components/Input/ContainerSelect";
+import ContainerSelect from "../../components/ContainerSelect/ContainerSelect";
 import { ChangeEvent, Fragment, useEffect, useState } from "react";
 import { Container } from "../../../../models/container";
 import Progress from "../../../../components/Progress";
-import { Button, MaterialIcon } from "@vertex-center/components";
+import { Button, MaterialIcon, TextField } from "@vertex-center/components";
 import { api } from "../../../../backend/api/backend";
 import { DatabaseEnvironment } from "../../../../models/service";
 import { APIError } from "../../../../components/Error/APIError";
 import { ProgressOverlay } from "../../../../components/Progress/Progress";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import Spacer from "../../../../components/Spacer/Spacer";
-import Input from "../../../../components/Input/Input";
 
 type DatabaseProps = {
     container?: Container;
@@ -163,7 +162,7 @@ export default function ContainerDetailsDatabase() {
                                 onChange={onChange}
                             />
                             {databases?.[dbID]?.container_id && (
-                                <Input
+                                <TextField
                                     label="Database name"
                                     onChange={(e: any) =>
                                         onChangeDbName(e, dbID)

diff --git a/src/apps/Containers/pages/ContainerDocker/ContainerDocker.tsx b/src/apps/Containers/pages/ContainerDocker/ContainerDocker.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { Title } from "../../../../components/Text/Text";
-
 import styles from "./ContainerDocker.module.sass";
 import { useParams } from "react-router-dom";
 import { Horizontal, Vertical } from "../../../../components/Layouts/Layouts";

diff --git a/src/apps/Containers/pages/ContainerEnv/ContainerEnv.tsx b/src/apps/Containers/pages/ContainerEnv/ContainerEnv.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useEffect, useState } from "react";
 import { Title } from "../../../../components/Text/Text";
 import { useParams } from "react-router-dom";
-import EnvVariableInput from "../../../../components/EnvVariableInput/EnvVariableInput";
+import EnvVariableInput from "../../components/EnvVariableInput/EnvVariableInput";
 import { Button, MaterialIcon } from "@vertex-center/components";
 import { Horizontal } from "../../../../components/Layouts/Layouts";
 import useContainer from "../../hooks/useContainer";
@@ -76,6 +76,7 @@ export default function ContainerEnv() {
             <Title className={styles.title}>Environment</Title>
             {env?.map((env, i) => (
                 <EnvVariableInput
+                    id={env.env.name}
                     key={env.env.name}
                     env={env.env}
                     value={env.value}

diff --git a/src/apps/Containers/pages/ContainerSettings/ContainerSettings.module.sass b/src/apps/Containers/pages/ContainerSettings/ContainerSettings.module.sass
@@ -1,3 +1,4 @@
+@use "../../../../styles/colors"
 @use "../../../../styles/dimensions"
 
 .title, .toggle, .saved
@@ -14,9 +15,3 @@
 
     & > :first-child
         flex-grow: 1
-
-.versionOption
-    padding-left: 10px
-
-.versionValue
-    margin-left: -10px
diff --git a/src/apps/Containers/pages/ContainerSettings/ContainerSettings.tsx b/src/apps/Containers/pages/ContainerSettings/ContainerSettings.tsx
@@ -2,19 +2,19 @@ import { Fragment, useEffect, useState } from "react";
 import { Text, Title } from "../../../../components/Text/Text";
 import { Horizontal } from "../../../../components/Layouts/Layouts";
 import Spacer from "../../../../components/Spacer/Spacer";
-import { Button, MaterialIcon } from "@vertex-center/components";
+import {
+    Button,
+    MaterialIcon,
+    SelectField,
+    SelectOption,
+    TextField,
+} from "@vertex-center/components";
 import { useParams } from "react-router-dom";
 import useContainer from "../../hooks/useContainer";
 import ToggleButton from "../../../../components/ToggleButton/ToggleButton";
-import Input from "../../../../components/Input/Input";
-
 import styles from "./ContainerSettings.module.sass";
 import { api } from "../../../../backend/api/backend";
 import { APIError } from "../../../../components/Error/APIError";
-import Select, {
-    SelectOption,
-    SelectValue,
-} from "../../../../components/Input/Select";
 import VersionTag from "../../../../components/VersionTag/VersionTag";
 import classNames from "classnames";
 import { ProgressOverlay } from "../../../../components/Progress/Progress";
@@ -83,7 +83,7 @@ export default function ContainerSettings() {
     };
 
     const versionValue = (
-        <SelectValue
+        <div
             className={classNames({
                 [styles.versionValue]: version !== "latest",
             })}
@@ -93,7 +93,7 @@ export default function ContainerSettings() {
             ) : (
                 <VersionTag>{version}</VersionTag>
             )}
-        </SelectValue>
+        </div>
     );
 
     return (
@@ -115,7 +115,8 @@ export default function ContainerSettings() {
                     disabled={isLoadingContainer}
                 />
             </Horizontal>
-            <Input
+            <TextField
+                id="container-name"
                 label="Container name"
                 description="The custom name of your choice for this service"
                 value={displayName}
@@ -126,7 +127,8 @@ export default function ContainerSettings() {
                 disabled={isLoadingContainer}
             />
             <div className={styles.versionSelect}>
-                <Select
+                <SelectField
+                    id="container-version"
                     label="Version"
                     onChange={onVersionChange}
                     disabled={isLoadingContainer || versionsLoading}
@@ -143,16 +145,12 @@ export default function ContainerSettings() {
                             return null;
                         }
                         return (
-                            <SelectOption
-                                key={v}
-                                value={v}
-                                className={styles.versionOption}
-                            >
+                            <SelectOption key={v} value={v}>
                                 <VersionTag>{v}</VersionTag>
                             </SelectOption>
                         );
                     })}
-                </Select>
+                </SelectField>
                 <Button
                     rightIcon={<MaterialIcon icon="refresh" />}
                     onClick={() => reloadVersions(false)}