Merge pull request #2 from BenElferink/gen-1515-dynamic-action-form

PR comments

frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { KeyvalCheckbox, KeyvalText } from '@/design.system';
 import ActionRowDynamicContent from './action.row.dynamic.content';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { ActionIcon } from '../action.icon';
 
 const StyledTr = styled.tr`

frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx

@@ -3,18 +3,15 @@ import styled from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
 import theme from '@/styles/palette';
 import { LinkIcon } from '@keyval-dev/design-system';
+import { DOCS_LINK } from '@/utils';
 
 const ManageDestinationHeaderWrapper = styled.div`
   display: flex;
   height: 104px;
   align-items: center;
   border-radius: 25px;
   margin: 24px 0;
-  background: radial-gradient(
-      78.09% 72.18% at 100% -0%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
+  background: radial-gradient(78.09% 72.18% at 100% -0%, rgba(150, 242, 255, 0.4) 0%, rgba(150, 242, 255, 0) 61.91%),
     linear-gradient(180deg, #2e4c55 0%, #303355 100%);
 `;
 
@@ -27,25 +24,17 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageDestinationHeader({
-  data: { image_url, display_name, type },
-}) {
+export function ManageDestinationHeader({ data: { image_url, display_name, type } }) {
   return (
     <ManageDestinationHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
       <TextWrapper>
         <KeyvalText size={24} weight={700}>
           {display_name}
         </KeyvalText>
-        <div
-          style={{ cursor: 'pointer' }}
-          onClick={() =>
-            window.open(`https://docs.odigos.io/backends/${type}`, '_blank')
-          }
-        >
+        <div style={{ cursor: 'pointer' }} onClick={() => window.open(`${DOCS_LINK}/backends/${type}`, '_blank')}>
           <KeyvalText style={{ display: 'flex', gap: 3 }}>
-            find out more about {display_name} in{' '}
-            <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
+            find out more about {display_name} in <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
             <LinkIcon style={{ marginTop: 2 }} />
           </KeyvalText>
         </div>

frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx

@@ -3,7 +3,7 @@ import theme from '@/styles/palette';
 import { Destination } from '@/types';
 import styled, { css } from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
 import { ConditionCheck } from '@/components/common';
 

frontend/webapp/components/setup/destination/destination.card/destination.card.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { KeyvalCard, KeyvalImage, KeyvalText } from '@/design.system';
 import { TapList } from '../tap.list/tap.list';
-import { MONITORING_OPTIONS } from '../utils';
+import { MONITORING_OPTIONS } from '../../../../utils/constants/monitors';
 import {
   ApplicationNameWrapper,
   DestinationCardContentWrapper,

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

@@ -1,68 +1,68 @@
-import styled from 'styled-components'
-import { InputList, KeyValueInputsList, Text } from '@/reuseable-components'
-import type { ActionsType } from '@/types'
+import styled from 'styled-components';
+import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
+import { ActionsType } from '@/types';
 
 interface ActionCustomFieldsProps {
-  actionType?: ActionsType
-  value: any
-  setValue: (value: any) => void
+  actionType?: ActionsType;
+  value: any;
+  setValue: (value: any) => void;
 }
 
 const FieldWrapper = styled.div`
   width: 100%;
   margin: 8px 0;
-`
+`;
 
 const FieldTitle = styled(Text)`
   margin-bottom: 12px;
-`
+`;
 
 const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
   switch (actionType) {
-    case 'AddClusterInfo':
+    case ActionsType.ADD_CLUSTER_INFO:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to add</FieldTitle>
           <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
-    case 'DeleteAttribute':
+    case ActionsType.DELETE_ATTRIBUTES:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to delete</FieldTitle>
           <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
-    case 'RenameAttribute':
+    case ActionsType.RENAME_ATTRIBUTES:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to rename</FieldTitle>
           <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
-    case 'PiiMasking':
+    case ActionsType.PII_MASKING:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to mask</FieldTitle>
           <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
-    case 'ErrorSampler':
-      return null
+    case ActionsType.ERROR_SAMPLER:
+      return null;
 
-    case 'ProbabilisticSampler':
-      return null
+    case ActionsType.PROBABILISTIC_SAMPLER:
+      return null;
 
-    case 'LatencySampler':
-      return null
+    case ActionsType.LATENCY_SAMPLER:
+      return null;
 
     default:
-      return null
+      return null;
   }
-}
+};
 
-export default ActionCustomFields
+export default ActionCustomFields;

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

@@ -1,41 +1,41 @@
-import React, { Fragment, useEffect, useMemo } from 'react'
-import styled from 'styled-components'
-import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components'
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils'
-import { useActionFormData } from '@/hooks/actions/useActionFormData'
-import ActionCustomFields from './action-custom-fields'
-import { type ActionOption } from '../choose-action-modal/action-options'
+import styled from 'styled-components';
+import React, { useEffect } from 'react';
+import ActionCustomFields from './action-custom-fields';
+import { useActionFormData } from '@/hooks/actions/useActionFormData';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
+import { type ActionOption } from '../choose-action-modal/action-options';
+import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
 
 const Description = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   line-height: 150%;
   display: flex;
-`
+`;
 
 const FieldWrapper = styled.div`
   width: 100%;
   margin: 8px 0;
-`
+`;
 
 const FieldTitle = styled(Text)`
   margin-bottom: 12px;
-`
+`;
 
 interface ChooseActionContentProps {
-  action: ActionOption
+  action: ActionOption;
 }
 
 const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
-  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData()
+  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData();
 
   useEffect(() => {
     return () => {
-      resetFormData()
-    }
-  }, [])
+      resetFormData();
+    };
+  }, []);
 
   return (
-    <Fragment>
+    <>
       <Description>
         {action.docsDescription}
         <DocsButton endpoint={action.docsEndpoint} />
@@ -47,8 +47,8 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
           monitors={MONITORING_OPTIONS}
           exportedSignals={exportedSignals}
           handleSignalChange={(id, val) => {
-            const found = MONITORING_OPTIONS.find((item) => item.id === id)
-            if (found) setExportedSignals((prev) => ({ ...prev, [found.type]: val }))
+            const found = MONITORING_OPTIONS.find((item) => item.id === id);
+            if (found) setExportedSignals((prev) => ({ ...prev, [found.type]: val }));
           }}
         />
       </FieldWrapper>
@@ -72,8 +72,8 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
         <FieldTitle>Notes</FieldTitle>
         <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
-    </Fragment>
-  )
-}
+    </>
+  );
+};
 
-export { ChooseActionBody }
+export { ChooseActionBody };

frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts

@@ -1,15 +1,15 @@
-import { ActionsType } from '@/types'
+import { ActionsType } from '@/types';
 
 export type ActionOption = {
-  id: string
-  type?: ActionsType
-  label: string
-  description?: string
-  docsEndpoint?: string
-  docsDescription?: string
-  icon?: string
-  items?: ActionOption[]
-}
+  id: string;
+  type?: ActionsType;
+  label: string;
+  description?: string;
+  docsEndpoint?: string;
+  docsDescription?: string;
+  icon?: string;
+  items?: ActionOption[];
+};
 
 export const ACTION_OPTIONS: ActionOption[] = [
   {
@@ -83,4 +83,4 @@ export const ACTION_OPTIONS: ActionOption[] = [
       },
     ],
   },
-]
+];

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

@@ -1,16 +1,16 @@
-import React, { useRef, useCallback, useState } from 'react'
-import styled from 'styled-components'
-import { AutocompleteInput, Modal, NavigationButtons, Text, Divider } from '@/reuseable-components'
-import { ChooseActionBody } from '../choose-action-body'
-import { ACTION_OPTIONS, type ActionOption } from './action-options'
+import React, { useRef, useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider } from '@/reuseable-components';
+import { ChooseActionBody } from '../choose-action-body';
+import { ACTION_OPTIONS, type ActionOption } from './action-options';
 
 const DefineActionContainer = styled.section`
   height: 640px;
   padding: 0px 220px;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
-`
+`;
 
 const WidthConstraint = styled.div`
   display: flex;
@@ -20,20 +20,20 @@ const WidthConstraint = styled.div`
   gap: 16px;
   max-width: 640px;
   margin: 32px 0 24px 0;
-`
+`;
 
 const SubTitle = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   line-height: 150%;
-`
+`;
 
 interface AddActionModalProps {
-  isModalOpen: boolean
-  handleCloseModal: () => void
+  isModalOpen: boolean;
+  handleCloseModal: () => void;
 }
 
 interface ModalActionComponentProps {
-  onNext: () => void
+  onNext: () => void;
 }
 
 const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({ onNext }) => {
@@ -43,25 +43,25 @@ const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({
       onClick: onNext,
       variant: 'primary' as const,
     },
-  ]
+  ];
 
-  return <NavigationButtons buttons={buttons} />
-})
+  return <NavigationButtons buttons={buttons} />;
+});
 
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
-  const submitRef = useRef<(() => void) | null>(null)
-  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null)
+  const submitRef = useRef<(() => void) | null>(null);
+  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
 
   const handleNext = useCallback(() => {
     if (submitRef.current) {
-      handleCloseModal()
+      handleCloseModal();
     }
-  }, [handleCloseModal])
+  }, [handleCloseModal]);
 
   const handleClose = useCallback(() => {
-    handleCloseModal()
-    setSelectedItem(null)
-  }, [handleCloseModal])
+    handleCloseModal();
+    setSelectedItem(null);
+  }, [handleCloseModal]);
 
   return (
     <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
@@ -85,5 +85,5 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
         ) : null}
       </DefineActionContainer>
     </Modal>
-  )
-}
+  );
+};

frontend/webapp/containers/setup/destination/destination.section.tsx

@@ -5,7 +5,7 @@ import { KeyvalLoader } from '@/design.system';
 import { EmptyList } from '@/components/lists';
 import { OVERVIEW, QUERIES, SETUP } from '@/utils';
 import { getDestinationsTypes } from '@/services';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { DestinationList, DestinationOptionMenu } from '@/components/setup';
 import {
   LoaderWrapper,