fix(alert/report): alert modal loading dropdown options (#13222)

* alert modal loading

* add ui test

superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx

@@ -35,6 +35,8 @@ const mockData = {
   id: 1,
   name: 'test report',
   description: 'test report description',
+  chart: { id: 1, slice_name: 'test chart' },
+  database: { id: 1, database_name: 'test database' },
 };
 const FETCH_REPORT_ENDPOINT = 'glob:*/api/v1/report/*';
 const REPORT_PAYLOAD = { result: mockData };
@@ -149,6 +151,24 @@ describe('AlertReportModal', () => {
     );
   });
 
+  it('renders async select with value in alert edit modal', async () => {
+    const props = {
+      ...mockedProps,
+      alert: mockData,
+      isReport: false,
+    };
+
+    const editWrapper = await mountAndWait(props);
+    expect(editWrapper.find(AsyncSelect).at(1).props().value).toEqual({
+      value: 1,
+      label: 'test database',
+    });
+    expect(editWrapper.find(AsyncSelect).at(2).props().value).toEqual({
+      value: 1,
+      label: 'test chart',
+    });
+  });
+
   // Fields
   it('renders input element for name', () => {
     expect(wrapper.find('input[name="name"]')).toExist();

superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx

@@ -31,7 +31,15 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
 import Owner from 'src/types/Owner';
 import TextAreaControl from 'src/explore/components/controls/TextAreaControl';
 import { AlertReportCronScheduler } from './components/AlertReportCronScheduler';
-import { AlertObject, Operator, Recipient, MetaObject } from './types';
+import {
+  AlertObject,
+  ChartObject,
+  DashboardObject,
+  DatabaseObject,
+  MetaObject,
+  Operator,
+  Recipient,
+} from './types';
 
 const SELECT_PAGE_SIZE = 2000; // temporary fix for paginated query
 
@@ -982,16 +990,21 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
       setCurrentAlert({
         ...resource,
         chart: resource.chart
-          ? getChartData(resource.chart) || { value: resource.chart.id }
+          ? getChartData(resource.chart) || {
+              value: (resource.chart as ChartObject).id,
+              label: (resource.chart as ChartObject).slice_name,
+            }
           : undefined,
         dashboard: resource.dashboard
           ? getDashboardData(resource.dashboard) || {
-              value: resource.dashboard.id,
+              value: (resource.dashboard as DashboardObject).id,
+              label: (resource.dashboard as DashboardObject).dashboard_title,
             }
           : undefined,
         database: resource.database
           ? getSourceData(resource.database) || {
-              value: resource.database.id,
+              value: (resource.database as DatabaseObject).id,
+              label: (resource.database as DatabaseObject).database_name,
             }
           : undefined,
         owners: (resource.owners || []).map(owner => ({

superset-frontend/src/views/CRUD/alert/types.ts

@@ -24,6 +24,20 @@ type user = {
   first_name: string;
   last_name: string;
 };
+export type ChartObject = {
+  id: number;
+  slice_name: string;
+};
+
+export type DashboardObject = {
+  dashboard_title: string;
+  id: number;
+};
+
+export type DatabaseObject = {
+  database_name: string;
+  id: number;
+};
 
 export type Recipient = {
   recipient_config_json: {

superset/reports/api.py

@@ -72,30 +72,33 @@ class ReportScheduleRestApi(BaseSupersetModelRestApi):
 
     show_columns = [
         "id",
-        "name",
-        "type",
-        "description",
-        "context_markdown",
         "active",
-        "crontab",
         "chart.id",
+        "chart.slice_name",
+        "context_markdown",
+        "crontab",
+        "dashboard.dashboard_title",
         "dashboard.id",
+        "database.database_name",
         "database.id",
-        "owners.id",
-        "owners.first_name",
-        "owners.last_name",
+        "description",
+        "grace_period",
         "last_eval_dttm",
         "last_state",
         "last_value",
         "last_value_row_json",
-        "validator_type",
-        "validator_config_json",
         "log_retention",
-        "grace_period",
+        "name",
+        "owners.first_name",
+        "owners.id",
+        "owners.last_name",
         "recipients.id",
-        "recipients.type",
         "recipients.recipient_config_json",
+        "recipients.type",
         "sql",
+        "type",
+        "validator_config_json",
+        "validator_type",
         "working_timeout",
     ]
     show_select_columns = show_columns + [

tests/reports/api_tests.py

@@ -158,11 +158,17 @@ class TestReportSchedulesApi(SupersetTestCase):
         assert rv.status_code == 200
         expected_result = {
             "active": report_schedule.active,
-            "chart": {"id": report_schedule.chart.id},
+            "chart": {
+                "id": report_schedule.chart.id,
+                "slice_name": report_schedule.chart.slice_name,
+            },
             "context_markdown": report_schedule.context_markdown,
             "crontab": report_schedule.crontab,
             "dashboard": None,
-            "database": {"id": report_schedule.database.id},
+            "database": {
+                "id": report_schedule.database.id,
+                "database_name": report_schedule.database.database_name,
+            },
             "description": report_schedule.description,
             "grace_period": report_schedule.grace_period,
             "id": report_schedule.id,