[GEN-2065]: fix bug where UI crashed on attempt to edit "debug destin…

…ation" (#2031)

This pull request includes several changes to the
`frontend/webapp/containers/main` directory, focusing on improving the
handling of form items and destination types. The most important changes
include removing unnecessary return statements, adding optional
parameters, and renaming variables for clarity.

Improvements to form item handling:

*
[`frontend/webapp/containers/main/actions/action-drawer/index.tsx`](diffhunk://#diff-5f56695cd2d0ca6bcd28f372653c71d8c4dab572b08715c1f36b7acc5cf50f60L67-L68):
Removed an unnecessary return statement when no matching item is found.
*
[`frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx`](diffhunk://#diff-759940924dd4ee0c6895f60e21ca040542d9cf1d3f69162677c9983d62b12f8cL65-L66):
Removed an unnecessary return statement when no matching item is found.

Enhancements to destination handling:

*
[`frontend/webapp/containers/main/destinations/destination-drawer/build-card.ts`](diffhunk://#diff-ce1c4d3c06218dab699d84dac4690cc261b1209716055609b79e97ab930e6862L10-R10):
Added an optional parameter to the `buildCard` function to handle cases
where `destinationTypeDetails` may be undefined.
*
[`frontend/webapp/containers/main/destinations/destination-drawer/index.tsx`](diffhunk://#diff-392a25e5740454eca88d8df2f33e965ed7abe29b0312e9ce5f82b8a8ae036badL59-R74):
Updated the `cardData` memoization logic to handle cases where
`destinationTypeDetails` is not provided.
*
[`frontend/webapp/containers/main/destinations/destination-drawer/index.tsx`](diffhunk://#diff-392a25e5740454eca88d8df2f33e965ed7abe29b0312e9ce5f82b8a8ae036badL122-R120):
Renamed `thisDestination` to `thisDestinationType` for clarity and
updated the corresponding references.

frontend/webapp/containers/main/actions/action-drawer/index.tsx

@@ -64,8 +64,6 @@ export const ActionDrawer: React.FC<Props> = () => {
       ACTION_OPTIONS.find(({ id }) => id === 'attributes')?.items?.find(({ type }) => type === item.type) ||
       ACTION_OPTIONS.find(({ id }) => id === 'sampler')?.items?.find(({ type }) => type === item.type);
 
-    if (!found) return undefined;
-
     loadFormWithDrawerItem(selectedItem);
 
     return found;

frontend/webapp/containers/main/destinations/destination-drawer/build-card.ts

@@ -7,7 +7,7 @@ const buildMonitorsList = (exportedSignals: ExportedSignals): string =>
     .filter((key) => exportedSignals[key])
     .join(', ');
 
-const buildCard = (destination: ActualDestination, destinationTypeDetails: DestinationDetailsResponse['destinationTypeDetails']) => {
+const buildCard = (destination: ActualDestination, destinationTypeDetails?: DestinationDetailsResponse['destinationTypeDetails']) => {
   const { exportedSignals, destinationType, fields } = destination;
 
   const arr: DataCardRow[] = [

frontend/webapp/containers/main/destinations/destination-drawer/index.tsx

@@ -56,24 +56,22 @@ export const DestinationDrawer: React.FC<Props> = () => {
   const [isFormDirty, setIsFormDirty] = useState(false);
 
   const cardData = useMemo(() => {
-    if (!selectedItem || !destinationTypeDetails) return [];
+    if (!selectedItem) return [];
 
     const { item } = selectedItem as { item: ActualDestination };
     const arr = buildCard(item, destinationTypeDetails);
 
     return arr;
   }, [selectedItem, destinationTypeDetails]);
 
-  const thisDestination = useMemo(() => {
+  const thisDestinationType = useMemo(() => {
     if (!destinationTypes.length || !selectedItem || !isEditing) {
       resetFormData();
       return undefined;
     }
 
     const { item } = selectedItem as { item: ActualDestination };
-    const found = destinationTypes.map(({ items }) => items.filter(({ type }) => type === item.destinationType.type)).filter((arr) => !!arr.length)[0][0];
-
-    if (!found) return undefined;
+    const found = destinationTypes.map(({ items }) => items.filter(({ type }) => type === item.destinationType.type)).filter((arr) => !!arr.length)?.[0]?.[0];
 
     loadFormWithDrawerItem(selectedItem);
 
@@ -119,7 +117,7 @@ export const DestinationDrawer: React.FC<Props> = () => {
         <FormContainer>
           <DestinationFormBody
             isUpdate
-            destination={thisDestination}
+            destination={thisDestinationType}
             formData={formData}
             formErrors={formErrors}
             validateForm={validateForm}

frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx

@@ -62,8 +62,6 @@ export const RuleDrawer: React.FC<Props> = () => {
     const { item } = selectedItem as { item: InstrumentationRuleSpecMapped };
     const found = RULE_OPTIONS.find(({ type }) => type === item.type);
 
-    if (!found) return undefined;
-
     loadFormWithDrawerItem(selectedItem);
 
     return found;