Revert "[GEN-1515]: fix stringify for graphql (odigos-io#1615)"

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

@@ -1,7 +1,15 @@
 import React, { useMemo } from 'react';
-import { safeJsonParse } from '@/utils';
-import { FieldTitle, FieldWrapper } from './styled';
-import { KeyValueInputsList } from '@/reuseable-components';
+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;
@@ -18,10 +26,7 @@ type Parsed = {
 const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
   const mappedValue = useMemo(
     () =>
-      safeJsonParse<Parsed>(value, { clusterAttributes: [] }).clusterAttributes.map((obj) => ({
-        key: obj.attributeName,
-        value: obj.attributeStringValue,
-      })),
+      value ? (JSON.parse(value) as Parsed).clusterAttributes.map((obj) => ({ key: obj.attributeName, value: obj.attributeStringValue })) : undefined,
     [value]
   );
 
@@ -32,11 +37,15 @@ const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
     }[]
   ) => {
     const payload: Parsed = {
-      clusterAttributes: arr.map((obj) => ({
+      clusterAttributes: [],
+    };
+
+    arr.forEach((obj) => {
+      payload.clusterAttributes.push({
         attributeName: obj.key,
         attributeStringValue: obj.value,
-      })),
-    };
+      });
+    });
 
     setValue(JSON.stringify(payload));
   };

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

@@ -1,7 +1,15 @@
 import React, { useMemo } from 'react';
-import { safeJsonParse } from '@/utils';
-import { InputList } from '@/reuseable-components';
-import { FieldTitle, FieldWrapper } from './styled';
+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;
@@ -13,7 +21,7 @@ type Parsed = {
 };
 
 const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
-  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { attributeNamesToDelete: [] }).attributeNamesToDelete, [value]);
+  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).attributeNamesToDelete : undefined), [value]);
 
   const handleChange = (arr: string[]) => {
     const payload: Parsed = {

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

@@ -1,7 +1,15 @@
 import React, { useMemo } from 'react';
-import { safeJsonParse } from '@/utils';
-import { InputList } from '@/reuseable-components';
-import { FieldTitle, FieldWrapper } from './styled';
+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;
@@ -13,7 +21,7 @@ type Parsed = {
 };
 
 const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
-  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { piiCategories: [] }).piiCategories, [value]);
+  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).piiCategories : undefined), [value]);
 
   const handleChange = (arr: string[]) => {
     const payload: Parsed = {

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

@@ -1,7 +1,15 @@
 import React, { useMemo } from 'react';
-import { safeJsonParse } from '@/utils';
-import { FieldTitle, FieldWrapper } from './styled';
-import { KeyValueInputsList } from '@/reuseable-components';
+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;
@@ -16,7 +24,7 @@ type Parsed = {
 
 const RenameAttributes: React.FC<Props> = ({ value, setValue }) => {
   const mappedValue = useMemo(
-    () => Object.entries(safeJsonParse<Parsed>(value, { renames: {} }).renames).map(([k, v]) => ({ key: k, value: v })),
+    () => (value ? Object.entries((JSON.parse(value) as Parsed).renames).map(([k, v]) => ({ key: k, value: v })) : undefined),
     [value]
   );