Chore: Fixed strict null errors (#22238)

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -273,7 +273,7 @@ describe('DashboardPage', () => {
       },
       panelEditorNew: {},
       dashboard: {
-        getModel: () => null as DashboardModel,
+        getModel: () => ({} as DashboardModel),
       },
     } as any);
 
@@ -292,7 +292,7 @@ describe('DashboardPage', () => {
       },
       panelEditorNew: {},
       dashboard: {
-        getModel: () => null as DashboardModel,
+        getModel: () => ({} as DashboardModel),
       },
     } as any);
 

public/app/features/dashboard/containers/SoloPanelPage.tsx

@@ -83,7 +83,7 @@ export class SoloPanelPage extends Component<Props, State> {
       return <div className="alert alert-error">Panel with id {urlPanelId} not found</div>;
     }
 
-    if (!panel) {
+    if (!panel || !dashboard) {
       return <div>Loading & initializing dashboard</div>;
     }
 

public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx

@@ -6,7 +6,7 @@ import { DashboardModel } from '../state';
 interface ScenarioContext {
   props: Props;
   wrapper?: ShallowWrapper<Props, any, DashboardGrid>;
-  setup?: (fn: () => void) => void;
+  setup: (fn: () => void) => void;
   setProps: (props: Partial<Props>) => void;
 }
 
@@ -59,7 +59,7 @@ function dashboardGridScenario(description: string, scenarioFn: (ctx: ScenarioCo
       props: {
         isEditing: false,
         isFullscreen: false,
-        scrollTop: null,
+        scrollTop: 0,
         dashboard: getTestDashboard(),
       },
       setProps: (props: Partial<Props>) => {

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -162,7 +162,7 @@ export class DashboardGrid extends PureComponent<Props> {
 
   onLayoutChange = (newLayout: ReactGridLayout.Layout[]) => {
     for (const newPos of newLayout) {
-      this.panelMap[newPos.i].updateGridPos(newPos);
+      this.panelMap[newPos.i!].updateGridPos(newPos);
     }
 
     this.props.dashboard.sortPanelsByGridPos();
@@ -186,7 +186,7 @@ export class DashboardGrid extends PureComponent<Props> {
   };
 
   updateGridPos = (item: ReactGridLayout.Layout, layout: ReactGridLayout.Layout[]) => {
-    this.panelMap[item.i].updateGridPos(item);
+    this.panelMap[item.i!].updateGridPos(item);
 
     // react-grid-layout has a bug (#670), and onLayoutChange() is only called when the component is mounted.
     // So it's required to call it explicitly when panel resized or moved to save layout changes.
@@ -194,12 +194,12 @@ export class DashboardGrid extends PureComponent<Props> {
   };
 
   onResize: ItemCallback = (layout, oldItem, newItem) => {
-    this.panelMap[newItem.i].updateGridPos(newItem);
+    this.panelMap[newItem.i!].updateGridPos(newItem);
   };
 
   onResizeStop: ItemCallback = (layout, oldItem, newItem) => {
     this.updateGridPos(newItem, layout);
-    this.panelMap[newItem.i].resizeDone();
+    this.panelMap[newItem.i!].resizeDone();
   };
 
   onDragStop: ItemCallback = (layout, oldItem, newItem) => {
@@ -253,14 +253,7 @@ export class DashboardGrid extends PureComponent<Props> {
       panel.isInView = this.isInView(panel);
 
       panelElements.push(
-        <div
-          key={id}
-          className={panelClasses}
-          id={'panel-' + id}
-          ref={elem => {
-            this.panelRef[id] = elem;
-          }}
-        >
+        <div key={id} className={panelClasses} id={'panel-' + id} ref={elem => elem && (this.panelRef[id] = elem)}>
           {this.renderPanel(panel)}
         </div>
       );

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -71,8 +71,8 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
     this.props.dashboard.setPanelFocus(0);
   };
 
-  renderPanel() {
-    const { dashboard, panel, isFullscreen, isInView, isInEditMode, plugin } = this.props;
+  renderPanel(plugin: PanelPlugin) {
+    const { dashboard, panel, isFullscreen, isInView, isInEditMode } = this.props;
 
     return (
       <AutoSizer>
@@ -149,7 +149,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
               onMouseLeave={this.onMouseLeave}
               style={styles}
             >
-              {this.renderPanel()}
+              {this.renderPanel(plugin)}
             </div>
           )}
         />

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -43,7 +43,7 @@ export interface Props {
 export interface State {
   isFirstLoad: boolean;
   renderCounter: number;
-  errorMessage: string | null;
+  errorMessage?: string;
   refreshWhenInView: boolean;
 
   // Current state of all events
@@ -56,10 +56,10 @@ export class PanelChrome extends PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props);
+
     this.state = {
       isFirstLoad: true,
       renderCounter: 0,
-      errorMessage: null,
       refreshWhenInView: false,
       data: {
         state: LoadingState.NotStarted,
@@ -107,7 +107,6 @@ export class PanelChrome extends PureComponent<Props, State> {
 
     if (this.querySubscription) {
       this.querySubscription.unsubscribe();
-      this.querySubscription = null;
     }
   }
 
@@ -121,9 +120,6 @@ export class PanelChrome extends PureComponent<Props, State> {
         if (this.state.refreshWhenInView) {
           this.onRefresh();
         }
-      } else if (this.querySubscription) {
-        this.querySubscription.unsubscribe();
-        this.querySubscription = null;
       }
     }
   }
@@ -139,7 +135,7 @@ export class PanelChrome extends PureComponent<Props, State> {
     }
 
     let { isFirstLoad } = this.state;
-    let errorMessage: string | null = null;
+    let errorMessage: string | undefined;
 
     switch (data.state) {
       case LoadingState.Loading:
@@ -258,7 +254,7 @@ export class PanelChrome extends PureComponent<Props, State> {
     });
   };
 
-  renderPanel(width: number, height: number): JSX.Element {
+  renderPanel(width: number, height: number) {
     const { panel, plugin } = this.props;
     const { renderCounter, data, isFirstLoad } = this.state;
     const { theme } = config;
@@ -344,7 +340,7 @@ export class PanelChrome extends PureComponent<Props, State> {
         <PanelHeader
           panel={panel}
           dashboard={dashboard}
-          timeInfo={data.request ? data.request.timeInfo : null}
+          timeInfo={data.request ? data.request.timeInfo : undefined}
           title={panel.title}
           description={panel.description}
           scopedVars={panel.scopedVars}
@@ -354,8 +350,8 @@ export class PanelChrome extends PureComponent<Props, State> {
           isLoading={data.state === LoadingState.Loading}
         />
         <ErrorBoundary>
-          {({ error, errorInfo }) => {
-            if (errorInfo) {
+          {({ error }) => {
+            if (error) {
               this.onPanelError(error.message || DEFAULT_PLUGIN_ERROR);
               return null;
             }

public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

@@ -37,7 +37,7 @@ interface AngularScopeProps {
 }
 
 export class PanelChromeAngular extends PureComponent<Props, State> {
-  element?: HTMLElement;
+  element: HTMLElement | null = null;
   timeSrv: TimeSrv = getTimeSrv();
   scopeProps?: AngularScopeProps;
   querySubscription: Unsubscribable;
@@ -85,7 +85,7 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
   };
 
   onPanelDataUpdate(data: PanelData) {
-    let errorMessage: string | null = null;
+    let errorMessage: string | undefined;
 
     if (data.state === LoadingState.Error) {
       const { error } = data;
@@ -104,7 +104,6 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
 
     if (this.querySubscription) {
       this.querySubscription.unsubscribe();
-      this.querySubscription = null;
     }
 
     this.props.panel.events.off(PanelEvents.render, this.onPanelRenderEvent);
@@ -192,7 +191,7 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
         <PanelHeader
           panel={panel}
           dashboard={dashboard}
-          timeInfo={data.request ? data.request.timeInfo : null}
+          timeInfo={data.request ? data.request.timeInfo : undefined}
           title={panel.title}
           description={panel.description}
           scopedVars={panel.scopedVars}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -17,7 +17,7 @@ import { getPanelMenu } from 'app/features/dashboard/utils/getPanelMenu';
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
-  timeInfo: string;
+  timeInfo?: string;
   title?: string;
   description?: string;
   scopedVars?: ScopedVars;

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -90,14 +90,15 @@ export class PanelHeaderCorner extends Component<Props> {
   }
 
   render() {
+    const { error } = this.props;
     const infoMode: InfoMode | undefined = this.getInfoMode();
 
     if (!infoMode) {
       return null;
     }
 
-    if (infoMode === InfoMode.Error) {
-      return this.renderCornerType(infoMode, this.props.error, this.onClickError);
+    if (infoMode === InfoMode.Error && error) {
+      return this.renderCornerType(infoMode, error, this.onClickError);
     }
 
     if (infoMode === InfoMode.Info || infoMode === InfoMode.Links) {

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx

@@ -12,7 +12,7 @@ export const PanelHeaderMenuItem: FC<Props & PanelMenuItem> = props => {
   return isDivider ? (
     <li className="divider" />
   ) : (
-    <li className={isSubMenu ? 'dropdown-submenu' : null}>
+    <li className={isSubMenu ? 'dropdown-submenu' : undefined}>
       <a onClick={props.onClick} href={props.href}>
         {props.iconClassName && <i className={props.iconClassName} />}
         <span

public/app/features/templating/template_srv.ts

@@ -322,7 +322,7 @@ export class TemplateSrv {
     return value === '$__all' || (Array.isArray(value) && value[0] === '$__all');
   }
 
-  replaceWithText(target: string, scopedVars: ScopedVars) {
+  replaceWithText(target: string, scopedVars?: ScopedVars) {
     if (!target) {
       return target;
     }

scripts/ci-frontend-metrics.sh

@@ -3,7 +3,7 @@
 echo -e "Collecting code stats (typescript errors & more)"
 
 
-ERROR_COUNT_LIMIT=1005
+ERROR_COUNT_LIMIT=958
 DIRECTIVES_LIMIT=172
 CONTROLLERS_LIMIT=139