Chore: fixes few strict-null errors (#23775)

* Chore: fixes strict-null-error in Login > ChangePassword component

* Chore: fixes strict-null-error in Login > LoginForm component

* Chore: fixes strict-null-errors in OrgActionBar component and components that render it

* Chore: fixes strict-null-errors in PageHeader component

* Chore: fixes strict-null-errors in PermissionList components

* Chore: fixes strict-null-errors in loki language provider

* Chore: fixes strict-null-errors in loki datasource

* Chore: fixes strict-null-errors in panel_editor > EditorTabBody component

* Chore: fixes strict-null-errors in flatten utility

* Chore: fixes strict-null-errors in search component

* Chore: fixes strict-null-errors in SharedPreferences component

* Chore: fixes strict-null-errors in MetricSelect component

* Chore: updates type on a param to type on argument

* Chore: updates strict-null errors count from 791 to 757

* Chore: updates PageHeader - adds null checks

* Chore: updates PageHeader - updates null checks

* Chore: updates PageHeader null checks to longer format

* Chore: updates strict-null fixes

* Chore: updates error count limit in ci-frontend-metrics

public/app/core/components/PageHeader/PageHeader.tsx

@@ -9,8 +9,12 @@ export interface Props {
   model: NavModel;
 }
 
-const SelectNav = ({ main, customCss }: { main: NavModelItem; customCss: string }) => {
-  const defaultSelectedItem = main.children.find(navItem => {
+const SelectNav = ({ children, customCss }: { children: NavModelItem[]; customCss: string }) => {
+  if (!children || children.length === 0) {
+    return null;
+  }
+
+  const defaultSelectedItem = children.find(navItem => {
     return navItem.active === true;
   });
 
@@ -22,15 +26,18 @@ const SelectNav = ({ main, customCss }: { main: NavModelItem; customCss: string
 
   return (
     <div className={`gf-form-select-wrapper width-20 ${customCss}`}>
-      <label className={`gf-form-select-icon ${defaultSelectedItem.icon}`} htmlFor="page-header-select-nav" />
+      <label
+        className={`gf-form-select-icon ${defaultSelectedItem ? defaultSelectedItem?.icon : ''}`}
+        htmlFor="page-header-select-nav"
+      />
       {/* Label to make it clickable */}
       <select
         className="gf-select-nav gf-form-input"
-        value={defaultSelectedItem.url}
+        value={defaultSelectedItem?.url ?? ''}
         onChange={gotoUrl}
         id="page-header-select-nav"
       >
-        {main.children.map((navItem: NavModelItem) => {
+        {children.map((navItem: NavModelItem) => {
           if (navItem.hideFromTabs) {
             // TODO: Rename hideFromTabs => hideFromNav
             return null;
@@ -46,9 +53,13 @@ const SelectNav = ({ main, customCss }: { main: NavModelItem; customCss: string
   );
 };
 
-const Navigation = ({ main }: { main: NavModelItem }) => {
+const Navigation = ({ children }: { children: NavModelItem[] }) => {
+  if (!children || children.length === 0) {
+    return null;
+  }
+
   const goToUrl = (index: number) => {
-    main.children.forEach((child, i) => {
+    children.forEach((child, i) => {
       if (i === index) {
         appEvents.emit(CoreEvents.locationChange, { href: child.url });
       }
@@ -57,9 +68,9 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
 
   return (
     <nav>
-      <SelectNav customCss="page-header__select-nav" main={main} />
+      <SelectNav customCss="page-header__select-nav" children={children} />
       <TabsBar className="page-header__tabs" hideBorder={true}>
-        {main.children.map((child, index) => {
+        {children.map((child, index) => {
           return (
             !child.hideFromTabs && (
               <Tab
@@ -131,7 +142,7 @@ export default class PageHeader extends React.Component<Props, any> {
         </span>
 
         <div className="page-header__info-block">
-          {this.renderTitle(main.text, main.breadcrumbs)}
+          {this.renderTitle(main.text, main.breadcrumbs ?? [])}
           {main.subTitle && <div className="page-header__sub-title">{main.subTitle}</div>}
         </div>
       </div>
@@ -146,13 +157,14 @@ export default class PageHeader extends React.Component<Props, any> {
     }
 
     const main = model.main;
+    const children = main.children;
 
     return (
       <div className="page-header-canvas">
         <div className="page-container">
           <div className="page-header">
             {this.renderHeaderTitle(main)}
-            {main.children && <Navigation main={main} />}
+            {children && children.length && <Navigation children={children} />}
           </div>
         </div>
       </div>

public/app/core/components/PermissionList/AddPermission.tsx

@@ -64,7 +64,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
   };
 
   onPermissionChanged = (permission: SelectableValue<PermissionLevel>) => {
-    this.setState({ permission: permission.value });
+    this.setState({ permission: permission!.value });
   };
 
   onSubmit = async (evt: React.SyntheticEvent) => {

public/app/core/components/PermissionList/PermissionListItem.tsx

@@ -42,7 +42,7 @@ interface Props {
 
 export default class PermissionsListItem extends PureComponent<Props> {
   onPermissionChanged = (option: SelectableValue<PermissionLevel>) => {
-    this.props.onPermissionChanged(this.props.item, option.value);
+    this.props.onPermissionChanged(this.props.item, option!.value);
   };
 
   onRemoveItem = () => {
@@ -55,7 +55,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
     const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
 
     return (
-      <tr className={setClassNameHelper(item.inherited)}>
+      <tr className={setClassNameHelper(Boolean(item?.inherited))}>
         <td style={{ width: '1%' }}>
           <ItemAvatar item={item} />
         </td>

public/app/core/components/Select/MetricSelect.tsx

@@ -37,7 +37,7 @@ export class MetricSelect extends React.Component<Props, State> {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.options.length > 0 || nextProps.variables.length) {
+    if (nextProps.options.length > 0 || nextProps.variables?.length) {
       this.setState({ options: this.buildOptions(nextProps) });
     }
   }
@@ -54,7 +54,7 @@ export class MetricSelect extends React.Component<Props, State> {
   getVariablesGroup() {
     return {
       label: 'Template Variables',
-      options: this.props.variables.map(v => ({
+      options: this.props.variables?.map(v => ({
         label: `$${v.name}`,
         value: `$${v.name}`,
       })),
@@ -77,7 +77,7 @@ export class MetricSelect extends React.Component<Props, State> {
         isMulti={false}
         isClearable={false}
         backspaceRemovesValue={false}
-        onChange={item => onChange(item.value)}
+        onChange={item => onChange(item.value ?? '')}
         options={options}
         isSearchable={isSearchable}
         maxMenuHeight={500}

public/app/core/utils/flatten.ts

@@ -9,16 +9,16 @@ export default function flatten(target: object, opts?: { delimiter?: any; maxDep
   let currentDepth = 1;
   const output: any = {};
 
-  function step(object: any, prev: string) {
+  function step(object: any, prev: string | null) {
     Object.keys(object).forEach(key => {
       const value = object[key];
-      const isarray = opts.safe && Array.isArray(value);
+      const isarray = opts?.safe && Array.isArray(value);
       const type = Object.prototype.toString.call(value);
       const isobject = type === '[object Object]';
 
       const newKey = prev ? prev + delimiter + key : key;
 
-      if (!opts.maxDepth) {
+      if (!opts?.maxDepth) {
         maxDepth = currentDepth + 1;
       }
 

public/app/plugins/datasource/loki/datasource.ts

@@ -69,7 +69,7 @@ export class LokiDatasource extends DataSourceApi<LokiQuery, LokiOptions> {
 
     this.languageProvider = new LanguageProvider(this);
     const settingsData = instanceSettings.jsonData || {};
-    this.maxLines = parseInt(settingsData.maxLines, 10) || DEFAULT_MAX_LINES;
+    this.maxLines = parseInt(settingsData.maxLines ?? '0', 10) || DEFAULT_MAX_LINES;
   }
 
   _request(apiUrl: string, data?: any, options?: DatasourceRequestOptions): Observable<Record<string, any>> {

public/app/plugins/datasource/loki/language_provider.ts

@@ -56,7 +56,7 @@ export function addHistoryMetadata(item: CompletionItem, history: LokiHistoryIte
 }
 
 export default class LokiLanguageProvider extends LanguageProvider {
-  labelKeys?: string[];
+  labelKeys: string[];
   logLabelOptions: any[];
   logLabelFetchTs?: number;
   started: boolean;
@@ -129,7 +129,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
     const { wrapperClasses, value, prefix, text } = input;
 
     // Local text properties
-    const empty = value.document.text.length === 0;
+    const empty = value?.document.text.length === 0;
     const selectedLines = value.document.getTextsAtRange(value.selection);
     const currentLine = selectedLines.size === 1 ? selectedLines.first().getText() : null;
 
@@ -235,6 +235,9 @@ export default class LokiLanguageProvider extends LanguageProvider {
   ): Promise<TypeaheadOutput> {
     let context = 'context-labels';
     const suggestions: CompletionItemGroup[] = [];
+    if (!value) {
+      return { context, suggestions: [] };
+    }
     const line = value.anchorBlock.getText();
     const cursorOffset = value.selection.anchor.offset;
     const isValueStart = text.match(/^(=|=~|!=|!~)/);
@@ -467,7 +470,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
     } else {
       this.logLabelOptions = this.addLabelValuesToOptions(key, value);
     }
-    return value;
+    return value ?? [];
   }
 
   private addLabelValuesToOptions = (labelKey: string, values: string[]) => {

scripts/ci-frontend-metrics.sh

@@ -4,7 +4,7 @@ echo -e "Collecting code stats (typescript errors & more)"
 
 
 
-ERROR_COUNT_LIMIT=771
+ERROR_COUNT_LIMIT=728
 DIRECTIVES_LIMIT=172
 CONTROLLERS_LIMIT=139