refactor: Split SliceHeaderControls into smaller files (#31270)

superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx

@@ -40,13 +40,13 @@ import {
 } from '@superset-ui/core';
 import { RootState } from 'src/dashboard/types';
 import { Menu } from 'src/components/Menu';
+import { usePermissions } from 'src/hooks/usePermissions';
 import { AntdDropdown as Dropdown } from 'src/components/index';
 import { updateDataMask } from 'src/dataMask/actions';
 import { DrillDetailMenuItems } from '../DrillDetail';
 import { getMenuAdjustedY } from '../utils';
 import { MenuItemTooltip } from '../DisabledMenuItemTooltip';
 import { DrillByMenuItems } from '../DrillBy/DrillByMenuItems';
-import { usePermissions } from './usePermissions';
 
 export enum ContextMenuItem {
   CrossFilter,

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

@@ -29,9 +29,8 @@ import { useUiConfig } from 'src/components/UiConfigContext';
 import { Tooltip } from 'src/components/Tooltip';
 import { useSelector } from 'react-redux';
 import EditableTitle from 'src/components/EditableTitle';
-import SliceHeaderControls, {
-  SliceHeaderControlsProps,
-} from 'src/dashboard/components/SliceHeaderControls';
+import SliceHeaderControls from 'src/dashboard/components/SliceHeaderControls';
+import { SliceHeaderControlsProps } from 'src/dashboard/components/SliceHeaderControls/types';
 import FiltersBadge from 'src/dashboard/components/FiltersBadge';
 import Icons from 'src/components/Icons';
 import { RootState } from 'src/dashboard/types';

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

@@ -23,10 +23,9 @@ import { render, screen } from 'spec/helpers/testing-library';
 import { FeatureFlag, VizType } from '@superset-ui/core';
 import mockState from 'spec/fixtures/mockState';
 import { Menu } from 'src/components/Menu';
-import SliceHeaderControls, {
-  SliceHeaderControlsProps,
-  handleDropdownNavigation,
-} from '.';
+import SliceHeaderControls from '.';
+import { SliceHeaderControlsProps } from './types';
+import { handleDropdownNavigation } from './utils';
 
 jest.mock('src/components/Dropdown', () => {
   const original = jest.requireActual('src/components/Dropdown');
@@ -310,13 +309,13 @@ test('Should show "Drill to detail" with `can_explore` & `can_samples` perms', (
   (global as any).featureFlags = {
     [FeatureFlag.DrillToDetail]: true,
   };
-  const props = {
-    ...createProps(),
-    supersetCanExplore: true,
-  };
+  const props = createProps();
   props.slice.slice_id = 18;
   renderWrapper(props, {
-    Admin: [['can_samples', 'Datasource']],
+    Admin: [
+      ['can_samples', 'Datasource'],
+      ['can_explore', 'Superset'],
+    ],
   });
   expect(screen.getByText('Drill to detail')).toBeInTheDocument();
 });

superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx

@@ -0,0 +1,117 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ReactChild, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { css, t, useTheme } from '@superset-ui/core';
+import Modal from 'src/components/Modal';
+import Button from 'src/components/Button';
+
+export const ViewResultsModalTrigger = ({
+  canExplore,
+  exploreUrl,
+  triggerNode,
+  modalTitle,
+  modalBody,
+  showModal = false,
+  setShowModal,
+}: {
+  canExplore?: boolean;
+  exploreUrl: string;
+  triggerNode: ReactChild;
+  modalTitle: ReactChild;
+  modalBody: ReactChild;
+  showModal: boolean;
+  setShowModal: (showModal: boolean) => void;
+}) => {
+  const history = useHistory();
+  const exploreChart = () => history.push(exploreUrl);
+  const theme = useTheme();
+  const openModal = useCallback(() => setShowModal(true), [setShowModal]);
+  const closeModal = useCallback(() => setShowModal(false), [setShowModal]);
+
+  return (
+    <>
+      <span
+        data-test="span-modal-trigger"
+        onClick={openModal}
+        role="button"
+        tabIndex={0}
+      >
+        {triggerNode}
+      </span>
+      {(() => (
+        <Modal
+          css={css`
+            .ant-modal-body {
+              display: flex;
+              flex-direction: column;
+            }
+          `}
+          show={showModal}
+          onHide={closeModal}
+          closable
+          title={modalTitle}
+          footer={
+            <>
+              <Button
+                buttonStyle="secondary"
+                buttonSize="small"
+                onClick={exploreChart}
+                disabled={!canExplore}
+                tooltip={
+                  !canExplore
+                    ? t(
+                        'You do not have sufficient permissions to edit the chart',
+                      )
+                    : undefined
+                }
+              >
+                {t('Edit chart')}
+              </Button>
+              <Button
+                buttonStyle="primary"
+                buttonSize="small"
+                onClick={closeModal}
+                css={css`
+                  margin-left: ${theme.gridUnit * 2}px;
+                `}
+              >
+                {t('Close')}
+              </Button>
+            </>
+          }
+          responsive
+          resizable
+          resizableConfig={{
+            minHeight: theme.gridUnit * 128,
+            minWidth: theme.gridUnit * 128,
+            defaultSize: {
+              width: 'auto',
+              height: '75vh',
+            },
+          }}
+          draggable
+          destroyOnClose
+        >
+          {modalBody}
+        </Modal>
+      ))()}
+    </>
+  );
+};