Wizard chart receipt (#3079)

Author: kuzmadom

src/server/modes/charts/plugins/datalens/js/js.ts

@@ -863,7 +863,7 @@ export const buildGraphPrivate = (args: {
 
                 const fields: Record<string, string> = {};
 
-                const schema = datasetsSchemaFields[datasetIndex];
+                const schema = datasetsSchemaFields[datasetIndex] ?? [];
 
                 schema.forEach((item) => {
                     fields[item.guid] = idToTitle[item.guid];
@@ -904,7 +904,7 @@ export const buildGraphPrivate = (args: {
 
             const fields: Record<string, string> = {};
 
-            const schema = datasetsSchemaFields[datasetIndex];
+            const schema = datasetsSchemaFields[datasetIndex] ?? [];
 
             schema.forEach((item) => {
                 fields[item.guid] = idToTitle[item.guid];

src/server/modes/charts/plugins/datalens/url/build-request-body/index.ts

@@ -702,9 +702,9 @@ export const getUrlsRequestBody = (args: {
     const placeholders = currentLayer.placeholders;
     const currentDatasetIndex = config.datasetsIds.findIndex((value) => value === datasetId);
     const currentLocalFields =
-        currentDatasetIndex >= 0 ? config.datasetsPartialFields[currentDatasetIndex] : [];
+        currentDatasetIndex >= 0 ? config.datasetsPartialFields?.[currentDatasetIndex] : [];
 
-    const datasetSchema = [...args.datasetFields, ...currentLocalFields];
+    const datasetSchema = [...args.datasetFields, ...(currentLocalFields ?? [])];
 
     const links = config.links;
     const segments = config.segments;

src/ui/constants/common.ts

@@ -338,6 +338,7 @@ export const URL_QUERY = {
     OPEN_DASH_INFO: '_opened_info',
     UNRELEASED: 'unreleased',
     ENTRY_CONFIG: '_entry_config',
+    CHART_RECIPE: '_chart_recipe',
 };
 
 const GRADIENT_ICONS = {

src/ui/units/wizard/actions/index.ts

@@ -68,6 +68,7 @@ import {getFilteredObject} from '../../../utils';
 import type {WizardDispatch, WizardGlobalState} from '../reducers';
 import {selectWizardWorkbookId} from '../selectors/settings';
 import {selectVisualization} from '../selectors/visualization';
+import {getWizardConfigFromRecipe} from '../utils/chart-recipe';
 import {filterVisualizationColors} from '../utils/colors';
 import {getChartFiltersWithDisabledProp} from '../utils/filters';
 import {getVisualization, transformSchema} from '../utils/helpers';
@@ -2157,6 +2158,7 @@ export function setDefaults(args: SetDefaultsArgs) {
     return async function (dispatch: WizardDispatch, getState: () => DatalensGlobalState) {
         const searchPairs = new URLSearchParams(window.location.search);
         const entryConfigParam = searchPairs.get(URL_QUERY.ENTRY_CONFIG);
+        const chartRecipeParam = searchPairs.get(URL_QUERY.CHART_RECIPE);
 
         if (routeWorkbookId) {
             dispatch(setRouteWorkbookId(routeWorkbookId));
@@ -2180,6 +2182,16 @@ export function setDefaults(args: SetDefaultsArgs) {
                 }
             }
 
+            if (chartRecipeParam) {
+                try {
+                    const chartRecipe = JSON.parse(chartRecipeParam);
+                    const config = await getWizardConfigFromRecipe({recipe: chartRecipe});
+                    await processWidget({widget: {data: config}, dispatch, getState});
+                } catch (e) {
+                    console.error(e);
+                }
+            }
+
             const visualization = getState().wizard.visualization;
             if (!visualization?.visualization) {
                 const defaultVisualization = getDefaultVisualization();

src/ui/units/wizard/components/ChartFromRecipe/ChartFromRecipe.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {Loader} from '@gravity-ui/uikit';
+import {ChartWrapper} from 'ui/components/Widgets/Chart/ChartWidgetWithProvider';
+import type {ConfigNode} from 'ui/libs/DatalensChartkit/modules/data-provider/charts';
+
+import {getChartTypeByVisualizationId} from '../../reducers/preview';
+import {type WizardChartRecipe, getWizardConfigFromRecipe} from '../../utils/chart-recipe';
+
+type Props = {
+    recipe: WizardChartRecipe;
+};
+
+export const ChartFromRecipe = React.memo(({recipe}: Props) => {
+    const [entryConfig, setEntryConfig] = React.useState<ConfigNode | null>(null);
+    const chartRef = React.useRef(null);
+
+    React.useEffect(() => {
+        (async function () {
+            const wizardConfig = await getWizardConfigFromRecipe({recipe});
+            const entryType = getChartTypeByVisualizationId(wizardConfig.visualization.id);
+            setEntryConfig({
+                type: entryType,
+                data: {
+                    shared: wizardConfig,
+                },
+            } as unknown as ConfigNode);
+        })();
+    }, [recipe]);
+
+    if (!entryConfig) {
+        return <Loader />;
+    }
+
+    return <ChartWrapper usageType="chart" config={entryConfig} forwardedRef={chartRef} />;
+});
+
+ChartFromRecipe.displayName = 'ChartFromRecipe';

src/ui/units/wizard/containers/Wizard/WizardActionPanel/WizardActionPanel.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 
-import type {DropdownMenuProps} from '@gravity-ui/uikit';
+import {Button, type DropdownMenuProps} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
+import copyToClipboard from 'clipboard-copy';
 import {useDispatch, useSelector} from 'react-redux';
-import type {ClientChartsConfigWithDataset, WizardType} from 'shared';
+import type {ClientChartsConfigWithDataset, ServerChartsConfig, WizardType} from 'shared';
 import {EntryUpdateMode, Feature} from 'shared';
+import {getChartReceiptFromWizardConfig} from 'ui/units/wizard/utils/chart-recipe';
 import {isEnabledFeature} from 'ui/utils/isEnabledFeature';
 import {selectIsChartSaved} from 'units/wizard/selectors/preview';
 
 import type {DatalensGlobalState} from '../../../../../';
-import {ActionPanel} from '../../../../../';
+import {ActionPanel, Utils} from '../../../../../';
 import {ChartSaveControls} from '../../../../../components/ActionPanel/components/ChartSaveControls/ChartSaveControl';
 import {registry} from '../../../../../registry';
+import {showToast} from '../../../../../store/actions/toaster';
 import {selectCanGoBack, selectCanGoForward} from '../../../../../store/selectors/editHistory';
 import {setEditMode} from '../../../../dash/store/actions/base/actions';
 import {toggleViewOnlyMode} from '../../../actions/settings';
@@ -90,6 +93,18 @@ export const WizardActionPanel: React.FC<WizardActionPanelProps> = (
         }
     }, [isCurrentRevisionActual, onSaveCallback]);
 
+    const handleCopyRecipe = React.useCallback(() => {
+        try {
+            const recipe = getChartReceiptFromWizardConfig(
+                config?.shared as unknown as ServerChartsConfig,
+            );
+            copyToClipboard(JSON.stringify(recipe));
+            dispatch(showToast({title: 'Copied to clipboard'}));
+        } catch (e) {
+            console.error(e);
+        }
+    }, [config?.shared, dispatch]);
+
     const canGoBack = useSelector<DatalensGlobalState, ReturnType<typeof selectCanGoBack>>(
         (state) => selectCanGoBack(state, {unitId: WIZARD_EDIT_HISTORY_UNIT_ID}),
     );
@@ -118,6 +133,11 @@ export const WizardActionPanel: React.FC<WizardActionPanelProps> = (
             enablePublish={enablePublish}
             rightItems={
                 <React.Fragment>
+                    {Utils.isSuperUser() && (
+                        <Button style={{marginRight: 8}} onClick={handleCopyRecipe}>
+                            copy recipe
+                        </Button>
+                    )}
                     <WizardActionPanelExtension />
                     <ChartSaveControls
                         className={b('save-controls')}

src/ui/units/wizard/reducers/preview.ts

@@ -272,7 +272,7 @@ function mutateAndValidateVisualization({
     return everythingIsOk;
 }
 
-const getChartTypeByVisualizationId = (visualizationId: string): WizardType => {
+export const getChartTypeByVisualizationId = (visualizationId: string): WizardType => {
     if (isD3Visualization(visualizationId as WizardVisualizationId)) {
         return WizardType.GravityChartsWizardNode;
     }