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 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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: