From 4a1debfa211febf53674f207cbc679ca622db879 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Thu, 19 Dec 2024 18:19:15 +0200 Subject: [PATCH] [GEN-2065]: fix bug where UI crashed on attempt to edit "debug destination" (#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. --- .../containers/main/actions/action-drawer/index.tsx | 2 -- .../main/destinations/destination-drawer/build-card.ts | 2 +- .../main/destinations/destination-drawer/index.tsx | 10 ++++------ .../main/instrumentation-rules/rule-drawer/index.tsx | 2 -- 4 files changed, 5 insertions(+), 11 deletions(-) diff --git a/frontend/webapp/containers/main/actions/action-drawer/index.tsx b/frontend/webapp/containers/main/actions/action-drawer/index.tsx index 22edc6c513..b24cb28036 100644 --- a/frontend/webapp/containers/main/actions/action-drawer/index.tsx +++ b/frontend/webapp/containers/main/actions/action-drawer/index.tsx @@ -64,8 +64,6 @@ export const ActionDrawer: React.FC = () => { 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; diff --git a/frontend/webapp/containers/main/destinations/destination-drawer/build-card.ts b/frontend/webapp/containers/main/destinations/destination-drawer/build-card.ts index 1ad9d095b7..c21c3b28b2 100644 --- a/frontend/webapp/containers/main/destinations/destination-drawer/build-card.ts +++ b/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[] = [ diff --git a/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx index f2276978b0..24f8385d12 100644 --- a/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx +++ b/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx @@ -56,7 +56,7 @@ export const DestinationDrawer: React.FC = () => { 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); @@ -64,16 +64,14 @@ export const DestinationDrawer: React.FC = () => { 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 = () => { = () => { const { item } = selectedItem as { item: InstrumentationRuleSpecMapped }; const found = RULE_OPTIONS.find(({ type }) => type === item.type); - if (!found) return undefined; - loadFormWithDrawerItem(selectedItem); return found;