UI: New share button and toolbar reorganize (#77563)

2025-02-25 18:55:37 -06:00 · 2024-01-08 10:42:24 -03:00 · 2024-01-08 10:42:24 -03:00 · 25ff4baa76
commit 25ff4baa76
parent eae6adf002
12 changed files with 83 additions and 94 deletions
--- a/e2e/dashboards-suite/dashboard-public-create.spec.ts
+++ b/e2e/dashboards-suite/dashboard-public-create.spec.ts
@ -14,7 +14,7 @@ describe('Public dashboards', () => {
    cy.wait('@query');

    // Open sharing modal
-    e2e.pages.ShareDashboardModal.shareButton().click();
+    e2e.pages.Dashboard.DashNav.shareButton().click();

    // Select public dashboards tab
    e2e.pages.ShareDashboardModal.PublicDashboard.Tab().click();
@ -74,7 +74,7 @@ describe('Public dashboards', () => {
    e2e.pages.Dashboard.DashNav.publicDashboardTag().should('exist');

    // Open sharing modal
-    e2e.pages.ShareDashboardModal.shareButton().click();
+    e2e.pages.Dashboard.DashNav.shareButton().click();

    // Select public dashboards tab
    cy.intercept('GET', '/api/dashboards/uid/ZqZnVvFZz/public-dashboards').as('query-public-dashboard');
@ -114,7 +114,7 @@ describe('Public dashboards', () => {
    cy.wait('@query');

    // Open sharing modal
-    e2e.pages.ShareDashboardModal.shareButton().click();
+    e2e.pages.Dashboard.DashNav.shareButton().click();

    // Select public dashboards tab
    cy.intercept('GET', '/api/dashboards/uid/ZqZnVvFZz/public-dashboards').as('query-public-dashboard');
--- a/e2e/dashboards-suite/dashboard-public-templating.spec.ts
+++ b/e2e/dashboards-suite/dashboard-public-templating.spec.ts
@ -10,7 +10,7 @@ describe('Create a public dashboard with template variables shows a template var
    e2e.flows.openDashboard({ uid: 'HYaGDGIMk' });

    // Open sharing modal
-    e2e.pages.ShareDashboardModal.shareButton().click();
+    e2e.pages.Dashboard.DashNav.shareButton().click();

    // Select public dashboards tab
    e2e.pages.ShareDashboardModal.PublicDashboard.Tab().click();
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts
@ -56,6 +56,7 @@ export const Pages = {
      nav: 'Dashboard navigation',
      navV2: 'data-testid Dashboard navigation',
      publicDashboardTag: 'data-testid public dashboard tag',
+      shareButton: 'data-testid share-button',
    },
    SubMenu: {
      submenu: 'Dashboard submenu',
@ -208,7 +209,6 @@ export const Pages = {
    linkToRenderedImage: 'Link to rendered image',
  },
  ShareDashboardModal: {
-    shareButton: 'Share dashboard',
    PublicDashboard: {
      Tab: 'Tab Public dashboard',
      WillBePublicCheckbox: 'data-testid public dashboard will be public checkbox',
--- a/public/app/features/dashboard/components/AddPanelButton/AddPanelButton.tsx
+++ b/public/app/features/dashboard/components/AddPanelButton/AddPanelButton.tsx
@ -1,9 +1,7 @@
-import { css, cx } from '@emotion/css';
 import React, { useState, useEffect } from 'react';

-import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Dropdown, Button, useTheme2, Icon } from '@grafana/ui';
+import { Dropdown, Button, Icon } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';

@ -15,7 +13,6 @@ export interface Props {
 }

 const AddPanelButton = ({ dashboard, onToolbarAddMenuOpen }: Props) => {
-  const styles = getStyles(useTheme2());
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() => {
@ -32,10 +29,9 @@ const AddPanelButton = ({ dashboard, onToolbarAddMenuOpen }: Props) => {
      onVisibleChange={setIsMenuOpen}
    >
      <Button
-        icon="panel-add"
-        size="lg"
-        fill="text"
-        className={cx(styles.button, styles.buttonIcon, styles.buttonText)}
+        variant="secondary"
+        size="sm"
+        fill="outline"
        data-testid={selectors.components.PageToolbar.itemButton('Add button')}
      >
        <Trans i18nKey="dashboard.toolbar.add">Add</Trans>
@ -46,26 +42,3 @@ const AddPanelButton = ({ dashboard, onToolbarAddMenuOpen }: Props) => {
 };

 export default AddPanelButton;
-
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    button: css({
-      label: 'add-panel-button',
-      padding: theme.spacing(0.5, 0.5, 0.5, 0.75),
-      height: theme.spacing((theme.components.height.sm + theme.components.height.md) / 2),
-      borderRadius: theme.shape.radius.default,
-    }),
-    buttonIcon: css({
-      svg: {
-        margin: 0,
-      },
-    }),
-    buttonText: css({
-      label: 'add-panel-button-text',
-      fontSize: theme.typography.body.fontSize,
-      span: {
-        marginLeft: theme.spacing(0.67),
-      },
-    }),
-  };
-}
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@ -11,9 +11,9 @@ import {
  ModalsController,
  ToolbarButton,
  useForceUpdate,
-  Tag,
  ToolbarButtonRow,
  ConfirmModal,
+  Badge,
 } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbar/NavToolbarSeparator';
@ -163,7 +163,7 @@ export const DashNav = React.memo<Props>((props) => {

  const renderLeftActions = () => {
    const { dashboard, kioskMode } = props;
-    const { canStar, canShare, isStarred } = dashboard.meta;
+    const { canStar, isStarred } = dashboard.meta;
    const buttons: ReactNode[] = [];

    if (kioskMode || isPlaylistRunning()) {
@ -186,13 +186,10 @@ export const DashNav = React.memo<Props>((props) => {
      );
    }

-    if (canShare) {
-      buttons.push(<ShareButton key="button-share" dashboard={dashboard} />);
-    }
-
    if (dashboard.meta.publicDashboardEnabled) {
+      // TODO: This will be replaced with the new badge component. Color is required but gets override by css
      buttons.push(
-        <Tag key="public-dashboard" name="Public" colorIndex={5} data-testid={selectors.publicDashboardTag}></Tag>
+        <Badge color="blue" text="Public" className={publicBadgeStyle} data-testid={selectors.publicDashboardTag} />
      );
    }

@ -255,7 +252,7 @@ export const DashNav = React.memo<Props>((props) => {

  const renderRightActions = () => {
    const { dashboard, onAddPanel, isFullscreen, kioskMode } = props;
-    const { canSave, canEdit, showSettings } = dashboard.meta;
+    const { canSave, canEdit, showSettings, canShare } = dashboard.meta;
    const { snapshot } = dashboard;
    const snapshotUrl = snapshot && snapshot.originalUrl;
    const buttons: ReactNode[] = [];
@ -268,6 +265,50 @@ export const DashNav = React.memo<Props>((props) => {
      return [renderTimeControls()];
    }

+    if (snapshotUrl) {
+      buttons.push(
+        <ToolbarButton
+          tooltip={t('dashboard.toolbar.open-original', 'Open original dashboard')}
+          onClick={onOpenSnapshotOriginal}
+          icon="link"
+          key="button-snapshot"
+        />
+      );
+    }
+
+    if (canSave && !isFullscreen) {
+      buttons.push(
+        <ModalsController key="button-save">
+          {({ showModal, hideModal }) => (
+            <ToolbarButton
+              tooltip={t('dashboard.toolbar.save', 'Save dashboard')}
+              icon="save"
+              onClick={() => {
+                DashboardInteractions.toolbarSaveClick();
+                showModal(SaveDashboardDrawer, {
+                  dashboard,
+                  onDismiss: hideModal,
+                });
+              }}
+            />
+          )}
+        </ModalsController>
+      );
+    }
+
+    addCustomContent(dynamicDashNavActions.right, buttons);
+
+    if (showSettings) {
+      buttons.push(
+        <ToolbarButton
+          tooltip={t('dashboard.toolbar.settings', 'Dashboard settings')}
+          icon="cog"
+          onClick={onOpenSettings}
+          key="button-settings"
+        />
+      );
+    }
+
    if (canEdit && !isFullscreen) {
      if (config.featureToggles.emptyDashboardPage) {
        buttons.push(
@ -290,49 +331,11 @@ export const DashNav = React.memo<Props>((props) => {
      }
    }

-    if (canSave && !isFullscreen) {
-      buttons.push(
-        <ModalsController key="button-save">
-          {({ showModal, hideModal }) => (
-            <ToolbarButton
-              tooltip={t('dashboard.toolbar.save', 'Save dashboard')}
-              icon="save"
-              onClick={() => {
-                DashboardInteractions.toolbarSaveClick();
-                showModal(SaveDashboardDrawer, {
-                  dashboard,
-                  onDismiss: hideModal,
-                });
-              }}
-            />
-          )}
-        </ModalsController>
-      );
+    if (canShare) {
+      buttons.push(<ShareButton key="button-share" dashboard={dashboard} />);
    }

-    if (snapshotUrl) {
-      buttons.push(
-        <ToolbarButton
-          tooltip={t('dashboard.toolbar.open-original', 'Open original dashboard')}
-          onClick={onOpenSnapshotOriginal}
-          icon="link"
-          key="button-snapshot"
-        />
-      );
-    }
-
-    if (showSettings) {
-      buttons.push(
-        <ToolbarButton
-          tooltip={t('dashboard.toolbar.settings', 'Dashboard settings')}
-          icon="cog"
-          onClick={onOpenSettings}
-          key="button-settings"
-        />
-      );
-    }
-
-    addCustomContent(dynamicDashNavActions.right, buttons);
+    buttons.push(<NavToolbarSeparator key="toolbar-separator" />);

    buttons.push(renderTimeControls());

@ -360,3 +363,9 @@ const modalStyles = css({
  width: 'max-content',
  maxWidth: '80vw',
 });
+
+const publicBadgeStyle = css({
+  color: 'grey',
+  backgroundColor: 'transparent',
+  border: '1px solid',
+});
--- a/public/app/features/dashboard/components/DashNav/ShareButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/ShareButton.tsx
@ -1,15 +1,14 @@
 import React, { useContext, useEffect } from 'react';

-import { ModalsContext } from '@grafana/ui';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
+import { ModalsContext, Button } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
-import { t } from 'app/core/internationalization';
+import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';

 import { ShareModal } from '../ShareModal';

-import { DashNavButton } from './DashNavButton';
-
 export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
  const [queryParams] = useQueryParams();
  const { showModal, hideModal } = useContext(ModalsContext);
@ -28,10 +27,10 @@ export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
  }, [showModal, hideModal, dashboard, queryParams.shareView]);

  return (
-    <DashNavButton
-      tooltip={t('dashboard.toolbar.share', 'Share dashboard')}
-      icon="share-alt"
-      iconSize="lg"
+    <Button
+      data-testid={e2eSelectors.pages.Dashboard.DashNav.shareButton}
+      variant="primary"
+      size="sm"
      onClick={() => {
        DashboardInteractions.toolbarShareClick();
        showModal(ShareModal, {
@ -39,6 +38,8 @@ export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
          onDismiss: hideModal,
        });
      }}
-    />
+    >
+      <Trans i18nKey="dashboard.toolbar.share-button">Share</Trans>
+    </Button>
  );
 };
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@ -311,6 +311,7 @@
      "save": "Dashboard speichern",
      "settings": "Dashboard-Einstellungen",
      "share": "Dashboard oder Panel teilen",
+      "share-button": "",
      "unmark-favorite": "Markierung als Favorit entfernen"
    },
    "validation": {
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@ -311,6 +311,7 @@
      "save": "Save dashboard",
      "settings": "Dashboard settings",
      "share": "Share dashboard",
+      "share-button": "Share",
      "unmark-favorite": "Unmark as favorite"
    },
    "validation": {
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@ -316,6 +316,7 @@
      "save": "Guardar panel de control",
      "settings": "Ajustes del panel de control",
      "share": "Compartir panel o panel de control",
+      "share-button": "",
      "unmark-favorite": "Deshacer marca como favorito"
    },
    "validation": {
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@ -316,6 +316,7 @@
      "save": "Enregistrer le tableau de bord",
      "settings": "Paramètres du tableau de bord",
      "share": "Partager le tableau de bord ou le panneau",
+      "share-button": "",
      "unmark-favorite": "Supprimer des favoris"
    },
    "validation": {
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@ -311,6 +311,7 @@
      "save": "Ŝävę đäşĥþőäřđ",
      "settings": "Đäşĥþőäřđ şęŧŧįŉģş",
      "share": "Ŝĥäřę đäşĥþőäřđ",
+      "share-button": "Ŝĥäřę",
      "unmark-favorite": "Ůŉmäřĸ äş ƒävőřįŧę"
    },
    "validation": {
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@ -306,6 +306,7 @@
      "save": "保存仪表板",
      "settings": "仪表板设置",
      "share": "分享仪表板或面板",
+      "share-button": "",
      "unmark-favorite": "取消标记为收藏"
    },
    "validation": {