From 31d50f931d5c82f525e49b69eb1ca71c4fd93e0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Thu, 14 Oct 2021 10:20:04 +0200
Subject: [PATCH] Chore: Reduces strict errors in DashboardPickerByID (#40431)

* Chore: Reduces strict errors in DashboardPickerByID

* Chore: updates after PR comments

* Chore: fix for undefined strict error
---
 .../editors/DashboardPickerByID.tsx           | 40 ++++++++++---------
 .../features/playlist/usePlaylistItems.tsx    |  2 +-
 scripts/ci-check-strict.sh                    |  2 +-
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/public/app/core/components/editors/DashboardPickerByID.tsx b/public/app/core/components/editors/DashboardPickerByID.tsx
index 100b1be6547..c79ef4f4b8c 100644
--- a/public/app/core/components/editors/DashboardPickerByID.tsx
+++ b/public/app/core/components/editors/DashboardPickerByID.tsx
@@ -1,22 +1,20 @@
 import React, { FC } from 'react';
 import debounce from 'debounce-promise';
-import { SelectableValue } from '@grafana/data';
 import { AsyncSelect } from '@grafana/ui';
 import { backendSrv } from 'app/core/services/backend_srv';
-import { DashboardSearchHit } from 'app/features/search/types';
+import { SelectableValue } from '@grafana/data';
 
 /**
  * @deprecated prefer using dashboard uid rather than id
  */
-export interface DashboardPickerItem extends SelectableValue<number> {
+export interface DashboardPickerItem {
   id: number;
   uid: string;
-  value: number;
   label: string;
 }
 
 interface Props {
-  onChange: (dashboard: DashboardPickerItem) => void;
+  onChange: (dashboard?: DashboardPickerItem) => void;
   value?: DashboardPickerItem;
   width?: number;
   isClearable?: boolean;
@@ -25,22 +23,11 @@ interface Props {
   id?: string;
 }
 
-const getDashboards = (query = '') => {
-  return backendSrv.search({ type: 'dash-db', query, limit: 100 }).then((result: DashboardSearchHit[]) => {
-    return result.map((item: DashboardSearchHit) => ({
-      id: item.id,
-      uid: item.uid,
-      value: item.id,
-      label: `${item?.folderTitle ?? 'General'}/${item.title}`,
-    }));
-  });
-};
-
 /**
  * @deprecated prefer using dashboard uid rather than id
  */
 export const DashboardPickerByID: FC<Props> = ({
-  onChange,
+  onChange: propsOnChange,
   value,
   width,
   isClearable = false,
@@ -49,6 +36,10 @@ export const DashboardPickerByID: FC<Props> = ({
   id,
 }) => {
   const debouncedSearch = debounce(getDashboards, 300);
+  const option = value ? { value, label: value.label } : undefined;
+  const onChange = (item: SelectableValue<DashboardPickerItem>) => {
+    propsOnChange(item?.value);
+  };
 
   return (
     <AsyncSelect
@@ -61,9 +52,22 @@ export const DashboardPickerByID: FC<Props> = ({
       onChange={onChange}
       placeholder="Select dashboard"
       noOptionsMessage="No dashboards found"
-      value={value}
+      value={option}
       invalid={invalid}
       disabled={disabled}
     />
   );
 };
+
+async function getDashboards(query = ''): Promise<Array<SelectableValue<DashboardPickerItem>>> {
+  const result = await backendSrv.search({ type: 'dash-db', query, limit: 100 });
+  return result.map(({ id, uid = '', title, folderTitle }) => {
+    const value: DashboardPickerItem = {
+      id,
+      uid,
+      label: `${folderTitle ?? 'General'}/${title}`,
+    };
+
+    return { value, label: value.label };
+  });
+}
diff --git a/public/app/features/playlist/usePlaylistItems.tsx b/public/app/features/playlist/usePlaylistItems.tsx
index 3ab1954d69f..576879190d4 100644
--- a/public/app/features/playlist/usePlaylistItems.tsx
+++ b/public/app/features/playlist/usePlaylistItems.tsx
@@ -7,7 +7,7 @@ export function usePlaylistItems(playlistItems?: PlaylistItem[]) {
   const [items, setItems] = useState<PlaylistItem[]>(playlistItems ?? []);
 
   const addById = useCallback(
-    (dashboard: DashboardPickerItem) => {
+    (dashboard?: DashboardPickerItem) => {
       if (!dashboard || items.find((item) => item.id === dashboard.id)) {
         return;
       }
diff --git a/scripts/ci-check-strict.sh b/scripts/ci-check-strict.sh
index 80247b4815e..a588e22be28 100755
--- a/scripts/ci-check-strict.sh
+++ b/scripts/ci-check-strict.sh
@@ -3,7 +3,7 @@ set -e
 
 echo -e "Collecting code stats (typescript errors & more)"
 
-ERROR_COUNT_LIMIT=40
+ERROR_COUNT_LIMIT=39
 ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
 
 if [ "$ERROR_COUNT" -gt $ERROR_COUNT_LIMIT ]; then