Skip to content

Commit 0271be1

Browse files
AshwinBhatkalAshwinBhatkal
authored
chore: remove dashboard provider from the root (#10526)
* chore: remove dashboard provider from the root * chore: fix tests * chore: fix tests * chore: remove dashboardId from provider * chore: remove old instances of dashboard provider * chore: separate dashboard widget fully * chore: fix tests * chore: resolve self comments
1 parent 92d220c commit 0271be1

File tree

15 files changed

+208
-363
lines changed

15 files changed

+208
-363
lines changed

‎frontend/src/AppRoutes/index.tsx‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import posthog from 'posthog-js';
2929
import { useAppContext } from 'providers/App/App';
3030
import { IUser } from 'providers/App/types';
3131
import { CmdKProvider } from 'providers/cmdKProvider';
32-
import { DashboardProvider } from 'providers/Dashboard/Dashboard';
3332
import { ErrorModalProvider } from 'providers/ErrorModalProvider';
3433
import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
3534
import { QueryBuilderProvider } from 'providers/QueryBuilder';
@@ -384,28 +383,26 @@ function App(): JSX.Element {
384383
<PrivateRoute>
385384
<ResourceProvider>
386385
<QueryBuilderProvider>
387-
<DashboardProvider>
388-
<KeyboardHotkeysProvider>
389-
<AppLayout>
390-
<PreferenceContextProvider>
391-
<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
392-
<Switch>
393-
{routes.map(({ path, component, exact }) => (
394-
<Route
395-
key={`${path}`}
396-
exact={exact}
397-
path={path}
398-
component={component}
399-
/>
400-
))}
401-
<Route exact path="/" component={Home} />
402-
<Route path="*" component={NotFound} />
403-
</Switch>
404-
</Suspense>
405-
</PreferenceContextProvider>
406-
</AppLayout>
407-
</KeyboardHotkeysProvider>
408-
</DashboardProvider>
386+
<KeyboardHotkeysProvider>
387+
<AppLayout>
388+
<PreferenceContextProvider>
389+
<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
390+
<Switch>
391+
{routes.map(({ path, component, exact }) => (
392+
<Route
393+
key={`${path}`}
394+
exact={exact}
395+
path={path}
396+
component={component}
397+
/>
398+
))}
399+
<Route exact path="/" component={Home} />
400+
<Route path="*" component={NotFound} />
401+
</Switch>
402+
</Suspense>
403+
</PreferenceContextProvider>
404+
</AppLayout>
405+
</KeyboardHotkeysProvider>
409406
</QueryBuilderProvider>
410407
</ResourceProvider>
411408
</PrivateRoute>

‎frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,6 @@ const mockSafeNavigate = jest.fn();
3434
jest.mock('react-router-dom', () => ({
3535
...jest.requireActual('react-router-dom'),
3636
useLocation: jest.fn(),
37-
useRouteMatch: jest.fn().mockReturnValue({
38-
params: {
39-
dashboardId: 4,
40-
},
41-
}),
4237
}));
4338

4439
jest.mock(
@@ -69,7 +64,7 @@ describe('Dashboard landing page actions header tests', () => {
6964
(useLocation as jest.Mock).mockReturnValue(mockLocation);
7065
const { getByTestId } = render(
7166
<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
72-
<DashboardProvider>
67+
<DashboardProvider dashboardId="4">
7368
<DashboardDescription
7469
handle={{
7570
active: false,
@@ -110,7 +105,7 @@ describe('Dashboard landing page actions header tests', () => {
110105
);
111106
const { getByTestId } = render(
112107
<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
113-
<DashboardProvider>
108+
<DashboardProvider dashboardId="4">
114109
<DashboardDescription
115110
handle={{
116111
active: false,
@@ -149,7 +144,7 @@ describe('Dashboard landing page actions header tests', () => {
149144

150145
const { getByText } = render(
151146
<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
152-
<DashboardProvider>
147+
<DashboardProvider dashboardId="4">
153148
<DashboardDescription
154149
handle={{
155150
active: false,

‎frontend/src/container/LogsPanelTable/__tests__/LogsPanelComponent.test.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import NewWidget from 'container/NewWidget';
55
import { logsPaginationQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
66
import { server } from 'mocks-server/server';
77
import { rest } from 'msw';
8-
import { DashboardProvider } from 'providers/Dashboard/Dashboard';
98
import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
109
import i18n from 'ReactI18';
1110
import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
@@ -104,15 +103,13 @@ describe('LogsPanelComponent', () => {
104103
const renderComponent = async (): Promise<void> => {
105104
render(
106105
<I18nextProvider i18n={i18n}>
107-
<DashboardProvider>
108-
<PreferenceContextProvider>
109-
<NewWidget
110-
selectedGraph={PANEL_TYPES.LIST}
111-
fillSpans={undefined}
112-
yAxisUnit={undefined}
113-
/>
114-
</PreferenceContextProvider>
115-
</DashboardProvider>
106+
<PreferenceContextProvider>
107+
<NewWidget
108+
dashboardId=""
109+
selectedDashboard={undefined}
110+
selectedGraph={PANEL_TYPES.LIST}
111+
/>
112+
</PreferenceContextProvider>
116113
</I18nextProvider>,
117114
);
118115

‎frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx‎

Lines changed: 16 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,15 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
88
import TextToolTip from 'components/TextToolTip';
99
import { PANEL_TYPES } from 'constants/queryBuilder';
1010
import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
11-
import {
12-
getDefaultWidgetData,
13-
PANEL_TYPE_TO_QUERY_TYPES,
14-
} from 'container/NewWidget/utils';
11+
import { PANEL_TYPE_TO_QUERY_TYPES } from 'container/NewWidget/utils';
1512
import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
16-
// import { QueryBuilder } from 'container/QueryBuilder';
1713
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
1814
import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
1915
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
2016
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
2117
import { useIsDarkMode } from 'hooks/useDarkMode';
22-
import useUrlQuery from 'hooks/useUrlQuery';
23-
import { defaultTo, isUndefined } from 'lodash-es';
2418
import { Atom, Terminal } from 'lucide-react';
25-
import { useDashboard } from 'providers/Dashboard/Dashboard';
26-
import {
27-
getNextWidgets,
28-
getPreviousWidgets,
29-
getSelectedWidgetIndex,
30-
} from 'providers/Dashboard/util';
3119
import { Widgets } from 'types/api/dashboard/getAll';
32-
import { Query } from 'types/api/queryBuilder/queryBuilderData';
3320
import { EQueryType } from 'types/common/dashboard';
3421

3522
import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
@@ -40,77 +27,25 @@ function QuerySection({
4027
selectedGraph,
4128
queryRangeKey,
4229
isLoadingQueries,
30+
selectedWidget,
31+
dashboardVersion,
32+
dashboardId,
33+
dashboardName,
34+
isNewPanel,
4335
}: QueryProps): JSX.Element {
4436
const {
4537
currentQuery,
4638
handleRunQuery: handleRunQueryFromQueryBuilder,
4739
redirectWithQueryBuilderData,
4840
} = useQueryBuilder();
49-
const urlQuery = useUrlQuery();
5041
const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
5142

52-
const { selectedDashboard, setSelectedDashboard } = useDashboard();
53-
5443
const isDarkMode = useIsDarkMode();
5544

56-
const { widgets } = selectedDashboard?.data || {};
57-
58-
const getWidget = useCallback(() => {
59-
const widgetId = urlQuery.get('widgetId');
60-
return defaultTo(
61-
widgets?.find((e) => e.id === widgetId),
62-
getDefaultWidgetData(widgetId || '', selectedGraph),
63-
);
64-
}, [urlQuery, widgets, selectedGraph]);
65-
66-
const selectedWidget = getWidget() as Widgets;
67-
6845
const { query } = selectedWidget;
6946

7047
useShareBuilderUrl({ defaultValue: query });
7148

72-
const handleStageQuery = useCallback(
73-
(query: Query): void => {
74-
if (selectedDashboard === undefined) {
75-
return;
76-
}
77-
78-
const selectedWidgetIndex = getSelectedWidgetIndex(
79-
selectedDashboard,
80-
selectedWidget.id,
81-
);
82-
83-
const previousWidgets = getPreviousWidgets(
84-
selectedDashboard,
85-
selectedWidgetIndex,
86-
);
87-
88-
const nextWidgets = getNextWidgets(selectedDashboard, selectedWidgetIndex);
89-
90-
setSelectedDashboard({
91-
...selectedDashboard,
92-
data: {
93-
...selectedDashboard?.data,
94-
widgets: [
95-
...previousWidgets,
96-
{
97-
...selectedWidget,
98-
query,
99-
},
100-
...nextWidgets,
101-
],
102-
},
103-
});
104-
handleRunQueryFromQueryBuilder();
105-
},
106-
[
107-
selectedDashboard,
108-
selectedWidget,
109-
setSelectedDashboard,
110-
handleRunQueryFromQueryBuilder,
111-
],
112-
);
113-
11449
const handleQueryCategoryChange = useCallback(
11550
(qCategory: string): void => {
11651
const currentQueryType = qCategory as EQueryType;
@@ -123,19 +58,16 @@ function QuerySection({
12358
);
12459

12560
const handleRunQuery = (): void => {
126-
const widgetId = urlQuery.get('widgetId');
127-
const isNewPanel = isUndefined(widgets?.find((e) => e.id === widgetId));
128-
12961
logEvent('Panel Edit: Stage and run query', {
13062
dataSource: currentQuery.builder?.queryData?.[0]?.dataSource,
13163
panelType: selectedWidget.panelTypes,
13264
queryType: currentQuery.queryType,
13365
widgetId: selectedWidget.id,
134-
dashboardId: selectedDashboard?.id,
135-
dashboardName: selectedDashboard?.data.title,
66+
dashboardId,
67+
dashboardName,
13668
isNewPanel,
13769
});
138-
handleStageQuery(currentQuery);
70+
handleRunQueryFromQueryBuilder();
13971
};
14072

14173
const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
@@ -164,7 +96,7 @@ function QuerySection({
16496
panelType={selectedGraph}
16597
filterConfigs={filterConfigs}
16698
showTraceOperator={selectedGraph !== PANEL_TYPES.LIST}
167-
version={selectedDashboard?.data?.version || 'v3'}
99+
version={dashboardVersion || 'v3'}
168100
isListViewPanel={selectedGraph === PANEL_TYPES.LIST}
169101
queryComponents={queryComponents}
170102
signalSourceChangeEnabled
@@ -204,7 +136,7 @@ function QuerySection({
204136
queryComponents,
205137
selectedGraph,
206138
filterConfigs,
207-
selectedDashboard?.data?.version,
139+
dashboardVersion,
208140
isDarkMode,
209141
]);
210142

@@ -261,6 +193,11 @@ interface QueryProps {
261193
selectedGraph: PANEL_TYPES;
262194
queryRangeKey?: QueryKey;
263195
isLoadingQueries?: boolean;
196+
selectedWidget: Widgets;
197+
dashboardVersion?: string;
198+
dashboardId?: string;
199+
dashboardName?: string;
200+
isNewPanel?: boolean;
264201
}
265202

266203
export default QuerySection;

‎frontend/src/container/NewWidget/LeftContainer/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ function LeftContainer({
3030
setRequestData,
3131
setQueryResponse,
3232
enableDrillDown = false,
33+
selectedDashboard,
34+
isNewPanel = false,
3335
}: WidgetGraphProps): JSX.Element {
3436
const { stagedQuery } = useQueryBuilder();
3537

@@ -75,6 +77,11 @@ function LeftContainer({
7577
selectedGraph={selectedGraph}
7678
queryRangeKey={queryRangeKey}
7779
isLoadingQueries={queryResponse.isFetching}
80+
selectedWidget={selectedWidget}
81+
dashboardVersion={ENTITY_VERSION_V5}
82+
dashboardId={selectedDashboard?.id}
83+
dashboardName={selectedDashboard?.data.title}
84+
isNewPanel={isNewPanel}
7885
/>
7986
{selectedGraph === PANEL_TYPES.LIST && (
8087
<ExplorerColumnsRenderer

‎frontend/src/container/NewWidget/RightContainer/__tests__/RightContainer.test.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import userEvent from '@testing-library/user-event';
88
import { PANEL_TYPES } from 'constants/queryBuilder';
99
import { AppContext } from 'providers/App/App';
1010
import { IAppContext } from 'providers/App/types';
11-
import { DashboardProvider } from 'providers/Dashboard/Dashboard';
1211
import { ErrorModalProvider } from 'providers/ErrorModalProvider';
1312
import { QueryBuilderProvider } from 'providers/QueryBuilder';
1413
import configureStore from 'redux-mock-store';
@@ -96,9 +95,7 @@ const render = (ui: React.ReactElement): ReturnType<typeof rtlRender> =>
9695
<Provider store={createMockStore()}>
9796
<AppContext.Provider value={createMockAppContext() as IAppContext}>
9897
<ErrorModalProvider>
99-
<DashboardProvider>
100-
<QueryBuilderProvider>{ui}</QueryBuilderProvider>
101-
</DashboardProvider>
98+
<QueryBuilderProvider>{ui}</QueryBuilderProvider>
10299
</ErrorModalProvider>
103100
</AppContext.Provider>
104101
</Provider>

‎frontend/src/container/NewWidget/__test__/NewWidget.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -310,12 +310,12 @@ describe('Stacking bar in new panel', () => {
310310

311311
const { container, getByText } = render(
312312
<I18nextProvider i18n={i18n}>
313-
<DashboardProvider>
313+
<DashboardProvider dashboardId="">
314314
<PreferenceContextProvider>
315315
<NewWidget
316+
dashboardId=""
317+
selectedDashboard={undefined}
316318
selectedGraph={PANEL_TYPES.BAR}
317-
fillSpans={undefined}
318-
yAxisUnit={undefined}
319319
/>
320320
</PreferenceContextProvider>
321321
</DashboardProvider>
@@ -356,11 +356,11 @@ describe('when switching to BAR panel type', () => {
356356

357357
it('should preserve saved stacking value of true', async () => {
358358
const { getByTestId, getByText, container } = render(
359-
<DashboardProvider>
359+
<DashboardProvider dashboardId="">
360360
<NewWidget
361+
dashboardId=""
362+
selectedDashboard={undefined}
361363
selectedGraph={PANEL_TYPES.BAR}
362-
fillSpans={undefined}
363-
yAxisUnit={undefined}
364364
/>
365365
</DashboardProvider>,
366366
);

0 commit comments

Comments
 (0)