chore(frontend): comprehensive TypeScript quality improvements (#37625)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import sinon from 'sinon';
 import {
   render,
   screen,
@@ -32,7 +31,7 @@ import * as downloadAsImage from 'src/utils/downloadAsImage';
 import * as exploreUtils from 'src/explore/exploreUtils';
 import { FeatureFlag, VizType } from '@superset-ui/core';
 import { useUnsavedChangesPrompt } from 'src/hooks/useUnsavedChangesPrompt';
-import ExploreHeader from '.';
+import ExploreHeader, { ExploreChartHeaderProps } from '.';
 import { getChartMetadataRegistry } from '@superset-ui/core';
 import fs from 'fs';
 import path from 'path';
@@ -56,90 +55,99 @@ const mockExportCurrentViewBehavior = () => {
   } as any);
 };
 
-const createProps = (additionalProps = {}) => ({
-  chart: {
-    id: 1,
-    latestQueryFormData: {
-      viz_type: VizType.Histogram,
-      datasource: '49__table',
-      slice_id: 318,
-      url_params: {},
-      granularity_sqla: 'time_start',
-      time_range: 'No filter',
-      all_columns_x: ['age'],
-      adhoc_filters: [],
-      row_limit: 10000,
-      groupby: null,
-      color_scheme: 'supersetColors',
-      label_colors: {},
-      link_length: '25',
-      x_axis_label: 'age',
-      y_axis_label: 'count',
-      server_pagination: false as any,
-    },
-    chartStatus: 'rendered',
-  },
-  slice: {
-    cache_timeout: null,
-    changed_on: '2021-03-19T16:30:56.750230',
-    changed_on_humanized: '7 days ago',
-    datasource: 'FCC 2018 Survey',
-    description: 'Simple description',
-    description_markeddown: '',
-    edit_url: '/chart/edit/318',
-    form_data: {
-      adhoc_filters: [],
-      all_columns_x: ['age'],
-      color_scheme: 'supersetColors',
-      datasource: '49__table',
-      granularity_sqla: 'time_start',
-      groupby: null,
-      label_colors: {},
-      link_length: '25',
-      queryFields: { groupby: 'groupby' },
-      row_limit: 10000,
-      slice_id: 318,
-      time_range: 'No filter',
-      url_params: {},
-      viz_type: VizType.Histogram,
-      x_axis_label: 'age',
-      y_axis_label: 'count',
-    },
-    modified: '<span class="no-wrap">7 days ago</span>',
-    owners: [
-      {
-        text: 'Superset Admin',
-        value: 1,
+const createProps = (additionalProps = {}) =>
+  ({
+    chart: {
+      id: 1,
+      latestQueryFormData: {
+        viz_type: VizType.Histogram,
+        datasource: '49__table',
+        slice_id: 318,
+        url_params: {},
+        granularity_sqla: 'time_start',
+        time_range: 'No filter',
+        all_columns_x: ['age'],
+        adhoc_filters: [],
+        row_limit: 10000,
+        groupby: null,
+        color_scheme: 'supersetColors',
+        label_colors: {},
+        link_length: '25',
+        x_axis_label: 'age',
+        y_axis_label: 'count',
+        server_pagination: false,
       },
-    ],
-    slice_id: 318,
-    slice_name: 'Age distribution of respondents',
-    slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20318%7D',
-  },
-  slice_name: 'Age distribution of respondents',
-  actions: {
-    postChartFormData: jest.fn(),
-    updateChartTitle: jest.fn(),
-    fetchFaveStar: jest.fn(),
-    saveFaveStar: jest.fn(),
-    redirectSQLLab: jest.fn(),
-  },
-  user: {
-    userId: 1,
-  },
-  metadata: {
-    created_on_humanized: 'a week ago',
-    changed_on_humanized: '2 days ago',
-    owners: ['John Doe'],
-    created_by: 'John Doe',
-    changed_by: 'John Doe',
-    dashboards: [{ id: 1, dashboard_title: 'Test' }],
-  },
-  canOverwrite: false,
-  canDownload: false,
-  isStarred: false,
-  ...additionalProps,
-});
+      chartStatus: 'rendered' as const,
+      chartAlert: null,
+      chartUpdateEndTime: null,
+      chartUpdateStartTime: 0,
+      lastRendered: 0,
+      sliceFormData: null,
+      queryController: null,
+      queriesResponse: null,
+      triggerQuery: false,
+    },
+    slice: {
+      cache_timeout: null,
+      changed_on: '2021-03-19T16:30:56.750230',
+      changed_on_humanized: '7 days ago',
+      datasource: 'FCC 2018 Survey',
+      description: 'Simple description',
+      description_markeddown: '',
+      edit_url: '/chart/edit/318',
+      form_data: {
+        adhoc_filters: [],
+        all_columns_x: ['age'],
+        color_scheme: 'supersetColors',
+        datasource: '49__table',
+        granularity_sqla: 'time_start',
+        groupby: null,
+        label_colors: {},
+        link_length: '25',
+        queryFields: { groupby: 'groupby' },
+        row_limit: 10000,
+        slice_id: 318,
+        time_range: 'No filter',
+        url_params: {},
+        viz_type: VizType.Histogram,
+        x_axis_label: 'age',
+        y_axis_label: 'count',
+      },
+      modified: '<span class="no-wrap">7 days ago</span>',
+      owners: [
+        {
+          text: 'Superset Admin',
+          value: 1,
+        },
+      ],
+      slice_id: 318,
+      slice_name: 'Age distribution of respondents',
+      slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20318%7D',
+    },
+    sliceName: 'Age distribution of respondents',
+    actions: {
+      postChartFormData: jest.fn(),
+      updateChartTitle: jest.fn(),
+      fetchFaveStar: jest.fn(),
+      saveFaveStar: jest.fn(),
+      redirectSQLLab: jest.fn(),
+    },
+    user: {
+      userId: 1,
+    },
+    metadata: {
+      created_on_humanized: 'a week ago',
+      changed_on_humanized: '2 days ago',
+      owners: ['John Doe'],
+      created_by: 'John Doe',
+      changed_by: 'John Doe',
+      dashboards: [{ id: 1, dashboard_title: 'Test' }],
+    },
+    canOverwrite: false,
+    canDownload: false,
+    isStarred: false,
+    ...additionalProps,
+  }) as unknown as ExploreChartHeaderProps;
 
 fetchMock.post(
   'http://api/v1/chart/data?form_data=%7B%22slice_id%22%3A318%7D',
@@ -165,27 +173,40 @@ describe('ExploreChartHeader', () => {
     const props = createProps();
     render(<ExploreHeader {...props} />, { useRedux: true });
     const newChartName = 'New chart name';
-    const prevChartName = props.slice_name;
+    const prevChartName = props.sliceName;
+
+    // Wait for the component to render with the chart title
     expect(
-      await screen.findByText(/add the name of the chart/i),
+      await screen.findByDisplayValue(prevChartName ?? ''),
     ).toBeInTheDocument();
 
-    userEvent.click(screen.getByLabelText('Menu actions trigger'));
-    userEvent.click(screen.getByText('Edit chart properties'));
+    await userEvent.click(screen.getByLabelText('Menu actions trigger'));
+    await userEvent.click(screen.getByText('Edit chart properties'));
 
     const nameInput = await screen.findByRole('textbox', { name: 'Name' });
 
-    userEvent.clear(nameInput);
-    userEvent.type(nameInput, newChartName);
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, newChartName);
 
     expect(screen.getByDisplayValue(newChartName)).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
 
-    userEvent.click(screen.getByLabelText('Menu actions trigger'));
-    userEvent.click(screen.getByText('Edit chart properties'));
+    // Wait for the modal to close
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('textbox', { name: 'Name' }),
+      ).not.toBeInTheDocument();
+    });
 
-    expect(await screen.findByDisplayValue(prevChartName)).toBeInTheDocument();
+    await userEvent.click(screen.getByLabelText('Menu actions trigger'));
+    await userEvent.click(screen.getByText('Edit chart properties'));
+
+    // Wait for the modal to reopen and verify the name was reset
+    const reopenedNameInput = await screen.findByRole('textbox', {
+      name: 'Name',
+    });
+    expect(reopenedNameInput).toHaveValue(prevChartName ?? '');
   });
 
   test('renders the metadata bar when saved', async () => {
@@ -203,7 +224,7 @@ describe('ExploreChartHeader', () => {
       <ExploreHeader
         {...props}
         metadata={{
-          ...props.metadata,
+          ...props.metadata!,
           dashboards: [
             { id: 1, dashboard_title: 'Test' },
             { id: 2, dashboard_title: 'Test2' },
@@ -575,12 +596,12 @@ describe('Additional actions tests', () => {
 
   // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
   describe('Export All Data', () => {
-    let spyDownloadAsImage = sinon.spy();
-    let spyExportChart = sinon.spy();
+    let spyDownloadAsImage: jest.SpyInstance;
+    let spyExportChart: jest.SpyInstance;
 
     beforeEach(() => {
-      spyDownloadAsImage = sinon.spy(downloadAsImage, 'default');
-      spyExportChart = sinon.spy(exploreUtils, 'exportChart');
+      spyDownloadAsImage = jest.spyOn(downloadAsImage, 'default');
+      spyExportChart = jest.spyOn(exploreUtils, 'exportChart');
 
       (useUnsavedChangesPrompt as jest.Mock).mockReturnValue({
         showModal: false,
@@ -592,8 +613,8 @@ describe('Additional actions tests', () => {
     });
 
     afterEach(async () => {
-      spyDownloadAsImage.restore();
-      spyExportChart.restore();
+      spyDownloadAsImage.mockRestore();
+      spyExportChart.mockRestore();
       // Wait for any pending effects to complete
       await new Promise(resolve => setTimeout(resolve, 0));
     });
@@ -614,7 +635,7 @@ describe('Additional actions tests', () => {
       userEvent.click(downloadAsImageElement);
 
       await waitFor(() => {
-        expect(spyDownloadAsImage.callCount).toBe(1);
+        expect(spyDownloadAsImage.mock.calls.length).toBe(1);
       });
     });
 
@@ -628,8 +649,8 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Export All Data'));
       const exportCSVElement = await screen.findByText('Export to .CSV');
       userEvent.click(exportCSVElement);
-      expect(spyExportChart.callCount).toBe(0);
-      spyExportChart.restore();
+      expect(spyExportChart.mock.calls.length).toBe(0);
+      spyExportChart.mockRestore();
     });
 
     test('Should export to CSV if canDownload=true', async () => {
@@ -644,8 +665,8 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Export All Data'));
       const exportCSVElement = await screen.findByText('Export to .CSV');
       userEvent.click(exportCSVElement);
-      expect(spyExportChart.callCount).toBe(1);
-      spyExportChart.restore();
+      expect(spyExportChart.mock.calls.length).toBe(1);
+      spyExportChart.mockRestore();
     });
 
     test('Should not export to JSON if canDownload=false', async () => {
@@ -658,8 +679,8 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Export All Data'));
       const exportJsonElement = await screen.findByText('Export to .JSON');
       userEvent.click(exportJsonElement);
-      expect(spyExportChart.callCount).toBe(0);
-      spyExportChart.restore();
+      expect(spyExportChart.mock.calls.length).toBe(0);
+      spyExportChart.mockRestore();
     });
 
     test('Should export to JSON if canDownload=true', async () => {
@@ -674,7 +695,7 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Export All Data'));
       const exportJsonElement = await screen.findByText('Export to .JSON');
       userEvent.click(exportJsonElement);
-      expect(spyExportChart.callCount).toBe(1);
+      expect(spyExportChart.mock.calls.length).toBe(1);
     });
 
     test('Should not export to pivoted CSV if canDownloadCSV=false and viz_type=pivot_table_v2', async () => {
@@ -691,7 +712,7 @@ describe('Additional actions tests', () => {
         'Export to pivoted .CSV',
       );
       userEvent.click(exportCSVElement);
-      expect(spyExportChart.callCount).toBe(0);
+      expect(spyExportChart.mock.calls.length).toBe(0);
     });
 
     test('Should export to pivoted CSV if canDownloadCSV=true and viz_type=pivot_table_v2', async () => {
@@ -709,7 +730,7 @@ describe('Additional actions tests', () => {
         'Export to pivoted .CSV',
       );
       userEvent.click(exportCSVElement);
-      expect(spyExportChart.callCount).toBe(1);
+      expect(spyExportChart.mock.calls.length).toBe(1);
     });
 
     test('Should not export to Excel if canDownload=false', async () => {
@@ -722,8 +743,8 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Export All Data'));
       const exportExcelElement = await screen.findByText('Export to Excel');
       userEvent.click(exportExcelElement);
-      expect(spyExportChart.callCount).toBe(0);
-      spyExportChart.restore();
+      expect(spyExportChart.mock.calls.length).toBe(0);
+      spyExportChart.mockRestore();
     });
 
     test('Should export to Excel if canDownload=true', async () => {
@@ -737,13 +758,13 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Export All Data'));
       const exportExcelElement = await screen.findByText('Export to Excel');
       userEvent.click(exportExcelElement);
-      expect(spyExportChart.callCount).toBe(1);
+      expect(spyExportChart.mock.calls.length).toBe(1);
     });
   });
 
   describe('Current View', () => {
-    let spyDownloadAsImage = sinon.spy();
-    let spyExportChart = sinon.spy();
+    let spyDownloadAsImage: jest.SpyInstance;
+    let spyExportChart: jest.SpyInstance;
 
     let originalURL: typeof URL;
     let anchorClickSpy: jest.SpyInstance;
@@ -779,8 +800,8 @@ describe('Additional actions tests', () => {
     });
 
     beforeEach(() => {
-      spyDownloadAsImage = sinon.spy(downloadAsImage, 'default');
-      spyExportChart = sinon.spy(exploreUtils, 'exportChart');
+      spyDownloadAsImage = jest.spyOn(downloadAsImage, 'default');
+      spyExportChart = jest.spyOn(exploreUtils, 'exportChart');
 
       (useUnsavedChangesPrompt as jest.Mock).mockReturnValue({
         showModal: false,
@@ -792,8 +813,8 @@ describe('Additional actions tests', () => {
     });
 
     afterEach(async () => {
-      spyDownloadAsImage.restore();
-      spyExportChart.restore();
+      spyDownloadAsImage.mockRestore();
+      spyExportChart.mockRestore();
       await new Promise(r => setTimeout(r, 0));
     });
 
@@ -809,14 +830,14 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Data Export Options'));
       userEvent.hover(await screen.findByText('Export Current View'));
 
-      // clear previous calls on the sinon spy you created in beforeEach
-      spyDownloadAsImage.resetHistory();
+      // clear previous calls on the jest spy created in beforeEach
+      spyDownloadAsImage.mockClear();
 
       const item = await screen.findByText('Export screenshot (jpeg)');
       userEvent.click(item);
 
       await waitFor(() => {
-        expect(spyDownloadAsImage.called).toBe(true);
+        expect(spyDownloadAsImage).toHaveBeenCalled();
       });
 
       getSpy.mockRestore();
@@ -849,11 +870,11 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Data Export Options'));
       userEvent.hover(await screen.findByText('Export Current View'));
 
-      spyExportChart.resetHistory();
+      spyExportChart.mockClear();
 
       userEvent.click(await screen.findByText('Export to .CSV'));
 
-      expect(spyExportChart.called).toBe(false); // or: expect(spyExportChart.callCount).toBe(0)
+      expect(spyExportChart).not.toHaveBeenCalled();
 
       getSpy.mockRestore();
     });
@@ -879,10 +900,10 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Data Export Options'));
       userEvent.hover(await screen.findByText('Export Current View'));
 
-      spyExportChart.resetHistory();
+      spyExportChart.mockClear();
       userEvent.click(await screen.findByText('Export to .JSON'));
 
-      expect(spyExportChart.called).toBe(false);
+      expect(spyExportChart).not.toHaveBeenCalled();
 
       getSpy.mockRestore();
     });
@@ -901,11 +922,11 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Data Export Options'));
       userEvent.hover(await screen.findByText('Export Current View'));
 
-      spyExportChart.resetHistory();
+      spyExportChart.mockClear();
       userEvent.click(await screen.findByText('Export to .CSV'));
 
-      expect(spyExportChart.callCount).toBe(1);
-      const args = spyExportChart.getCall(0).args[0];
+      expect(spyExportChart.mock.calls.length).toBe(1);
+      const args = spyExportChart.mock.calls[0][0];
       expect(args.resultType).toBe('results');
       expect(args.resultFormat).toBe('csv');
 
@@ -932,10 +953,10 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Data Export Options'));
       userEvent.hover(await screen.findByText('Export Current View'));
 
-      spyExportChart.resetHistory();
+      spyExportChart.mockClear();
       userEvent.click(await screen.findByText(/Export to (Excel|\.XLSX)/i));
 
-      expect(spyExportChart.called).toBe(false);
+      expect(spyExportChart).not.toHaveBeenCalled();
       getSpy.mockRestore();
     });
 
@@ -952,11 +973,11 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Data Export Options'));
       userEvent.hover(await screen.findByText('Export Current View'));
 
-      spyExportChart.resetHistory();
+      spyExportChart.mockClear();
       userEvent.click(await screen.findByText(/Export to (Excel|\.XLSX)/i));
 
-      expect(spyExportChart.callCount).toBe(1);
-      const args = spyExportChart.getCall(0).args[0];
+      expect(spyExportChart.mock.calls.length).toBe(1);
+      const args = spyExportChart.mock.calls[0][0];
       expect(args.resultType).toBe('results');
       expect(args.resultFormat).toBe('xlsx');
       getSpy.mockRestore();
@@ -984,17 +1005,17 @@ describe('Additional actions tests', () => {
       userEvent.hover(await screen.findByText('Data Export Options'));
       userEvent.hover(await screen.findByText('Export Current View'));
 
-      // server path expected → use the sinon spy and inspect call args
-      spyExportChart.resetHistory();
+      // server path expected - use the jest spy and inspect call args
+      spyExportChart.mockClear();
 
       const jsonItem = await screen.findByText('Export to .JSON');
       userEvent.click(jsonItem);
 
       await waitFor(() => {
-        expect(spyExportChart.callCount).toBe(1);
+        expect(spyExportChart.mock.calls.length).toBe(1);
       });
 
-      const args = spyExportChart.getCall(0).args[0];
+      const args = spyExportChart.mock.calls[0][0];
       expect(args.resultType).toBe('results');
       expect(args.resultFormat).toBe('json');
 

superset-frontend/src/explore/components/ExploreChartHeader/index.tsx

@@ -16,10 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
+import { QueryFormData, JsonObject } from '@superset-ui/core';
 import {
   Tooltip,
   Button,
@@ -27,10 +27,13 @@ import {
   UnsavedChangesModal,
 } from '@superset-ui/core/components';
 import { AlteredSliceTag } from 'src/components';
-import { SupersetClient, isMatrixifyEnabled } from '@superset-ui/core';
+import {
+  SupersetClient,
+  isMatrixifyEnabled,
+  MatrixifyFormData,
+} from '@superset-ui/core';
 import { logging } from '@apache-superset/core';
-import { css, t } from '@apache-superset/core/ui';
-import { chartPropShape } from 'src/dashboard/util/propShapes';
+import { css, t, SupersetTheme } from '@apache-superset/core/ui';
 import { Icons } from '@superset-ui/core/components/Icons';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
 import { sliceUpdated } from 'src/explore/actions/exploreActions';
@@ -43,35 +46,51 @@ import { useUnsavedChangesPrompt } from 'src/hooks/useUnsavedChangesPrompt';
 import { getChartFormDiffs } from 'src/utils/getChartFormDiffs';
 import { StreamingExportModal } from 'src/components/StreamingExportModal';
 import { Tag } from 'src/components/Tag';
+import { ChartState, ExplorePageInitialData } from 'src/explore/types';
+import { Slice } from 'src/types/Chart';
+import { ReportObject } from 'src/features/reports/types';
+import { User } from 'src/types/bootstrapTypes';
 import { useExploreAdditionalActionsMenu } from '../useExploreAdditionalActionsMenu';
 import { useExploreMetadataBar } from './useExploreMetadataBar';
 
-const propTypes = {
-  actions: PropTypes.object.isRequired,
-  canOverwrite: PropTypes.bool.isRequired,
-  canDownload: PropTypes.bool.isRequired,
-  dashboardId: PropTypes.number,
-  colorScheme: PropTypes.string,
-  isStarred: PropTypes.bool.isRequired,
-  slice: PropTypes.object,
-  sliceName: PropTypes.string,
-  table_name: PropTypes.string,
-  formData: PropTypes.object,
-  ownState: PropTypes.object,
-  timeout: PropTypes.number,
-  chart: chartPropShape,
-  saveDisabled: PropTypes.bool,
-  isSaveModalVisible: PropTypes.bool,
-};
+interface ExploreActions {
+  updateChartTitle: (title: string) => void;
+  fetchFaveStar: (sliceId: number) => void;
+  saveFaveStar: (sliceId: number, isStarred: boolean) => void;
+  redirectSQLLab: (
+    formData: QueryFormData,
+    history?: ReturnType<typeof useHistory> | false,
+  ) => void;
+}
 
-const saveButtonStyles = theme => css`
+export interface ExploreChartHeaderProps {
+  actions: ExploreActions;
+  canOverwrite: boolean;
+  canDownload: boolean;
+  dashboardId?: number;
+  colorScheme?: string;
+  isStarred: boolean;
+  slice?: Slice | null;
+  sliceName?: string;
+  table_name?: string;
+  formData?: QueryFormData;
+  ownState?: JsonObject;
+  timeout?: number;
+  chart: ChartState;
+  user: User;
+  saveDisabled?: boolean;
+  metadata?: ExplorePageInitialData['metadata'];
+  isSaveModalVisible?: boolean;
+}
+
+const saveButtonStyles = (theme: SupersetTheme) => css`
   color: ${theme.colorPrimaryText};
   & > span[role='img'] {
     margin-right: 0;
   }
 `;
 
-const additionalItemsStyles = theme => css`
+const additionalItemsStyles = (theme: SupersetTheme) => css`
   display: flex;
   align-items: center;
   margin-left: ${theme.sizeUnit}px;
@@ -80,7 +99,7 @@ const additionalItemsStyles = theme => css`
   }
 `;
 
-export const ExploreChartHeader = ({
+export const ExploreChartHeader: FC<ExploreChartHeaderProps> = ({
   dashboardId,
   colorScheme: dashboardColorScheme,
   slice,
@@ -101,7 +120,8 @@ export const ExploreChartHeader = ({
   const { latestQueryFormData, sliceFormData } = chart;
   const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
   const [isReportModalOpen, setIsReportModalOpen] = useState(false);
-  const [currentReportDeleting, setCurrentReportDeleting] = useState(null);
+  const [currentReportDeleting, setCurrentReportDeleting] =
+    useState<ReportObject | null>(null);
   const [shouldForceCloseModal, setShouldForceCloseModal] = useState(false);
 
   const updateCategoricalNamespace = useCallback(async () => {
@@ -155,13 +175,13 @@ export const ExploreChartHeader = ({
   };
 
   const updateSlice = useCallback(
-    slice => {
-      dispatch(sliceUpdated(slice));
+    (updatedSlice: Slice) => {
+      dispatch(sliceUpdated(updatedSlice));
     },
     [dispatch],
   );
 
-  const handleReportDelete = async report => {
+  const handleReportDelete = async (report: ReportObject) => {
     await dispatch(deleteActiveReport(report));
     setCurrentReportDeleting(null);
   };
@@ -170,8 +190,8 @@ export const ExploreChartHeader = ({
   const { redirectSQLLab } = actions;
 
   const redirectToSQLLab = useCallback(
-    (formData, openNewWindow = false) => {
-      redirectSQLLab(formData, !openNewWindow && history);
+    (redirectFormData: QueryFormData, openNewWindow = false) => {
+      redirectSQLLab(redirectFormData, !openNewWindow && history);
     },
     [redirectSQLLab, history],
   );
@@ -189,7 +209,7 @@ export const ExploreChartHeader = ({
       setCurrentReportDeleting,
     );
 
-  const metadataBar = useExploreMetadataBar(metadata, slice);
+  const metadataBar = useExploreMetadataBar(metadata, slice ?? null);
   const oldSliceName = slice?.slice_name;
 
   const originalFormData = useMemo(() => {
@@ -218,7 +238,9 @@ export const ExploreChartHeader = ({
     triggerManualSave,
   } = useUnsavedChangesPrompt({
     hasUnsavedChanges: Object.keys(formDiffs).length > 0,
-    onSave: () => dispatch(setSaveChartModalVisibility(true)),
+    onSave: () => {
+      dispatch(setSaveChartModalVisibility(true));
+    },
     isSaveModalVisible,
     manualSaveOnUnsavedChanges: true,
   });
@@ -245,7 +267,8 @@ export const ExploreChartHeader = ({
           canEdit:
             !slice ||
             canOverwrite ||
-            (slice?.owners || []).includes(user?.userId),
+            (user?.userId !== undefined &&
+              (slice?.owners || []).includes(user.userId)),
           onSave: actions.updateChartTitle,
           placeholder: t('Add the name of the chart'),
           label: t('Chart title'),
@@ -255,9 +278,9 @@ export const ExploreChartHeader = ({
           certifiedBy: slice?.certified_by,
           details: slice?.certification_details,
         }}
-        showFaveStar={!!user?.userId}
+        showFaveStar={!!user?.userId && slice?.slice_id !== undefined}
         faveStarProps={{
-          itemId: slice?.slice_id,
+          itemId: slice?.slice_id ?? 0,
           fetchFaveStar: actions.fetchFaveStar,
           saveFaveStar: actions.saveFaveStar,
           isStarred,
@@ -269,11 +292,11 @@ export const ExploreChartHeader = ({
               <AlteredSliceTag
                 className="altered"
                 diffs={formDiffs}
-                origFormData={originalFormData}
-                currentFormData={currentFormData}
+                origFormData={originalFormData as QueryFormData}
+                currentFormData={currentFormData as QueryFormData}
               />
             ) : null}
-            {formData && isMatrixifyEnabled(formData) && (
+            {formData && isMatrixifyEnabled(formData as MatrixifyFormData) && (
               <Tag name="Matrixified" color="purple" />
             )}
             {metadataBar}
@@ -364,6 +387,4 @@ export const ExploreChartHeader = ({
   );
 };
 
-ExploreChartHeader.propTypes = propTypes;
-
 export default ExploreChartHeader;