Add widgetId argument in dataProviderContextGetter (#1888)

Author: flops

src/ui/components/DashKit/helpers.tsx

@@ -113,7 +113,7 @@ interface DashkitWrapperProps extends DashKitProps {
     isNewRelations?: boolean;
     hideErrorDetails?: boolean;
     // Extended headers context for widgets
-    dataProviderContextGetter?: () => DashChartRequestContext;
+    dataProviderContextGetter?: (widgetId: string) => DashChartRequestContext;
     setWidgetCurrentTab?: (payload: {widgetId: string; tabId: string}) => void;
 }
 

src/ui/components/DashKit/plugins/Control/Control.tsx

@@ -427,7 +427,9 @@ class Control extends React.PureComponent<PluginControlProps, PluginControlState
             const {workbookId} = this.props;
 
             const payloadCancellation = chartsDataProvider.getRequestCancellation();
-            const dataProviderContextGetter = this.context?.dataProviderContextGetter?.();
+            const dataProviderContextGetter = this.context?.dataProviderContextGetter?.(
+                this.props.id,
+            );
 
             const payload = {
                 data: {
@@ -561,7 +563,7 @@ class Control extends React.PureComponent<PluginControlProps, PluginControlState
                 this._getDistinctsMemo ||
                 ((params) => {
                     const {getDistincts} = this.props;
-                    const headers = this?.context?.dataProviderContextGetter?.();
+                    const headers = this?.context?.dataProviderContextGetter?.(this.props.id);
 
                     return (getDistincts as Exclude<ControlSettings['getDistincts'], void>)?.(
                         params,

src/ui/components/DashKit/plugins/GroupControl/Control/Control.tsx

@@ -99,7 +99,7 @@ type ControlProps = {
     }) => void;
     silentLoading: boolean;
     getDistincts?: ControlSettings['getDistincts'];
-    requestHeaders?: Record<string, string>;
+    requestHeaders?: () => Record<string, string>;
     onChange: ({
         params,
         callChangeByClick,
@@ -226,7 +226,7 @@ export const Control = ({
                     ...(workbookId ? {workbookId} : {}),
                 },
                 cancelToken: payloadCancellation.token,
-                headers: requestHeaders,
+                headers: requestHeaders?.(),
             };
 
             cancelCurrentRunRequest();

src/ui/components/DashKit/plugins/GroupControl/GroupControl.tsx

@@ -686,7 +686,7 @@ class GroupControl extends React.PureComponent<PluginGroupControlProps, PluginGr
                 this._getDistinctsMemo ||
                 ((params) => {
                     const {getDistincts} = this.props;
-                    const headers = this?.context?.dataProviderContextGetter?.();
+                    const headers = this?.context?.dataProviderContextGetter?.(this.props.id);
 
                     return (getDistincts as Exclude<ControlSettings['getDistincts'], void>)?.(
                         params,
@@ -700,10 +700,17 @@ class GroupControl extends React.PureComponent<PluginGroupControlProps, PluginGr
         return this._getDistinctsMemo;
     }
 
+    private requestHeadersGetter() {
+        if (this?.context?.dataProviderContextGetter) {
+            return this.context.dataProviderContextGetter(this.props.id);
+        }
+
+        return {};
+    }
+
     private renderControl(item: DashTabItemControlSingle) {
         const {workbookId} = this.props;
         const {silentLoading} = this.state;
-        const dataProviderContextGetter = this?.context?.dataProviderContextGetter?.();
 
         return (
             <Control
@@ -719,7 +726,7 @@ class GroupControl extends React.PureComponent<PluginGroupControlProps, PluginGr
                 workbookId={workbookId}
                 dependentSelectors={this.dependentSelectors}
                 groupId={this.props.id}
-                requestHeaders={dataProviderContextGetter}
+                requestHeaders={this.requestHeadersGetter}
             />
         );
     }

src/ui/components/Widgets/Chart/hooks/useLoadingChart.ts

@@ -62,7 +62,7 @@ import {useMemoCallback} from './useMemoCallback';
 
 export type LoadingChartHookProps = {
     dataProvider: ChartWithProviderProps['dataProvider'];
-    dataProviderContextGetter?: () => DashChartRequestContext;
+    requestHeadersGetter?: () => DashChartRequestContext;
     initialData: DataProps;
     requestId: string;
     requestCancellationRef: React.MutableRefObject<CurrentRequestState>;
@@ -123,7 +123,7 @@ const loadingStateReducer = (state: LoadingStateType, newState: Partial<LoadingS
 export const useLoadingChart = (props: LoadingChartHookProps) => {
     const {
         dataProvider,
-        dataProviderContextGetter,
+        requestHeadersGetter,
         initialData,
         requestId,
         requestCancellationRef,
@@ -425,7 +425,7 @@ export const useLoadingChart = (props: LoadingChartHookProps) => {
                 requestCancellation:
                     requestCancellationRef.current[requestId]?.requestCancellation ||
                     dataProvider.getRequestCancellation(),
-                ...(dataProviderContextGetter ? {contextHeaders: dataProviderContextGetter()} : {}),
+                ...(requestHeadersGetter ? {contextHeaders: requestHeadersGetter()} : {}),
             });
 
             const isCanceled = requestCancellationRef.current?.[requestId]?.status === 'canceled';
@@ -490,7 +490,7 @@ export const useLoadingChart = (props: LoadingChartHookProps) => {
             resolveMetaDataRef?.current?.(resolveWidgetDataRef?.current?.(null));
         }
     }, [
-        dataProviderContextGetter,
+        requestHeadersGetter,
         dispatch,
         changedInnerFlag,
         usedParamsRef,
@@ -769,9 +769,7 @@ export const useLoadingChart = (props: LoadingChartHookProps) => {
                     requestCancellation:
                         requestCancellationRef.current[requestId]?.requestCancellation ||
                         dataProvider.getRequestCancellation(),
-                    ...(dataProviderContextGetter
-                        ? {contextHeaders: dataProviderContextGetter()}
-                        : {}),
+                    ...(requestHeadersGetter ? {contextHeaders: requestHeadersGetter()} : {}),
                 });
                 if (!rootNodeRef.current) {
                     return null;
@@ -786,7 +784,15 @@ export const useLoadingChart = (props: LoadingChartHookProps) => {
             }
             return null;
         },
-        [dataProvider, initialData, requestId, requestCancellationRef, rootNodeRef, handleError],
+        [
+            dataProvider,
+            initialData,
+            requestId,
+            requestCancellationRef,
+            rootNodeRef,
+            handleError,
+            requestHeadersGetter,
+        ],
     );
 
     const handleChange = useMemoCallback(
@@ -911,10 +917,10 @@ export const useLoadingChart = (props: LoadingChartHookProps) => {
             return dataProvider.runAction({
                 props: {...initialData, params},
                 requestId,
-                ...(dataProviderContextGetter ? {contextHeaders: dataProviderContextGetter()} : {}),
+                ...(requestHeadersGetter ? {contextHeaders: requestHeadersGetter()} : {}),
             });
         },
-        [dataProvider, initialData, requestId, dataProviderContextGetter],
+        [dataProvider, initialData, requestId, requestHeadersGetter],
     );
 
     return {

src/ui/components/Widgets/Chart/hooks/useLoadingChartSelector.tsx

@@ -172,6 +172,13 @@ export const useLoadingChartSelector = (props: LoadingChartSelectorHookProps) =>
         [adjustLayout, props.data.autoHeight],
     );
 
+    /**
+     * Memoised dataProviderContextGetter with widget id
+     */
+    const requestHeadersGetter = React.useMemo(() => {
+        return dataProviderContextGetter?.bind(this, widgetId);
+    }, [widgetId, dataProviderContextGetter]);
+
     const {
         loadedData,
         isLoading,
@@ -191,7 +198,7 @@ export const useLoadingChartSelector = (props: LoadingChartSelectorHookProps) =>
         loadControls,
     } = useLoadingChart({
         dataProvider,
-        dataProviderContextGetter,
+        requestHeadersGetter,
         initialData,
         requestId,
         requestCancellationRef,

src/ui/components/Widgets/Chart/hooks/useLoadingChartWidget.ts

@@ -211,6 +211,13 @@ export const useLoadingChartWidget = (props: LoadingChartWidgetHookProps) => {
         setLoadedWidgetType(data?.loadedData?.type as string);
     }, []);
 
+    /**
+     * Memoised dataProviderContextGetter with widget id
+     */
+    const requestHeadersGetter = React.useMemo(() => {
+        return dataProviderContextGetter?.bind(this, widgetId);
+    }, [widgetId, dataProviderContextGetter]);
+
     const {
         loadedData,
         isLoading,
@@ -235,7 +242,7 @@ export const useLoadingChartWidget = (props: LoadingChartWidgetHookProps) => {
         dataProps,
     } = useLoadingChart({
         dataProvider,
-        dataProviderContextGetter,
+        requestHeadersGetter,
         initialData,
         requestId,
         requestCancellationRef,

src/ui/units/dash/utils/context.ts

@@ -9,6 +9,6 @@ export const ExtendedDashKitContext = createContext<{
     isNewRelations: boolean;
     defaultGlobalParams?: DashSettingsGlobalParams;
     hideErrorDetails?: boolean;
-    dataProviderContextGetter?: () => DashChartRequestContext;
+    dataProviderContextGetter?: (widgetId: string) => DashChartRequestContext;
     setWidgetCurrentTab?: (payload: {widgetId: string; tabId: string}) => void;
 } | null>(null);