components: Editable cells

Signed-off-by: Quentin Guidée <[email protected]>
vertex-center · Feb 18, 2024 · 9c08b10 · 9c08b10
1 parent dad0d4f
commit 9c08b10
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/packages/components/lib/components/Table/Table.sass b/packages/components/lib/components/Table/Table.sass
@@ -12,6 +12,18 @@
         padding: 10px 20px
         line-height: fonts.$line-height-normal
 
+        &:has(> .input)
+            padding: 0
+
+            & > .input
+                width: 100%
+                border-radius: 0
+                border: none
+                background-color: transparent
+
+                &:hover
+                    background-color: colors.$bg-secondary-hover
+
     & &-cell:not(:last-child), & &-head-cell:not(:last-child)
         border-right: none
 

diff --git a/src/apps/Containers/components/EnvVariableInput/EnvVariableInput.tsx b/src/apps/Containers/components/EnvVariableInput/EnvVariableInput.tsx
@@ -1,5 +1,4 @@
 import { Input } from "@vertex-center/components";
-import TimezoneField from "../../../../components/TimezoneField/TimezoneField";
 import { EnvVariable } from "../../backend/models";
 
 type Props = {
@@ -23,17 +22,5 @@ export default function EnvVariableInput(props: Readonly<Props>) {
         disabled,
     };
 
-    let input: any;
-    if (env.type === "timezone") {
-        input = (
-            <TimezoneField
-                {...inputProps}
-                onChange={(value: any) => onChange(value)}
-            />
-        );
-    } else {
-        input = <Input {...inputProps} />;
-    }
-
-    return input;
+    return <Input {...inputProps} />;
 }
diff --git a/src/apps/Containers/pages/ContainerEnv/ContainerEnv.tsx b/src/apps/Containers/pages/ContainerEnv/ContainerEnv.tsx
@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import EnvVariableInput from "../../components/EnvVariableInput/EnvVariableInput";
 import {
     Button,
-    InlineCode,
+    Input,
     MaterialIcon,
     Table,
     TableBody,
@@ -74,7 +74,11 @@ export default function ContainerEnv() {
                     {env?.map((env, i) => (
                         <TableRow key={env.name}>
                             <TableCell>
-                                <InlineCode>{env.name}</InlineCode>
+                                <Input
+                                    id={env.name}
+                                    value={env.name}
+                                    disabled
+                                />
                             </TableCell>
                             <TableCell>
                                 <EnvVariableInput