chore: move labels to form inputs

Author: svedova

src/components/FormV2/KeyValue.tsx

@@ -1,17 +1,14 @@
 import { useEffect, useMemo, useState } from "react";
-import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
 import TableFooter from "@mui/material/TableFooter";
 import TableRow from "@mui/material/TableRow";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import AddIcon from "@mui/icons-material/Add";
 import Button from "@mui/material/Button";
 import TextFieldModal from "./KeyValueTextFieldModal";
 import KeyValueRow from "./KeyValueRow";
-import { grey } from "@mui/material/colors";
 
 interface Props {
   inputName: string;
@@ -83,32 +80,17 @@ export default function KeyValue({
     }
   }, [rowsWithoutDeleted, isChanged]);
 
-  const borderBottom = "1px solid";
-  const borderColor = grey[300];
-
   return (
     <>
       <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell
-              sx={{ borderBottom, borderColor, color: "text.secondary" }}
-            >
-              {keyName}
-            </TableCell>
-            <TableCell
-              sx={{ borderBottom, borderColor, color: "text.secondary" }}
-            >
-              <Box sx={{ pl: 1.75 }}>{valName}</Box>
-            </TableCell>
-          </TableRow>
-        </TableHead>
         <TableBody>
           {rows.map(([key, value, isDeleted], index) =>
             isDeleted ? undefined : (
               <KeyValueRow
                 key={index}
                 rows={rows}
+                labelKey={keyName}
+                labelValue={valName}
                 inputKey={key}
                 inputValue={value}
                 inputName={inputName}

src/components/FormV2/KeyValueRow.tsx

@@ -9,6 +9,8 @@ import Input from "./Input";
 
 interface KeyValueRowProps {
   index: number;
+  labelKey: string;
+  labelValue: string;
   inputKey: string;
   inputValue: string;
   inputName: string;
@@ -33,6 +35,8 @@ export default function KeyValueRow({
   keyPlaceholder,
   valPlaceholder,
   hideByDefault,
+  labelKey,
+  labelValue,
   setRows,
   setIsChanged,
 }: KeyValueRowProps) {
@@ -44,10 +48,16 @@ export default function KeyValueRow({
         <Input
           fullWidth
           placeholder={index === 0 ? keyPlaceholder : `KEY_${index + 1}`}
-          inputProps={{
-            "data-1p-ignore": "true",
-            "aria-label": `${inputName} key number ${index + 1}`,
+          slotProps={{
+            htmlInput: {
+              "data-1p-ignore": "true",
+              "aria-label": `${inputName} key number ${index + 1}`,
+            },
+            inputLabel: {
+              shrink: true,
+            },
           }}
+          label={labelKey}
           name={`${inputName}[key]`}
           onChange={e => {
             const copy = JSON.parse(JSON.stringify(rows));
@@ -62,13 +72,19 @@ export default function KeyValueRow({
         <Input
           fullWidth
           value={value}
+          label={labelValue}
           autoComplete="off"
           type={isValueVisible ? "text" : "password"}
           placeholder={index === 0 ? valPlaceholder : `VALUE_${index + 1}`}
           name={`${inputName}[value]`}
-          inputProps={{
-            "data-1p-ignore": "true",
-            "aria-label": `${inputName} value number ${index + 1}`,
+          slotProps={{
+            htmlInput: {
+              "data-1p-ignore": "true",
+              "aria-label": `${inputName} value number ${index + 1}`,
+            },
+            inputLabel: {
+              shrink: true,
+            },
           }}
           onChange={e => {
             const copy = JSON.parse(JSON.stringify(rows));

src/pages/admin/Proxies.tsx

@@ -222,7 +222,7 @@ export default function Proxies() {
           <>
             Configure reverse proxies for your 3rd party applications.
             <br />
-            Stormkit will issue TLS certifciates automatically for proxied these
+            Stormkit will issue TLS certificates automatically for these proxied
             domains.
           </>
         }
@@ -290,9 +290,7 @@ export default function Proxies() {
 
             api
               .put("/admin/system/proxies", {
-                proxies: {
-                  [proxyToBeDeleted]: undefined,
-                },
+                remove: [proxyToBeDeleted],
               })
               .then(() => {
                 setRefreshToken(Date.now());
@@ -306,8 +304,6 @@ export default function Proxies() {
                 setLoading(false);
                 setProxyToBeDeleted(undefined);
               });
-
-            return "";
           }}
         >
           This will delete the proxy rule. Previously configured domain may stop

src/pages/admin/System.spec.tsx

@@ -46,8 +46,6 @@ describe("~/pages/admin/System.tsx", () => {
         "Manage runtimes that are installed on your Stormkit instance."
       )
     ).toBeTruthy();
-    expect(wrapper.getByText("Runtime name")).toBeTruthy();
-    expect(wrapper.getByText("Runtime version")).toBeTruthy();
   });
 
   it("should submit the form", async () => {