From 4e38ac9cf7c3d25e467f4bc6658f18cb720f3742 Mon Sep 17 00:00:00 2001 From: Kristina Date: Tue, 8 Feb 2022 10:20:22 -0600 Subject: [PATCH] Remove return to panel button and related code (#45018) --- packages/grafana-data/src/types/explore.ts | 1 - public/app/core/utils/explore.test.ts | 1 - public/app/core/utils/explore.ts | 10 +- .../dashboard/state/initDashboard.test.ts | 2 - .../features/dashboard/state/initDashboard.ts | 29 +---- .../app/features/dashboard/state/reducers.ts | 17 +-- .../features/explore/ExplorePaneContainer.tsx | 9 +- .../app/features/explore/ExploreToolbar.tsx | 3 - .../explore/ReturnToDashboardButton.test.tsx | 46 -------- .../explore/ReturnToDashboardButton.tsx | 110 ------------------ .../app/features/explore/state/explorePane.ts | 22 +--- public/app/features/explore/state/main.ts | 3 +- public/app/types/dashboard.ts | 2 - public/app/types/explore.ts | 6 - 14 files changed, 13 insertions(+), 248 deletions(-) delete mode 100644 public/app/features/explore/ReturnToDashboardButton.test.tsx delete mode 100644 public/app/features/explore/ReturnToDashboardButton.tsx diff --git a/packages/grafana-data/src/types/explore.ts b/packages/grafana-data/src/types/explore.ts index cd115a42a74..4e0bd6a7d61 100644 --- a/packages/grafana-data/src/types/explore.ts +++ b/packages/grafana-data/src/types/explore.ts @@ -9,7 +9,6 @@ export interface ExploreUrlState { datasource: string; queries: T[]; range: RawTimeRange; - originPanelId?: number; context?: string; panelsState?: ExplorePanelsState; } diff --git a/public/app/core/utils/explore.test.ts b/public/app/core/utils/explore.test.ts index 97fde9b8820..42e85d45fcc 100644 --- a/public/app/core/utils/explore.test.ts +++ b/public/app/core/utils/explore.test.ts @@ -23,7 +23,6 @@ const DEFAULT_EXPLORE_STATE: ExploreUrlState = { datasource: '', queries: [], range: DEFAULT_RANGE, - originPanelId: undefined, }; describe('state functions', () => { diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index f10af2037f1..d4181c25086 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -103,7 +103,7 @@ export async function getExploreUrl(args: GetExploreUrlArguments): Promise !isSegment(segment, 'ui', 'originPanelId', 'mode', '__panelsState') - ); + const queries = parsedSegments.filter((segment) => !isSegment(segment, 'ui', 'mode', '__panelsState')); - const originPanelId = parsedSegments.find((segment) => isSegment(segment, 'originPanelId')); const panelsState = parsedSegments.find((segment) => isSegment(segment, '__panelsState'))?.__panelsState; - return { datasource, queries, range, originPanelId, panelsState }; + return { datasource, queries, range, panelsState }; } export function generateKey(index = 0): string { diff --git a/public/app/features/dashboard/state/initDashboard.test.ts b/public/app/features/dashboard/state/initDashboard.test.ts index 822424ff95c..f7083989a6b 100644 --- a/public/app/features/dashboard/state/initDashboard.test.ts +++ b/public/app/features/dashboard/state/initDashboard.test.ts @@ -117,7 +117,6 @@ function describeInitScenario(description: string, scenarioFn: ScenarioFn) { user: {}, explore: { left: { - originPanelId: undefined, queries: [], }, }, @@ -230,7 +229,6 @@ describeInitScenario('Initializing existing dashboard', (ctx) => { ctx.setup(() => { ctx.storeState.user.orgId = 12; - ctx.storeState.explore.left.originPanelId = 2; ctx.storeState.explore.left.queries = mockQueries; }); diff --git a/public/app/features/dashboard/state/initDashboard.ts b/public/app/features/dashboard/state/initDashboard.ts index 205b1000f35..876e2170e3a 100644 --- a/public/app/features/dashboard/state/initDashboard.ts +++ b/public/app/features/dashboard/state/initDashboard.ts @@ -8,7 +8,6 @@ import { keybindingSrv } from 'app/core/services/keybindingSrv'; // Actions import { notifyApp } from 'app/core/actions'; import { - clearDashboardQueriesToUpdateOnLoad, dashboardInitCompleted, dashboardInitFailed, dashboardInitFetching, @@ -18,7 +17,7 @@ import { // Types import { DashboardDTO, DashboardInitPhase, DashboardRoutes, StoreState, ThunkDispatch, ThunkResult } from 'app/types'; import { DashboardModel } from './DashboardModel'; -import { DataQuery, locationUtil, setWeekStart } from '@grafana/data'; +import { locationUtil, setWeekStart } from '@grafana/data'; import { initVariablesTransaction } from '../../variables/state/actions'; import { emitDashboardViewEvent } from './analyticsProcessor'; import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher'; @@ -156,11 +155,6 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult { timeSrv.init(dashboard); - if (storeState.dashboard.modifiedQueries) { - const { panelId, queries } = storeState.dashboard.modifiedQueries; - dashboard.meta.fromExplore = !!(panelId && queries); - } - // template values service needs to initialize completely before the rest of the dashboard can load await dispatch(initVariablesTransaction(args.urlUid!, dashboard)); @@ -195,11 +189,6 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult { console.error(err); } - if (storeState.dashboard.modifiedQueries) { - const { panelId, queries } = storeState.dashboard.modifiedQueries; - updateQueriesWhenComingFromExplore(dispatch, dashboard, panelId, queries); - } - // send open dashboard event if (args.routeName !== DashboardRoutes.New) { emitDashboardViewEvent(dashboard); @@ -248,19 +237,3 @@ function getNewDashboardModelData(urlFolderId?: string | null): any { return data; } - -function updateQueriesWhenComingFromExplore( - dispatch: ThunkDispatch, - dashboard: DashboardModel, - originPanelId: number, - queries: DataQuery[] -) { - const panelArrId = dashboard.panels.findIndex((panel) => panel.id === originPanelId); - - if (panelArrId > -1) { - dashboard.panels[panelArrId].targets = queries; - } - - // Clear update state now that we're done - dispatch(clearDashboardQueriesToUpdateOnLoad()); -} diff --git a/public/app/features/dashboard/state/reducers.ts b/public/app/features/dashboard/state/reducers.ts index 2aa7f22c47c..5f34e4e5f8a 100644 --- a/public/app/features/dashboard/state/reducers.ts +++ b/public/app/features/dashboard/state/reducers.ts @@ -1,11 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { - DashboardAclDTO, - DashboardInitError, - DashboardInitPhase, - DashboardState, - QueriesToUpdateOnDashboardLoad, -} from 'app/types'; +import { DashboardAclDTO, DashboardInitError, DashboardInitPhase, DashboardState } from 'app/types'; import { AngularComponent } from '@grafana/runtime'; import { processAclItems } from 'app/core/utils/acl'; import { DashboardModel } from './DashboardModel'; @@ -17,7 +11,6 @@ export const initialState: DashboardState = { isInitSlow: false, getModel: () => null, permissions: [], - modifiedQueries: null, initError: null, }; @@ -55,12 +48,6 @@ const dashboardSlice = createSlice({ state.initError = null; state.getModel = () => null; }, - setDashboardQueriesToUpdateOnLoad: (state, action: PayloadAction) => { - state.modifiedQueries = action.payload; - }, - clearDashboardQueriesToUpdateOnLoad: (state) => { - state.modifiedQueries = null; - }, addPanel: (state, action: PayloadAction) => { //state.panels[action.payload.id] = { pluginId: action.payload.type }; }, @@ -90,8 +77,6 @@ export const { dashboardInitCompleted, dashboardInitServices, cleanUpDashboard, - setDashboardQueriesToUpdateOnLoad, - clearDashboardQueriesToUpdateOnLoad, addPanel, } = dashboardSlice.actions; diff --git a/public/app/features/explore/ExplorePaneContainer.tsx b/public/app/features/explore/ExplorePaneContainer.tsx index 8ac3872f12d..e46b3c5ceea 100644 --- a/public/app/features/explore/ExplorePaneContainer.tsx +++ b/public/app/features/explore/ExplorePaneContainer.tsx @@ -44,8 +44,7 @@ class ExplorePaneContainerUnconnected extends React.PureComponent { } componentDidMount() { - const { initialized, exploreId, initialDatasource, initialQueries, initialRange, originPanelId, panelsState } = - this.props; + const { initialized, exploreId, initialDatasource, initialQueries, initialRange, panelsState } = this.props; const width = this.el?.offsetWidth ?? 0; // initialize the whole explore first time we mount and if browser history contains a change in datasource @@ -57,8 +56,7 @@ class ExplorePaneContainerUnconnected extends React.PureComponent { initialRange, width, this.exploreEvents, - panelsState, - originPanelId + panelsState ); } } @@ -103,7 +101,7 @@ function mapStateToProps(state: StoreState, props: OwnProps) { const timeZone = getTimeZone(state.user); const fiscalYearStartMonth = getFiscalYearStartMonth(state.user); - const { datasource, queries, range: urlRange, originPanelId, panelsState } = (urlState || {}) as ExploreUrlState; + const { datasource, queries, range: urlRange, panelsState } = (urlState || {}) as ExploreUrlState; const initialDatasource = datasource || store.get(lastUsedDatasourceKeyForOrgId(state.user.orgId)); const initialQueries: DataQuery[] = ensureQueriesMemoized(queries); const initialRange = urlRange @@ -115,7 +113,6 @@ function mapStateToProps(state: StoreState, props: OwnProps) { initialDatasource, initialQueries, initialRange, - originPanelId, panelsState, }; } diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 56f829555e0..e11baa8cfee 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -16,7 +16,6 @@ import { LiveTailButton } from './LiveTailButton'; import { RunButton } from './RunButton'; import { LiveTailControls } from './useLiveTailControls'; import { cancelQueries, runQueries } from './state/query'; -import ReturnToDashboardButton from './ReturnToDashboardButton'; import { isSplit } from './state/selectors'; import { DashNavButton } from '../dashboard/components/DashNav/DashNavButton'; @@ -102,8 +101,6 @@ class UnConnectedExploreToolbar extends PureComponent { ].filter(Boolean)} > - - {!splitted ? ( split()} icon="columns" disabled={isLive}> Split diff --git a/public/app/features/explore/ReturnToDashboardButton.test.tsx b/public/app/features/explore/ReturnToDashboardButton.test.tsx deleted file mode 100644 index 7d29a84a1d8..00000000000 --- a/public/app/features/explore/ReturnToDashboardButton.test.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { ComponentProps } from 'react'; -import { render, screen } from '@testing-library/react'; -import { UnconnectedReturnToDashboardButton as ReturnToDashboardButton } from './ReturnToDashboardButton'; -import { ExploreId } from 'app/types/explore'; - -const createProps = (propsOverride?: Partial>) => { - const defaultProps = { - originPanelId: 1, - splitted: false, - canEdit: true, - exploreId: ExploreId.left, - queries: [], - setDashboardQueriesToUpdateOnLoad: jest.fn(), - }; - - return Object.assign(defaultProps, propsOverride) as ComponentProps; -}; - -describe('ReturnToDashboardButton', () => { - it('should render 2 buttons if originPanelId is provided', () => { - render(); - expect(screen.getAllByTestId(/returnButton/i)).toHaveLength(2); - }); - - it('should not render any button if originPanelId is not provided', () => { - render(); - expect(screen.queryByTestId(/returnButton/i)).toBeNull(); - }); - - it('should not render any button if split view', () => { - render(); - expect(screen.queryByTestId(/returnButton/i)).toBeNull(); - }); - - it('should not render return to panel with changes button if user cannot edit panel', () => { - render(); - expect(screen.getAllByTestId(/returnButton/i)).toHaveLength(1); - }); - - it('should show option to return to dashboard with changes', () => { - render(); - const returnWithChangesButton = screen.getByTestId('returnButtonWithChanges'); - returnWithChangesButton.click(); - expect(screen.getAllByText('Return to panel with changes')).toHaveLength(1); - }); -}); diff --git a/public/app/features/explore/ReturnToDashboardButton.tsx b/public/app/features/explore/ReturnToDashboardButton.tsx deleted file mode 100644 index b00cc5def0d..00000000000 --- a/public/app/features/explore/ReturnToDashboardButton.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { FC } from 'react'; -import { connect, ConnectedProps } from 'react-redux'; -import { ButtonGroup, ButtonSelect, Icon, ToolbarButton, Tooltip } from '@grafana/ui'; -import { DataQuery, urlUtil } from '@grafana/data'; - -import kbn from '../../core/utils/kbn'; -import config from 'app/core/config'; -import { getDashboardSrv } from '../dashboard/services/DashboardSrv'; -import { StoreState } from 'app/types'; -import { ExploreId } from 'app/types/explore'; -import { setDashboardQueriesToUpdateOnLoad } from '../dashboard/state/reducers'; -import { isSplit } from './state/selectors'; -import { locationService } from '@grafana/runtime'; -import { contextSrv } from 'app/core/services/context_srv'; - -function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) { - const explore = state.explore; - const splitted = isSplit(state); - const { datasourceInstance, queries, originPanelId } = explore[exploreId]!; - - const roles = ['Editor', 'Admin']; - if (config.viewersCanEdit) { - roles.push('Viewer'); - } - - return { - exploreId, - datasourceInstance, - queries, - originPanelId, - splitted, - canEdit: roles.some((r) => contextSrv.hasRole(r)), - }; -} - -const mapDispatchToProps = { - setDashboardQueriesToUpdateOnLoad, -}; - -const connector = connect(mapStateToProps, mapDispatchToProps); -type Props = ConnectedProps; - -export const UnconnectedReturnToDashboardButton: FC = ({ - originPanelId, - setDashboardQueriesToUpdateOnLoad, - queries, - splitted, - canEdit, -}) => { - const withOriginId = originPanelId && Number.isInteger(originPanelId); - - // If in split mode, or no origin id, escape early and return null - if (splitted || !withOriginId) { - return null; - } - - const cleanQueries = (queries: DataQuery[]) => { - return queries.map((query: DataQuery & { context?: string }) => { - delete query.context; - delete query.key; - return query; - }); - }; - - const returnToPanel = async ({ withChanges = false } = {}) => { - const dashboardSrv = getDashboardSrv(); - const dash = dashboardSrv.getCurrent(); - if (!dash) { - return; - } - - const titleSlug = kbn.slugifyForUrl(dash.title); - - if (withChanges) { - setDashboardQueriesToUpdateOnLoad({ - panelId: originPanelId!, - queries: cleanQueries(queries), - }); - } - - const query: any = {}; - - if (withChanges || dash.panelInEdit) { - query.editPanel = originPanelId; - } else if (dash.panelInView) { - query.viewPanel = originPanelId; - } - - locationService.push(urlUtil.renderUrl(`/d/${dash.uid}/:${titleSlug}`, query)); - }; - - return ( - - - returnToPanel()}> - - - - {canEdit && ( - returnToPanel({ withChanges: true })} - /> - )} - - ); -}; - -export default connector(UnconnectedReturnToDashboardButton); diff --git a/public/app/features/explore/state/explorePane.ts b/public/app/features/explore/state/explorePane.ts index 6d1a104ba6f..31bb1b1da06 100644 --- a/public/app/features/explore/state/explorePane.ts +++ b/public/app/features/explore/state/explorePane.ts @@ -98,7 +98,6 @@ export interface InitializeExplorePayload { range: TimeRange; history: HistoryItem[]; datasourceInstance?: DataSourceApi; - originPanelId?: number | null; } export const initializeExploreAction = createAction('explore/initializeExplore'); @@ -143,9 +142,7 @@ export function initializeExplore( range: TimeRange, containerWidth: number, eventBridge: EventBusExtended, - panelsState?: ExplorePanelsState, - - originPanelId?: number | null + panelsState?: ExplorePanelsState ): ThunkResult { return async (dispatch, getState) => { const exploreDatasources = getDataSourceSrv().getList(); @@ -166,7 +163,6 @@ export function initializeExplore( eventBridge, queries, range, - originPanelId, datasourceInstance: instance, history, }) @@ -205,7 +201,7 @@ export function refreshExplore(exploreId: ExploreId, newUrlQuery: string): Thunk const { containerWidth, eventBridge } = itemState; - const { datasource, queries, range: urlRange, originPanelId, panelsState } = newUrlState; + const { datasource, queries, range: urlRange, panelsState } = newUrlState; const refreshQueries: DataQuery[] = []; for (let index = 0; index < queries.length; index++) { @@ -222,16 +218,7 @@ export function refreshExplore(exploreId: ExploreId, newUrlQuery: string): Thunk if (update.datasource) { const initialQueries = ensureQueries(queries); await dispatch( - initializeExplore( - exploreId, - datasource, - initialQueries, - range, - containerWidth, - eventBridge, - panelsState, - originPanelId - ) + initializeExplore(exploreId, datasource, initialQueries, range, containerWidth, eventBridge, panelsState) ); return; } @@ -285,7 +272,7 @@ export const paneReducer = (state: ExploreItemState = makeExplorePaneState(), ac } if (initializeExploreAction.match(action)) { - const { containerWidth, eventBridge, queries, range, originPanelId, datasourceInstance, history } = action.payload; + const { containerWidth, eventBridge, queries, range, datasourceInstance, history } = action.payload; return { ...state, @@ -295,7 +282,6 @@ export const paneReducer = (state: ExploreItemState = makeExplorePaneState(), ac queries, initialized: true, queryKeys: getQueryKeys(queries, datasourceInstance), - originPanelId, datasourceInstance, history, datasourceMissing: !datasourceInstance, diff --git a/public/app/features/explore/state/main.ts b/public/app/features/explore/state/main.ts index 6edbe74ac3c..5d2bb1f10c9 100644 --- a/public/app/features/explore/state/main.ts +++ b/public/app/features/explore/state/main.ts @@ -237,7 +237,7 @@ export const exploreReducer = (state = initialExploreState, action: AnyAction): stopQueryState(rightState.querySubscription); } - if (payload.force || !Number.isInteger(state.left.originPanelId)) { + if (payload.force) { return initialExploreState; } @@ -246,7 +246,6 @@ export const exploreReducer = (state = initialExploreState, action: AnyAction): left: { ...initialExploreItemState, queries: state.left.queries, - originPanelId: state.left.originPanelId, }, }; } diff --git a/public/app/types/dashboard.ts b/public/app/types/dashboard.ts index 3d54d1e4d51..ba460c913fa 100644 --- a/public/app/types/dashboard.ts +++ b/public/app/types/dashboard.ts @@ -18,7 +18,6 @@ export interface DashboardMeta { url?: string; folderId?: number; folderUid?: string; - fromExplore?: boolean; canMakeEditable?: boolean; submenuEnabled?: boolean; provisioned?: boolean; @@ -81,5 +80,4 @@ export interface DashboardState { isInitSlow: boolean; initError: DashboardInitError | null; permissions: DashboardAcl[]; - modifiedQueries: QueriesToUpdateOnDashboardLoad | null; } diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 396809ae76b..66952a2ec9a 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -147,12 +147,6 @@ export interface ExploreItemState { queryResponse: PanelData; - /** - * Panel Id that is set if we come to explore from a penel. Used so we can get back to it and optionally modify the - * query of that panel. - */ - originPanelId?: number | null; - showLogs?: boolean; showMetrics?: boolean; showTable?: boolean;