From 522e782d9f05c90a975464ef4dae3c58fb6c4088 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 10:54:28 +0300
Subject: [PATCH 01/11] feat(frontend): added actions form, and fixed bugs:
 empty inputs, search bar

---
 .../action-custom-fields.tsx                  |  66 ++++++
 .../main/actions/choose-action-body/index.tsx |  65 ++++++
 .../choose-action-modal/action-options.ts     |  37 +++-
 .../actions/choose-action-modal/index.tsx     |  93 ++++----
 .../webapp/hooks/actions/useActionFormData.ts |  21 ++
 .../webapp/public/icons/common/notebook.svg   |   3 +
 .../auto-complete-input/index.tsx             | 201 ++++++++----------
 .../button/DocsButton.tsx                     |  21 ++
 .../reuseable-components/button/index.tsx     |  36 ++--
 .../checkbox-list/index.tsx                   |  54 ++---
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/input-list/index.tsx | 123 +++++------
 .../key-value-input-list/index.tsx            | 153 ++++++-------
 .../reuseable-components/text/index.tsx       |  48 ++---
 14 files changed, 517 insertions(+), 405 deletions(-)
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/index.tsx
 create mode 100644 frontend/webapp/hooks/actions/useActionFormData.ts
 create mode 100644 frontend/webapp/public/icons/common/notebook.svg
 create mode 100644 frontend/webapp/reuseable-components/button/DocsButton.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
new file mode 100644
index 000000000..259a62233
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -0,0 +1,66 @@
+import styled from 'styled-components'
+import { InputList, KeyValueInputsList, Text } from '@/reuseable-components'
+import type { ActionsType } from '@/types'
+
+interface ActionCustomFieldsProps {
+  actionType?: ActionsType
+}
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`
+
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) => {
+  switch (actionType) {
+    case 'AddClusterInfo':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to add</FieldTitle>
+          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'DeleteAttribute':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to delete</FieldTitle>
+          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'RenameAttribute':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to rename</FieldTitle>
+          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'PiiMasking':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to mask</FieldTitle>
+          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'ErrorSampler':
+      return null
+
+    case 'ProbabilisticSampler':
+      return null
+
+    case 'LatencySampler':
+      return null
+
+    default:
+      return null
+  }
+}
+
+export default ActionCustomFields
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
new file mode 100644
index 000000000..94e3fe6ab
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -0,0 +1,65 @@
+import React, { Fragment } 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'
+
+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
+}
+
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
+  const { actionName, setActionName, actionNotes, setActionNotes, exportedSignals, setExportedSignals } = useActionFormData()
+
+  return (
+    <Fragment>
+      <Description>
+        {action.docsDescription}
+        <DocsButton endpoint={action.docsEndpoint} />
+      </Description>
+
+      <FieldWrapper>
+        <FieldTitle>Monitoring</FieldTitle>
+        <CheckboxList
+          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 }))
+          }}
+        />
+      </FieldWrapper>
+
+      <FieldWrapper>
+        <FieldTitle>Action name</FieldTitle>
+        <Input placeholder='Use a name that describes the action' value={actionName} onChange={({ target: { value } }) => setActionName(value)} />
+      </FieldWrapper>
+
+      <ActionCustomFields actionType={action.type} />
+
+      <FieldWrapper>
+        <FieldTitle>Notes</FieldTitle>
+        <TextArea value={actionNotes} onChange={({ target: { value } }) => setActionNotes(value)} />
+      </FieldWrapper>
+    </Fragment>
+  )
+}
+
+export { ChooseActionBody }
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index b0e342e3c..a271c67ba 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,12 +1,26 @@
-import { ActionsType } from '@/types';
+import { ActionsType } from '@/types'
 
-export const ACTION_OPTIONS = [
+export type ActionOption = {
+  id: string
+  type?: ActionsType
+  label: string
+  description?: string
+  docsEndpoint?: string
+  docsDescription?: string
+  icon?: string
+  items?: ActionOption[]
+}
+
+export const ACTION_OPTIONS: ActionOption[] = [
   {
     id: 'add_cluster_info',
     label: 'Add Cluster Info',
     description: 'Add static cluster-scoped attributes to your data.',
     type: ActionsType.ADD_CLUSTER_INFO,
     icon: '/icons/actions/addclusterinfo.svg',
+    docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
+    docsDescription:
+      'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
   },
   {
     id: 'delete_attribute',
@@ -14,6 +28,8 @@ export const ACTION_OPTIONS = [
     description: 'Delete attributes from logs, metrics, and traces.',
     type: ActionsType.DELETE_ATTRIBUTES,
     icon: '/icons/actions/deleteattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
+    docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
   },
   {
     id: 'rename_attribute',
@@ -21,6 +37,9 @@ export const ACTION_OPTIONS = [
     description: 'Rename attributes in logs, metrics, and traces.',
     type: ActionsType.RENAME_ATTRIBUTES,
     icon: '/icons/actions/renameattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
+    docsDescription:
+      'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
   },
   {
     id: 'pii-masking',
@@ -28,12 +47,12 @@ export const ACTION_OPTIONS = [
     description: 'Mask PII data in your traces.',
     type: ActionsType.PII_MASKING,
     icon: '/icons/actions/piimasking.svg',
+    docsEndpoint: '/pipeline/actions/attributes/piimasking',
+    docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
   },
   {
     id: 'sampler',
     label: 'Samplers',
-    description: '',
-    type: ActionsType.PROBABILISTIC_SAMPLER,
     icon: '/icons/actions/sampler.svg',
     items: [
       {
@@ -41,19 +60,27 @@ export const ACTION_OPTIONS = [
         label: 'Error Sampler',
         description: 'Sample errors based on percentage.',
         type: ActionsType.ERROR_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/errorsampler',
+        docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
       },
       {
         id: 'probabilistic-sampler',
         label: 'Probabilistic Sampler',
         description: 'Sample traces based on percentage.',
         type: ActionsType.PROBABILISTIC_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
+        docsDescription:
+          'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
       },
       {
         id: 'latency-action',
         label: 'Latency Action',
         description: 'Add latency to your traces.',
         type: ActionsType.LATENCY_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/latencysampler',
+        docsDescription:
+          'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
       },
     ],
   },
-];
+]
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 977d632b2..2924da792 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,21 +1,18 @@
-import React, { useRef, useCallback } from 'react';
-import {
-  AutocompleteInput,
-  Modal,
-  NavigationButtons,
-  Text,
-} from '@/reuseable-components';
-import styled from 'styled-components';
-import { ACTION_OPTIONS } 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 HeaderWrapper = styled.div`
+const WidthConstraint = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -23,70 +20,70 @@ const HeaderWrapper = 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 }) => {
-    const buttons = [
-      {
-        label: 'DONE',
-        onClick: onNext,
-        variant: 'primary' as const,
-      },
-    ];
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({ onNext }) => {
+  const buttons = [
+    {
+      label: 'DONE',
+      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);
+export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
+  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();
-  }, [handleCloseModal]);
+    handleCloseModal()
+    setSelectedItem(null)
+  }, [handleCloseModal])
 
   return (
-    <Modal
-      isOpen={isModalOpen}
-      actionComponent={<ModalActionComponent onNext={handleNext} />}
-      header={{ title: 'Add Action' }}
-      onClose={handleClose}
-    >
+    <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
       <DefineActionContainer>
-        <HeaderWrapper>
+        <WidthConstraint>
           <Text size={20}>{'Define Action'}</Text>
           <SubTitle>
             {
               'Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
             }
           </SubTitle>
-        </HeaderWrapper>
-        <AutocompleteInput options={ACTION_OPTIONS} />
+        </WidthConstraint>
+
+        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={(item) => setSelectedItem(item)} />
+
+        {!!selectedItem?.type ? (
+          <WidthConstraint>
+            <Divider margin='16px 0' />
+            <ChooseActionBody action={selectedItem} />
+          </WidthConstraint>
+        ) : null}
       </DefineActionContainer>
     </Modal>
-  );
-};
+  )
+}
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
new file mode 100644
index 000000000..d69bcff01
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -0,0 +1,21 @@
+import { useState } from 'react'
+
+export function useActionFormData() {
+  const [actionName, setActionName] = useState('')
+  const [actionNotes, setActionNotes] = useState('')
+  const [exportedSignals, setExportedSignals] = useState({
+    logs: false,
+    metrics: false,
+    traces: false,
+  })
+
+  return {
+    actionName,
+    setActionName,
+    actionNotes,
+    setActionNotes,
+    exportedSignals,
+    setExportedSignals,
+    // resetFormData,
+  }
+}
diff --git a/frontend/webapp/public/icons/common/notebook.svg b/frontend/webapp/public/icons/common/notebook.svg
new file mode 100644
index 000000000..8b334a30f
--- /dev/null
+++ b/frontend/webapp/public/icons/common/notebook.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00016 3.37696V14.3327M8.00016 3.37696C10.0168 2.64365 12.6703 2.23608 14.6668 3.37696V13.7103C12.5356 12.7969 9.9581 13.4427 8.00016 14.3327M8.00016 3.37696C5.98356 2.64365 3.33004 2.23608 1.3335 3.37696V13.7103C3.46472 12.7969 6.04222 13.4427 8.00016 14.3327" stroke="#F9F9F9" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 2b31ea584..236286467 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,167 +1,150 @@
-import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
-import styled from 'styled-components';
-import { Text } from '../text';
-import Image from 'next/image';
-
-interface Option {
-  id: string;
-  label: string;
-  description?: string;
-  icon?: string;
-  items?: Option[]; // For handling a list of items
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react'
+import styled from 'styled-components'
+import Image from 'next/image'
+import { Text } from '../text'
+
+export interface Option {
+  id: string
+  label: string
+  description?: string
+  icon?: string
+  items?: Option[] // For handling a list of items
 }
 
 interface AutocompleteInputProps {
-  options: Option[];
-  placeholder?: string;
-  onOptionSelect?: (option: Option) => void;
+  options: Option[]
+  placeholder?: string
+  onOptionSelect?: (option: Option) => void
+}
+
+const filterOptions = (optionsList: Option[], input: string): Option[] => {
+  return optionsList.reduce<Option[]>((acc, option) => {
+    if (option.items) {
+      const filteredSubItems = filterOptions(option.items, input)
+      if (filteredSubItems.length) {
+        acc.push({ ...option, items: filteredSubItems })
+      }
+    } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
+      acc.push(option)
+    }
+    return acc
+  }, [])
 }
 
-const AutocompleteInput: FC<AutocompleteInputProps> = ({
-  options,
-  placeholder = 'Type to search...',
-  onOptionSelect,
-}) => {
-  const [query, setQuery] = useState('');
-  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
-  const [showOptions, setShowOptions] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
+const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder = 'Type to search...', onOptionSelect }) => {
+  const [query, setQuery] = useState('')
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''))
+  const [showOptions, setShowOptions] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const input = e.target.value;
-    setQuery(input);
+    const input = e.target.value
+    setQuery(input)
     if (input) {
-      const filtered = filterOptions(options, input);
-      setFilteredOptions(filtered);
-      setShowOptions(true);
+      const filtered = filterOptions(options, input)
+      setFilteredOptions(filtered)
+      setShowOptions(true)
     } else {
-      setShowOptions(false);
+      setShowOptions(false)
     }
-  };
-
-  const filterOptions = (optionsList: Option[], input: string): Option[] => {
-    return optionsList.reduce<Option[]>((acc, option) => {
-      if (option.items) {
-        const filteredSubItems = filterOptions(option.items, input);
-        if (filteredSubItems.length) {
-          acc.push({ ...option, items: filteredSubItems });
-        }
-      } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
-        acc.push(option);
-      }
-      return acc;
-    }, []);
-  };
+  }
 
   const handleOptionClick = (option: Option) => {
-    setQuery(option.label);
-    setShowOptions(false);
+    setQuery(option.label)
+    setShowOptions(false)
     if (onOptionSelect) {
-      onOptionSelect(option);
+      onOptionSelect(option)
     }
-  };
+  }
 
   const flattenOptions = (options: Option[]): Option[] => {
     return options.reduce<Option[]>((acc, option) => {
-      acc.push(option);
+      acc.push(option)
       if (option.items) {
-        acc = acc.concat(flattenOptions(option.items));
+        acc = acc.concat(flattenOptions(option.items))
       }
-      return acc;
-    }, []);
-  };
+      return acc
+    }, [])
+  }
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     // Flatten the options to handle keyboard navigation - TODO: Refactor this
-    return;
-    const flatOptions = flattenOptions(filteredOptions);
+    return
+    const flatOptions = flattenOptions(filteredOptions)
     if (e.key === 'ArrowDown' && activeIndex < flatOptions.length - 1) {
-      setActiveIndex(activeIndex + 1);
+      setActiveIndex(activeIndex + 1)
     } else if (e.key === 'ArrowUp' && activeIndex > 0) {
-      setActiveIndex(activeIndex - 1);
+      setActiveIndex(activeIndex - 1)
     } else if (e.key === 'Enter' && activeIndex >= 0) {
-      handleOptionClick(flatOptions[activeIndex]);
+      handleOptionClick(flatOptions[activeIndex])
     }
-  };
+  }
 
   return (
     <AutocompleteContainer>
       <InputWrapper>
         <StyledInput
-          type="text"
+          type='text'
           value={query}
           placeholder={placeholder}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={() => setShowOptions(false)}
-          onFocus={() => query && setShowOptions(true)}
+          onFocus={() => setShowOptions(true)}
         />
       </InputWrapper>
       {showOptions && (
         <OptionsList>
           {filteredOptions.map((option, index) => (
-            <OptionItem
-              key={option.id}
-              option={option}
-              isActive={index === activeIndex}
-              onClick={handleOptionClick}
-            />
+            <OptionItem key={option.id} option={option} isActive={index === activeIndex} onClick={handleOptionClick} />
           ))}
         </OptionsList>
       )}
     </AutocompleteContainer>
-  );
-};
+  )
+}
 
 interface OptionItemProps {
-  option: Option;
-  isActive: boolean;
-  onClick: (option: Option) => void;
+  option: Option
+  isActive: boolean
+  onClick: (option: Option) => void
 }
 
 const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
-  const hasSubItems = !!option.items && option.items.length > 0;
+  const hasSubItems = !!option.items && option.items.length > 0
 
   return (
-    <OptionItemContainer
-      isActive={isActive}
-      isList={hasSubItems}
-      onMouseDown={() => onClick(option)}
-    >
-      {option.icon && (
-        <Image width={16} height={16} src={option.icon} alt={option.label} />
-      )}
+    <OptionItemContainer isActive={isActive} isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
+      {option.icon && <Image width={16} height={16} src={option.icon} alt={option.label} />}
+
       <OptionContent>
         <OptionLabelWrapper>
           <OptionLabel>{option.label}</OptionLabel>
           <OptionDescription>{option.description}</OptionDescription>
         </OptionLabelWrapper>
-        {option.items && option.items.length > 0 && (
+
+        {hasSubItems && (
           <SubOptionsList>
-            {option.items.map((subOption) => (
+            {option.items?.map((subOption) => (
               <SubOptionContainer key={subOption.id}>
                 <VerticalLine />
-                <OptionItem
-                  option={subOption}
-                  isActive={false}
-                  onClick={onClick}
-                />
+                <OptionItem option={subOption} isActive={false} onClick={onClick} />
               </SubOptionContainer>
             ))}
           </SubOptionsList>
         )}
       </OptionContent>
     </OptionItemContainer>
-  );
-};
+  )
+}
 
-export { AutocompleteInput };
+export { AutocompleteInput }
 
 /** Styled Components */
 
 const AutocompleteContainer = styled.div`
   position: relative;
-`;
+`
 
 const InputWrapper = styled.div`
   width: calc(100% - 16px);
@@ -180,7 +163,7 @@ const InputWrapper = styled.div`
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`;
+`
 
 const StyledInput = styled.input`
   flex: 1;
@@ -204,7 +187,7 @@ const StyledInput = styled.input`
     background-color: #555;
     cursor: not-allowed;
   }
-`;
+`
 
 const OptionsList = styled.ul`
   position: absolute;
@@ -217,37 +200,36 @@ const OptionsList = styled.ul`
   border: 1px solid ${({ theme }) => theme.colors.border};
   z-index: 9999;
   padding: 12px;
-`;
+`
 
 interface OptionItemContainerProps {
-  isActive: boolean;
-  isList: boolean;
+  isActive: boolean
+  isList: boolean
 }
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
+  width: 100%;
   padding: 8px 12px;
   cursor: ${({ isList }) => (isList ? 'default' : 'pointer')};
   border-radius: 24px;
   gap: 8px;
   display: flex;
   align-items: ${({ isList }) => (isList ? 'flex-start' : 'center')};
-  background: ${({ isActive, theme }) =>
-    isActive ? theme.colors.activeBackground : 'transparent'};
+  background: ${({ isActive, theme }) => (isActive ? theme.colors.activeBackground : 'transparent')};
 
   &:hover {
-    background: ${({ theme, isList }) =>
-      !isList && theme.colors.white_opacity['008']};
+    background: ${({ theme, isList }) => !isList && theme.colors.white_opacity['008']};
   }
-`;
+`
 
 const OptionContent = styled.div`
   width: 100%;
-`;
+`
 
 const SubOptionContainer = styled.div`
   display: flex;
   width: 100%;
-`;
+`
 
 const VerticalLine = styled.div`
   width: 1px;
@@ -255,27 +237,28 @@ const VerticalLine = styled.div`
   background-color: ${({ theme }) => theme.colors.white_opacity['008']};
   position: absolute;
   left: 33px;
-`;
+`
 
 const OptionLabelWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
-`;
+`
 
 const OptionLabel = styled(Text)`
   flex: 1;
   font-size: 14px;
-`;
+`
 
 const OptionDescription = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
   line-height: 150%;
-`;
+`
 
 const SubOptionsList = styled.ul`
   padding-left: 0px;
   margin: 4px 0 0 0;
   list-style: none;
-`;
+  width: 100%;
+`
diff --git a/frontend/webapp/reuseable-components/button/DocsButton.tsx b/frontend/webapp/reuseable-components/button/DocsButton.tsx
new file mode 100644
index 000000000..266089a82
--- /dev/null
+++ b/frontend/webapp/reuseable-components/button/DocsButton.tsx
@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import styled from 'styled-components'
+import { Button, ButtonProps } from '.'
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  gap: 6px;
+  min-width: 100px;
+`
+
+export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
+  return (
+    <StyledButton variant={variant} onClick={() => window.open(`https://docs.odigos.io${endpoint}`, '_blank', 'noopener noreferrer')}>
+      <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
+      Docs
+    </StyledButton>
+  )
+}
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index e74273f42..bba671fd3 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -1,9 +1,9 @@
-import React, { ButtonHTMLAttributes } from 'react';
-import styled, { css } from 'styled-components';
+import React, { ButtonHTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
-  isDisabled?: boolean;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  isDisabled?: boolean
 }
 
 const variantStyles = {
@@ -63,7 +63,7 @@ const variantStyles = {
       background: ${({ theme }) => theme.colors.danger};
     }
   `,
-};
+}
 
 const StyledButton = styled.button<ButtonProps>`
   height: 36px;
@@ -87,10 +87,10 @@ const StyledButton = styled.button<ButtonProps>`
         background-color: #eaeaea;
       }
     `}
-`;
+`
 
 const ButtonContainer = styled.div<{
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
 }>`
   border: 2px solid transparent;
   padding: 2px;
@@ -100,24 +100,14 @@ const ButtonContainer = styled.div<{
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`;
+`
 
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = 'primary',
-  isDisabled = false,
-  ...props
-}) => {
+export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', isDisabled = false, ...props }) => {
   return (
     <ButtonContainer variant={variant}>
-      <StyledButton
-        variant={variant}
-        disabled={isDisabled}
-        isDisabled={isDisabled}
-        {...props}
-      >
+      <StyledButton variant={variant} disabled={isDisabled} isDisabled={isDisabled} {...props}>
         {children}
       </StyledButton>
     </ButtonContainer>
-  );
-};
+  )
+}
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index 0528fce7f..b710d83f4 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -1,48 +1,37 @@
-import React from 'react';
-import { Text } from '../text';
-import styled from 'styled-components';
-import { Checkbox } from '../checkbox';
-import { ExportedSignals } from '@/types';
+import React from 'react'
+import { Text } from '../text'
+import styled from 'styled-components'
+import { Checkbox } from '../checkbox'
+import { ExportedSignals } from '@/types'
 
 interface Monitor {
-  id: string;
-  title: string;
-  tooltip?: string;
+  id: string | number
+  title: string
+  tooltip?: string
 }
 
 interface CheckboxListProps {
-  monitors: Monitor[];
-  title?: string;
-  exportedSignals: ExportedSignals;
-  handleSignalChange: (signal: string, value: boolean) => void;
+  monitors: Monitor[]
+  title?: string
+  exportedSignals: ExportedSignals
+  handleSignalChange: (signal: Monitor['id'], value: boolean) => void
 }
 
 const ListContainer = styled.div`
   display: flex;
   gap: 32px;
-`;
+`
 
 const TextWrapper = styled.div`
   margin-bottom: 14px;
-`;
+`
 
-const CheckboxList: React.FC<CheckboxListProps> = ({
-  monitors,
-  title,
-  exportedSignals,
-  handleSignalChange,
-}) => {
+const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSignals, handleSignalChange }) => {
   function isItemDisabled(item: Monitor) {
-    const selectedItems = Object.values(exportedSignals).filter(
-      (value) => value
-    );
+    const selectedItems = Object.values(exportedSignals).filter((value) => value)
+    const trueValues = Object.values(exportedSignals).filter(Boolean)
 
-    const trueValues = Object.values(exportedSignals).filter(Boolean);
-
-    return (
-      (monitors.length === 1 && trueValues.length === 1) ||
-      (selectedItems.length === 1 && exportedSignals[item.id])
-    );
+    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id])
   }
 
   return (
@@ -54,6 +43,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
           </Text>
         </TextWrapper>
       )}
+
       <ListContainer>
         {monitors.map((monitor) => (
           <Checkbox
@@ -66,7 +56,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
         ))}
       </ListContainer>
     </div>
-  );
-};
+  )
+}
 
-export { CheckboxList };
+export { CheckboxList }
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 110f5c759..c139acfc8 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,5 +1,6 @@
 export * from './text';
 export * from './button';
+export * from './button/DocsButton';
 export * from './section-title';
 export * from './input';
 export * from './tooltip';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 67b935d7a..214dd63e9 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,38 +1,38 @@
-import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Input } from '../input';
-import { Button } from '../button';
-import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import Image from 'next/image'
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Input } from '../input'
+import { Button } from '../button'
+import { Text } from '../text'
+import { Tooltip } from '../tooltip'
 
 interface InputListProps {
-  initialValues?: string[];
-  title?: string;
-  tooltip?: string;
-  required?: boolean;
-  value?: string[];
-  onChange: (values: string[]) => void;
+  initialValues?: string[]
+  title?: string
+  tooltip?: string
+  required?: boolean
+  value?: string[]
+  onChange: (values: string[]) => void
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`;
+`
 
 const InputRow = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
-`;
+`
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`;
+`
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -44,63 +44,62 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`;
+`
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`;
+`
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`;
+`
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`;
-
-const InputList: React.FC<InputListProps> = ({
-  initialValues = [''],
-  title,
-  tooltip,
-  required,
-  onChange,
-  value = [''],
-}) => {
-  const [inputs, setInputs] = useState<string[]>(value || initialValues);
+`
+
+const INITIAL = ['']
+
+const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
+  const [inputs, setInputs] = useState<string[]>(value || initialValues)
+
+  useEffect(() => {
+    if (!inputs.length) setInputs(INITIAL)
+  }, [])
 
   useEffect(() => {
     if (initialValues.length > 0) {
-      onChange(initialValues);
+      onChange(initialValues)
     }
-  }, [initialValues]);
+  }, [initialValues])
 
   const handleAddInput = () => {
-    setInputs([...inputs, '']);
-  };
+    setInputs([...inputs, ''])
+  }
 
   const handleDeleteInput = (index: number) => {
-    const newInputs = inputs.filter((_, i) => i !== index);
-    setInputs(newInputs);
-    onChange(newInputs);
-  };
+    const newInputs = inputs.filter((_, i) => i !== index)
+    setInputs(newInputs)
+    onChange(newInputs)
+  }
 
   const handleInputChange = (value: string, index: number) => {
-    const newInputs = [...inputs];
-    newInputs[index] = value;
-    setInputs(newInputs);
-    onChange(newInputs);
-  };
+    const newInputs = [...inputs]
+    newInputs[index] = value
+    setInputs(newInputs)
+    onChange(newInputs)
+  }
 
   // Check if any input field is empty
-  const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
+  const isAddButtonDisabled = inputs.some((input) => input.trim() === '')
 
   return (
     <Container>
@@ -108,49 +107,31 @@ const InputList: React.FC<InputListProps> = ({
         <HeaderWrapper>
           <Title>{title}</Title>
           {!required && (
-            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+            <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
               (optional)
             </Text>
           )}
           {tooltip && (
             <Tooltip text={tooltip || ''}>
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
+              <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
             </Tooltip>
           )}
         </HeaderWrapper>
       )}
       {inputs.map((value, index) => (
         <InputRow key={index}>
-          <Input
-            value={value}
-            onChange={(e) => handleInputChange(e.target.value, index)}
-          />
+          <Input value={value} onChange={(e) => handleInputChange(e.target.value, index)} />
           <DeleteButton onClick={() => handleDeleteInput(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </InputRow>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddInput}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddInput}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  );
-};
+  )
+}
 
-export { InputList };
+export { InputList }
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index cbd7904ea..c85714cfa 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -1,45 +1,45 @@
-import Image from 'next/image';
-import React, { useState, useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { Input } from '../input';
-import { Button } from '../button';
-import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import Image from 'next/image'
+import React, { useState, useEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { Input } from '../input'
+import { Button } from '../button'
+import { Text } from '../text'
+import { Tooltip } from '../tooltip'
 
 interface KeyValueInputsListProps {
-  initialKeyValuePairs?: { key: string; value: string }[];
-  value?: { key: string; value: string }[];
-  title?: string;
-  tooltip?: string;
-  required?: boolean;
-  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
+  initialKeyValuePairs?: { key: string; value: string }[]
+  value?: { key: string; value: string }[]
+  title?: string
+  tooltip?: string
+  required?: boolean
+  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`;
+`
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`;
+`
 
 const Row = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 12px;
-`;
+`
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`;
+`
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -51,77 +51,74 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`;
+`
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`;
+`
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`;
+`
+
+const INITIAL = [{ key: '', value: '' }]
 
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
-  initialKeyValuePairs = [{ key: '', value: '' }],
-  value = [{ key: '', value: '' }],
+  initialKeyValuePairs = INITIAL,
+  value = INITIAL,
+  onChange,
   title,
   tooltip,
   required,
-  onChange,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] = useState<
-    { key: string; value: string }[]
-  >(value || initialKeyValuePairs);
+  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs)
 
-  const validPairsRef = useRef<{ key: string; value: string }[]>([]);
+  useEffect(() => {
+    if (!keyValuePairs.length) setKeyValuePairs(INITIAL)
+  }, [])
+
+  const validPairsRef = useRef<{ key: string; value: string }[]>([])
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
-    const validKeyValuePairs = keyValuePairs.filter(
-      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
-    );
+    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '')
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (
-      JSON.stringify(validPairsRef.current) !==
-      JSON.stringify(validKeyValuePairs)
-    ) {
-      validPairsRef.current = validKeyValuePairs;
+    if (JSON.stringify(validPairsRef.current) !== JSON.stringify(validKeyValuePairs)) {
+      validPairsRef.current = validKeyValuePairs
       if (onChange) {
-        onChange(validKeyValuePairs);
+        onChange(validKeyValuePairs)
       }
     }
-  }, [keyValuePairs, onChange]);
+  }, [keyValuePairs, onChange])
 
   const handleAddRow = () => {
-    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }]);
-  };
+    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }])
+  }
 
   const handleDeleteRow = (index: number) => {
-    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index));
-  };
+    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index))
+  }
 
   const handleKeyChange = (key: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].key = key;
-    setKeyValuePairs(newKeyValuePairs);
-  };
+    const newKeyValuePairs = [...keyValuePairs]
+    newKeyValuePairs[index].key = key
+    setKeyValuePairs(newKeyValuePairs)
+  }
 
   const handleValueChange = (value: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].value = value;
-    setKeyValuePairs(newKeyValuePairs);
-  };
+    const newKeyValuePairs = [...keyValuePairs]
+    newKeyValuePairs[index].value = value
+    setKeyValuePairs(newKeyValuePairs)
+  }
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = keyValuePairs.some(
-    (pair) => pair.key.trim() === '' || pair.value.trim() === ''
-  );
+  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '')
 
   return (
     <Container>
@@ -130,60 +127,30 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
           <HeaderWrapper>
             <Title>{title}</Title>
             {!required && (
-              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
                 (optional)
               </Text>
             )}
-            {tooltip && (
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
-            )}
+            {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />}
           </HeaderWrapper>
         </Tooltip>
       )}
       {keyValuePairs.map((pair, index) => (
         <Row key={index}>
-          <Input
-            value={pair.key}
-            onChange={(e) => handleKeyChange(e.target.value, index)}
-            placeholder="Define attribute"
-          />
-          <Image
-            src="/icons/common/arrow-right.svg"
-            alt="Arrow"
-            width={16}
-            height={16}
-          />
-          <Input
-            value={pair.value}
-            onChange={(e) => handleValueChange(e.target.value, index)}
-            placeholder="Define value"
-          />
+          <Input value={pair.key} onChange={(e) => handleKeyChange(e.target.value, index)} placeholder='Define attribute' />
+          <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
+          <Input value={pair.value} onChange={(e) => handleValueChange(e.target.value, index)} placeholder='Define value' />
           <DeleteButton onClick={() => handleDeleteRow(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </Row>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddRow}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddRow}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  );
-};
+  )
+}
 
-export default KeyValueInputsList;
+export default KeyValueInputsList
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 393e02dcc..926a55265 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -1,25 +1,25 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from 'react'
+import styled from 'styled-components'
 
-interface TextProps {
-  children: React.ReactNode;
-  color?: string;
-  size?: number;
-  weight?: number;
-  align?: 'left' | 'center' | 'right';
-  family?: 'primary' | 'secondary';
-  opacity?: number;
-  decoration?: string;
+interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  children: React.ReactNode
+  color?: string
+  size?: number
+  weight?: number
+  align?: 'left' | 'center' | 'right'
+  family?: 'primary' | 'secondary'
+  opacity?: number
+  decoration?: string
 }
 
 const TextWrapper = styled.div<{
-  color?: string;
-  size?: number;
-  weight?: number;
-  align?: 'left' | 'center' | 'right';
-  family?: 'primary' | 'secondary';
-  opacity?: number;
-  decoration?: string;
+  color?: string
+  size?: number
+  weight?: number
+  align?: 'left' | 'center' | 'right'
+  family?: 'primary' | 'secondary'
+  opacity?: number
+  decoration?: string
 }>`
   color: ${({ color, theme }) => color || theme.colors.text};
   font-size: ${({ size }) => (size !== undefined ? size : 16)}px;
@@ -29,14 +29,14 @@ const TextWrapper = styled.div<{
   text-decoration: ${({ decoration }) => decoration || 'none'};
   font-family: ${({ theme, family }) => {
     if (family === 'secondary') {
-      return theme.font_family.secondary;
+      return theme.font_family.secondary
     }
-    return theme.font_family.primary;
+    return theme.font_family.primary
   }};
-`;
+`
 
 const Text: React.FC<TextProps> = ({ children, ...props }) => {
-  return <TextWrapper {...props}>{children}</TextWrapper>;
-};
+  return <TextWrapper {...props}>{children}</TextWrapper>
+}
 
-export { Text };
+export { Text }

From a55f35b424d1b4fad90c5e8961bd10bd0fcb3038 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:45:09 +0300
Subject: [PATCH 02/11] fix: KeyValueInputsList would not always call onChange

---
 .../key-value-input-list/index.tsx            | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index c85714cfa..8cb213e6a 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -82,39 +82,39 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
     if (!keyValuePairs.length) setKeyValuePairs(INITIAL)
   }, [])
 
-  const validPairsRef = useRef<{ key: string; value: string }[]>([])
+  const recordedPairs = useRef('')
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
     const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '')
+    const stringified = JSON.stringify(validKeyValuePairs)
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (JSON.stringify(validPairsRef.current) !== JSON.stringify(validKeyValuePairs)) {
-      validPairsRef.current = validKeyValuePairs
-      if (onChange) {
-        onChange(validKeyValuePairs)
-      }
+    if (recordedPairs.current !== stringified) {
+      recordedPairs.current = stringified
+
+      if (onChange) onChange(validKeyValuePairs)
     }
   }, [keyValuePairs, onChange])
 
   const handleAddRow = () => {
-    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }])
-  }
-
-  const handleDeleteRow = (index: number) => {
-    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index))
+    setKeyValuePairs((prev) => {
+      const payload = [...prev]
+      payload.push({ key: '', value: '' })
+      return payload
+    })
   }
 
-  const handleKeyChange = (key: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs]
-    newKeyValuePairs[index].key = key
-    setKeyValuePairs(newKeyValuePairs)
+  const handleDeleteRow = (idx: number) => {
+    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx))
   }
 
-  const handleValueChange = (value: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs]
-    newKeyValuePairs[index].value = value
-    setKeyValuePairs(newKeyValuePairs)
+  const handleChange = (key: 'key' | 'value', val: string, idx: number) => {
+    setKeyValuePairs((prev) => {
+      const payload = [...prev]
+      payload[idx][key] = val
+      return payload
+    })
   }
 
   // Check if any key or value field is empty
@@ -137,9 +137,9 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
       )}
       {keyValuePairs.map((pair, index) => (
         <Row key={index}>
-          <Input value={pair.key} onChange={(e) => handleKeyChange(e.target.value, index)} placeholder='Define attribute' />
+          <Input value={pair.key} onChange={(e) => handleChange('key', e.target.value, index)} placeholder='Define attribute' />
           <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
-          <Input value={pair.value} onChange={(e) => handleValueChange(e.target.value, index)} placeholder='Define value' />
+          <Input value={pair.value} onChange={(e) => handleChange('value', e.target.value, index)} placeholder='Define value' />
           <DeleteButton onClick={() => handleDeleteRow(index)}>
             <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>

From 619bb6d2c7495cb92e23462357949c8852c617c9 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:45:44 +0300
Subject: [PATCH 03/11] feat: custom fields with state management

---
 .../action-custom-fields.tsx                  | 12 ++--
 .../main/actions/choose-action-body/index.tsx | 24 ++++++--
 .../webapp/hooks/actions/useActionFormData.ts | 60 ++++++++++++++++---
 3 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
index 259a62233..7d782038c 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -4,6 +4,8 @@ import type { ActionsType } from '@/types'
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType
+  value: any
+  setValue: (value: any) => void
 }
 
 const FieldWrapper = styled.div`
@@ -15,13 +17,13 @@ const FieldTitle = styled(Text)`
   margin-bottom: 12px;
 `
 
-const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) => {
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
   switch (actionType) {
     case 'AddClusterInfo':
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to add</FieldTitle>
-          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
@@ -29,7 +31,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) =
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to delete</FieldTitle>
-          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
@@ -37,7 +39,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) =
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to rename</FieldTitle>
-          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
@@ -45,7 +47,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) =
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to mask</FieldTitle>
-          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 94e3fe6ab..4e2b20eef 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+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'
@@ -26,7 +26,13 @@ interface ChooseActionContentProps {
 }
 
 const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
-  const { actionName, setActionName, actionNotes, setActionNotes, exportedSignals, setExportedSignals } = useActionFormData()
+  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData()
+
+  useEffect(() => {
+    return () => {
+      resetFormData()
+    }
+  }, [])
 
   return (
     <Fragment>
@@ -49,14 +55,22 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
 
       <FieldWrapper>
         <FieldTitle>Action name</FieldTitle>
-        <Input placeholder='Use a name that describes the action' value={actionName} onChange={({ target: { value } }) => setActionName(value)} />
+        <Input
+          placeholder='Use a name that describes the action'
+          value={formData.name}
+          onChange={({ target: { value } }) => handleFormChange('name', value)}
+        />
       </FieldWrapper>
 
-      <ActionCustomFields actionType={action.type} />
+      <ActionCustomFields
+        actionType={action.type}
+        value={formData.details ? JSON.parse(formData.details) : undefined}
+        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
+      />
 
       <FieldWrapper>
         <FieldTitle>Notes</FieldTitle>
-        <TextArea value={actionNotes} onChange={({ target: { value } }) => setActionNotes(value)} />
+        <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
     </Fragment>
   )
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index d69bcff01..4e6faf8a1 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,21 +1,65 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+
+type Signal = 'TRACES' | 'METRICS' | 'LOGS'
+type FormData = {
+  type: string
+  name: string
+  notes: string
+  disable: boolean
+  signals: Signal[]
+  details: string
+}
+
+const INITIAL: FormData = {
+  type: '',
+  name: '',
+  notes: '',
+  disable: true,
+  signals: [],
+  details: '',
+}
 
 export function useActionFormData() {
-  const [actionName, setActionName] = useState('')
-  const [actionNotes, setActionNotes] = useState('')
+  const [formData, setFormData] = useState({ ...INITIAL })
   const [exportedSignals, setExportedSignals] = useState({
     logs: false,
     metrics: false,
     traces: false,
   })
 
+  const resetFormData = () => {
+    setFormData({ ...INITIAL })
+  }
+
+  const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
+    setFormData((prev) => {
+      const prevVal = prev[key]
+
+      if (Array.isArray(prevVal)) {
+      }
+
+      return {
+        ...prev,
+        [key]: val,
+      }
+    })
+  }
+
+  useEffect(() => {
+    const signals: (typeof INITIAL)['signals'] = []
+
+    Object.entries(exportedSignals).forEach(([k, v]) => {
+      if (v) signals.push(k.toUpperCase() as Signal)
+    })
+
+    handleFormChange('signals', signals)
+  }, [exportedSignals])
+
   return {
-    actionName,
-    setActionName,
-    actionNotes,
-    setActionNotes,
+    formData,
+    handleFormChange,
+    resetFormData,
     exportedSignals,
     setExportedSignals,
-    // resetFormData,
   }
 }

From 389fc46dad9e08fa29de1ea3f60c820916f1cb1e Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:50:42 +0300
Subject: [PATCH 04/11] fix: semicolon

---
 .../action-custom-fields.tsx                  |  36 ++---
 .../main/actions/choose-action-body/index.tsx |  40 +++---
 .../choose-action-modal/action-options.ts     |  22 +--
 .../actions/choose-action-modal/index.tsx     |  46 +++---
 .../webapp/hooks/actions/useActionFormData.ts |  48 +++----
 .../auto-complete-input/index.tsx             | 134 +++++++++---------
 .../{DocsButton.tsx => docs-button.tsx}       |  12 +-
 .../reuseable-components/button/index.tsx     |  20 +--
 .../checkbox-list/index.tsx                   |  40 +++---
 frontend/webapp/reuseable-components/index.ts |   2 +-
 .../reuseable-components/input-list/index.tsx |  82 +++++------
 .../key-value-input-list/index.tsx            |  92 ++++++------
 .../reuseable-components/text/index.tsx       |  46 +++---
 13 files changed, 310 insertions(+), 310 deletions(-)
 rename frontend/webapp/reuseable-components/button/{DocsButton.tsx => docs-button.tsx} (81%)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
index 7d782038c..637a332c9 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -1,21 +1,21 @@
-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 type { 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) {
@@ -25,7 +25,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to add</FieldTitle>
           <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'DeleteAttribute':
       return (
@@ -33,7 +33,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to delete</FieldTitle>
           <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'RenameAttribute':
       return (
@@ -41,7 +41,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to rename</FieldTitle>
           <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'PiiMasking':
       return (
@@ -49,20 +49,20 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to mask</FieldTitle>
           <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'ErrorSampler':
-      return null
+      return null;
 
     case 'ProbabilisticSampler':
-      return null
+      return null;
 
     case 'LatencySampler':
-      return null
+      return null;
 
     default:
-      return null
+      return null;
   }
-}
+};
 
-export default ActionCustomFields
+export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 4e2b20eef..2e2e6865e 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,38 +1,38 @@
-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 React, { Fragment, useEffect } 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';
 
 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>
@@ -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>
@@ -73,7 +73,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
         <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
     </Fragment>
-  )
-}
+  );
+};
 
-export { ChooseActionBody }
+export { ChooseActionBody };
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index a271c67ba..b8699adcf 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/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[] = [
       },
     ],
   },
-]
+];
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 2924da792..347811bad 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,8 +1,8 @@
-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;
@@ -10,7 +10,7 @@ const DefineActionContainer = styled.section`
   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>
-  )
-}
+  );
+};
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index 4e6faf8a1..5c11848bf 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
-type Signal = 'TRACES' | 'METRICS' | 'LOGS'
+type Signal = 'TRACES' | 'METRICS' | 'LOGS';
 type FormData = {
-  type: string
-  name: string
-  notes: string
-  disable: boolean
-  signals: Signal[]
-  details: string
-}
+  type: string;
+  name: string;
+  notes: string;
+  disable: boolean;
+  signals: Signal[];
+  details: string;
+};
 
 const INITIAL: FormData = {
   type: '',
@@ -17,23 +17,23 @@ const INITIAL: FormData = {
   disable: true,
   signals: [],
   details: '',
-}
+};
 
 export function useActionFormData() {
-  const [formData, setFormData] = useState({ ...INITIAL })
+  const [formData, setFormData] = useState({ ...INITIAL });
   const [exportedSignals, setExportedSignals] = useState({
     logs: false,
     metrics: false,
     traces: false,
-  })
+  });
 
   const resetFormData = () => {
-    setFormData({ ...INITIAL })
-  }
+    setFormData({ ...INITIAL });
+  };
 
   const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
     setFormData((prev) => {
-      const prevVal = prev[key]
+      const prevVal = prev[key];
 
       if (Array.isArray(prevVal)) {
       }
@@ -41,19 +41,19 @@ export function useActionFormData() {
       return {
         ...prev,
         [key]: val,
-      }
-    })
-  }
+      };
+    });
+  };
 
   useEffect(() => {
-    const signals: (typeof INITIAL)['signals'] = []
+    const signals: (typeof INITIAL)['signals'] = [];
 
     Object.entries(exportedSignals).forEach(([k, v]) => {
-      if (v) signals.push(k.toUpperCase() as Signal)
-    })
+      if (v) signals.push(k.toUpperCase() as Signal);
+    });
 
-    handleFormChange('signals', signals)
-  }, [exportedSignals])
+    handleFormChange('signals', signals);
+  }, [exportedSignals]);
 
   return {
     formData,
@@ -61,5 +61,5 @@ export function useActionFormData() {
     resetFormData,
     exportedSignals,
     setExportedSignals,
-  }
+  };
 }
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 236286467..b67065705 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,84 +1,84 @@
-import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react'
-import styled from 'styled-components'
-import Image from 'next/image'
-import { Text } from '../text'
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
+import styled from 'styled-components';
+import Image from 'next/image';
+import { Text } from '../text';
 
 export interface Option {
-  id: string
-  label: string
-  description?: string
-  icon?: string
-  items?: Option[] // For handling a list of items
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  items?: Option[]; // For handling a list of items
 }
 
 interface AutocompleteInputProps {
-  options: Option[]
-  placeholder?: string
-  onOptionSelect?: (option: Option) => void
+  options: Option[];
+  placeholder?: string;
+  onOptionSelect?: (option: Option) => void;
 }
 
 const filterOptions = (optionsList: Option[], input: string): Option[] => {
   return optionsList.reduce<Option[]>((acc, option) => {
     if (option.items) {
-      const filteredSubItems = filterOptions(option.items, input)
+      const filteredSubItems = filterOptions(option.items, input);
       if (filteredSubItems.length) {
-        acc.push({ ...option, items: filteredSubItems })
+        acc.push({ ...option, items: filteredSubItems });
       }
     } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
-      acc.push(option)
+      acc.push(option);
     }
-    return acc
-  }, [])
-}
+    return acc;
+  }, []);
+};
 
 const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder = 'Type to search...', onOptionSelect }) => {
-  const [query, setQuery] = useState('')
-  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''))
-  const [showOptions, setShowOptions] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
+  const [query, setQuery] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''));
+  const [showOptions, setShowOptions] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const input = e.target.value
-    setQuery(input)
+    const input = e.target.value;
+    setQuery(input);
     if (input) {
-      const filtered = filterOptions(options, input)
-      setFilteredOptions(filtered)
-      setShowOptions(true)
+      const filtered = filterOptions(options, input);
+      setFilteredOptions(filtered);
+      setShowOptions(true);
     } else {
-      setShowOptions(false)
+      setShowOptions(false);
     }
-  }
+  };
 
   const handleOptionClick = (option: Option) => {
-    setQuery(option.label)
-    setShowOptions(false)
+    setQuery(option.label);
+    setShowOptions(false);
     if (onOptionSelect) {
-      onOptionSelect(option)
+      onOptionSelect(option);
     }
-  }
+  };
 
   const flattenOptions = (options: Option[]): Option[] => {
     return options.reduce<Option[]>((acc, option) => {
-      acc.push(option)
+      acc.push(option);
       if (option.items) {
-        acc = acc.concat(flattenOptions(option.items))
+        acc = acc.concat(flattenOptions(option.items));
       }
-      return acc
-    }, [])
-  }
+      return acc;
+    }, []);
+  };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     // Flatten the options to handle keyboard navigation - TODO: Refactor this
-    return
-    const flatOptions = flattenOptions(filteredOptions)
+    return;
+    const flatOptions = flattenOptions(filteredOptions);
     if (e.key === 'ArrowDown' && activeIndex < flatOptions.length - 1) {
-      setActiveIndex(activeIndex + 1)
+      setActiveIndex(activeIndex + 1);
     } else if (e.key === 'ArrowUp' && activeIndex > 0) {
-      setActiveIndex(activeIndex - 1)
+      setActiveIndex(activeIndex - 1);
     } else if (e.key === 'Enter' && activeIndex >= 0) {
-      handleOptionClick(flatOptions[activeIndex])
+      handleOptionClick(flatOptions[activeIndex]);
     }
-  }
+  };
 
   return (
     <AutocompleteContainer>
@@ -101,17 +101,17 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder =
         </OptionsList>
       )}
     </AutocompleteContainer>
-  )
-}
+  );
+};
 
 interface OptionItemProps {
-  option: Option
-  isActive: boolean
-  onClick: (option: Option) => void
+  option: Option;
+  isActive: boolean;
+  onClick: (option: Option) => void;
 }
 
 const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
-  const hasSubItems = !!option.items && option.items.length > 0
+  const hasSubItems = !!option.items && option.items.length > 0;
 
   return (
     <OptionItemContainer isActive={isActive} isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
@@ -135,16 +135,16 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
         )}
       </OptionContent>
     </OptionItemContainer>
-  )
-}
+  );
+};
 
-export { AutocompleteInput }
+export { AutocompleteInput };
 
 /** Styled Components */
 
 const AutocompleteContainer = styled.div`
   position: relative;
-`
+`;
 
 const InputWrapper = styled.div`
   width: calc(100% - 16px);
@@ -163,7 +163,7 @@ const InputWrapper = styled.div`
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`
+`;
 
 const StyledInput = styled.input`
   flex: 1;
@@ -187,7 +187,7 @@ const StyledInput = styled.input`
     background-color: #555;
     cursor: not-allowed;
   }
-`
+`;
 
 const OptionsList = styled.ul`
   position: absolute;
@@ -200,11 +200,11 @@ const OptionsList = styled.ul`
   border: 1px solid ${({ theme }) => theme.colors.border};
   z-index: 9999;
   padding: 12px;
-`
+`;
 
 interface OptionItemContainerProps {
-  isActive: boolean
-  isList: boolean
+  isActive: boolean;
+  isList: boolean;
 }
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
@@ -220,16 +220,16 @@ const OptionItemContainer = styled.li<OptionItemContainerProps>`
   &:hover {
     background: ${({ theme, isList }) => !isList && theme.colors.white_opacity['008']};
   }
-`
+`;
 
 const OptionContent = styled.div`
   width: 100%;
-`
+`;
 
 const SubOptionContainer = styled.div`
   display: flex;
   width: 100%;
-`
+`;
 
 const VerticalLine = styled.div`
   width: 1px;
@@ -237,28 +237,28 @@ const VerticalLine = styled.div`
   background-color: ${({ theme }) => theme.colors.white_opacity['008']};
   position: absolute;
   left: 33px;
-`
+`;
 
 const OptionLabelWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
-`
+`;
 
 const OptionLabel = styled(Text)`
   flex: 1;
   font-size: 14px;
-`
+`;
 
 const OptionDescription = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
   line-height: 150%;
-`
+`;
 
 const SubOptionsList = styled.ul`
   padding-left: 0px;
   margin: 4px 0 0 0;
   list-style: none;
   width: 100%;
-`
+`;
diff --git a/frontend/webapp/reuseable-components/button/DocsButton.tsx b/frontend/webapp/reuseable-components/button/docs-button.tsx
similarity index 81%
rename from frontend/webapp/reuseable-components/button/DocsButton.tsx
rename to frontend/webapp/reuseable-components/button/docs-button.tsx
index 266089a82..fbfdba92b 100644
--- a/frontend/webapp/reuseable-components/button/DocsButton.tsx
+++ b/frontend/webapp/reuseable-components/button/docs-button.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
-import styled from 'styled-components'
-import { Button, ButtonProps } from '.'
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Button, ButtonProps } from '.';
 
 const StyledButton = styled(Button)`
   display: flex;
@@ -9,7 +9,7 @@ const StyledButton = styled(Button)`
   font-size: 14px;
   gap: 6px;
   min-width: 100px;
-`
+`;
 
 export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
   return (
@@ -17,5 +17,5 @@ export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint
       <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
       Docs
     </StyledButton>
-  )
-}
+  );
+};
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index bba671fd3..03c1ea7fa 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -1,9 +1,9 @@
-import React, { ButtonHTMLAttributes } from 'react'
-import styled, { css } from 'styled-components'
+import React, { ButtonHTMLAttributes } from 'react';
+import styled, { css } from 'styled-components';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
-  isDisabled?: boolean
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  isDisabled?: boolean;
 }
 
 const variantStyles = {
@@ -63,7 +63,7 @@ const variantStyles = {
       background: ${({ theme }) => theme.colors.danger};
     }
   `,
-}
+};
 
 const StyledButton = styled.button<ButtonProps>`
   height: 36px;
@@ -87,10 +87,10 @@ const StyledButton = styled.button<ButtonProps>`
         background-color: #eaeaea;
       }
     `}
-`
+`;
 
 const ButtonContainer = styled.div<{
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
 }>`
   border: 2px solid transparent;
   padding: 2px;
@@ -100,7 +100,7 @@ const ButtonContainer = styled.div<{
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`
+`;
 
 export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', isDisabled = false, ...props }) => {
   return (
@@ -109,5 +109,5 @@ export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', i
         {children}
       </StyledButton>
     </ButtonContainer>
-  )
-}
+  );
+};
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index b710d83f4..4d211aaf2 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -1,37 +1,37 @@
-import React from 'react'
-import { Text } from '../text'
-import styled from 'styled-components'
-import { Checkbox } from '../checkbox'
-import { ExportedSignals } from '@/types'
+import React from 'react';
+import { Text } from '../text';
+import styled from 'styled-components';
+import { Checkbox } from '../checkbox';
+import { ExportedSignals } from '@/types';
 
 interface Monitor {
-  id: string | number
-  title: string
-  tooltip?: string
+  id: string | number;
+  title: string;
+  tooltip?: string;
 }
 
 interface CheckboxListProps {
-  monitors: Monitor[]
-  title?: string
-  exportedSignals: ExportedSignals
-  handleSignalChange: (signal: Monitor['id'], value: boolean) => void
+  monitors: Monitor[];
+  title?: string;
+  exportedSignals: ExportedSignals;
+  handleSignalChange: (signal: Monitor['id'], value: boolean) => void;
 }
 
 const ListContainer = styled.div`
   display: flex;
   gap: 32px;
-`
+`;
 
 const TextWrapper = styled.div`
   margin-bottom: 14px;
-`
+`;
 
 const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSignals, handleSignalChange }) => {
   function isItemDisabled(item: Monitor) {
-    const selectedItems = Object.values(exportedSignals).filter((value) => value)
-    const trueValues = Object.values(exportedSignals).filter(Boolean)
+    const selectedItems = Object.values(exportedSignals).filter((value) => value);
+    const trueValues = Object.values(exportedSignals).filter(Boolean);
 
-    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id])
+    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id]);
   }
 
   return (
@@ -56,7 +56,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSi
         ))}
       </ListContainer>
     </div>
-  )
-}
+  );
+};
 
-export { CheckboxList }
+export { CheckboxList };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index c139acfc8..4868acbc5 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,6 +1,6 @@
 export * from './text';
 export * from './button';
-export * from './button/DocsButton';
+export * from './button/docs-button';
 export * from './section-title';
 export * from './input';
 export * from './tooltip';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 214dd63e9..4fc9ff711 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,38 +1,38 @@
-import Image from 'next/image'
-import React, { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import { Input } from '../input'
-import { Button } from '../button'
-import { Text } from '../text'
-import { Tooltip } from '../tooltip'
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
 
 interface InputListProps {
-  initialValues?: string[]
-  title?: string
-  tooltip?: string
-  required?: boolean
-  value?: string[]
-  onChange: (values: string[]) => void
+  initialValues?: string[];
+  title?: string;
+  tooltip?: string;
+  required?: boolean;
+  value?: string[];
+  onChange: (values: string[]) => void;
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`
+`;
 
 const InputRow = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
-`
+`;
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`
+`;
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -44,62 +44,62 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`
+`;
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`
+`;
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`
+`;
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`
+`;
 
-const INITIAL = ['']
+const INITIAL = [''];
 
 const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
-  const [inputs, setInputs] = useState<string[]>(value || initialValues)
+  const [inputs, setInputs] = useState<string[]>(value || initialValues);
 
   useEffect(() => {
-    if (!inputs.length) setInputs(INITIAL)
-  }, [])
+    if (!inputs.length) setInputs(INITIAL);
+  }, []);
 
   useEffect(() => {
     if (initialValues.length > 0) {
-      onChange(initialValues)
+      onChange(initialValues);
     }
-  }, [initialValues])
+  }, [initialValues]);
 
   const handleAddInput = () => {
-    setInputs([...inputs, ''])
-  }
+    setInputs([...inputs, '']);
+  };
 
   const handleDeleteInput = (index: number) => {
-    const newInputs = inputs.filter((_, i) => i !== index)
-    setInputs(newInputs)
-    onChange(newInputs)
-  }
+    const newInputs = inputs.filter((_, i) => i !== index);
+    setInputs(newInputs);
+    onChange(newInputs);
+  };
 
   const handleInputChange = (value: string, index: number) => {
-    const newInputs = [...inputs]
-    newInputs[index] = value
-    setInputs(newInputs)
-    onChange(newInputs)
-  }
+    const newInputs = [...inputs];
+    newInputs[index] = value;
+    setInputs(newInputs);
+    onChange(newInputs);
+  };
 
   // Check if any input field is empty
-  const isAddButtonDisabled = inputs.some((input) => input.trim() === '')
+  const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
 
   return (
     <Container>
@@ -131,7 +131,7 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  )
-}
+  );
+};
 
-export { InputList }
+export { InputList };
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index 8cb213e6a..ec79435e2 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -1,45 +1,45 @@
-import Image from 'next/image'
-import React, { useState, useEffect, useRef } from 'react'
-import styled from 'styled-components'
-import { Input } from '../input'
-import { Button } from '../button'
-import { Text } from '../text'
-import { Tooltip } from '../tooltip'
+import Image from 'next/image';
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
 
 interface KeyValueInputsListProps {
-  initialKeyValuePairs?: { key: string; value: string }[]
-  value?: { key: string; value: string }[]
-  title?: string
-  tooltip?: string
-  required?: boolean
-  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void
+  initialKeyValuePairs?: { key: string; value: string }[];
+  value?: { key: string; value: string }[];
+  title?: string;
+  tooltip?: string;
+  required?: boolean;
+  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`
+`;
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`
+`;
 
 const Row = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 12px;
-`
+`;
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`
+`;
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -51,22 +51,22 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`
+`;
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`
+`;
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`
+`;
 
-const INITIAL = [{ key: '', value: '' }]
+const INITIAL = [{ key: '', value: '' }];
 
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   initialKeyValuePairs = INITIAL,
@@ -76,49 +76,49 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   tooltip,
   required,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs)
+  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs);
 
   useEffect(() => {
-    if (!keyValuePairs.length) setKeyValuePairs(INITIAL)
-  }, [])
+    if (!keyValuePairs.length) setKeyValuePairs(INITIAL);
+  }, []);
 
-  const recordedPairs = useRef('')
+  const recordedPairs = useRef('');
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
-    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '')
-    const stringified = JSON.stringify(validKeyValuePairs)
+    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '');
+    const stringified = JSON.stringify(validKeyValuePairs);
 
     // Only trigger onChange if valid key-value pairs have changed
     if (recordedPairs.current !== stringified) {
-      recordedPairs.current = stringified
+      recordedPairs.current = stringified;
 
-      if (onChange) onChange(validKeyValuePairs)
+      if (onChange) onChange(validKeyValuePairs);
     }
-  }, [keyValuePairs, onChange])
+  }, [keyValuePairs, onChange]);
 
   const handleAddRow = () => {
     setKeyValuePairs((prev) => {
-      const payload = [...prev]
-      payload.push({ key: '', value: '' })
-      return payload
-    })
-  }
+      const payload = [...prev];
+      payload.push({ key: '', value: '' });
+      return payload;
+    });
+  };
 
   const handleDeleteRow = (idx: number) => {
-    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx))
-  }
+    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx));
+  };
 
   const handleChange = (key: 'key' | 'value', val: string, idx: number) => {
     setKeyValuePairs((prev) => {
-      const payload = [...prev]
-      payload[idx][key] = val
-      return payload
-    })
-  }
+      const payload = [...prev];
+      payload[idx][key] = val;
+      return payload;
+    });
+  };
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '')
+  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
 
   return (
     <Container>
@@ -150,7 +150,7 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  )
-}
+  );
+};
 
-export default KeyValueInputsList
+export default KeyValueInputsList;
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 926a55265..e7435cf66 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -1,25 +1,25 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from 'react';
+import styled from 'styled-components';
 
 interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  children: React.ReactNode
-  color?: string
-  size?: number
-  weight?: number
-  align?: 'left' | 'center' | 'right'
-  family?: 'primary' | 'secondary'
-  opacity?: number
-  decoration?: string
+  children: React.ReactNode;
+  color?: string;
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
+  opacity?: number;
+  decoration?: string;
 }
 
 const TextWrapper = styled.div<{
-  color?: string
-  size?: number
-  weight?: number
-  align?: 'left' | 'center' | 'right'
-  family?: 'primary' | 'secondary'
-  opacity?: number
-  decoration?: string
+  color?: string;
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
+  opacity?: number;
+  decoration?: string;
 }>`
   color: ${({ color, theme }) => color || theme.colors.text};
   font-size: ${({ size }) => (size !== undefined ? size : 16)}px;
@@ -29,14 +29,14 @@ const TextWrapper = styled.div<{
   text-decoration: ${({ decoration }) => decoration || 'none'};
   font-family: ${({ theme, family }) => {
     if (family === 'secondary') {
-      return theme.font_family.secondary
+      return theme.font_family.secondary;
     }
-    return theme.font_family.primary
+    return theme.font_family.primary;
   }};
-`
+`;
 
 const Text: React.FC<TextProps> = ({ children, ...props }) => {
-  return <TextWrapper {...props}>{children}</TextWrapper>
-}
+  return <TextWrapper {...props}>{children}</TextWrapper>;
+};
 
-export { Text }
+export { Text };

From 2487549cb0d2790b035c0ce651478a54e51b492d Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:53:35 +0300
Subject: [PATCH 05/11] fix: docs link

---
 .../manage.destination.header.tsx             | 21 +++++--------------
 .../button/docs-button.tsx                    |  3 ++-
 frontend/webapp/utils/constants/urls.tsx      | 21 +++++++------------
 3 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
index fb221b83d..90bcb5abd 100644
--- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
@@ -3,6 +3,7 @@ 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;
@@ -10,11 +11,7 @@ const ManageDestinationHeaderWrapper = styled.div`
   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,9 +24,7 @@ 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} />
@@ -37,15 +32,9 @@ export function ManageDestinationHeader({
         <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>
diff --git a/frontend/webapp/reuseable-components/button/docs-button.tsx b/frontend/webapp/reuseable-components/button/docs-button.tsx
index fbfdba92b..1de7c9242 100644
--- a/frontend/webapp/reuseable-components/button/docs-button.tsx
+++ b/frontend/webapp/reuseable-components/button/docs-button.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import styled from 'styled-components';
 import { Button, ButtonProps } from '.';
+import { DOCS_LINK } from '@/utils';
 
 const StyledButton = styled(Button)`
   display: flex;
@@ -13,7 +14,7 @@ const StyledButton = styled(Button)`
 
 export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
   return (
-    <StyledButton variant={variant} onClick={() => window.open(`https://docs.odigos.io${endpoint}`, '_blank', 'noopener noreferrer')}>
+    <StyledButton variant={variant} onClick={() => window.open(`${DOCS_LINK}${endpoint}`, '_blank', 'noopener noreferrer')}>
       <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
       Docs
     </StyledButton>
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index b8702439d..921492eca 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -13,15 +13,12 @@ const API = {
   CHECK_CONNECTION: `${BASE_URL}/destinations/testConnection`,
   SOURCES: `${BASE_URL}/sources`,
   SET_ACTION: (type: string) => `${BASE_URL}/actions/types/${type}`,
-  PUT_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  PUT_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   ACTIONS: `${BASE_URL}/actions`,
-  DELETE_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  DELETE_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   OVERVIEW_METRICS: `${BASE_URL}/metrics/overview`,
   INSTRUMENTATION_RULES: `${BASE_URL}/instrumentation-rules`,
-  INSTRUMENTATION_RULE: (id: string) =>
-    `${BASE_URL}/instrumentation-rules/${id}`,
+  INSTRUMENTATION_RULE: (id: string) => `${BASE_URL}/instrumentation-rules/${id}`,
 };
 
 const QUERIES = {
@@ -35,13 +32,11 @@ const QUERIES = {
   API_ACTIONS: 'apiActions',
 };
 
-const SLACK_INVITE_LINK =
-  'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
+const SLACK_INVITE_LINK = 'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
 
-export const ACTION_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/actions/introduction';
-export const ACTION_ITEM_DOCS_LINK = 'https://docs.odigos.io/pipeline/actions';
+export const DOCS_LINK = 'https://docs.odigos.io';
+export const ACTION_DOCS_LINK = `${DOCS_LINK}/pipeline/actions/introduction`;
+export const ACTION_ITEM_DOCS_LINK = `${DOCS_LINK}/pipeline/actions`;
+export const INSTRUMENTATION_RULES_DOCS_LINK = `${DOCS_LINK}/pipeline/rules/overview`;
 
 export { API, QUERIES, SLACK_INVITE_LINK, BASE_URL };
-export const INSTRUMENTATION_RULES_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/rules/overview';

From 9e5224baad00dd8c50ba2ad43aace2cfdf9a82ff Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:55:01 +0300
Subject: [PATCH 06/11] fix: frament & imports

---
 .../main/actions/choose-action-body/index.tsx        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 2e2e6865e..4edeebb5f 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,10 +1,10 @@
-import React, { Fragment, useEffect } 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 React, { useEffect } from 'react';
 import ActionCustomFields from './action-custom-fields';
+import { useActionFormData } from '@/hooks/actions/useActionFormData';
+import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
 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};
@@ -35,7 +35,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
   }, []);
 
   return (
-    <Fragment>
+    <>
       <Description>
         {action.docsDescription}
         <DocsButton endpoint={action.docsEndpoint} />
@@ -72,7 +72,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
         <FieldTitle>Notes</FieldTitle>
         <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
-    </Fragment>
+    </>
   );
 };
 

From e4a83502e33bee2e00a4003de8b797d997274dae Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:57:23 +0300
Subject: [PATCH 07/11] fix: MONITORING_OPTIONS from global consts

---
 .../actions.table/actions.table.row.tsx       |  2 +-
 .../destinations.table.row.tsx                |  2 +-
 .../destination.card/destination.card.tsx     |  2 +-
 .../main/actions/choose-action-body/index.tsx |  2 +-
 .../setup/destination/destination.section.tsx |  2 +-
 frontend/webapp/utils/constants/monitors.ts   | 14 -----------
 .../constants/monitors.tsx}                   | 24 ++++++++++++-------
 7 files changed, 21 insertions(+), 27 deletions(-)
 delete mode 100644 frontend/webapp/utils/constants/monitors.ts
 rename frontend/webapp/{components/setup/destination/utils.tsx => utils/constants/monitors.tsx} (70%)

diff --git a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
index 8d89c227b..383712998 100644
--- a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
+++ b/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`
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
index 3112f6964..7963c7861 100644
--- a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
+++ b/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';
 
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
index 163416787..a8586dac7 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/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,
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 4edeebb5f..6262974cf 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -2,7 +2,7 @@ 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 '@/components/setup/destination/utils';
+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';
 
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index 77ac2e3de..f996a43ae 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/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,
diff --git a/frontend/webapp/utils/constants/monitors.ts b/frontend/webapp/utils/constants/monitors.ts
deleted file mode 100644
index 7bd5f3daf..000000000
--- a/frontend/webapp/utils/constants/monitors.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const MONITORS_OPTIONS = [
-  {
-    id: 'logs',
-    value: 'Logs',
-  },
-  {
-    id: 'metrics',
-    value: 'Metrics',
-  },
-  {
-    id: 'traces',
-    value: 'Traces',
-  },
-];
diff --git a/frontend/webapp/components/setup/destination/utils.tsx b/frontend/webapp/utils/constants/monitors.tsx
similarity index 70%
rename from frontend/webapp/components/setup/destination/utils.tsx
rename to frontend/webapp/utils/constants/monitors.tsx
index b4c0ba3c6..4dfeb16f0 100644
--- a/frontend/webapp/components/setup/destination/utils.tsx
+++ b/frontend/webapp/utils/constants/monitors.tsx
@@ -1,12 +1,5 @@
 import { SETUP } from '@/utils/constants';
-import {
-  LogsFocusIcon,
-  LogsIcon,
-  MetricsFocusIcon,
-  MetricsIcon,
-  TraceFocusIcon,
-  TraceIcon,
-} from '@keyval-dev/design-system';
+import { LogsFocusIcon, LogsIcon, MetricsFocusIcon, MetricsIcon, TraceFocusIcon, TraceIcon } from '@keyval-dev/design-system';
 
 export type MonitoringOption = {
   title: string;
@@ -47,3 +40,18 @@ export const MONITORING_OPTIONS = [
     tapped: true,
   },
 ];
+
+export const MONITORS_OPTIONS = [
+  {
+    id: 'logs',
+    value: 'Logs',
+  },
+  {
+    id: 'metrics',
+    value: 'Metrics',
+  },
+  {
+    id: 'traces',
+    value: 'Traces',
+  },
+];

From a908130c42151e490a925a763cacf61436e15739 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:58:32 +0300
Subject: [PATCH 08/11] fix: use const, not string

---
 .../choose-action-body/action-custom-fields.tsx  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
index 637a332c9..c3c94f01b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
-import type { ActionsType } from '@/types';
+import { ActionsType } from '@/types';
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType;
@@ -19,7 +19,7 @@ const FieldTitle = styled(Text)`
 
 const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
   switch (actionType) {
-    case 'AddClusterInfo':
+    case ActionsType.ADD_CLUSTER_INFO:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to add</FieldTitle>
@@ -27,7 +27,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'DeleteAttribute':
+    case ActionsType.DELETE_ATTRIBUTES:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to delete</FieldTitle>
@@ -35,7 +35,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'RenameAttribute':
+    case ActionsType.RENAME_ATTRIBUTES:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to rename</FieldTitle>
@@ -43,7 +43,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'PiiMasking':
+    case ActionsType.PII_MASKING:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to mask</FieldTitle>
@@ -51,13 +51,13 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'ErrorSampler':
+    case ActionsType.ERROR_SAMPLER:
       return null;
 
-    case 'ProbabilisticSampler':
+    case ActionsType.PROBABILISTIC_SAMPLER:
       return null;
 
-    case 'LatencySampler':
+    case ActionsType.LATENCY_SAMPLER:
       return null;
 
     default:

From 31f1db36411f4d65400bc21be03c176c15b76812 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 16:18:32 +0300
Subject: [PATCH 09/11] fix: dynamic signals for actions

---
 .../main/actions/choose-action-body/index.tsx | 32 +++----
 .../choose-action-modal/action-options.ts     |  9 ++
 .../actions/choose-action-modal/index.tsx     | 23 +++--
 frontend/webapp/hooks/actions/index.ts        |  1 +
 .../webapp/hooks/actions/useActionFormData.ts | 42 ++-------
 .../monitoring-checkboxes/index.tsx           | 87 +++++++++++++++++++
 frontend/webapp/utils/constants/monitors.tsx  | 10 ++-
 7 files changed, 139 insertions(+), 65 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 6262974cf..682a4bfb4 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,10 +1,10 @@
+import React from 'react';
 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 { ActionFormData } from '@/hooks/actions/useActionFormData';
 import { type ActionOption } from '../choose-action-modal/action-options';
-import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { MonitoringCheckboxes } from '@/reuseable-components/monitoring-checkboxes';
 
 const Description = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
@@ -23,17 +23,11 @@ const FieldTitle = styled(Text)`
 
 interface ChooseActionContentProps {
   action: ActionOption;
+  formData: ActionFormData;
+  handleFormChange: (key: keyof ActionFormData, val: any) => void;
 }
 
-const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
-  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData();
-
-  useEffect(() => {
-    return () => {
-      resetFormData();
-    };
-  }, []);
-
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData, handleFormChange }) => {
   return (
     <>
       <Description>
@@ -42,14 +36,10 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
       </Description>
 
       <FieldWrapper>
-        <FieldTitle>Monitoring</FieldTitle>
-        <CheckboxList
-          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 }));
-          }}
+        <MonitoringCheckboxes
+          allowedSignals={action.allowedSignals}
+          selectedSignals={formData.signals}
+          setSelectedSignals={(value) => handleFormChange('signals', value)}
         />
       </FieldWrapper>
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index b8699adcf..8b9f31f7b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,4 +1,5 @@
 import { ActionsType } from '@/types';
+import { SignalLowercase } from '@/utils';
 
 export type ActionOption = {
   id: string;
@@ -9,6 +10,7 @@ export type ActionOption = {
   docsDescription?: string;
   icon?: string;
   items?: ActionOption[];
+  allowedSignals?: SignalLowercase[];
 };
 
 export const ACTION_OPTIONS: ActionOption[] = [
@@ -21,6 +23,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
     docsDescription:
       'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'delete_attribute',
@@ -30,6 +33,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     icon: '/icons/actions/deleteattribute.svg',
     docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
     docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'rename_attribute',
@@ -40,6 +44,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
     docsDescription:
       'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'pii-masking',
@@ -49,6 +54,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     icon: '/icons/actions/piimasking.svg',
     docsEndpoint: '/pipeline/actions/attributes/piimasking',
     docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
+    allowedSignals: ['traces'],
   },
   {
     id: 'sampler',
@@ -62,6 +68,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         type: ActionsType.ERROR_SAMPLER,
         docsEndpoint: '/pipeline/actions/sampling/errorsampler',
         docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'probabilistic-sampler',
@@ -71,6 +78,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
         docsDescription:
           'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'latency-action',
@@ -80,6 +88,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         docsEndpoint: '/pipeline/actions/sampling/latencysampler',
         docsDescription:
           'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
+        allowedSignals: ['traces'],
       },
     ],
   },
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 347811bad..65cca01e8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,8 +1,9 @@
-import React, { useRef, useCallback, useState } from 'react';
 import styled from 'styled-components';
-import { AutocompleteInput, Modal, NavigationButtons, Text, Divider } from '@/reuseable-components';
+import React, { useRef, useState } from 'react';
+import { useActionFormData } from '@/hooks/actions';
 import { ChooseActionBody } from '../choose-action-body';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, Option } from '@/reuseable-components';
 
 const DefineActionContainer = styled.section`
   height: 640px;
@@ -51,17 +52,23 @@ const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
   const submitRef = useRef<(() => void) | null>(null);
   const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
+  const { formData, handleFormChange, resetFormData } = useActionFormData();
 
-  const handleNext = useCallback(() => {
+  const handleNext = () => {
     if (submitRef.current) {
       handleCloseModal();
     }
-  }, [handleCloseModal]);
+  };
 
-  const handleClose = useCallback(() => {
+  const handleClose = () => {
     handleCloseModal();
     setSelectedItem(null);
-  }, [handleCloseModal]);
+  };
+
+  const handleSelect = (item: Option) => {
+    resetFormData();
+    setSelectedItem(item);
+  };
 
   return (
     <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
@@ -75,12 +82,12 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
           </SubTitle>
         </WidthConstraint>
 
-        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={(item) => setSelectedItem(item)} />
+        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={handleSelect} />
 
         {!!selectedItem?.type ? (
           <WidthConstraint>
             <Divider margin='16px 0' />
-            <ChooseActionBody action={selectedItem} />
+            <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
           </WidthConstraint>
         ) : null}
       </DefineActionContainer>
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 7fd95ef9d..373528190 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,3 +1,4 @@
 export * from './useActionState';
 export * from './useActions';
 export * from './useGetActions';
+export * from './useActionFormData';
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index 5c11848bf..ea0f083f0 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { SignalUppercase } from '@/utils';
 
-type Signal = 'TRACES' | 'METRICS' | 'LOGS';
-type FormData = {
+export type ActionFormData = {
   type: string;
   name: string;
   notes: string;
   disable: boolean;
-  signals: Signal[];
+  signals: SignalUppercase[];
   details: string;
 };
 
-const INITIAL: FormData = {
+const INITIAL: ActionFormData = {
   type: '',
   name: '',
   notes: '',
@@ -21,45 +21,21 @@ const INITIAL: FormData = {
 
 export function useActionFormData() {
   const [formData, setFormData] = useState({ ...INITIAL });
-  const [exportedSignals, setExportedSignals] = useState({
-    logs: false,
-    metrics: false,
-    traces: false,
-  });
 
   const resetFormData = () => {
     setFormData({ ...INITIAL });
   };
 
   const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
-    setFormData((prev) => {
-      const prevVal = prev[key];
-
-      if (Array.isArray(prevVal)) {
-      }
-
-      return {
-        ...prev,
-        [key]: val,
-      };
-    });
+    setFormData((prev) => ({
+      ...prev,
+      [key]: val,
+    }));
   };
 
-  useEffect(() => {
-    const signals: (typeof INITIAL)['signals'] = [];
-
-    Object.entries(exportedSignals).forEach(([k, v]) => {
-      if (v) signals.push(k.toUpperCase() as Signal);
-    });
-
-    handleFormChange('signals', signals);
-  }, [exportedSignals]);
-
   return {
     formData,
     handleFormChange,
     resetFormData,
-    exportedSignals,
-    setExportedSignals,
   };
 }
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
new file mode 100644
index 000000000..3b4515955
--- /dev/null
+++ b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -0,0 +1,87 @@
+import { Text } from '../text';
+import { Checkbox } from '../checkbox';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
+
+interface MonitoringCheckboxesProps {
+  isVertical?: boolean;
+  allowedSignals?: (SignalUppercase | SignalLowercase)[];
+  selectedSignals: (SignalUppercase | SignalLowercase)[];
+  setSelectedSignals: (value: SignalUppercase[]) => void;
+}
+
+const ListContainer = styled.div<{ isVertical?: boolean }>`
+  display: flex;
+  flex-direction: ${({ isVertical }) => (isVertical ? 'column' : 'row')};
+  gap: ${({ isVertical }) => (isVertical ? '16px' : '32px')};
+`;
+
+const TextWrapper = styled.div`
+  margin-bottom: 14px;
+`;
+
+const monitors = MONITORING_OPTIONS;
+const initialStatuses: Record<SignalLowercase, boolean> = {
+  logs: false,
+  metrics: false,
+  traces: false,
+};
+
+const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical, allowedSignals, selectedSignals, setSelectedSignals }) => {
+  const [signalStatuses, setSignalStatuses] = useState({ ...initialStatuses });
+
+  useEffect(() => {
+    const payload = { ...initialStatuses };
+
+    selectedSignals.forEach((str) => {
+      payload[str.toLowerCase()] = true;
+    });
+
+    if (JSON.stringify(payload) !== JSON.stringify(signalStatuses)) {
+      setSignalStatuses(payload);
+    }
+  }, [selectedSignals]);
+
+  const handleChange = (key: keyof typeof signalStatuses, value: boolean) => {
+    const selected: SignalUppercase[] = [];
+
+    setSignalStatuses((prev) => {
+      const payload = { ...prev, [key]: value };
+
+      Object.entries(payload).forEach(([sig, bool]) => {
+        if (bool) selected.push(sig.toUpperCase() as SignalUppercase);
+      });
+
+      return payload;
+    });
+
+    setSelectedSignals(selected);
+  };
+
+  const isDisabled = (item: (typeof MONITORING_OPTIONS)[0]) => {
+    return !!allowedSignals && !allowedSignals.find((str) => str.toLowerCase() === item.type);
+  };
+
+  return (
+    <div>
+      <TextWrapper>
+        <Text>Monitoring</Text>
+      </TextWrapper>
+
+      <ListContainer isVertical={isVertical}>
+        {monitors.map((monitor) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.title}
+            initialValue={signalStatuses[monitor.type]}
+            onChange={(value) => handleChange(monitor.type, value)}
+            disabled={isDisabled(monitor)}
+          />
+        ))}
+      </ListContainer>
+    </div>
+  );
+};
+
+export { MonitoringCheckboxes };
diff --git a/frontend/webapp/utils/constants/monitors.tsx b/frontend/webapp/utils/constants/monitors.tsx
index 4dfeb16f0..df3983ae6 100644
--- a/frontend/webapp/utils/constants/monitors.tsx
+++ b/frontend/webapp/utils/constants/monitors.tsx
@@ -1,14 +1,18 @@
 import { SETUP } from '@/utils/constants';
 import { LogsFocusIcon, LogsIcon, MetricsFocusIcon, MetricsIcon, TraceFocusIcon, TraceIcon } from '@keyval-dev/design-system';
 
+export type SignalUppercase = 'TRACES' | 'METRICS' | 'LOGS';
+export type SignalLowercase = 'traces' | 'metrics' | 'logs';
+
 export type MonitoringOption = {
+  id: number;
   title: string;
-  tapped: boolean;
   icons: object;
-  id: number;
+  type: SignalLowercase;
+  tapped: boolean;
 };
 
-export const MONITORING_OPTIONS = [
+export const MONITORING_OPTIONS: MonitoringOption[] = [
   {
     id: 1,
     icons: {

From bc3bad30fd1dce12485a4551f155391f2bfa4c1c Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 16:40:51 +0300
Subject: [PATCH 10/11] fix: drawer & modal widths

---
 .../form-container.tsx                               | 12 ++++--------
 .../main/overview/overview-drawer/index.tsx          |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
index 71bd10c1b..4948674a1 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
@@ -14,27 +14,23 @@ export const FormContainer = ({
   <StyledFormContainer>
     <CheckboxList
       monitors={monitors}
-      title="This connection will monitor:"
+      title='This connection will monitor:'
       exportedSignals={exportedSignals}
       handleSignalChange={handleSignalChange}
     />
     <Input
-      title="Destination name"
-      placeholder="Enter destination name"
+      title='Destination name'
+      placeholder='Enter destination name'
       value={destinationName}
       onChange={(e) => setDestinationName(e.target.value)}
     />
-    <DynamicConnectDestinationFormFields
-      fields={dynamicFields}
-      onChange={handleDynamicFieldChange}
-    />
+    <DynamicConnectDestinationFormFields fields={dynamicFields} onChange={handleDynamicFieldChange} />
   </StyledFormContainer>
 );
 
 const StyledFormContainer = styled.div`
   display: flex;
   width: 100%;
-  max-width: 500px;
   flex-direction: column;
   gap: 24px;
   height: 443px;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 64d6bbda8..9186db8ba 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -26,7 +26,7 @@ const componentMap = {
   ),
 };
 
-const DRAWER_WIDTH = '560px';
+const DRAWER_WIDTH = '640px';
 
 const OverviewDrawer = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);

From 89a6594c41e1a0d38cf11a0328f9b614d10b7a5a Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 17:19:42 +0300
Subject: [PATCH 11/11] fix: stringify for graphql

---
 .../action-custom-fields.tsx                  | 68 -------------------
 .../custom-fields/add-cluster-info.tsx        | 61 +++++++++++++++++
 .../custom-fields/delete-attributes.tsx       | 42 ++++++++++++
 .../custom-fields/index.tsx                   | 45 ++++++++++++
 .../custom-fields/pii-masking.tsx             | 42 ++++++++++++
 .../custom-fields/rename-attributes.tsx       | 56 +++++++++++++++
 .../main/actions/choose-action-body/index.tsx |  8 +--
 7 files changed, 248 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
deleted file mode 100644
index c3c94f01b..000000000
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-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;
-}
-
-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 ActionsType.ADD_CLUSTER_INFO:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to add</FieldTitle>
-          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.DELETE_ATTRIBUTES:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to delete</FieldTitle>
-          <InputList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.RENAME_ATTRIBUTES:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to rename</FieldTitle>
-          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.PII_MASKING:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to mask</FieldTitle>
-          <InputList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.ERROR_SAMPLER:
-      return null;
-
-    case ActionsType.PROBABILISTIC_SAMPLER:
-      return null;
-
-    case ActionsType.LATENCY_SAMPLER:
-      return null;
-
-    default:
-      return null;
-  }
-};
-
-export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
new file mode 100644
index 000000000..3534faf59
--- /dev/null
+++ b/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;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
new file mode 100644
index 000000000..84507cb85
--- /dev/null
+++ b/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;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
new file mode 100644
index 000000000..ccd1a04ff
--- /dev/null
+++ b/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;
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
new file mode 100644
index 000000000..e286ffb82
--- /dev/null
+++ b/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;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
new file mode 100644
index 000000000..209977015
--- /dev/null
+++ b/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;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 682a4bfb4..6190373e3 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/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>