feat(dashboard): View query of the chart in dashboard (apache#14667)

* Extract view query component out

* Typo correction

* Fix and rename tests

* Remove logs, and test code

* Rename file - fix tests

* Fix a typo

* Linting errors, add Apache License Header

superset-frontend/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx → superset-frontend/spec/javascripts/explore/components/ExploreAdditionalActionsMenu.jsx

@@ -20,9 +20,9 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { Dropdown, Menu } from 'src/common/components';
-import { DisplayQueryButton } from 'src/explore/components/DisplayQueryButton';
+import ExploreAdditionalActionsMenu from 'src/explore/components/ExploreAdditionalActionsMenu';
 
-describe('DisplayQueryButton', () => {
+describe('ExploreAdditionalActionsMenu', () => {
   const defaultProps = {
     animation: false,
     queryResponse: {
@@ -38,12 +38,12 @@ describe('DisplayQueryButton', () => {
   };
 
   it('is valid', () => {
-    expect(React.isValidElement(<DisplayQueryButton {...defaultProps} />)).toBe(
-      true,
-    );
+    expect(
+      React.isValidElement(<ExploreAdditionalActionsMenu {...defaultProps} />),
+    ).toBe(true);
   });
-  it('renders a dropdown with 3 itens', () => {
-    const wrapper = mount(<DisplayQueryButton {...defaultProps} />, {
+  it('renders a dropdown with 3 items', () => {
+    const wrapper = mount(<ExploreAdditionalActionsMenu {...defaultProps} />, {
       wrappingComponent: ThemeProvider,
       wrappingComponentProps: {
         theme: supersetTheme,

superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx

@@ -157,6 +157,7 @@ const createProps = () => ({
   forceRefresh: jest.fn(),
   exploreChart: jest.fn(),
   exportCSV: jest.fn(),
+  formData: {},
 });
 
 test('Should render', () => {

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

@@ -56,10 +56,11 @@ type SliceHeaderProps = {
   addDangerToast: Function;
   handleToggleFullSize: Function;
   chartStatus: string;
+  formData: object;
 };
 
-const annoationsLoading = t('Annotation layers are still loading.');
-const annoationsError = t('One ore more annotation layers failed loading.');
+const annotationsLoading = t('Annotation layers are still loading.');
+const annotationsError = t('One ore more annotation layers failed loading.');
 
 const CrossFilterIcon = styled(Icon)`
   fill: ${({ theme }) => theme.colors.grayscale.light5};
@@ -95,6 +96,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
   handleToggleFullSize,
   isFullSize,
   chartStatus,
+  formData,
 }) => {
   // TODO: change to indicator field after it will be implemented
   const crossFilterValue = useSelector<RootState, any>(
@@ -120,11 +122,11 @@ const SliceHeader: FC<SliceHeaderProps> = ({
           <Tooltip
             id="annotations-loading-tooltip"
             placement="top"
-            title={annoationsLoading}
+            title={annotationsLoading}
           >
             <i
               role="img"
-              aria-label={annoationsLoading}
+              aria-label={annotationsLoading}
               className="fa fa-refresh warning"
             />
           </Tooltip>
@@ -133,11 +135,11 @@ const SliceHeader: FC<SliceHeaderProps> = ({
           <Tooltip
             id="annoation-errors-tooltip"
             placement="top"
-            title={annoationsError}
+            title={annotationsError}
           >
             <i
               role="img"
-              aria-label={annoationsError}
+              aria-label={annotationsError}
               className="fa fa-exclamation-circle danger"
             />
           </Tooltip>
@@ -183,6 +185,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
               handleToggleFullSize={handleToggleFullSize}
               isFullSize={isFullSize}
               chartStatus={chartStatus}
+              formData={formData}
             />
           </>
         )}

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

@@ -33,6 +33,8 @@ import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import CrossFilterScopingModal from 'src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal';
 import Icons from 'src/components/Icons';
+import ModalTrigger from 'src/components/ModalTrigger';
+import ViewQueryModal from 'src/explore/components/controls/ViewQueryModal';
 
 const propTypes = {
   slice: PropTypes.object.isRequired,
@@ -76,6 +78,7 @@ const MENU_KEYS = {
   EXPORT_CSV: 'export_csv',
   RESIZE_LABEL: 'resize_label',
   DOWNLOAD_AS_IMAGE: 'download_as_image',
+  VIEW_QUERY: 'view_query',
 };
 
 const VerticalDotsContainer = styled.div`
@@ -256,6 +259,21 @@ class SliceHeaderControls extends React.PureComponent {
           </Menu.Item>
         )}
 
+        {this.props.supersetCanExplore && (
+          <Menu.Item key={MENU_KEYS.VIEW_QUERY}>
+            <ModalTrigger
+              triggerNode={
+                <span data-test="view-query-menu-item">{t('View query')}</span>
+              }
+              modalTitle={t('View query')}
+              modalBody={
+                <ViewQueryModal latestQueryFormData={this.props.formData} />
+              }
+              responsive
+            />
+          </Menu.Item>
+        )}
+
         {supersetCanShare && (
           <ShareMenuItems
             url={getDashboardUrl(

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -334,6 +334,7 @@ export default class Chart extends React.Component {
           handleToggleFullSize={handleToggleFullSize}
           isFullSize={isFullSize}
           chartStatus={chart.chartStatus}
+          formData={formData}
         />
 
         {/*

superset-frontend/src/explore/components/ExploreActionButtons.tsx

@@ -25,8 +25,8 @@ import copyTextToClipboard from 'src/utils/copy';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import { useUrlShortener } from 'src/common/hooks/useUrlShortener';
 import EmbedCodeButton from './EmbedCodeButton';
-import ConnectedDisplayQueryButton from './DisplayQueryButton';
 import { exportChart, getExploreLongUrl } from '../exploreUtils';
+import ExploreAdditionalActionsMenu from './ExploreAdditionalActionsMenu';
 
 type ActionButtonProps = {
   icon: React.ReactElement;
@@ -39,7 +39,7 @@ type ActionButtonProps = {
 };
 
 type ExploreActionButtonsProps = {
-  actions: { redirectSQLLab: Function; openPropertiesModal: Function };
+  actions: { redirectSQLLab: () => void; openPropertiesModal: () => void };
   canDownloadCSV: boolean;
   chartStatus: string;
   latestQueryFormData: {};
@@ -90,7 +90,6 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
     canDownloadCSV,
     chartStatus,
     latestQueryFormData,
-    queriesResponse,
     slice,
     addDangerToast,
   } = props;
@@ -178,8 +177,7 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
           />
         </>
       )}
-      <ConnectedDisplayQueryButton
-        queryResponse={queriesResponse?.[0]}
+      <ExploreAdditionalActionsMenu
         latestQueryFormData={latestQueryFormData}
         chartStatus={chartStatus}
         onOpenInEditor={actions.redirectSQLLab}

superset-frontend/src/explore/components/DisplayQueryButton/DisplayQueryButton.test.tsx → superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreAdditionalActionsMenu.test.tsx

@@ -23,7 +23,7 @@ import userEvent from '@testing-library/user-event';
 import * as chartAction from 'src/chart/chartAction';
 import * as downloadAsImage from 'src/utils/downloadAsImage';
 import fetchMock from 'fetch-mock';
-import ConectedDisplayQueryButton from '.';
+import ExploreAdditionalActionsMenu from '.';
 
 const createProps = () => ({
   latestQueryFormData: {
@@ -90,15 +90,15 @@ fetchMock.post(
   },
 );
 
-test('Shoud render a button', () => {
+test('Should render a button', () => {
   const props = createProps();
-  render(<ConectedDisplayQueryButton {...props} />, { useRedux: true });
+  render(<ExploreAdditionalActionsMenu {...props} />, { useRedux: true });
   expect(screen.getByRole('button')).toBeInTheDocument();
 });
 
-test('Shoud open a menu', () => {
+test('Should open a menu', () => {
   const props = createProps();
-  render(<ConectedDisplayQueryButton {...props} />, {
+  render(<ExploreAdditionalActionsMenu {...props} />, {
     useRedux: true,
   });
 
@@ -122,9 +122,9 @@ test('Shoud open a menu', () => {
   ).toBeInTheDocument();
 });
 
-test('Shoud call onOpenPropertiesModal when click on "Edit properties"', () => {
+test('Should call onOpenPropertiesModal when click on "Edit properties"', () => {
   const props = createProps();
-  render(<ConectedDisplayQueryButton {...props} />, {
+  render(<ExploreAdditionalActionsMenu {...props} />, {
     useRedux: true,
   });
   expect(props.onOpenInEditor).toBeCalledTimes(0);
@@ -133,10 +133,10 @@ test('Shoud call onOpenPropertiesModal when click on "Edit properties"', () => {
   expect(props.onOpenPropertiesModal).toBeCalledTimes(1);
 });
 
-test('Shoud call getChartDataRequest when click on "View query"', async () => {
+test('Should call getChartDataRequest when click on "View query"', async () => {
   const props = createProps();
   const getChartDataRequest = jest.spyOn(chartAction, 'getChartDataRequest');
-  render(<ConectedDisplayQueryButton {...props} />, {
+  render(<ExploreAdditionalActionsMenu {...props} />, {
     useRedux: true,
   });
 
@@ -150,9 +150,9 @@ test('Shoud call getChartDataRequest when click on "View query"', async () => {
   await waitFor(() => expect(getChartDataRequest).toBeCalledTimes(1));
 });
 
-test('Shoud call onOpenInEditor when click on "Run in SQL Lab"', () => {
+test('Should call onOpenInEditor when click on "Run in SQL Lab"', () => {
   const props = createProps();
-  render(<ConectedDisplayQueryButton {...props} />, {
+  render(<ExploreAdditionalActionsMenu {...props} />, {
     useRedux: true,
   });
 
@@ -164,10 +164,10 @@ test('Shoud call onOpenInEditor when click on "Run in SQL Lab"', () => {
   expect(props.onOpenInEditor).toBeCalledTimes(1);
 });
 
-test('Shoud call downloadAsImage when click on "Download as image"', () => {
+test('Should call downloadAsImage when click on "Download as image"', () => {
   const props = createProps();
   const spy = jest.spyOn(downloadAsImage, 'default');
-  render(<ConectedDisplayQueryButton {...props} />, {
+  render(<ExploreAdditionalActionsMenu {...props} />, {
     useRedux: true,
   });