Merge pull request #4 from odigos-io/new-ui

[GEN-1515]: fix stringify for graphql (odigos-io#1615)
BenElferink · Oct 27, 2024 · f97a5a1 · f97a5a1
2 parents 9d260f4 + 446c37a
commit f97a5a1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 55 deletions.
diff --git a/...tend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx b/...tend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
@@ -1,15 +1,7 @@
 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;
-`;
+import { safeJsonParse } from '@/utils';
+import { FieldTitle, FieldWrapper } from './styled';
+import { KeyValueInputsList } from '@/reuseable-components';
 
 type Props = {
   value: string;
@@ -26,7 +18,10 @@ type Parsed = {
 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,
+      safeJsonParse<Parsed>(value, { clusterAttributes: [] }).clusterAttributes.map((obj) => ({
+        key: obj.attributeName,
+        value: obj.attributeStringValue,
+      })),
     [value]
   );
 
@@ -37,15 +32,11 @@ const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
     }[]
   ) => {
     const payload: Parsed = {
-      clusterAttributes: [],
-    };
-
-    arr.forEach((obj) => {
-      payload.clusterAttributes.push({
+      clusterAttributes: arr.map((obj) => ({
         attributeName: obj.key,
         attributeStringValue: obj.value,
-      });
-    });
+      })),
+    };
 
     setValue(JSON.stringify(payload));
   };

diff --git a/...end/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx b/...end/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
@@ -1,15 +1,7 @@
 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;
-`;
+import { safeJsonParse } from '@/utils';
+import { InputList } from '@/reuseable-components';
+import { FieldTitle, FieldWrapper } from './styled';
 
 type Props = {
   value: string;
@@ -21,7 +13,7 @@ type Parsed = {
 };
 
 const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
-  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).attributeNamesToDelete : undefined), [value]);
+  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { attributeNamesToDelete: [] }).attributeNamesToDelete, [value]);
 
   const handleChange = (arr: string[]) => {
     const payload: Parsed = {

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
@@ -1,15 +1,7 @@
 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;
-`;
+import { safeJsonParse } from '@/utils';
+import { InputList } from '@/reuseable-components';
+import { FieldTitle, FieldWrapper } from './styled';
 
 type Props = {
   value: string;
@@ -21,7 +13,7 @@ type Parsed = {
 };
 
 const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
-  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).piiCategories : undefined), [value]);
+  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { piiCategories: [] }).piiCategories, [value]);
 
   const handleChange = (arr: string[]) => {
     const payload: Parsed = {

diff --git a/...end/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx b/...end/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
@@ -1,15 +1,7 @@
 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;
-`;
+import { safeJsonParse } from '@/utils';
+import { FieldTitle, FieldWrapper } from './styled';
+import { KeyValueInputsList } from '@/reuseable-components';
 
 type Props = {
   value: string;
@@ -24,7 +16,7 @@ type Parsed = {
 
 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),
+    () => Object.entries(safeJsonParse<Parsed>(value, { renames: {} }).renames).map(([k, v]) => ({ key: k, value: v })),
     [value]
   );
 

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+export const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+export const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;