Add creation shared connection

src/server/components/features/features-list/EnableSharedEntries.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.EnableSharedEntries,
+    state: {
+        development: true,
+        production: false,
+    },
+});

src/shared/schema/us/types/collections.ts

@@ -10,6 +10,7 @@ export type GetStructureItemsMode = 'all' | 'onlyCollections' | 'onlyWorkbooks';
 export type CollectionPermissions = {
     listAccessBindings: boolean;
     updateAccessBindings: boolean;
+    createSharedEntry: boolean;
     createCollection: boolean;
     createWorkbook: boolean;
     limitedView: boolean;

src/shared/types/feature.ts

@@ -98,6 +98,8 @@ export enum Feature {
     EnableConnectionRevisions = 'EnableConnectionRevisions',
     /** Enable pagination in dataset sources table */
     EnableDatasetSourcesPagination = 'EnableDatasetSourcesPagination',
+    /** Enable shared connections and datasets */
+    EnableSharedEntries = 'EnableSharedEntries',
 
     EnableMobileFixedHeader = 'EnableMobileFixedHeader',
     EnableCommonChartDashSettings = 'EnableCommonChartDashSettings',

src/ui/components/CollectionsStructure/CreateEntryInCollectionDialog.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import {I18n} from 'i18n';
+import {useHistory} from 'react-router-dom';
+
+import DialogManager from '../DialogManager/DialogManager';
+
+import {CollectionStructureDialog, ResourceType} from './CollectionStructureDialog';
+
+const i18n = I18n.keyset('component.collections-structure');
+
+export type CreateEntryInCollectionDialogProps = {
+    entryType: 'connection' | 'dataset';
+    closeDialogAfterSuccessfulApply?: boolean;
+    disableHistoryPush?: boolean;
+    initialCollectionId?: string | null;
+    onClose: () => void;
+    onApply?: (collectionId: string) => void;
+};
+
+export const DIALOG_CREATE_ENTRY_IN_COLLECTION = Symbol('DIALOG_CREATE_ENTRY_IN_COLLECTION');
+
+export type OpenDialogCreateEntryInCollectionArgs = {
+    id: typeof DIALOG_CREATE_ENTRY_IN_COLLECTION;
+    props: CreateEntryInCollectionDialogProps;
+};
+
+export const CreateEntryInCollectionDialog: React.FC<CreateEntryInCollectionDialogProps> = ({
+    entryType,
+    closeDialogAfterSuccessfulApply,
+    disableHistoryPush = false,
+    initialCollectionId = null,
+    onClose,
+    onApply,
+}) => {
+    const history = useHistory();
+
+    const handleCreateEntry = React.useCallback(
+        async ({targetCollectionId}: {targetCollectionId: string | null}) => {
+            if (targetCollectionId) {
+                if (!disableHistoryPush) {
+                    switch (entryType) {
+                        case 'connection':
+                            history.push(`/collections/${targetCollectionId}/connections/new`);
+                            break;
+                        case 'dataset':
+                            history.push(`/collections/${targetCollectionId}/datasets/new`);
+                            break;
+                    }
+                }
+                if (onApply) {
+                    onApply(targetCollectionId);
+                }
+            }
+        },
+        [entryType, history, disableHistoryPush, onApply],
+    );
+
+    return (
+        <CollectionStructureDialog
+            open={true}
+            type={ResourceType.Collection}
+            initialCollectionId={initialCollectionId}
+            // TODO texts in CHARTS-11999
+            caption={`Выберите коллекцию для создания ${i18n(`label_${entryType}`)}`}
+            operationDeniedMessage={i18n('label_create-denied-title')}
+            textButtonApply={i18n('action_create')}
+            workbookSelectionMode={false}
+            closeDialogAfterSuccessfulApply={closeDialogAfterSuccessfulApply}
+            onApply={handleCreateEntry}
+            onClose={onClose}
+            useCustomDialog
+        />
+    );
+};
+
+DialogManager.registerDialog(DIALOG_CREATE_ENTRY_IN_COLLECTION, CreateEntryInCollectionDialog);

src/ui/components/CollectionsStructure/index.ts

@@ -31,3 +31,7 @@ export {
     CreateEntryInWorkbookDialog,
     DIALOG_CREATE_ENTRY_IN_WORKBOOK,
 } from './CreateEntryInWorkbookDialog';
+export {
+    CreateEntryInCollectionDialog,
+    DIALOG_CREATE_ENTRY_IN_COLLECTION,
+} from './CreateEntryInCollectionDialog';

src/ui/components/EntryDialogues/DialogCreateWorkbookEntry/DialogCreateWorkbookEntry.tsx

@@ -20,7 +20,7 @@ type OnErrorReturn = null | {
 
 interface DialogCreateWorkbookEntryGeneralProps<T> {
     onClose: () => void;
-    onApply: (data: {name: string; workbookId?: string}) => Promise<T>;
+    onApply: (data: {name: string; workbookId?: string; collectionId?: string}) => Promise<T>;
     onSuccess: (data: T) => void;
     onError?: (error: DataLensApiError) => OnErrorReturn;
     visible: boolean;
@@ -30,6 +30,7 @@ interface DialogCreateWorkbookEntryGeneralProps<T> {
     placeholder?: string;
     warningMessage?: React.ReactNode;
     workbookId?: string;
+    collectionId?: string;
 }
 
 interface DialogCreateWorkbookEntryDefaultProps {
@@ -161,7 +162,11 @@ export class DialogCreateWorkbookEntry<T> extends React.Component<
         const name = (stateName === '' ? this.props.defaultName : stateName).trim();
 
         try {
-            const data = await this.props.onApply({name, workbookId: this.props.workbookId});
+            const data = await this.props.onApply({
+                name,
+                workbookId: this.props.workbookId,
+                collectionId: this.props.collectionId,
+            });
             this.props.onSuccess(data);
             if (this.isUnmounted) {
                 return;

src/ui/constants/workbooks.ts

@@ -1 +1,2 @@
 export const WORKBOOK_PATHNAME = 'workbooks';
+export const COLLECTIONS_PATHNAME = 'collections';

src/ui/registry/units/connections/types/getNewConnectionDestination.ts

@@ -1,4 +1,8 @@
+import type {ValueOf} from 'shared';
+import type {CreationPlaces} from 'ui/units/connections/constants';
+
 /** A function that determines whether an entity is created in a folder or in a workbook. */
 export type GetNewConnectionDestination = (
     hasWorkbookIdInParams?: boolean,
-) => 'folder' | 'workbook';
+    hasCollectionIdInParams?: boolean,
+) => ValueOf<typeof CreationPlaces>;

src/ui/store/actions/openDialogTypes.ts

@@ -11,7 +11,7 @@ import type {OpenDialogNeedResetArgs} from '../../components/OpenDialogNeedReset
 import type {OpenDialogChartSettingsArgs} from '../../units/wizard/components/Dialogs/Settings/Settings';
 import type {
     OpenDialogCreateConnectionArgs,
-    OpenDialogCreateConnectionInWbArgs,
+    OpenDialogCreateConnectionInWbOrCollectionArgs,
 } from '../../units/connections/components';
 import type {OpenDialogConfirmArgs} from '../../components/DialogConfirm/DialogConfirm';
 import type {OpenDialogWarningArgs} from '../../components/DialogWarning/DialogWarning';
@@ -50,6 +50,7 @@ import type {OpenDialogDeleteCollectionArgs} from '../../components/CollectionsS
 import type {OpenDialogDeleteCollectionsWorkbooksArgs} from '../../components/CollectionsStructure/DeleteCollectionsWorkbooksDialog';
 import type {OpenDialogDeleteWorkbookArgs} from '../../components/CollectionsStructure/DeleteWorkbookDialog';
 import type {OpenDialogCreateEntryInWorkbookArgs} from '../../components/CollectionsStructure/CreateEntryInWorkbookDialog';
+import type {OpenDialogCreateEntryInCollectionArgs} from '../../components/CollectionsStructure/CreateEntryInCollectionDialog';
 import type {OpenDialogIamAccessArgs} from '../../components/IamAccessDialog';
 import type {OpenDialogTooltipSettingsArgs} from '../../units/wizard/components/Dialogs/DialogTooltipSettings/DialogTooltipSettings';
 import type {OpenDialogChangeDatasetFieldsArgs} from '../../units/datasets/components/DatasetTable/components/BatchActionPanel/components/DialogChangeDatasetFields/DialogChangeDatasetFields';
@@ -75,7 +76,7 @@ export type OpenDialogArgs<T = unknown> =
     | OpenDialogNeedResetArgs
     | OpenDialogChartSettingsArgs
     | OpenDialogCreateConnectionArgs
-    | OpenDialogCreateConnectionInWbArgs
+    | OpenDialogCreateConnectionInWbOrCollectionArgs
     | OpenDialogWarningArgs
     | OpenDialogConfirmArgs
     | OpenDialogDatasetFieldInspectorArgs
@@ -113,6 +114,7 @@ export type OpenDialogArgs<T = unknown> =
     | OpenDialogDeleteWorkbookArgs
     | OpenDialogIamAccessArgs
     | OpenDialogCreateEntryInWorkbookArgs
+    | OpenDialogCreateEntryInCollectionArgs
     | OpenDialogTooltipSettingsArgs
     | OpenDialogChangeDatasetFieldsArgs
     | OpenDialogCollectionNoCreatePermissionArgs

src/ui/units/collections/components/CollectionActions/CollectionActions.scss

@@ -20,6 +20,7 @@
 
     &__dropdown-text {
         margin-left: 8px;
+        line-height: 24px;
     }
 
     &__dropdown-hint {
@@ -28,4 +29,27 @@
         padding-bottom: 4px;
         color: var(--g-color-text-hint);
     }
+
+    &__notice {
+        margin: 4px -4px 8px;
+        cursor: initial;
+        &:hover {
+            background-color: initial;
+        }
+    }
+
+    &__notice-container {
+        max-width: 250px;
+        border-radius: 5px;
+        background-color: var(--g-color-base-info-light);
+        padding: 4px 8px;
+    }
+
+    &__notice-text {
+        font: var(--g-text-body-1-font);
+        line-height: var(--g-text-body-1-line-height);
+        margin: 0;
+        text-align: left;
+        color: var(--g-color-text-secondary);
+    }
 }

src/ui/units/collections/components/CollectionActions/CollectionActions.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ArrowRight, ChevronDown, LockOpen, TrashBin} from '@gravity-ui/icons';
+import {ArrowRight, ChevronDown, CodeTrunk, LockOpen, TrashBin} from '@gravity-ui/icons';
 import type {
     DropdownMenuItem,
     DropdownMenuItemAction,
@@ -11,7 +11,9 @@ import {Button, DropdownMenu, Icon, Tooltip} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
 import {useSelector} from 'react-redux';
+import {useHistory} from 'react-router-dom';
 import {DropdownAction} from 'ui/components/DropdownAction/DropdownAction';
+import {EntryIcon} from 'ui/components/EntryIcon/EntryIcon';
 import {isEnabledFeature} from 'ui/utils/isEnabledFeature';
 
 import {Feature} from '../../../../../shared';
@@ -47,13 +49,18 @@ export const CollectionActions = React.memo<Props>(
         onDeleteClick,
     }) => {
         const collection = useSelector(selectCollection);
-
+        const history = useHistory();
         const {CustomActionPanelCollectionActions} = registry.collections.components.getAll();
 
         const showCreateCollection = collection ? collection.permissions?.createCollection : true;
 
         const showCreateWorkbook = collection ? collection.permissions?.createWorkbook : true;
 
+        const showCreateSharedEntry =
+            isEnabledFeature(Feature.EnableSharedEntries) && collection
+                ? collection.permissions?.createSharedEntry
+                : false;
+
         const createActionItems: DropdownMenuItemMixed<void>[] = [];
 
         const getItemText = ({icon, text, hint}: {icon: IconData; text: string; hint?: string}) => (
@@ -88,6 +95,53 @@ export const CollectionActions = React.memo<Props>(
             });
         }
 
+        if (showCreateSharedEntry) {
+            createActionItems.push([
+                //TODO texts in CHARTS-11999
+                {
+                    text: 'Общие объекты',
+                    iconStart: <CodeTrunk />,
+                    items: [
+                        {
+                            text: (
+                                <div>
+                                    <div className={b('notice-container')}>
+                                        <p className={b('notice-text')}>
+                                            Объекты для переиспользования и подключения в воркбуки
+                                        </p>
+                                    </div>
+                                </div>
+                            ),
+                            className: b('notice'),
+                            action: () => {},
+                            selected: false,
+                        },
+                        {
+                            iconStart: (
+                                <EntryIcon
+                                    entry={{scope: 'connection'}}
+                                    overrideIconType="connection"
+                                />
+                            ),
+                            text: 'Подключение',
+                            action: () =>
+                                history.push(
+                                    `/collections/${collection?.collectionId}/connections/new`,
+                                ),
+                        },
+                        {
+                            iconStart: <EntryIcon entry={{scope: 'dataset'}} />,
+                            text: 'Датасет',
+                            action: () =>
+                                history.push(
+                                    `/collections/${collection?.collectionId}/datasets/new`,
+                                ),
+                        },
+                    ],
+                },
+            ]);
+        }
+
         const collectionsAccessEnabled = isEnabledFeature(Feature.CollectionsAccessEnabled);
 
         const dropdownActions = [];
@@ -139,7 +193,7 @@ export const CollectionActions = React.memo<Props>(
 
                 {(showCreateCollection || showCreateWorkbook) && (
                     <DropdownMenu
-                        size="s"
+                        size="m"
                         items={createActionItems}
                         switcherWrapperClassName={b('create-wrapper')}
                         popupProps={{placement: 'bottom-end'}}