OU-1264: address review comments

Author: iNecas

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

@@ -400,7 +400,12 @@ export function PersesWrapper({ children, project }: PersesWrapperProps) {
   );
 }
 
-function InnerWrapper({ children, project }) {
+interface InnerWrapperProps {
+  children?: React.ReactNode;
+  project: string;
+}
+
+function InnerWrapper({ children, project }: InnerWrapperProps) {
   const [dashboardName] = useQueryParam(QueryParams.Dashboard, StringParam);
   const { data } = usePluginBuiltinVariableDefinitions();
   const { persesDashboard, persesDashboardLoading } = useFetchPersesDashboard(

web/src/components/dashboards/perses/dashboard-app.tsx

@@ -29,7 +29,7 @@ import { useUpdateDashboardMutation } from './dashboard-api';
 import { useTranslation } from 'react-i18next';
 import { useToast } from './ToastProvider';
 import { useSearchParams } from 'react-router';
-import { useExternalPanelAddition } from './useExternalPanelAddition';
+import { setupExternalPanelAddition } from './setupExternalPanelAddition';
 
 export interface DashboardAppProps {
   dashboardResource: DashboardResource | EphemeralDashboardResource;
@@ -125,7 +125,9 @@ export const OCPDashboardApp = (props: DashboardAppProps): ReactElement => {
     }
   };
 
-  useExternalPanelAddition({ isEditMode, onEditButtonClick });
+  // Register hooks related to exposing adding panels from external intergrations.
+  // See components/ols-tool-ui/helpers/AddToDashboardButton.tsx for example use.
+  setupExternalPanelAddition({ isEditMode, onEditButtonClick });
 
   const updateDashboardMutation = useUpdateDashboardMutation();
 

…oards/perses/useExternalPanelAddition.ts …rds/perses/setupExternalPanelAddition.tsweb/src/components/dashboards/perses/useExternalPanelAddition.ts renamed to web/src/components/dashboards/perses/setupExternalPanelAddition.ts web/src/components/dashboards/perses/useExternalPanelAddition.ts renamed to web/src/components/dashboards/perses/setupExternalPanelAddition.ts

@@ -3,15 +3,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useDashboardActions, useDashboardStore } from '@perses-dev/dashboards';
 import { dashboardsOpened, dashboardsPersesPanelExternallyAdded } from '../../../store/actions';
 
-interface UseExternalPanelAdditionOptions {
+interface SetupExternalPanelAdditionOptions {
   isEditMode: boolean;
   onEditButtonClick: () => void;
 }
 
-export function useExternalPanelAddition({
+export function setupExternalPanelAddition({
   isEditMode,
   onEditButtonClick,
-}: UseExternalPanelAdditionOptions) {
+}: SetupExternalPanelAdditionOptions) {
   const dispatch = useDispatch();
   const addPersesPanelExternally: any = useSelector(
     (s: any) => s.plugins?.mcp?.dashboards?.addPersesPanelExternally,
@@ -67,7 +67,7 @@ export function useExternalPanelAddition({
     addPersesPanelExternally,
   ]);
 
-  // Advertise when custom dashboard is opened/closed
+  // Advertise when a dashboard is opened/closed
   useEffect(() => {
     dispatch(dashboardsOpened(true));
     return () => {

web/src/components/ols-tool-ui/ShowTimeseries.tsx

@@ -7,7 +7,7 @@ import { OlsToolUIPersesWrapper } from './helpers/OlsToolUIPersesWrapper';
 import { AddToDashboardButton } from './helpers/AddToDashboardButton';
 import { useTimeRange } from './helpers/useTimeRange';
 
-type ExecuteRangeQueryTool = {
+type ShowTimeseriesTool = {
   args: {
     title: string;
     description: string;
@@ -18,7 +18,7 @@ type ExecuteRangeQueryTool = {
   };
 };
 
-export const ShowTimeseries: React.FC<{ tool: ExecuteRangeQueryTool }> = ({ tool }) => {
+export const ShowTimeseries: React.FC<{ tool: ShowTimeseriesTool }> = ({ tool }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { query, title, description, start, end, duration } = tool.args;
   const timeRange = useTimeRange(start, end, duration);

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

@@ -60,15 +60,13 @@ export const AddToDashboardButton: React.FC<AddToDashboardButtonProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
-  const isCustomDashboardOpen: boolean = useSelector(
-    (s: any) => s.plugins?.mcp?.dashboards?.isOpened,
-  );
+  const isDashboardOpen: boolean = useSelector((s: any) => s.plugins?.mcp?.dashboards?.isOpened);
   const addToPersesDashboard = React.useCallback(() => {
     const panelDefinition = createPanelDefinition(query, name, description);
     dispatch(dashboardsAddPersesPanelExternally(panelDefinition));
   }, [query, name, description, dispatch]);
 
-  if (!isCustomDashboardOpen) {
+  if (!isDashboardOpen) {
     // No dashboard is opened - nothing to add to.
     return null;
   }

web/src/store/actions.ts

@@ -224,6 +224,9 @@ type Actions = {
   dashboardsSetPollInterval: typeof dashboardsSetPollInterval;
   dashboardsSetTimespan: typeof dashboardsSetTimespan;
   dashboardsVariableOptionsLoaded: typeof dashboardsVariableOptionsLoaded;
+  dashboardsOpened: typeof dashboardsOpened;
+  dashboardsPersesPanelExternallyAdded: typeof dashboardsPersesPanelExternallyAdded;
+  dashboardsAddPersesPanelExternally: typeof dashboardsAddPersesPanelExternally;
   queryBrowserAddQuery: typeof queryBrowserAddQuery;
   queryBrowserDuplicateQuery: typeof queryBrowserDuplicateQuery;
   queryBrowserDeleteAllQueries: typeof queryBrowserDeleteAllQueries;

web/src/store/store.ts

@@ -29,7 +29,7 @@ export type ObserveState = {
     timespan: number;
     variables: Record<string, Variable>;
     isOpened: boolean;
-    addPersesPanelExternally: PanelDefinition;
+    addPersesPanelExternally: PanelDefinition | null;
   };
   incidentsData: {
     incidents: Array<any>;