chore: Create a generic header component for Explore and Dashboard (#…

…20044)

* chore: Create a generic header component for Explore and Dashboard

* Add tests

* Fix undefined error

* Remove duplicate code

* Fix cypress test

superset-frontend/cypress-base/cypress/integration/explore/visualizations/download_chart.test.js

@@ -34,7 +34,7 @@ describe('Download Chart > Distribution bar chart', () => {
     };
 
     cy.visitChartByParams(JSON.stringify(formData));
-    cy.get('.right-button-panel > .ant-dropdown-trigger').click();
+    cy.get('.right-button-panel .ant-dropdown-trigger').click();
     cy.get(':nth-child(1) > .ant-dropdown-menu-submenu-title').click();
     cy.get(
       '.ant-dropdown-menu-submenu > .ant-dropdown-menu li:nth-child(3)',

superset-frontend/src/explore/components/ExploreChartHeader/ChartEditableTitle/ChartEditableTitle.test.tsx → superset-frontend/src/components/DynamicEditableTitle/DynamicEditableTitle.test.tsx

@@ -19,34 +19,35 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from 'spec/helpers/testing-library';
-import { ChartEditableTitle } from './index';
+import { DynamicEditableTitle } from '.';
 
 const createProps = (overrides: Record<string, any> = {}) => ({
   title: 'Chart title',
   placeholder: 'Add the name of the chart',
   canEdit: true,
   onSave: jest.fn(),
+  label: 'Chart title',
   ...overrides,
 });
 
 describe('Chart editable title', () => {
   it('renders chart title', () => {
     const props = createProps();
-    render(<ChartEditableTitle {...props} />);
+    render(<DynamicEditableTitle {...props} />);
     expect(screen.getByText('Chart title')).toBeVisible();
   });
 
   it('renders placeholder', () => {
     const props = createProps({
       title: '',
     });
-    render(<ChartEditableTitle {...props} />);
+    render(<DynamicEditableTitle {...props} />);
     expect(screen.getByText('Add the name of the chart')).toBeVisible();
   });
 
   it('click, edit and save title', () => {
     const props = createProps();
-    render(<ChartEditableTitle {...props} />);
+    render(<DynamicEditableTitle {...props} />);
     const textboxElement = screen.getByRole('textbox');
     userEvent.click(textboxElement);
     userEvent.type(textboxElement, ' edited');
@@ -57,7 +58,7 @@ describe('Chart editable title', () => {
 
   it('renders in non-editable mode', () => {
     const props = createProps({ canEdit: false });
-    render(<ChartEditableTitle {...props} />);
+    render(<DynamicEditableTitle {...props} />);
     const titleElement = screen.getByLabelText('Chart title');
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
     expect(titleElement).toBeVisible();

superset-frontend/src/explore/components/ExploreChartHeader/ChartEditableTitle/index.tsx → superset-frontend/src/components/DynamicEditableTitle/index.tsx

@@ -26,62 +26,62 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { css, styled, t } from '@superset-ui/core';
+import { css, SupersetTheme, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import { useResizeDetector } from 'react-resize-detector';
 
-export type ChartEditableTitleProps = {
+export type DynamicEditableTitleProps = {
   title: string;
   placeholder: string;
   onSave: (title: string) => void;
   canEdit: boolean;
+  label: string | undefined;
 };
 
-const Styles = styled.div`
-  ${({ theme }) => css`
-    display: flex;
-    font-size: ${theme.typography.sizes.xl}px;
-    font-weight: ${theme.typography.weights.bold};
+const titleStyles = (theme: SupersetTheme) => css`
+  display: flex;
+  font-size: ${theme.typography.sizes.xl}px;
+  font-weight: ${theme.typography.weights.bold};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  & .dynamic-title,
+  & .dynamic-title-input {
+    display: inline-block;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-
-    & .chart-title,
-    & .chart-title-input {
-      display: inline-block;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    & .chart-title {
-      cursor: default;
+  }
+
+  & .dynamic-title {
+    cursor: default;
+  }
+  & .dynamic-title-input {
+    border: none;
+    padding: 0;
+    outline: none;
+
+    &::placeholder {
+      color: ${theme.colors.grayscale.light1};
     }
-    & .chart-title-input {
-      border: none;
-      padding: 0;
-      outline: none;
+  }
 
-      &::placeholder {
-        color: ${theme.colors.grayscale.light1};
-      }
-    }
-
-    & .input-sizer {
-      position: absolute;
-      left: -9999px;
-      display: inline-block;
-    }
-  `}
+  & .input-sizer {
+    position: absolute;
+    left: -9999px;
+    display: inline-block;
+  }
 `;
 
-export const ChartEditableTitle = ({
+export const DynamicEditableTitle = ({
   title,
   placeholder,
   onSave,
   canEdit,
-}: ChartEditableTitleProps) => {
+  label,
+}: DynamicEditableTitleProps) => {
   const [isEditing, setIsEditing] = useState(false);
   const [currentTitle, setCurrentTitle] = useState(title || '');
   const contentRef = useRef<HTMLInputElement>(null);
@@ -170,16 +170,16 @@ export const ChartEditableTitle = ({
   );
 
   return (
-    <Styles ref={containerRef}>
+    <div css={titleStyles} ref={containerRef}>
       <Tooltip
         id="title-tooltip"
         title={showTooltip && currentTitle && !isEditing ? currentTitle : null}
       >
         {canEdit ? (
           <input
             data-test="editable-title-input"
-            className="chart-title-input"
-            aria-label={t('Chart title')}
+            className="dynamic-title-input"
+            aria-label={label ?? t('Title')}
             ref={contentRef}
             onChange={handleChange}
             onBlur={handleBlur}
@@ -199,15 +199,15 @@ export const ChartEditableTitle = ({
           />
         ) : (
           <span
-            className="chart-title"
-            aria-label={t('Chart title')}
+            className="dynamic-title"
+            aria-label={label ?? t('Title')}
             ref={contentRef}
           >
             {currentTitle}
           </span>
         )}
       </Tooltip>
       <span ref={sizerRef} className="input-sizer" aria-hidden tabIndex={-1} />
-    </Styles>
+    </div>
   );
 };

superset-frontend/src/components/FaveStar/index.tsx

@@ -23,7 +23,7 @@ import { Tooltip } from 'src/components/Tooltip';
 import { useComponentDidMount } from 'src/hooks/useComponentDidMount';
 import Icons from 'src/components/Icons';
 
-interface FaveStarProps {
+export interface FaveStarProps {
   itemId: number;
   isStarred?: boolean;
   showTooltip?: boolean;

superset-frontend/src/components/PageHeaderWithActions/PageHeaderWithActions.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { PageHeaderWithActions, PageHeaderWithActionsProps } from './index';
+import { Menu } from '../Menu';
+
+const defaultProps: PageHeaderWithActionsProps = {
+  editableTitleProps: {
+    title: 'Test title',
+    placeholder: 'Test placeholder',
+    onSave: jest.fn(),
+    canEdit: true,
+    label: 'Title',
+  },
+  showTitlePanelItems: true,
+  certificatiedBadgeProps: {},
+  showFaveStar: true,
+  faveStarProps: { itemId: 1, saveFaveStar: jest.fn() },
+  titlePanelAdditionalItems: <button type="button">Title panel button</button>,
+  rightPanelAdditionalItems: <button type="button">Save</button>,
+  additionalActionsMenu: (
+    <Menu>
+      <Menu.Item>Test menu item</Menu.Item>
+    </Menu>
+  ),
+  menuDropdownProps: { onVisibleChange: jest.fn(), visible: true },
+};
+
+test('Renders', async () => {
+  render(<PageHeaderWithActions {...defaultProps} />);
+  expect(screen.getByText('Test title')).toBeVisible();
+  expect(screen.getByTestId('fave-unfave-icon')).toBeVisible();
+  expect(screen.getByText('Title panel button')).toBeVisible();
+  expect(screen.getByText('Save')).toBeVisible();
+
+  userEvent.click(screen.getByLabelText('Menu actions trigger'));
+  expect(defaultProps.menuDropdownProps.onVisibleChange).toHaveBeenCalled();
+});