NewPanelEditor: Fixed issue going back to dashboard after pull page reload (#22121)

* Fixed issue going back to dashboard

* fixed logic

* Fixed unit test

* Fixed unit test

public/app/features/dashboard/components/PanelEditor/state/actions.ts

@@ -1,7 +1,7 @@
 import { PanelModel, DashboardModel } from '../../../state';
 import { PanelData } from '@grafana/data';
 import { ThunkResult } from 'app/types';
-import { setEditorPanelData, updateEditorInitState } from './reducers';
+import { setEditorPanelData, updateEditorInitState, closeCompleted } from './reducers';
 
 export function initPanelEditor(sourcePanel: PanelModel, dashboard: DashboardModel): ThunkResult<void> {
   return dispatch => {
@@ -33,5 +33,7 @@ export function panelEditorCleanUp(): ThunkResult<void> {
 
     dashboard.exitPanelEditor();
     querySubscription.unsubscribe();
+
+    dispatch(closeCompleted());
   };
 }

public/app/features/dashboard/components/PanelEditor/state/reducers.ts

@@ -15,6 +15,7 @@ export interface PanelEditorStateNew {
   querySubscription?: Unsubscribable;
   initDone: boolean;
   shouldDiscardChanges: boolean;
+  isOpen: boolean;
 }
 
 export const initialState: PanelEditorStateNew = {
@@ -29,6 +30,7 @@ export const initialState: PanelEditorStateNew = {
   mode: DisplayMode.Fill,
   initDone: false,
   shouldDiscardChanges: false,
+  isOpen: false,
 };
 
 interface InitEditorPayload {
@@ -46,6 +48,7 @@ const pluginsSlice = createSlice({
       state.getSourcePanel = () => action.payload.sourcePanel;
       state.querySubscription = action.payload.querySubscription;
       state.initDone = true;
+      state.isOpen = true;
     },
     setEditorPanelData: (state, action: PayloadAction<PanelData>) => {
       state.getData = () => action.payload;
@@ -59,6 +62,10 @@ const pluginsSlice = createSlice({
     setDiscardChanges: (state, action: PayloadAction<boolean>) => {
       state.shouldDiscardChanges = action.payload;
     },
+    closeCompleted: state => {
+      state.isOpen = false;
+      state.initDone = false;
+    },
   },
 });
 
@@ -68,6 +75,7 @@ export const {
   toggleOptionsView,
   setDisplayMode,
   setDiscardChanges,
+  closeCompleted,
 } = pluginsSlice.actions;
 
 export const panelEditorReducerNew = pluginsSlice.reducer;

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -271,6 +271,7 @@ describe('DashboardPage', () => {
           edit: false,
         },
       },
+      panelEditorNew: {},
       dashboard: {
         getModel: () => null as DashboardModel,
       },
@@ -289,6 +290,7 @@ describe('DashboardPage', () => {
           edit: 'true',
         },
       },
+      panelEditorNew: {},
       dashboard: {
         getModel: () => null as DashboardModel,
       },

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -54,6 +54,7 @@ export interface Props {
   notifyApp: typeof notifyApp;
   updateLocation: typeof updateLocation;
   inspectTab?: InspectTab;
+  isNewEditorOpen?: boolean;
 }
 
 export interface State {
@@ -260,6 +261,7 @@ export class DashboardPage extends PureComponent<Props, State> {
       inspectPanelId,
       urlEditPanel,
       inspectTab,
+      isNewEditorOpen,
     } = this.props;
     const { isSettingsOpening, isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state;
 
@@ -316,6 +318,7 @@ export class DashboardPage extends PureComponent<Props, State> {
                 dashboard={dashboard}
                 isEditing={isEditing}
                 isFullscreen={isFullscreen}
+                isNewEditorOpen={isNewEditorOpen}
                 scrollTop={approximateScrollTop}
               />
             </div>
@@ -349,6 +352,7 @@ export const mapStateToProps = (state: StoreState) => ({
   initError: state.dashboard.initError,
   dashboard: state.dashboard.getModel() as DashboardModel,
   inspectTab: state.location.query.tab,
+  isNewEditorOpen: state.panelEditorNew.isOpen,
 });
 
 const mapDispatchToProps = {

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -98,6 +98,7 @@ export interface Props {
   isEditing: boolean;
   isFullscreen: boolean;
   scrollTop: number;
+  isNewEditorOpen?: boolean;
 }
 
 export class DashboardGrid extends PureComponent<Props> {