OU-1264: address linting issues

Author: iNecas

web/cypress/component/mocks/OlsToolUIPersesWrapper.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
-
-export const OlsToolUIPersesWrapper = ({ children, initialTimeRange, initialTimeZone = 'local' }) => (
+export const OlsToolUIPersesWrapper = ({
+  children,
+  initialTimeRange,
+  initialTimeZone = 'local',
+}) => (
   <div
     data-testid="perses-wrapper"
     data-time-range={JSON.stringify(initialTimeRange)}

web/cypress/component/mocks/perses-dashboards.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const Panel = ({ definition, panelOptions }) => (
   <div data-testid="mock-panel">
     <div data-testid="panel-definition" data-definition={JSON.stringify(definition)} />

web/cypress/component/ols-tool-ui/ShowTimeseries.cy.tsx

@@ -98,20 +98,25 @@ describe('ShowTimeseries', () => {
           if (expected.startISO) {
             expect(timeRange.start).to.eq(expected.startISO);
           } else {
-            expect(new Date(timeRange.start).getTime()).to.be.closeTo(now - expected.startOffsetMs, 5000);
+            expect(new Date(timeRange.start).getTime()).to.be.closeTo(
+              now - expected.startOffsetMs,
+              5000,
+            );
           }
           if (expected.endISO) {
             expect(timeRange.end).to.eq(expected.endISO);
           } else {
-            expect(new Date(timeRange.end).getTime()).to.be.closeTo(now - expected.endOffsetMs, 5000);
+            expect(new Date(timeRange.end).getTime()).to.be.closeTo(
+              now - expected.endOffsetMs,
+              5000,
+            );
           }
         });
     });
   });
 
   it('timezone support: defaults to UTC when not specified', () => {
     cy.mount(<ShowTimeseries tool={tool} />);
-    cy.get('[data-testid="perses-wrapper"]')
-      .should('have.attr', 'data-timezone', 'UTC');
+    cy.get('[data-testid="perses-wrapper"]').should('have.attr', 'data-timezone', 'UTC');
   });
 });

web/cypress/support/component.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import '@patternfly/react-core/dist/styles/base.css';
+import * as ReactI18next from 'react-i18next';
 
 function mount(jsx: React.ReactElement) {
   const root = document.querySelector('[data-cy-root]');
@@ -10,6 +11,7 @@ function mount(jsx: React.ReactElement) {
 }
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       mount: typeof mount;
@@ -22,14 +24,11 @@ Cypress.Commands.add('mount', mount);
 // Mock react-i18next for all component tests: returns the key with {{interpolations}} replaced
 const mockT = (key: string, opts?: Record<string, string>) => {
   if (opts) {
-    return Object.entries(opts).reduce(
-      (result, [k, v]) => result.replace(`{{${k}}}`, v),
-      key,
-    );
+    return Object.entries(opts).reduce((result, [k, v]) => result.replace(`{{${k}}}`, v), key);
   }
   return key;
 };
 
 beforeEach(() => {
-  cy.stub(require('react-i18next'), 'useTranslation').returns({ t: mockT });
+  cy.stub(ReactI18next, 'useTranslation').returns({ t: mockT });
 });

…rds/perses/setupExternalPanelAddition.ts …hboards/perses/ExternalPanelAddition.tsxweb/src/components/dashboards/perses/setupExternalPanelAddition.ts renamed to web/src/components/dashboards/perses/ExternalPanelAddition.tsx web/src/components/dashboards/perses/setupExternalPanelAddition.ts renamed to web/src/components/dashboards/perses/ExternalPanelAddition.tsx

@@ -1,17 +1,20 @@
-import { useEffect, useState, useCallback } from 'react';
+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';
 
-interface SetupExternalPanelAdditionOptions {
+interface ExternalPanelAdditionProps {
   isEditMode: boolean;
   onEditButtonClick: () => void;
 }
 
-export function setupExternalPanelAddition({
+// Effect-only component that registers hooks related to exposing adding panels
+// from external intergrations.
+// See components/ols-tool-ui/helpers/AddToDashboardButton.tsx for example use.
+export function ExternalPanelAddition({
   isEditMode,
   onEditButtonClick,
-}: SetupExternalPanelAdditionOptions) {
+}: ExternalPanelAdditionProps): ReactElement | null {
   const dispatch = useDispatch();
   const addPersesPanelExternally: any = useSelector(
     (s: any) => s.plugins?.mcp?.dashboards?.addPersesPanelExternally,
@@ -74,4 +77,6 @@ export function setupExternalPanelAddition({
       dispatch(dashboardsOpened(false));
     };
   }, [dispatch]);
+
+  return null;
 }

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 { setupExternalPanelAddition } from './setupExternalPanelAddition';
+import { ExternalPanelAddition } from './ExternalPanelAddition';
 
 export interface DashboardAppProps {
   dashboardResource: DashboardResource | EphemeralDashboardResource;
@@ -125,10 +125,6 @@ export const OCPDashboardApp = (props: DashboardAppProps): ReactElement => {
     }
   };
 
-  // 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();
 
   const onSave = useCallback(
@@ -173,6 +169,7 @@ export const OCPDashboardApp = (props: DashboardAppProps): ReactElement => {
         flexDirection: 'column',
       }}
     >
+      <ExternalPanelAddition isEditMode={isEditMode} onEditButtonClick={onEditButtonClick} />
       <OCPDashboardToolbar
         dashboardName={dashboardResource.metadata.name}
         initialVariableIsSticky={isInitialVariableSticky}