Feature toggle to add filter and group by variables to all new dashboards by default (#85531)

* Add feature toggle

* Add filters and group by variables by default to all new dashboards

* Nits

* Tests

* Rename feature toggle to newDashboardWithFiltersAndGroupBy

public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts

@@ -84,7 +84,8 @@ export class DashboardScenePageStateManager extends StateManagerBase<DashboardSc
     try {
       switch (route) {
         case DashboardRoutes.New:
-          rsp = buildNewDashboardSaveModel(urlFolderUid);
+          rsp = await buildNewDashboardSaveModel(urlFolderUid);
+
           break;
         case DashboardRoutes.Home:
           rsp = await getBackendSrv().get('/api/dashboards/home');

public/app/features/dashboard-scene/serialization/buildNewDashboardSaveModel.test.ts

@@ -0,0 +1,76 @@
+import { DataSourceApi, PluginType, VariableSupportType } from '@grafana/data';
+import { config } from '@grafana/runtime';
+
+import { buildNewDashboardSaveModel } from './buildNewDashboardSaveModel';
+
+const fakeDsMock: DataSourceApi = {
+  name: 'fake-std',
+  type: 'fake-std',
+  getRef: () => ({ type: 'fake-std', uid: 'fake-std' }),
+  query: () =>
+    Promise.resolve({
+      data: [],
+    }),
+  testDatasource: () => Promise.resolve({ status: 'success', message: 'abc' }),
+  meta: {
+    id: 'fake-std',
+    type: PluginType.datasource,
+    module: 'fake-std',
+    baseUrl: '',
+    name: 'fake-std',
+    info: {
+      author: { name: '' },
+      description: '',
+      links: [],
+      logos: { large: '', small: '' },
+      updated: '',
+      version: '',
+      screenshots: [],
+    },
+  },
+  // Standard variable support
+  variables: {
+    getType: () => VariableSupportType.Standard,
+    toDataQuery: (q) => ({ ...q, refId: 'FakeDataSource-refId' }),
+  },
+  getTagKeys: jest.fn(),
+  id: 1,
+  uid: 'fake-std',
+};
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  config: {
+    featureToggles: {
+      newDashboardWithFiltersAndGroupBy: false,
+    },
+  },
+  getDataSourceSrv: () => ({
+    get: (): Promise<DataSourceApi> => {
+      return Promise.resolve(fakeDsMock);
+    },
+  }),
+}));
+
+describe('buildNewDashboardSaveModel', () => {
+  it('should not have template variables defined by default', async () => {
+    const result = await buildNewDashboardSaveModel();
+    expect(result.dashboard.templating).toBeUndefined();
+  });
+
+  describe('when featureToggles.newDashboardWithFiltersAndGroupBy is true', () => {
+    beforeAll(() => {
+      config.featureToggles.newDashboardWithFiltersAndGroupBy = true;
+    });
+    afterAll(() => {
+      config.featureToggles.newDashboardWithFiltersAndGroupBy = false;
+    });
+
+    it('should add filter and group by variables if the datasource supports it and is set as default', async () => {
+      const result = await buildNewDashboardSaveModel();
+      expect(result.dashboard.templating?.list).toHaveLength(2);
+      expect(result.dashboard.templating?.list?.[0].type).toBe('adhoc');
+      expect(result.dashboard.templating?.list?.[1].type).toBe('groupby');
+    });
+  });
+});

public/app/features/dashboard-scene/serialization/buildNewDashboardSaveModel.ts

@@ -1,7 +1,37 @@
-import { defaultDashboard } from '@grafana/schema';
+import { config } from '@grafana/runtime';
+import { VariableModel, defaultDashboard } from '@grafana/schema';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { DashboardDTO } from 'app/types';
 
-export function buildNewDashboardSaveModel(urlFolderUid?: string): DashboardDTO {
+export async function buildNewDashboardSaveModel(urlFolderUid?: string): Promise<DashboardDTO> {
+  let variablesList = defaultDashboard.templating?.list;
+
+  if (config.featureToggles.newDashboardWithFiltersAndGroupBy) {
+    // Add filter and group by variables if the datasource supports it
+    const defaultDs = await getDatasourceSrv().get();
+
+    if (defaultDs.getTagKeys) {
+      const datasourceRef = {
+        type: defaultDs.meta.id,
+        uid: defaultDs.uid,
+      };
+
+      const fitlerVariable: VariableModel = {
+        datasource: datasourceRef,
+        name: 'Filter',
+        type: 'adhoc',
+      };
+
+      const groupByVariable: VariableModel = {
+        datasource: datasourceRef,
+        name: 'Group by',
+        type: 'groupby',
+      };
+
+      variablesList = (variablesList || []).concat([fitlerVariable, groupByVariable]);
+    }
+  }
+
   const data: DashboardDTO = {
     meta: {
       canStar: false,
@@ -18,6 +48,12 @@ export function buildNewDashboardSaveModel(urlFolderUid?: string): DashboardDTO
     },
   };
 
+  if (variablesList) {
+    data.dashboard.templating = {
+      list: variablesList,
+    };
+  }
+
   if (urlFolderUid) {
     data.meta.folderUid = urlFolderUid;
   }

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts

@@ -177,8 +177,8 @@ describe('transformSaveModelToScene', () => {
   });
 
   describe('When creating a new dashboard', () => {
-    it('should initialize the DashboardScene in edit mode and dirty', () => {
-      const rsp = buildNewDashboardSaveModel();
+    it('should initialize the DashboardScene in edit mode and dirty', async () => {
+      const rsp = await buildNewDashboardSaveModel();
       const scene = transformSaveModelToScene(rsp);
       expect(scene.state.isEditing).toBe(undefined);
       expect(scene.state.isDirty).toBe(false);

public/app/features/dashboard/state/initDashboard.ts

@@ -120,7 +120,7 @@ async function fetchDashboard(
         if (args.urlFolderUid) {
           await dispatch(getFolderByUid(args.urlFolderUid));
         }
-        return buildNewDashboardSaveModel(args.urlFolderUid);
+        return await buildNewDashboardSaveModel(args.urlFolderUid);
       }
       case DashboardRoutes.Path: {
         const path = args.urlSlug ?? '';

public/app/features/explore/extensions/AddToDashboard/addToDashboard.ts

@@ -85,7 +85,7 @@ export async function setDashboardInLocalStorage(options: AddPanelToDashboardOpt
       throw AddToDashboardError.FETCH_DASHBOARD;
     }
   } else {
-    dto = buildNewDashboardSaveModel();
+    dto = await buildNewDashboardSaveModel();
   }
 
   dto.dashboard.panels = [panel, ...(dto.dashboard.panels ?? [])];