chore: controls.test supporting v1 charts and added force=true to url when r… (#11754)

* controls.test supporting v1 charts and added force=true to url when refreshin chart with force an option

* Added verification for isCached

* added using global alias prefix

* fixed typescript error

superset-frontend/cypress-base/cypress/integration/dashboard/controls.test.js

@@ -18,12 +18,15 @@
  */
 import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
 import readResponseBlob from '../../utils/readResponseBlob';
-import { isLegacyChart } from '../../utils/vizPlugins';
+import {
+  getChartAliases,
+  isLegacyResponse,
+  DASHBOARD_CHART_ALIAS_PREFIX,
+} from '../../utils/vizPlugins';
 
 describe('Dashboard top-level controls', () => {
-  const sliceRequests = [];
-  const forceRefreshRequests = [];
   let mapId;
+  let aliases;
 
   beforeEach(() => {
     cy.server();
@@ -33,65 +36,34 @@ describe('Dashboard top-level controls', () => {
     cy.get('#app').then(data => {
       const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
       const dashboard = bootstrapData.dashboard_data;
-      const dashboardId = dashboard.id;
       mapId = dashboard.slices.find(
         slice => slice.form_data.viz_type === 'world_map',
       ).slice_id;
-
-      dashboard.slices.forEach(slice => {
-        // TODO(villebro): enable V1 charts
-        if (isLegacyChart(slice.form_data.viz_type)) {
-          const sliceRequest = `getJson_${slice.slice_id}`;
-          sliceRequests.push(`@${sliceRequest}`);
-          const formData = `{"slice_id":${slice.slice_id}}`;
-          cy.route(
-            'POST',
-            `/superset/explore_json/?form_data=${formData}&dashboard_id=${dashboardId}`,
-          ).as(sliceRequest);
-
-          const forceRefresh = `postJson_${slice.slice_id}_force`;
-          forceRefreshRequests.push(`@${forceRefresh}`);
-          cy.route(
-            'POST',
-            `/superset/explore_json/?form_data={"slice_id":${slice.slice_id}}&force=true&dashboard_id=${dashboardId}`,
-          ).as(forceRefresh);
-        }
-      });
+      aliases = getChartAliases(dashboard.slices);
     });
   });
-  afterEach(() => {
-    sliceRequests.length = 0;
-    forceRefreshRequests.length = 0;
-  });
 
   it('should allow chart level refresh', () => {
-    cy.wait(sliceRequests);
-    cy.get('[data-test="grid-container"]')
-      .find('.world_map')
-      .should('be.exist');
+    cy.wait(aliases);
+    cy.get('[data-test="grid-container"]').find('.world_map').should('exist');
     cy.get(`#slice_${mapId}-controls`).click();
     cy.get(`[data-test="slice_${mapId}-menu"]`)
-      .find('[data-test="refresh-dashboard-menu-item"]')
-      .click({ force: true });
+      .find('[data-test="refresh-chart-menu-item"]')
+      .click({ force: true })
+      .then($el => {
+        cy.get($el).should('have.class', 'ant-dropdown-menu-item-disabled');
+      });
 
-    // not allow dashboard level force refresh when any chart is loading
-    cy.get('[data-test="refresh-dashboard-menu-item"]').should(
-      'have.class',
-      'ant-dropdown-menu-item-disabled',
-    );
-    // not allow chart level force refresh when it is loading
-    cy.get(`[data-test="slice_${mapId}-menu"]`)
-      .find('[data-test="refresh-dashboard-menu-item"]')
-      .should('have.class', 'ant-dropdown-menu-item-disabled');
-
-    cy.wait(`@postJson_${mapId}_force`);
-    cy.get('[data-test="refresh-dashboard-menu-item"]').should(
+    cy.wait(`@${DASHBOARD_CHART_ALIAS_PREFIX}${mapId}`);
+    cy.get('[data-test="refresh-chart-menu-item"]').should(
       'not.have.class',
       'ant-dropdown-menu-item-disabled',
     );
   });
 
   it('should allow dashboard level force refresh', () => {
+    // wait the all dash finish loading.
+    cy.wait(aliases);
     // when charts are not start loading, for example, under a secondary tab,
     // should allow force refresh
     cy.get('[data-test="more-horiz"]').click();
@@ -100,8 +72,6 @@ describe('Dashboard top-level controls', () => {
       'ant-dropdown-menu-item-disabled',
     );
 
-    // wait the all dash finish loading.
-    cy.wait(sliceRequests);
     cy.get('[data-test="refresh-dashboard-menu-item"]').click({ force: true });
     cy.get('[data-test="refresh-dashboard-menu-item"]').should(
       'have.class',
@@ -109,17 +79,20 @@ describe('Dashboard top-level controls', () => {
     );
 
     // wait all charts force refreshed
-    cy.wait(forceRefreshRequests, { responseTimeout: 15000 }).then(xhrs => {
-      // is_cached in response should be false
-      xhrs.forEach(xhr => {
-        readResponseBlob(xhr.response.body).then(responseBody => {
-          expect(responseBody.is_cached).to.equal(false);
-        });
+    cy.wait(aliases, { responseTimeout: 15000 }).then(xhrs => {
+      xhrs.forEach(async xhr => {
+        const responseBody = await readResponseBlob(xhr.response.body);
+        const isCached = isLegacyResponse(responseBody)
+          ? responseBody.is_cached
+          : responseBody.result[0].is_cached;
+        // request url should indicate force-refresh operation
+        expect(xhr.url).to.have.string('force=true');
+        // is_cached in response should be false
+        expect(isCached).to.equal(false);
       });
     });
-
     cy.get('[data-test="more-horiz"]').click();
-    cy.get('[data-test="refresh-dashboard-menu-item"]').should(
+    cy.get('[data-test="refresh-dashboard-menu-item"]').and(
       'not.have.class',
       'ant-dropdown-menu-item-disabled',
     );

superset-frontend/src/chart/chartAction.js

@@ -154,9 +154,11 @@ const v1ChartDataRequest = async (
   // The dashboard id is added to query params for tracking purposes
   const { slice_id: sliceId } = formData;
   const { dashboard_id: dashboardId } = requestParams;
+
   const qs = {};
   if (sliceId !== undefined) qs.form_data = `{"slice_id":${sliceId}}`;
   if (dashboardId !== undefined) qs.dashboard_id = dashboardId;
+  if (force !== false) qs.force = force;
 
   const allowDomainSharding =
     // eslint-disable-next-line camelcase

superset-frontend/src/dashboard/components/SliceHeaderControls.jsx

@@ -177,7 +177,7 @@ class SliceHeaderControls extends React.PureComponent {
           key={MENU_KEYS.FORCE_REFRESH}
           disabled={this.props.chartStatus === 'loading'}
           style={{ height: 'auto', lineHeight: 'initial' }}
-          data-test="refresh-dashboard-menu-item"
+          data-test="refresh-chart-menu-item"
         >
           {t('Force refresh')}
           <RefreshTooltip data-test="dashboard-slice-refresh-tooltip">