OU-1264: address review comments

Author: iNecas

web/src/components/dashboards/perses/ExternalPanelAddition.tsx

@@ -2,22 +2,23 @@ import { ReactElement, useEffect, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useDashboardActions, useDashboardStore } from '@perses-dev/dashboards';
 import { dashboardsOpened, dashboardsPersesPanelExternallyAdded } from '../../../store/actions';
+import type { RootState } from '../../../store';
 
 interface ExternalPanelAdditionProps {
   isEditMode: boolean;
   onEditButtonClick: () => void;
 }
 
 // Effect-only component that registers hooks related to exposing adding panels
-// from external intergrations.
+// from external integrations.
 // See components/ols-tool-ui/helpers/AddToDashboardButton.tsx for example use.
 export function ExternalPanelAddition({
   isEditMode,
   onEditButtonClick,
 }: ExternalPanelAdditionProps): ReactElement | null {
   const dispatch = useDispatch();
   const addPersesPanelExternally: any = useSelector(
-    (s: any) => s.plugins?.mcp?.dashboards?.addPersesPanelExternally,
+    (s: RootState) => s.plugins?.mcp?.dashboards?.addPersesPanelExternally,
   );
   const { openAddPanel } = useDashboardActions();
   const dashboardStore = useDashboardStore();
@@ -48,16 +49,16 @@ export function ExternalPanelAddition({
     if (addPersesPanelExternally && !queuedPanel) {
       queuePanelAddition(addPersesPanelExternally);
     }
+  }, [queuedPanel, queuePanelAddition, addPersesPanelExternally]);
 
+  useEffect(() => {
     // Apply externally added panel
     if (queuedPanel) {
       try {
-        const groupId = dashboardStore.panelGroupOrder[0];
-        queuedPanel.groupId = groupId;
-
         // Use the temporary panelEditor to add changes to the dashboard.
         const panelEditor = dashboardStore.panelEditor;
-        panelEditor.applyChanges(queuedPanel);
+        const groupId = dashboardStore.panelGroupOrder[0];
+        panelEditor.applyChanges({ ...queuedPanel, groupId });
         panelEditor.close();
       } finally {
         // Clear the externally added panel after applying changes.
@@ -68,14 +69,7 @@ export function ExternalPanelAddition({
         dispatch(dashboardsPersesPanelExternallyAdded());
       }
     }
-  }, [
-    dispatch,
-    dashboardStore.panelGroupOrder,
-    dashboardStore.panelEditor,
-    queuePanelAddition,
-    queuedPanel,
-    addPersesPanelExternally,
-  ]);
+  }, [dispatch, dashboardStore.panelGroupOrder, dashboardStore.panelEditor, queuedPanel]);
 
   // Advertise when a dashboard is opened/closed
   useEffect(() => {

web/src/components/ols-tool-ui/helpers/AddToDashboardButton.tsx

@@ -10,6 +10,7 @@ import type { PanelDefinition } from '@perses-dev/core';
 import { InfoTooltip } from '@perses-dev/components';
 
 import { dashboardsAddPersesPanelExternally } from '../../../store/actions';
+import type { RootState } from '../../../store';
 
 export const HeaderIconButton: StyledComponent<IconButtonProps & { theme?: Theme }> = styled(
   IconButton,
@@ -60,7 +61,9 @@ export const AddToDashboardButton: React.FC<AddToDashboardButtonProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
-  const isDashboardOpen: boolean = useSelector((s: any) => s.plugins?.mcp?.dashboards?.isOpened);
+  const isDashboardOpen: boolean = useSelector(
+    (s: RootState) => s.plugins?.mcp?.dashboards?.isOpened,
+  );
   const addToPersesDashboard = React.useCallback(() => {
     const panelDefinition = createPanelDefinition(query, name, description);
     dispatch(dashboardsAddPersesPanelExternally(panelDefinition));