Select for selector type select in group control modal (#750)

* Support select in SelectorTypeSelect for Group controls * Remove isStylesHidden from SectionWrapper
datalens-tech · Mar 12, 2024 · 6687114 · 6687114
1 parent 0d2ed43
commit 6687114
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 120 deletions.
diff --git a/src/ui/components/SectionWrapper/SectionWrapper.scss b/src/ui/components/SectionWrapper/SectionWrapper.scss
@@ -9,11 +9,6 @@
         margin-top: 20px;
     }
 
-    &_hidden {
-        border: none;
-        padding: 0;
-    }
-
     &__title {
         @include text-subheader-2();
         font-weight: 500; // Temporary redefinition until the style unification is not implemented in the uikit

diff --git a/src/ui/components/SectionWrapper/SectionWrapper.tsx b/src/ui/components/SectionWrapper/SectionWrapper.tsx
@@ -15,7 +15,6 @@ export type SectionWrapperProps = {
     titleMods?: string;
     subTitle?: string;
     withCollapse?: boolean;
-    isStylesHidden?: boolean;
     arrowPosition?: CollapseProps['arrowPosition'];
     arrowQa?: CollapseProps['arrowQa'];
     defaultIsExpanded?: boolean;
@@ -26,14 +25,13 @@ type SectionBodyProps = {
     subTitle?: string;
     className?: string;
     titleModsVal: Record<string, boolean> | null;
-    isStylesHidden?: boolean;
 };
 
 const SectionBody: React.FC<SectionBodyProps> = (
     props: React.PropsWithChildren<SectionBodyProps>,
 ) => {
     return (
-        <div className={b({hidden: props.isStylesHidden}, props.className)}>
+        <div className={b(null, props.className)}>
             {props.title && <div className={b('title', props.titleModsVal)}>{props.title}</div>}
             {props.subTitle && <div className={b('subtitle')}>{props.subTitle}</div>}
             <div className={b('content')}>{props.children}</div>
@@ -54,7 +52,6 @@ const SectionWrapper: React.FC<SectionWrapperProps> = (props) => {
                 titleModsVal={titleModsVal}
                 subTitle={props.subTitle}
                 className={props.className}
-                isStylesHidden={props.isStylesHidden}
             >
                 <Collapse
                     defaultIsExpand={props.defaultIsExpanded ?? true}
@@ -75,7 +72,6 @@ const SectionWrapper: React.FC<SectionWrapperProps> = (props) => {
             subTitle={props.subTitle}
             title={props.title}
             className={props.className}
-            isStylesHidden={props.isStylesHidden}
         >
             {props.children}
         </SectionBody>

diff --git a/src/ui/units/dash/containers/Dialogs/Control2/Control2.tsx b/src/ui/units/dash/containers/Dialogs/Control2/Control2.tsx
@@ -7,6 +7,7 @@ import {DatalensGlobalState, Utils} from 'index';
 import {connect} from 'react-redux';
 import {Dispatch, bindActionCreators} from 'redux';
 import {ControlQA, DashTabItemControlSourceType, Feature} from 'shared';
+import {SectionWrapper} from 'ui/components/SectionWrapper/SectionWrapper';
 import {AppearanceSection} from 'units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/AppearanceSection';
 import {CommonSettingsSection} from 'units/dash/containers/Dialogs/Control2/Sections/CommonSettingsSection/CommonSettingsSection';
 import {SelectorPreview} from 'units/dash/containers/Dialogs/Control2/SelectorPreview/SelectorPreview';
@@ -67,7 +68,7 @@ class DialogAddControl extends React.Component<Props> {
         const showParametersSection = this.props.isParametersSectionAvailable;
 
         return (
-            <div>
+            <React.Fragment>
                 <div className={b('section')}>
                     <SelectorPreview />
                 </div>
@@ -77,15 +78,17 @@ class DialogAddControl extends React.Component<Props> {
                     </div>
                 )}
                 <div className={b('section')}>
-                    <CommonSettingsSection />
+                    <SectionWrapper title={i18n('label_common-settings')}>
+                        <CommonSettingsSection />
+                    </SectionWrapper>
                 </div>
                 {showParametersSection && (
                     <div className={b('section')}>
                         <ParametersSection />
                     </div>
                 )}
                 {this.renderAppearanceSection()}
-            </div>
+            </React.Fragment>
         );
     }
 

diff --git a/...dash/containers/Dialogs/Control2/Sections/CommonSettingsSection/CommonSettingsSection.tsx b/...dash/containers/Dialogs/Control2/Sections/CommonSettingsSection/CommonSettingsSection.tsx
@@ -9,22 +9,18 @@ import {DatasetSettings} from './DatasetSettings/DatasetSettings';
 import {ExternalSelectorSettings} from './ExternalSelectorSettings/ExternalSelectorSettings';
 import {InputSettings} from './InputSettings/InputSettings';
 
-type CommonSettingsProps = {
-    isSectionHidden?: boolean;
-};
-
-const CommonSettingsSection = ({isSectionHidden}: CommonSettingsProps) => {
+const CommonSettingsSection = () => {
     const {sourceType} = useSelector(selectSelectorDialog);
 
     switch (sourceType) {
         case DashTabItemControlSourceType.External:
             return <ExternalSelectorSettings />;
         case DashTabItemControlSourceType.Manual:
-            return <InputSettings isSectionHidden={isSectionHidden} />;
+            return <InputSettings />;
         case DashTabItemControlSourceType.Connection:
             return <ConnectionSettings />;
         default:
-            return <DatasetSettings isSectionHidden={isSectionHidden} />;
+            return <DatasetSettings />;
     }
 };
 

diff --git a/...Dialogs/Control2/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.tsx b/...Dialogs/Control2/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {I18n} from 'i18n';
 import {useSelector} from 'react-redux';
 
-import {SectionWrapper} from '../../../../../../../../components/SectionWrapper/SectionWrapper';
 import {selectWorkbookId} from '../../../../../../../workbooks/store/selectors';
 import {selectSelectorDialog} from '../../../../../../store/selectors/dashTypedSelectors';
 import {ELEMENT_TYPE} from '../../../../Control/constants';
@@ -64,7 +63,7 @@ export const ConnectionSettings: React.FC = () => {
     }, [connectionId, connectionQueryContent, connectionQueryType, fetcher]);
 
     return (
-        <SectionWrapper title={i18n('label_common-settings')}>
+        <React.Fragment>
             <ConnectionSelector />
             {connectionQueryTypes && connectionQueryTypes.length > 0 && (
                 <React.Fragment>
@@ -77,6 +76,6 @@ export const ConnectionSettings: React.FC = () => {
                     <ValueSelector controlProps={controlProps} />
                 </React.Fragment>
             )}
-        </SectionWrapper>
+        </React.Fragment>
     );
 };
diff --git a/...iners/Dialogs/Control2/Sections/CommonSettingsSection/DatasetSettings/DatasetSettings.tsx b/...iners/Dialogs/Control2/Sections/CommonSettingsSection/DatasetSettings/DatasetSettings.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 
-import {I18n} from 'i18n';
 import {useSelector} from 'react-redux';
 import {DATASET_FIELD_TYPES, DashTabItemControlSourceType, DatasetFieldType} from 'shared';
 
-import {SectionWrapper} from '../../../../../../../../components/SectionWrapper/SectionWrapper';
 import {VIEW_MODES} from '../../../../../../../../components/Select/hooks/useSelectRenderFilter/useSelectRenderFilter';
 import {SelectFeaturedAsyncProps} from '../../../../../../../../components/Select/wrappers/SelectFeaturedAsync';
 import {selectWorkbookId} from '../../../../../../../workbooks/store/selectors';
@@ -25,13 +23,7 @@ import {
     getDistinctsByDatasetField,
 } from './helpers/get-distincts-by-dataset-field';
 
-const i18n = I18n.keyset('dash.control-dialog.edit');
-
-type DatasetSettingsProps = {
-    isSectionHidden?: boolean;
-};
-
-const DatasetSettings = ({isSectionHidden}: DatasetSettingsProps) => {
+const DatasetSettings = () => {
     const {datasetFieldType, datasetId, datasetFieldId, sourceType, fieldType} =
         useSelector(selectSelectorDialog);
     const controlType = useSelector(selectSelectorControlType);
@@ -90,15 +82,10 @@ const DatasetSettings = ({isSectionHidden}: DatasetSettingsProps) => {
 
     return (
         <React.Fragment>
-            <SectionWrapper
-                isStylesHidden={isSectionHidden}
-                title={isSectionHidden ? '' : i18n('label_common-settings')}
-            >
-                <DatasetSelector />
-                <InputTypeSelector options={options} />
-                <OperationSelector />
-                <ValueSelector controlProps={controlProps} />
-            </SectionWrapper>
+            <DatasetSelector />
+            <InputTypeSelector options={options} />
+            <OperationSelector />
+            <ValueSelector controlProps={controlProps} />
         </React.Fragment>
     );
 };

diff --git a/...ol2/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.scss b/...ol2/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.scss
@@ -1,5 +1,3 @@
-@import '~@gravity-ui/uikit/styles/mixins';
-
 .external-selector-settings {
     &__checkbox-option {
         padding-top: 6px;

diff --git a/...rol2/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.tsx b/...rol2/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.tsx
@@ -13,8 +13,6 @@ import {ENTRY_TYPE} from 'units/dash/modules/constants';
 import {setSelectorDialogItem} from 'units/dash/store/actions/dashTyped';
 import {selectSelectorDialog} from 'units/dash/store/selectors/dashTypedSelectors';
 
-import {SectionWrapper} from '../../../../../../../../components/SectionWrapper/SectionWrapper';
-
 import './ExternalSelectorSettings.scss';
 
 const b = block('external-selector-settings');
@@ -82,41 +80,36 @@ const ExternalSelectorSettings = () => {
 
     return (
         <React.Fragment>
-            <SectionWrapper
-                title={i18n('dash.control-dialog.edit', 'label_common-settings')}
-                className={b()}
-            >
-                <FormRow label={i18n('dash.control-dialog.edit', 'field_title')}>
-                    <FieldWrapper error={validation.title}>
-                        <TextInput
-                            qa={ControlQA.inputNameControl}
-                            value={title}
-                            onUpdate={handleTitleUpdate}
-                        />
-                    </FieldWrapper>
-                </FormRow>
-
-                <FormRow label={i18n('dash.control-dialog.edit', 'field_source')}>
-                    <div className={b('navigation-container')}>
-                        <NavigationInput
-                            entryId={chartId}
-                            onChange={handleChartIdChange}
-                            includeClickableType={ENTRY_TYPE.CONTROL_NODE}
-                            linkMixin={b('link')}
-                            navigationMixin={b('navigation')}
-                        />
-                    </div>
-                </FormRow>
-
-                <FormRow label={i18n('dash.control-dialog.edit', 'field_autoheight')}>
-                    <Checkbox
-                        className={b('checkbox-option')}
-                        checked={autoHeight}
-                        onUpdate={handleAutoHeightUpdate}
-                        size="l"
+            <FormRow label={i18n('dash.control-dialog.edit', 'field_title')}>
+                <FieldWrapper error={validation.title}>
+                    <TextInput
+                        qa={ControlQA.inputNameControl}
+                        value={title}
+                        onUpdate={handleTitleUpdate}
+                    />
+                </FieldWrapper>
+            </FormRow>
+
+            <FormRow label={i18n('dash.control-dialog.edit', 'field_source')}>
+                <div className={b('navigation-container')}>
+                    <NavigationInput
+                        entryId={chartId}
+                        onChange={handleChartIdChange}
+                        includeClickableType={ENTRY_TYPE.CONTROL_NODE}
+                        linkMixin={b('link')}
+                        navigationMixin={b('navigation')}
                     />
-                </FormRow>
-            </SectionWrapper>
+                </div>
+            </FormRow>
+
+            <FormRow label={i18n('dash.control-dialog.edit', 'field_autoheight')}>
+                <Checkbox
+                    className={b('checkbox-option')}
+                    checked={autoHeight}
+                    onUpdate={handleAutoHeightUpdate}
+                    size="l"
+                />
+            </FormRow>
         </React.Fragment>
     );
 };

diff --git a/...ontainers/Dialogs/Control2/Sections/CommonSettingsSection/InputSettings/InputSettings.tsx b/...ontainers/Dialogs/Control2/Sections/CommonSettingsSection/InputSettings/InputSettings.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import {I18n} from 'i18n';
 
-import {SectionWrapper} from '../../../../../../../../components/SectionWrapper/SectionWrapper';
 import {OperationSelector} from '../../OperationSelector/OperationSelector';
 import {ValueSelector} from '../../ValueSelector/ValueSelector';
 import type {ValueSelectorControlProps} from '../../ValueSelector/types';
@@ -12,11 +11,7 @@ import {getElementOptions} from '../helpers/input-type-select';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-type InputSettingsProps = {
-    isSectionHidden?: boolean;
-};
-
-const InputSettings = ({isSectionHidden}: InputSettingsProps) => {
+const InputSettings = () => {
     const options = React.useMemo(() => {
         return getElementOptions();
     }, []);
@@ -28,15 +23,10 @@ const InputSettings = ({isSectionHidden}: InputSettingsProps) => {
 
     return (
         <React.Fragment>
-            <SectionWrapper
-                isStylesHidden={isSectionHidden}
-                title={isSectionHidden ? '' : i18n('label_common-settings')}
-            >
-                <ParameterNameInput label={i18n('field_field-name')} />
-                <InputTypeSelector options={options} />
-                <OperationSelector />
-                <ValueSelector controlProps={controlProps} />
-            </SectionWrapper>
+            <ParameterNameInput label={i18n('field_field-name')} />
+            <InputTypeSelector options={options} />
+            <OperationSelector />
+            <ValueSelector controlProps={controlProps} />
         </React.Fragment>
     );
 };