refactor(frontend): updated labels in volumes modal to use `Records` component

services/frontend/src/components/Modal/volume/Labels.tsx

@@ -1,9 +1,5 @@
-import { useCallback } from "react";
+import { styled } from "@mui/joy";
-import { PlusIcon } from "@heroicons/react/outline";
+import Records from "../../Records";
-import { Button, styled } from "@mui/joy";
-import { useFormikContext } from "formik";
-import Record from "../../Record";
-import { IEditServiceForm } from "../../../types";
 
 const Root = styled("div")`
   display: flex;
@@ -11,55 +7,14 @@ const Root = styled("div")`
   align-items: center;
 `;
 
-const Records = styled("div")`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-const AddButton = styled(Button)`
-  margin-top: ${({ theme }) => theme.spacing(1)};
-`;
-
-const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(1)};
-  text-align: center;
-  color: #7a7a7a;
-  font-size: 14px;
-`;
-
 const Labels = () => {
-  const formik = useFormikContext<IEditServiceForm>();
-  const { labels } = formik.values;
-
-  const handleNewLabel = useCallback(() => {
-    formik.setFieldValue(`labels[${labels.length}]`, {
-      key: "",
-      value: ""
-    });
-  }, [formik]);
-
-  const handleRemoveLabel = useCallback(
-    (index: number) => {
-      const newLabels = labels.filter(
-        (_: unknown, currentIndex: number) => currentIndex != index
-      );
-      formik.setFieldValue(`labels`, newLabels);
-    },
-    [formik]
-  );
-
-  const emptyLabels = labels && labels.length === 0 ? true : false;
-
   return (
     <Root>
-      {!emptyLabels && (
+      <Records
-        <Records>
+        name="labels"
-          {labels.map((_: unknown, index: number) => (
+        title=""
-            <Record
+        collapsible={false}
-              key={index}
+        fields={(index: number) => [
-              index={index}
-              fields={[
           {
             name: `labels[${index}].key`,
             placeholder: "Key",
@@ -69,21 +24,12 @@ const Labels = () => {
           {
             name: `labels[${index}].value`,
             placeholder: "Value",
-                  required: false,
+            required: true,
             type: "text"
           }
         ]}
-              onRemove={handleRemoveLabel}
+        newValue={{ key: "", value: "" }}
       />
-          ))}
-        </Records>
-      )}
-      {emptyLabels && <Description>No labels.</Description>}
-
-      <AddButton size="sm" variant="plain" onClick={handleNewLabel}>
-        <PlusIcon className="h-4 w-4 mr-2" />
-        New label
-      </AddButton>
     </Root>
   );
 };