[GEN-1515]: fix stringify for graphql

frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { KeyValueInputsList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  clusterAttributes: {
+    attributeName: string;
+    attributeStringValue: string;
+  }[];
+};
+
+const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(
+    () =>
+      value ? (JSON.parse(value) as Parsed).clusterAttributes.map((obj) => ({ key: obj.attributeName, value: obj.attributeStringValue })) : undefined,
+    [value]
+  );
+
+  const handleChange = (
+    arr: {
+      key: string;
+      value: string;
+    }[]
+  ) => {
+    const payload: Parsed = {
+      clusterAttributes: [],
+    };
+
+    arr.forEach((obj) => {
+      payload.clusterAttributes.push({
+        attributeName: obj.key,
+        attributeStringValue: obj.value,
+      });
+    });
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to add</FieldTitle>
+      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default AddClusterInfo;

frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { InputList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  attributeNamesToDelete: string[];
+};
+
+const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).attributeNamesToDelete : undefined), [value]);
+
+  const handleChange = (arr: string[]) => {
+    const payload: Parsed = {
+      attributeNamesToDelete: arr,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to delete</FieldTitle>
+      <InputList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default DeleteAttributes;

frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx

@@ -0,0 +1,45 @@
+import { ActionsType } from '@/types';
+import AddClusterInfo from './add-cluster-info';
+import DeleteAttributes from './delete-attributes';
+import RenameAttributes from './rename-attributes';
+import PiiMasking from './pii-masking';
+
+interface ActionCustomFieldsProps {
+  actionType?: ActionsType;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
+  switch (actionType) {
+    case ActionsType.ADD_CLUSTER_INFO: {
+      return <AddClusterInfo value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.DELETE_ATTRIBUTES: {
+      return <DeleteAttributes value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.RENAME_ATTRIBUTES: {
+      return <RenameAttributes value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.PII_MASKING: {
+      return <PiiMasking value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.ERROR_SAMPLER:
+      return null;
+
+    case ActionsType.PROBABILISTIC_SAMPLER:
+      return null;
+
+    case ActionsType.LATENCY_SAMPLER:
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+export default ActionCustomFields;

frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { InputList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  piiCategories: string[];
+};
+
+const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).piiCategories : undefined), [value]);
+
+  const handleChange = (arr: string[]) => {
+    const payload: Parsed = {
+      piiCategories: arr,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to mask</FieldTitle>
+      <InputList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default PiiMasking;

frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { KeyValueInputsList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  renames: {
+    [oldKey: string]: string;
+  };
+};
+
+const RenameAttributes: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(
+    () => (value ? Object.entries((JSON.parse(value) as Parsed).renames).map(([k, v]) => ({ key: k, value: v })) : undefined),
+    [value]
+  );
+
+  const handleChange = (
+    arr: {
+      key: string;
+      value: string;
+    }[]
+  ) => {
+    const payload: Parsed = {
+      renames: {},
+    };
+
+    arr.forEach((obj) => {
+      payload.renames[obj.key] = obj.value;
+    });
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to rename</FieldTitle>
+      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default RenameAttributes;

frontend/webapp/containers/main/actions/choose-action-body/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import ActionCustomFields from './action-custom-fields';
+import ActionCustomFields from './custom-fields';
 import { ActionFormData } from '@/hooks/actions/useActionFormData';
 import { type ActionOption } from '../choose-action-modal/action-options';
 import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
@@ -52,11 +52,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData
         />
       </FieldWrapper>
 
-      <ActionCustomFields
-        actionType={action.type}
-        value={formData.details ? JSON.parse(formData.details) : undefined}
-        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
-      />
+      <ActionCustomFields actionType={action.type} value={formData.details} setValue={(val) => handleFormChange('details', val)} />
 
       <FieldWrapper>
         <FieldTitle>Notes</FieldTitle>