Dashlist: options cleanup (#42850)

public/app/plugins/panel/dashlist/DashList.tsx

@@ -10,8 +10,8 @@ import { getBackendSrv } from 'app/core/services/backend_srv';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import impressionSrv from 'app/core/services/impression_srv';
 import { DashboardSearchHit } from 'app/features/search/types';
-import { DashListOptions } from './types';
 import { getStyles } from './styles';
+import { PanelOptions } from './models.gen';
 
 type Dashboard = DashboardSearchHit & { isSearchResult?: boolean; isRecent?: boolean };
 
@@ -21,7 +21,7 @@ interface DashboardGroup {
   dashboards: Dashboard[];
 }
 
-async function fetchDashboards(options: DashListOptions, replaceVars: InterpolateFunction) {
+async function fetchDashboards(options: PanelOptions, replaceVars: InterpolateFunction) {
   let starredDashboards: Promise<Dashboard[]> = Promise.resolve([]);
   if (options.showStarred) {
     const params = { limit: options.maxItems, starred: 'true' };
@@ -78,7 +78,7 @@ async function fetchDashboards(options: DashListOptions, replaceVars: Interpolat
   return dashMap;
 }
 
-export function DashList(props: PanelProps<DashListOptions>) {
+export function DashList(props: PanelProps<PanelOptions>) {
   const [dashboards, setDashboards] = useState(new Map<number, Dashboard>());
   useEffect(() => {
     fetchDashboards(props.options, props.replaceVariables).then((dashes) => {
@@ -126,6 +126,32 @@ export function DashList(props: PanelProps<DashListOptions>) {
   ];
 
   const css = useStyles2(getStyles);
+
+  const renderList = (dashboards: Dashboard[]) => (
+    <ul>
+      {dashboards.map((dash) => (
+        <li className={css.dashlistItem} key={`dash-${dash.id}`}>
+          <div className={css.dashlistLink}>
+            <div className={css.dashlistLinkBody}>
+              <a className={css.dashlistTitle} href={dash.url}>
+                {dash.title}
+              </a>
+              {dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
+            </div>
+            <IconToggle
+              aria-label={`Star dashboard "${dash.title}".`}
+              className={css.dashlistStar}
+              enabled={{ name: 'favorite', type: 'mono' }}
+              disabled={{ name: 'star', type: 'default' }}
+              checked={dash.isStarred}
+              onClick={(e) => toggleDashboardStar(e, dash)}
+            />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+
   return (
     <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
       {dashboardGroups.map(
@@ -133,28 +159,7 @@ export function DashList(props: PanelProps<DashListOptions>) {
           show && (
             <div className={css.dashlistSection} key={`dash-group-${i}`}>
               {showHeadings && <h6 className={css.dashlistSectionHeader}>{header}</h6>}
-              <ul>
-                {dashboards.map((dash) => (
-                  <li className={css.dashlistItem} key={`dash-${dash.id}`}>
-                    <div className={css.dashlistLink}>
-                      <div className={css.dashlistLinkBody}>
-                        <a className={css.dashlistTitle} href={dash.url}>
-                          {dash.title}
-                        </a>
-                        {dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
-                      </div>
-                      <IconToggle
-                        aria-label={`Star dashboard "${dash.title}".`}
-                        className={css.dashlistStar}
-                        enabled={{ name: 'favorite', type: 'mono' }}
-                        disabled={{ name: 'star', type: 'default' }}
-                        checked={dash.isStarred}
-                        onClick={(e) => toggleDashboardStar(e, dash)}
-                      />
-                    </div>
-                  </li>
-                ))}
-              </ul>
+              {renderList(dashboards)}
             </div>
           )
       )}

public/app/plugins/panel/dashlist/module.tsx

@@ -1,6 +1,5 @@
 import { PanelModel, PanelPlugin } from '@grafana/data';
 import { DashList } from './DashList';
-import { DashListOptions } from './types';
 import React from 'react';
 import { TagsInput } from '@grafana/ui';
 import {
@@ -8,39 +7,40 @@ import {
   GENERAL_FOLDER,
   ReadonlyFolderPicker,
 } from '../../../core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker';
+import { defaultPanelOptions, PanelOptions } from './models.gen';
 
-export const plugin = new PanelPlugin<DashListOptions>(DashList)
+export const plugin = new PanelPlugin<PanelOptions>(DashList)
   .setPanelOptions((builder) => {
     builder
       .addBooleanSwitch({
         path: 'showStarred',
         name: 'Starred',
-        defaultValue: true,
+        defaultValue: defaultPanelOptions.showStarred,
       })
       .addBooleanSwitch({
         path: 'showRecentlyViewed',
         name: 'Recently viewed',
-        defaultValue: false,
+        defaultValue: defaultPanelOptions.showRecentlyViewed,
       })
       .addBooleanSwitch({
         path: 'showSearch',
         name: 'Search',
-        defaultValue: false,
+        defaultValue: defaultPanelOptions.showSearch,
       })
       .addBooleanSwitch({
         path: 'showHeadings',
         name: 'Show headings',
-        defaultValue: true,
+        defaultValue: defaultPanelOptions.showHeadings,
       })
       .addNumberInput({
         path: 'maxItems',
         name: 'Max items',
-        defaultValue: 10,
+        defaultValue: defaultPanelOptions.maxItems,
       })
       .addTextInput({
         path: 'query',
         name: 'Query',
-        defaultValue: '',
+        defaultValue: defaultPanelOptions.query,
       })
       .addCustomEditor({
         path: 'folderId',
@@ -62,13 +62,13 @@ export const plugin = new PanelPlugin<DashListOptions>(DashList)
         path: 'tags',
         name: 'Tags',
         description: '',
-        defaultValue: [],
+        defaultValue: defaultPanelOptions.tags,
         editor(props) {
           return <TagsInput tags={props.value} onChange={props.onChange} />;
         },
       });
   })
-  .setMigrationHandler((panel: PanelModel<DashListOptions> & Record<string, any>) => {
+  .setMigrationHandler((panel: PanelModel<PanelOptions> & Record<string, any>) => {
     const newOptions = {
       showStarred: panel.options.showStarred ?? panel.starred,
       showRecentlyViewed: panel.options.showRecentlyViewed ?? panel.recent,

public/app/plugins/panel/dashlist/types.ts

@@ -1,10 +0,0 @@
-export interface DashListOptions {
-  showStarred: boolean;
-  showRecentlyViewed: boolean;
-  showSearch: boolean;
-  showHeadings: boolean;
-  maxItems: number;
-  query: string;
-  folderId: number;
-  tags: string[];
-}