Switch control dialog store (#1822)

src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx

@@ -7,14 +7,13 @@ import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
 import {ControlQA, DashTabItemControlSourceType, DialogControlQa} from 'shared';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {
     selectIsControlConfigurationDisabled,
     selectSelectorDialog,
 } from 'ui/store/selectors/controlDialog';
 import type {SelectorSourceType} from 'ui/store/typings/controlDialog';
 
-import {ELEMENT_TYPE} from '../../../../../../units/dash/containers/Dialogs/Control/constants';
-
 import '../../AppearanceSection.scss';
 
 const b = block('control2-appearance-section');

src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx

@@ -7,11 +7,11 @@ import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
 import {TitlePlacementOption} from 'shared/types/dash';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {
     selectIsControlConfigurationDisabled,
     selectSelectorDialog,
 } from 'ui/store/selectors/controlDialog';
-import {ELEMENT_TYPE} from 'ui/units/dash/containers/Dialogs/Control/constants';
 
 import '../../AppearanceSection.scss';
 

src/ui/components/ControlComponents/Sections/CommonSettingsSection/CommonSettingsSection.tsx

@@ -10,17 +10,42 @@ import {ExternalSelectorSettings} from './ExternalSelectorSettings/ExternalSelec
 import {InputSettings} from './InputSettings/InputSettings';
 
 // TODO: Remove hideCommonFields and related fields after enabling DLPROJECTS-93
-export const CommonSettingsSection = ({hideCommonFields}: {hideCommonFields?: boolean}) => {
+export const CommonSettingsSection = ({
+    hideCommonFields,
+    navigationPath,
+    changeNavigationPath,
+}: {
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
+    hideCommonFields?: boolean;
+}) => {
     const {sourceType} = useSelector(selectSelectorDialog);
 
     switch (sourceType) {
         case DashTabItemControlSourceType.External:
-            return <ExternalSelectorSettings />;
+            return (
+                <ExternalSelectorSettings
+                    changeNavigationPath={changeNavigationPath}
+                    navigationPath={navigationPath}
+                />
+            );
         case DashTabItemControlSourceType.Manual:
             return <InputSettings hideCommonFields={hideCommonFields} />;
         case DashTabItemControlSourceType.Connection:
-            return <ConnectionSettings hideCommonFields={hideCommonFields} />;
+            return (
+                <ConnectionSettings
+                    hideCommonFields={hideCommonFields}
+                    changeNavigationPath={changeNavigationPath}
+                    navigationPath={navigationPath}
+                />
+            );
         default:
-            return <DatasetSettings hideCommonFields={hideCommonFields} />;
+            return (
+                <DatasetSettings
+                    hideCommonFields={hideCommonFields}
+                    changeNavigationPath={changeNavigationPath}
+                    navigationPath={navigationPath}
+                />
+            );
     }
 };

src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.tsx

@@ -14,12 +14,23 @@ import {QueryTypeControl} from './components/QueryTypeControl/QueryTypeControl';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const ConnectionSettings = ({hideCommonFields}: {hideCommonFields?: boolean}) => {
+export const ConnectionSettings = ({
+    hideCommonFields,
+    navigationPath,
+    changeNavigationPath,
+}: {
+    hideCommonFields?: boolean;
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
+}) => {
     const {connectionQueryTypes} = useSelector(selectSelectorDialog);
 
     return (
         <React.Fragment>
-            <ConnectionSelector />
+            <ConnectionSelector
+                navigationPath={navigationPath}
+                changeNavigationPath={changeNavigationPath}
+            />
             {connectionQueryTypes && connectionQueryTypes.length > 0 && (
                 <React.Fragment>
                     <ParameterNameInput label={i18n('field_parameter-name')} />

src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx

@@ -3,23 +3,24 @@ import React from 'react';
 import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
 import {EntryScope} from 'shared';
-import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
-import {selectSelectorDialog} from 'ui/store/selectors/controlDialog';
+import {setLastUsedConnectionId, setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
+import {selectOpenedItemMeta, selectSelectorDialog} from 'ui/store/selectors/controlDialog';
 
 import logger from '../../../../../../../libs/logger';
 import {getSdk} from '../../../../../../../libs/schematic-sdk';
-import {ELEMENT_TYPE} from '../../../../../../../units/dash/containers/Dialogs/Control/constants';
-import {setLastUsedConnectionId} from '../../../../../../../units/dash/store/actions/dashTyped';
-import {selectDashWorkbookId} from '../../../../../../../units/dash/store/selectors/dashTypedSelectors';
 import {EntrySelector} from '../../../EntrySelector/EntrySelector';
 
 import {prepareConnectionData} from './helpers';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
-export const ConnectionSelector = () => {
+export const ConnectionSelector = (props: {
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
+}) => {
     const dispatch = useDispatch();
     const {connectionId} = useSelector(selectSelectorDialog);
-    const workbookId = useSelector(selectDashWorkbookId);
+    const {workbookId} = useSelector(selectOpenedItemMeta);
 
     const [isInvalid, setIsInvalid] = React.useState(false);
     const [unsupportedConnectionError, setUnsupportedConnectionError] = React.useState<
@@ -91,6 +92,8 @@ export const ConnectionSelector = () => {
             isInvalid={isEntryInvalid}
             errorText={unsupportedConnectionError}
             workbookId={workbookId}
+            navigationPath={props.navigationPath}
+            changeNavigationPath={props.changeNavigationPath}
         />
     );
 };

src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx

@@ -13,25 +13,26 @@ import {
     EntryScope,
 } from 'shared';
 import logger from 'ui/libs/logger';
-import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
-import {selectSelectorDialog} from 'ui/store/selectors/controlDialog';
+import {setLastUsedDatasetId, setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
+import {selectOpenedItemMeta, selectSelectorDialog} from 'ui/store/selectors/controlDialog';
 import type {SelectorElementType, SetSelectorDialogItemArgs} from 'ui/store/typings/controlDialog';
-import {setLastUsedDatasetId} from 'units/dash/store/actions/dashTyped';
-import {selectDashWorkbookId} from 'units/dash/store/selectors/dashTypedSelectors';
 
-import {ELEMENT_TYPE} from '../../../../../units/dash/containers/Dialogs/Control/constants';
 import {DatasetField} from '../../Switchers/DatasetField/DatasetField';
 import {EntrySelector} from '../EntrySelector/EntrySelector';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
 const getDatasetLink = (entryId: string) => `/datasets/${entryId}`;
 
-function DatasetSelector() {
+function DatasetSelector(props: {
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
+}) {
     const dispatch = useDispatch();
     const {datasetId, datasetFieldId, isManualTitle, title, fieldType, validation} =
         useSelector(selectSelectorDialog);
-    const workbookId = useSelector(selectDashWorkbookId);
+    const {workbookId} = useSelector(selectOpenedItemMeta);
     const [isInvalid, setIsInvalid] = React.useState(false);
 
     const fetchDataset = React.useCallback((entryId: string) => {
@@ -139,6 +140,8 @@ function DatasetSelector() {
                 isInvalid={isInvalid}
                 workbookId={workbookId}
                 getEntryLink={getDatasetLink}
+                navigationPath={props.navigationPath}
+                changeNavigationPath={props.changeNavigationPath}
             />
             <FormRow label={i18n('field_field')}>
                 <FieldWrapper error={validation.datasetFieldId}>

src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/DatasetSettings.tsx

@@ -6,10 +6,21 @@ import {ValueSelector} from '../../ValueSelector/ValueSelector';
 import {DatasetSelector} from '../DatasetSelector/DatasetSelector';
 import {InputTypeSelector} from '../InputTypeSelector/InputTypeSelector';
 
-const DatasetSettings = ({hideCommonFields}: {hideCommonFields?: boolean}) => {
+const DatasetSettings = ({
+    hideCommonFields,
+    navigationPath,
+    changeNavigationPath,
+}: {
+    hideCommonFields?: boolean;
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
+}) => {
     return (
         <React.Fragment>
-            <DatasetSelector />
+            <DatasetSelector
+                navigationPath={navigationPath}
+                changeNavigationPath={changeNavigationPath}
+            />
             {!hideCommonFields && (
                 <React.Fragment>
                     <InputTypeSelector />

src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.tsx

@@ -2,12 +2,9 @@ import React from 'react';
 
 import {FormRow} from '@gravity-ui/components';
 import block from 'bem-cn-lite';
-import {useDispatch, useSelector} from 'react-redux';
 import type {StringParams} from 'shared/types';
 import NavigationInput from 'ui/units/dash/components/NavigationInput/NavigationInput';
 import type {EntryTypeNode} from 'ui/units/dash/modules/constants';
-import {changeNavigationPath} from 'ui/units/dash/store/actions/dashTyped';
-import {selectNavigationPath} from 'ui/units/dash/store/selectors/dashTypedSelectors';
 
 import {FieldWrapper} from '../../../../FieldWrapper/FieldWrapper';
 
@@ -33,6 +30,8 @@ type EntrySelectorProps = {
     workbookId?: string | null;
     includeClickableType?: EntryTypeNode;
     getEntryLink?: (entryId: string) => string;
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
 };
 
 export const EntrySelector: React.FC<EntrySelectorProps> = (props: EntrySelectorProps) => {
@@ -46,15 +45,10 @@ export const EntrySelector: React.FC<EntrySelectorProps> = (props: EntrySelector
         isInvalid,
         getEntryLink,
         includeClickableType,
+        navigationPath,
+        changeNavigationPath,
     } = props;
 
-    const dispatch = useDispatch();
-    const navigationPath = useSelector(selectNavigationPath);
-
-    const handleChangeNavigationPath = (newNavigationPath: string) => {
-        dispatch(changeNavigationPath(newNavigationPath));
-    };
-
     return (
         <FormRow label={label}>
             <FieldWrapper error={errorText}>
@@ -69,7 +63,7 @@ export const EntrySelector: React.FC<EntrySelectorProps> = (props: EntrySelector
                     getEntryLink={getEntryLink}
                     includeClickableType={includeClickableType}
                     navigationPath={navigationPath}
-                    changeNavigationPath={handleChangeNavigationPath}
+                    changeNavigationPath={changeNavigationPath}
                 />
             </FieldWrapper>
         </FormRow>

src/ui/components/ControlComponents/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.tsx

@@ -28,7 +28,10 @@ imm.extend('$auto', (value, object) => {
     return object ? update(object, value) : update({}, value);
 });
 
-const ExternalSelectorSettings = () => {
+const ExternalSelectorSettings: React.FC<{
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
+}> = (props) => {
     const dispatch = useDispatch();
     const {autoHeight, chartId, title, selectorParameters, validation, selectorParametersGroup} =
         useSelector(selectSelectorDialog);
@@ -98,6 +101,8 @@ const ExternalSelectorSettings = () => {
                 entryId={chartId}
                 onChange={handleChartIdChange}
                 includeClickableType={EntryTypeNode.CONTROL_NODE}
+                navigationPath={props.navigationPath}
+                changeNavigationPath={props.changeNavigationPath}
             />
 
             <FormRow label={i18n('dash.control-dialog.edit', 'field_autoheight')}>

src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputTypeSelector/InputTypeSelector.tsx

@@ -13,14 +13,14 @@ import {
 } from 'shared';
 import {SelectOptionWithIcon} from 'ui/components/SelectComponents/components/SelectOptionWithIcon/SelectOptionWithIcon';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {
     selectIsControlConfigurationDisabled,
     selectSelectorControlType,
     selectSelectorDialog,
 } from 'ui/store/selectors/controlDialog';
 import type {SelectorElementType} from 'ui/store/typings/controlDialog';
 
-import {ELEMENT_TYPE} from '../../../../../units/dash/containers/Dialogs/Control/constants';
 import {getElementOptions} from '../helpers/input-type-select';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');

src/ui/components/ControlComponents/Sections/CommonSettingsSection/helpers/input-type-select.tsx

@@ -5,8 +5,7 @@ import type {SelectOption} from '@gravity-ui/uikit';
 import {Icon} from '@gravity-ui/uikit';
 import {I18n} from 'i18n';
 import {DialogControlQa} from 'shared/constants/qa';
-
-import {ELEMENT_TYPE} from '../../../../../units/dash/containers/Dialogs/Control/constants';
+import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 

src/ui/components/ControlComponents/Sections/Date/Acceptable/Acceptable.tsx

@@ -4,8 +4,8 @@ import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import moment from 'moment';
 import {registry} from 'ui/registry';
+import {DATE_FORMAT} from 'ui/store/constants/controlDialog';
 
-import {DATE_FORMAT} from '../../../../../units/dash/containers/Dialogs/Control/constants';
 import Dialog from '../../../Dialog/Dialog';
 import Button from '../../Switchers/Button/Button';
 

src/ui/components/ControlComponents/Sections/Date/Default/Default.tsx

@@ -13,11 +13,8 @@ import {
     getParsedRelativeDate,
 } from 'shared';
 import {RelativeDatesPicker} from 'ui';
+import {DATETIME_FORMAT, DATE_FORMAT} from 'ui/store/constants/controlDialog';
 
-import {
-    DATETIME_FORMAT,
-    DATE_FORMAT,
-} from '../../../../../units/dash/containers/Dialogs/Control/constants';
 import Dialog from '../../../Dialog/Dialog';
 
 import './Default.scss';

src/ui/components/ControlComponents/Sections/ValueSelector/RequiredValueCheckbox/RequiredValueCheckbox.tsx

@@ -7,14 +7,13 @@ import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
 import {DialogControlQa} from 'shared';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {
     selectIsControlConfigurationDisabled,
     selectSelectorControlType,
     selectSelectorRequired,
 } from 'ui/store/selectors/controlDialog';
 
-import {ELEMENT_TYPE} from '../../../../../units/dash/containers/Dialogs/Control/constants';
-
 import '../ValueSelector.scss';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');

src/ui/components/ControlComponents/Sections/ValueSelector/ValueSelector.tsx

@@ -10,6 +10,7 @@ import {FieldWrapper} from 'ui/components/FieldWrapper/FieldWrapper';
 import {VIEW_MODES} from 'ui/components/Select/hooks/useSelectRenderFilter/useSelectRenderFilter';
 import {registry} from 'ui/registry';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {CheckboxControlValue} from 'ui/store/constants/controlDialog';
 import {
     selectIsControlConfigurationDisabled,
     selectSelectorControlType,
@@ -21,7 +22,6 @@ import {selectWorkbookId} from 'ui/units/workbooks/store/selectors';
 
 import type {FilterValue} from '../../../../../shared/modules';
 import {DATASET_FIELD_TYPES, DashTabItemControlSourceType} from '../../../../../shared/types';
-import {CheckboxControlValue} from '../../../../units/dash/containers/Dialogs/Control/constants';
 import {getDistinctsByTypedQuery} from '../CommonSettingsSection/ConnectionSettings/helpers/get-distincts-by-typed-query';
 import {
     DEFAULT_PAGE_SIZE,