Dashboards: Fix versions tab not showing in dashboard settings after making dashboard editable (#114963)

* fix showing versions tab on dashboard settings after making dashboard editable

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

Co-authored-by: Marc M. <146180665+grafakus@users.noreply.github.com>

* Update public/app/features/dashboard-scene/scene/new-toolbar/actions/MakeDashboardEditableButton.tsx

Co-authored-by: Marc M. <146180665+grafakus@users.noreply.github.com>

---------

Co-authored-by: Marc M. <146180665+grafakus@users.noreply.github.com>

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

@@ -186,6 +186,17 @@ describe('NavToolbarActions', () => {
         });
       });
     });
+
+    describe('where dashboard is not editable', () => {
+      it('should set dashboard to editable on make editable button press', async () => {
+        const { dashboard } = setup({}, true);
+        await userEvent.click(await screen.findByTestId(selectors.components.NavToolbar.editDashboard.editButton));
+
+        expect(dashboard.state.editable).toBe(true);
+        expect(dashboard.state.meta.canEdit).toBe(true);
+        expect(dashboard.state.meta.canSave).toBe(true);
+      });
+    });
   });
 
   describe('Given new sharing button', () => {
@@ -214,7 +225,7 @@ describe('NavToolbarActions', () => {
   });
 });
 
-function setup(meta?: DashboardMeta) {
+function setup(meta?: DashboardMeta, editable?: boolean) {
   const dashboard = new DashboardScene({
     $timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now' }),
     meta: {
@@ -229,6 +240,7 @@ function setup(meta?: DashboardMeta) {
       ...meta,
     },
     title: 'hello',
+    editable: editable || true,
     uid: 'dash-1',
     body: DefaultGridLayoutManager.fromVizPanels([
       new VizPanel({

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

@@ -351,7 +351,7 @@ export function ToolbarActions({ dashboard }: Props) {
         onClick={() => {
           trackDashboardSceneEditButtonClicked(dashboard.state.uid);
           dashboard.onEnterEditMode();
-          dashboard.setState({ editable: true, meta: { ...meta, canEdit: true } });
+          dashboard.setState({ meta: { ...meta, canEdit: true, canSave: true } });
         }}
         tooltip={t('dashboard.toolbar.enter-edit-mode.tooltip', 'This dashboard was marked as read only')}
         key="edit"

public/app/features/dashboard-scene/scene/new-toolbar/actions/MakeDashboardEditableButton.test.tsx

@@ -34,10 +34,11 @@ setPluginImportUtils({
   getPanelPluginFromCache: (id: string) => undefined,
 });
 
-export function buildTestScene(isEditing = false) {
+export function buildTestScene(isEditing?: boolean, editable?: boolean) {
   const testScene = new DashboardScene({
     $timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now' }),
-    isEditing: isEditing,
+    isEditing: isEditing || false,
+    editable: editable || true,
     body: new DefaultGridLayoutManager({
       grid: new SceneGridLayout({
         children: [new DashboardGridItem({ body: new VizPanel({ key: 'panel-1', pluginId: 'text' }) })],
@@ -76,4 +77,15 @@ describe('MakeDashboardEditableButton', () => {
       expect(DashboardInteractions.editButtonClicked).toHaveBeenCalledWith({ outlineExpanded: false });
     });
   });
+
+  it('should set state correctly', async () => {
+    const scene = buildTestScene(false, false);
+
+    render(<MakeDashboardEditableButton dashboard={scene} />);
+    await userEvent.click(await screen.findByTestId(selectors.components.NavToolbar.editDashboard.editButton));
+
+    expect(scene.state.editable).toBe(true);
+    expect(scene.state.meta.canEdit).toBe(true);
+    expect(scene.state.meta.canSave).toBe(true);
+  });
 });

public/app/features/dashboard-scene/scene/new-toolbar/actions/MakeDashboardEditableButton.tsx

@@ -13,7 +13,7 @@ export const MakeDashboardEditableButton = ({ dashboard }: ToolbarActionProps) =
       onClick={() => {
         trackDashboardSceneEditButtonClicked(dashboard.state.uid);
         dashboard.onEnterEditMode();
-        dashboard.setState({ editable: true, meta: { ...dashboard.state.meta, canEdit: true } });
+        dashboard.setState({ meta: { ...dashboard.state.meta, canEdit: true, canSave: true } });
       }}
       tooltip={t('dashboard.toolbar.new.enter-edit-mode.tooltip', 'This dashboard was marked as read only')}
       variant="secondary"