Dashboards: Move settings button into edit pane (#101942)

public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 
-import { Input, TextArea } from '@grafana/ui';
-import { t } from 'app/core/internationalization';
+import { Button, Icon, Input, Stack, TextArea } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
@@ -60,6 +60,23 @@ export class DashboardEditableElement implements EditableDashboardElement {
 
     return [dashboardOptions];
   }
+
+  public renderActions(): ReactNode {
+    return (
+      <Button
+        variant="secondary"
+        onClick={() => this.dashboard.onOpenSettings()}
+        tooltip={t('dashboard.toolbar.dashboard-settings.tooltip', 'Dashboard settings')}
+      >
+        <Stack direction="row" gap={1} justifyContent="space-between" alignItems={'center'}>
+          <span>
+            <Trans i18nKey="dashboard.actions.open-settings">Settings</Trans>
+          </span>
+          <Icon name="sliders-v-alt" />
+        </Stack>
+      </Button>
+    );
+  }
 }
 
 export function DashboardTitleInput({ dashboard }: { dashboard: DashboardScene }) {
@@ -71,5 +88,5 @@ export function DashboardTitleInput({ dashboard }: { dashboard: DashboardScene }
 export function DashboardDescriptionInput({ dashboard }: { dashboard: DashboardScene }) {
   const { description } = dashboard.useState();
 
-  return <TextArea value={description} onChange={(e) => dashboard.setState({ title: e.currentTarget.value })} />;
+  return <TextArea value={description} onChange={(e) => dashboard.setState({ description: e.currentTarget.value })} />;
 }

public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx

@@ -22,6 +22,7 @@ export function EditPaneHeader({ element }: EditPaneHeaderProps) {
     <div className={styles.wrapper}>
       <Text variant="h5">{elementInfo.typeName}</Text>
       <Stack direction="row" gap={1}>
+        {element.renderActions && element.renderActions()}
         {(onCopy || onDelete) && (
           <Dropdown
             overlay={

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -415,25 +415,27 @@ export function ToolbarActions({ dashboard }: Props) {
     render: () => <ShareButton key="new-share-dashboard-button" dashboard={dashboard} />,
   });
 
-  toolbarActions.push({
-    group: 'settings',
-    condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard,
-    render: () => (
-      <Button
-        onClick={() => {
-          dashboard.onOpenSettings();
-        }}
-        tooltip={t('dashboard.toolbar.dashboard-settings.tooltip', 'Dashboard settings')}
-        fill="text"
-        size="sm"
-        key="settings"
-        variant="secondary"
-        data-testid={selectors.components.NavToolbar.editDashboard.settingsButton}
-      >
-        <Trans i18nKey="dashboard.toolbar.dashboard-settings.label">Settings</Trans>
-      </Button>
-    ),
-  });
+  if (!dashboardNewLayouts) {
+    toolbarActions.push({
+      group: 'settings',
+      condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard,
+      render: () => (
+        <Button
+          onClick={() => {
+            dashboard.onOpenSettings();
+          }}
+          tooltip={t('dashboard.toolbar.dashboard-settings.tooltip', 'Dashboard settings')}
+          fill="text"
+          size="sm"
+          key="settings"
+          variant="secondary"
+          data-testid={selectors.components.NavToolbar.editDashboard.settingsButton}
+        >
+          <Trans i18nKey="dashboard.toolbar.dashboard-settings.label">Settings</Trans>
+        </Button>
+      ),
+    });
+  }
 
   toolbarActions.push({
     group: 'main-buttons',

public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { IconName } from '@grafana/data';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 
@@ -18,6 +20,11 @@ export interface EditableDashboardElement {
    */
   useEditPaneOptions(): OptionsPaneCategoryDescriptor[];
 
+  /**
+   * Panel Actions
+   **/
+  renderActions?(): ReactNode;
+
   /**
    * Supports delete action
    */

public/locales/en-US/grafana.json

@@ -1007,6 +1007,9 @@
     }
   },
   "dashboard": {
+    "actions": {
+      "open-settings": "Settings"
+    },
     "add-menu": {
       "import": "Import from library",
       "paste-panel": "Paste panel",