feat(frontend): implemented remove label record action

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

@@ -3,6 +3,7 @@ import Record from "../../Record";
 import { Button } from "@mui/joy";
 import { styled } from "@mui/joy";
 import { useCallback } from "react";
+import lodash from "lodash";
 
 const Root = styled("div")`
   display: flex;
@@ -32,6 +33,16 @@ const Labels = (props: any) => {
     });
   }, [formik]);
 
+  const handleRemoveLabel = useCallback(
+    (index: number) => {
+      const newLabels = labels.filter(
+        (_: unknown, currentIndex: number) => currentIndex != index
+      );
+      formik.setFieldValue(`serviceConfig.labels`, newLabels);
+    },
+    [formik]
+  );
+
   return (
     <Root sx={{ alignItems: labels.length > 0 ? "flex-start" : "center" }}>
       {labels.length > 0 && (
@@ -39,6 +50,7 @@ const Labels = (props: any) => {
           {labels.map((label: unknown, index: number) => (
             <Record
               key={index}
+              index={index}
               formik={formik}
               fields={[
                 {
@@ -50,6 +62,7 @@ const Labels = (props: any) => {
                   placeholder: "Value"
                 }
               ]}
+              onRemove={handleRemoveLabel}
             />
           ))}
         </Records>

services/frontend/src/components/Record.tsx

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactElement } from "react";
+import { FunctionComponent, ReactElement, useCallback } from "react";
 import { styled } from "@mui/joy";
 import IconButton from "@mui/joy/IconButton";
 import { MinusSmIcon } from "@heroicons/react/solid";
@@ -12,6 +12,8 @@ export interface IFieldType {
 export interface IRecordProps {
   formik: any;
   fields: IFieldType[];
+  index: number;
+  onRemove: (index: number) => void;
 }
 
 const Root = styled("div")`
@@ -27,7 +29,11 @@ const RemoveButton = styled(IconButton)``;
 const Record: FunctionComponent<IRecordProps> = (
   props: IRecordProps
 ): ReactElement => {
-  const { formik, fields } = props;
+  const { formik, fields, index, onRemove } = props;
+
+  const handleRemove = useCallback(() => {
+    onRemove(index);
+  }, [index, onRemove]);
 
   return (
     <Root>
@@ -44,7 +50,12 @@ const Record: FunctionComponent<IRecordProps> = (
           value={lodash.get(formik.values, name)}
         />
       ))}
-      <RemoveButton variant="soft" size="sm">
+      <RemoveButton
+        variant="soft"
+        size="sm"
+        color="danger"
+        onClick={handleRemove}
+      >
         <MinusSmIcon className="h-5 w-5" />
       </RemoveButton>
     </Root>