SaveDashboard: remove feature flag for save drawer (#48462)

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -47,7 +47,6 @@ export interface FeatureToggles {
   dashboardComments?: boolean;
   annotationComments?: boolean;
   migrationLocking?: boolean;
-  saveDashboardDrawer?: boolean;
   storage?: boolean;
   alertProvisioning?: boolean;
   export?: boolean;

pkg/services/featuremgmt/registry.go

@@ -175,11 +175,6 @@ var (
 			Description: "Lock database during migrations",
 			State:       FeatureStateBeta,
 		},
-		{
-			Name:        "saveDashboardDrawer",
-			Description: "Use a drawer to show save dashboard dialog",
-			State:       FeatureStateBeta,
-		},
 		{
 			Name:        "storage",
 			Description: "Configurable storage for dashboards, datasources, and resources",

pkg/services/featuremgmt/toggles_gen.go

@@ -131,10 +131,6 @@ const (
 	// Lock database during migrations
 	FlagMigrationLocking = "migrationLocking"
 
-	// FlagSaveDashboardDrawer
-	// Use a drawer to show save dashboard dialog
-	FlagSaveDashboardDrawer = "saveDashboardDrawer"
-
 	// FlagStorage
 	// Configurable storage for dashboards, datasources, and resources
 	FlagStorage = "storage"

public/app/core/services/keybindingSrv.ts

@@ -6,7 +6,7 @@ import { LegacyGraphHoverClearEvent, locationUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import appEvents from 'app/core/app_events';
 import { getExploreUrl } from 'app/core/utils/explore';
-import { SaveDashboardProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardProxy';
+import { SaveDashboardDrawer } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer';
 import { ShareModal } from 'app/features/dashboard/components/ShareModal';
 import { DashboardModel } from 'app/features/dashboard/state';
 
@@ -204,7 +204,7 @@ export class KeybindingSrv {
       if (dashboard.meta.canSave) {
         appEvents.publish(
           new ShowModalReactEvent({
-            component: SaveDashboardProxy,
+            component: SaveDashboardDrawer,
             props: {
               dashboard,
             },

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -8,7 +8,7 @@ import { ButtonGroup, ModalsController, ToolbarButton, PageToolbar, useForceUpda
 import config from 'app/core/config';
 import { toggleKioskMode } from 'app/core/navigation/kiosk';
 import { DashboardCommentsModal } from 'app/features/dashboard/components/DashboardComments/DashboardCommentsModal';
-import { SaveDashboardProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardProxy';
+import { SaveDashboardDrawer } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer';
 import { ShareModal } from 'app/features/dashboard/components/ShareModal';
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
@@ -225,7 +225,7 @@ export const DashNav = React.memo<Props>((props) => {
               tooltip="Save dashboard"
               icon="save"
               onClick={() => {
-                showModal(SaveDashboardProxy, {
+                showModal(SaveDashboardDrawer, {
                   dashboard,
                   onDismiss: hideModal,
                 });

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -40,7 +40,7 @@ import { getVariablesByKey } from '../../../variables/state/selectors';
 import { DashboardPanel } from '../../dashgrid/DashboardPanel';
 import { DashboardModel, PanelModel } from '../../state';
 import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
-import { SaveDashboardProxy } from '../SaveDashboard/SaveDashboardProxy';
+import { SaveDashboardDrawer } from '../SaveDashboard/SaveDashboardDrawer';
 
 import { OptionsPane } from './OptionsPane';
 import { PanelEditorTableView } from './PanelEditorTableView';
@@ -141,7 +141,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   onSaveDashboard = () => {
     appEvents.publish(
       new ShowModalReactEvent({
-        component: SaveDashboardProxy,
+        component: SaveDashboardDrawer,
         props: { dashboard: this.props.dashboard },
       })
     );

public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx

@@ -1,52 +0,0 @@
-import { css } from '@emotion/css';
-import React, { useState } from 'react';
-
-import { Modal } from '@grafana/ui';
-
-import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
-import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
-import { SaveDashboardModalProps } from './types';
-import { useDashboardSave } from './useDashboardSave';
-
-export const SaveDashboardAsModal: React.FC<
-  SaveDashboardModalProps & {
-    isNew?: boolean;
-  }
-> = ({ dashboard, onDismiss, isNew }) => {
-  const { state, onDashboardSave } = useDashboardSave(dashboard);
-  const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
-  return (
-    <>
-      {state.error && (
-        <SaveDashboardErrorProxy
-          error={state.error}
-          dashboard={dashboard}
-          dashboardSaveModel={dashboardSaveModelClone}
-          onDismiss={onDismiss}
-        />
-      )}
-      {!state.error && (
-        <Modal
-          isOpen={true}
-          title="Save dashboard as..."
-          icon="copy"
-          onDismiss={onDismiss}
-          className={css`
-            width: 500px;
-          `}
-        >
-          <SaveDashboardAsForm
-            dashboard={dashboard}
-            onCancel={onDismiss}
-            onSuccess={onDismiss}
-            onSubmit={(clone, options, dashboard) => {
-              setDashboardSaveModelClone(clone);
-              return onDashboardSave(clone, options, dashboard);
-            }}
-            isNew={isNew}
-          />
-        </Modal>
-      )}
-    </>
-  );
-};

public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx

@@ -4,7 +4,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { Button, ButtonVariant, ModalsController, FullWidthButtonContainer } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';
 
-import { SaveDashboardProxy } from './SaveDashboardProxy';
+import { SaveDashboardDrawer } from './SaveDashboardDrawer';
 
 interface SaveDashboardButtonProps {
   dashboard: DashboardModel;
@@ -18,7 +18,7 @@ export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashbo
         return (
           <Button
             onClick={() => {
-              showModal(SaveDashboardProxy, {
+              showModal(SaveDashboardDrawer, {
                 dashboard,
                 onSaveSuccess,
                 onDismiss: hideModal,
@@ -46,7 +46,7 @@ export const SaveDashboardAsButton: React.FC<SaveDashboardButtonProps & { varian
           <FullWidthButtonContainer>
             <Button
               onClick={() => {
-                showModal(SaveDashboardProxy, {
+                showModal(SaveDashboardDrawer, {
                   dashboard,
                   onSaveSuccess,
                   onDismiss: hideModal,

public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx

@@ -40,12 +40,11 @@ export const SaveDashboardDiff = ({ diff, oldValue, newValue }: SaveDashboardDif
       }
     }
     return {
-      oldJSON,
-      newJSON,
       schemaChange,
       diffs,
       count,
       showDiffs: count < 15, // overwhelming if too many changes
+      jsonView: <DiffViewer oldValue={oldJSON} newValue={newJSON} />,
     };
   }, [diff, oldValue, newValue]);
 
@@ -65,7 +64,7 @@ export const SaveDashboardDiff = ({ diff, oldValue, newValue }: SaveDashboardDif
       {value.showDiffs && <div className={styles.spacer}>{value.diffs}</div>}
 
       <h4>JSON Model</h4>
-      <DiffViewer oldValue={value.oldJSON} newValue={value.newJSON} />
+      {value.jsonView}
     </div>
   );
 };

public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx

@@ -110,9 +110,16 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, onSaveSuccess, isCop
     );
   }
 
+  let title = 'Save dashboard';
+  if (isCopy) {
+    title = 'Save dashboard copy';
+  } else if (isProvisioned) {
+    title = 'Provisioned dashboard';
+  }
+
   return (
     <Drawer
-      title={isCopy ? 'Save dashboard copy' : 'Save dashboard'}
+      title={title}
       onClose={onDismiss}
       width={'40%'}
       subtitle={dashboard.title}

public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx

@@ -1,66 +0,0 @@
-import { css } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
-
-import { Modal } from '@grafana/ui';
-
-import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
-import { SaveDashboardForm } from './forms/SaveDashboardForm';
-import { SaveDashboardModalProps, SaveDashboardOptions, SaveDashboardData } from './types';
-import { useDashboardSave } from './useDashboardSave';
-
-export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss, onSaveSuccess }) => {
-  const { state, onDashboardSave } = useDashboardSave(dashboard);
-  const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
-  const [options, setOptions] = useState<SaveDashboardOptions>({});
-
-  const data = useMemo<SaveDashboardData>(() => {
-    const clone = dashboard.getSaveModelClone({
-      saveTimerange: Boolean(options.saveTimerange),
-      saveVariables: Boolean(options.saveVariables),
-    });
-
-    return { clone, diff: {}, diffCount: 0, hasChanges: true };
-  }, [dashboard, options]);
-
-  return (
-    <>
-      {state.error && (
-        <SaveDashboardErrorProxy
-          error={state.error}
-          dashboard={dashboard}
-          dashboardSaveModel={dashboardSaveModelClone}
-          onDismiss={onDismiss}
-        />
-      )}
-      {!state.error && (
-        <Modal
-          isOpen={true}
-          title="Save dashboard"
-          icon="copy"
-          onDismiss={onDismiss}
-          className={css`
-            width: 500px;
-          `}
-        >
-          <SaveDashboardForm
-            dashboard={dashboard}
-            onCancel={onDismiss}
-            saveModel={data}
-            options={options}
-            onSuccess={() => {
-              onDismiss();
-              if (onSaveSuccess) {
-                onSaveSuccess();
-              }
-            }}
-            onSubmit={(clone, options, dashboard) => {
-              setDashboardSaveModelClone(clone);
-              return onDashboardSave(clone, options, dashboard);
-            }}
-            onOptionsChange={setOptions}
-          />
-        </Modal>
-      )}
-    </>
-  );
-};

public/app/features/dashboard/components/SaveDashboard/SaveDashboardProxy.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import { config } from '@grafana/runtime';
-
-import { SaveDashboardAsModal } from './SaveDashboardAsModal';
-import { SaveDashboardDrawer } from './SaveDashboardDrawer';
-import { SaveDashboardModal } from './SaveDashboardModal';
-import { SaveProvisionedDashboard } from './SaveProvisionedDashboard';
-import { SaveDashboardModalProps } from './types';
-
-export const SaveDashboardProxy: React.FC<SaveDashboardModalProps> = ({
-  dashboard,
-  onDismiss,
-  onSaveSuccess,
-  isCopy,
-}) => {
-  if (config.featureToggles.saveDashboardDrawer) {
-    return (
-      <SaveDashboardDrawer dashboard={dashboard} onDismiss={onDismiss} onSaveSuccess={onSaveSuccess} isCopy={isCopy} />
-    );
-  }
-
-  const isProvisioned = dashboard.meta.provisioned;
-  const isNew = dashboard.version === 0;
-  const isChanged = dashboard.version > 0;
-
-  const modalProps = {
-    dashboard,
-    onDismiss,
-    onSaveSuccess,
-    isCopy,
-  };
-
-  if (isNew || isCopy) {
-    return <SaveDashboardAsModal {...modalProps} isNew />;
-  }
-  return (
-    <>
-      {isChanged && !isProvisioned && <SaveDashboardModal {...modalProps} />}
-      {isProvisioned && <SaveProvisionedDashboard {...modalProps} />}
-    </>
-  );
-};

public/app/features/dashboard/components/SaveDashboard/SaveProvisionedDashboard.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { Modal } from '@grafana/ui';
-
-import { SaveProvisionedDashboardForm } from './forms/SaveProvisionedDashboardForm';
-import { SaveDashboardModalProps } from './types';
-
-export const SaveProvisionedDashboard: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss }) => {
-  return (
-    <Modal isOpen={true} title="Cannot save provisioned dashboard" icon="copy" onDismiss={onDismiss}>
-      <SaveProvisionedDashboardForm dashboard={dashboard} onCancel={onDismiss} onSuccess={onDismiss} />
-    </Modal>
-  );
-};