Change collection empty state (#1867)

datalens-tech · Dec 3, 2024 · d118094 · d118094
1 parent 1e86dd3
commit d118094
Show file tree

Hide file tree

Showing 15 changed files with 137 additions and 22 deletions.
diff --git a/src/i18n-keysets/collections/en.json b/src/i18n-keysets/collections/en.json
@@ -5,6 +5,7 @@
   "action_add-learning-materials-workbook": "Add learning materials",
   "action_cancel": "Cancel",
   "action_clear-filters": "Reset filters",
+  "action_connect-your-data": "Connect your data",
   "action_copy": "Copy",
   "action_create": "Create",
   "action_create-collection": "Collection",
@@ -24,6 +25,6 @@
   "label_not-found": "No results",
   "label_root-title": "Collections and workbooks",
   "label_title": "Name",
-  "section_create-first": "Start building your resource hierarchy: create a workbook or other resource",
+  "section_create-first": "You can create a workbook and connect your data",
   "section_incorrect-filters": "Try other values in filters"
 }
diff --git a/src/i18n-keysets/collections/ru.json b/src/i18n-keysets/collections/ru.json
@@ -5,6 +5,7 @@
   "action_add-learning-materials-workbook": "Добавить учебные материалы",
   "action_cancel": "Отменить",
   "action_clear-filters": "Очистить фильтры",
+  "action_connect-your-data": "Подключить свои данные",
   "action_copy": "Копировать",
   "action_create": "Создать",
   "action_create-collection": "Коллекцию",
@@ -24,6 +25,6 @@
   "label_not-found": "Ничего не найдено",
   "label_root-title": "Коллекции и воркбуки",
   "label_title": "Название",
-  "section_create-first": "Начните выстраивать иерархию ресурсов, например, с воркбука",
+  "section_create-first": "Вы можете создать воркбук и подключить свои данные",
   "section_incorrect-filters": "Попробуйте указать другие значения в фильтрах"
 }
diff --git a/src/ui/components/CollectionsStructure/CreateWorkbookDialog.tsx b/src/ui/components/CollectionsStructure/CreateWorkbookDialog.tsx
@@ -23,13 +23,15 @@ export type OpenDialogCreateWorkbookArgs = {
 type Props = {
     collectionId: string | null;
     open: boolean;
+    dialogTitle?: string;
+    defaultWorkbookTitle?: string;
     onClose: () => void;
-    onApply?: (result: CreateWorkbookResponse | null) => void;
+    onApply?: (result: CreateWorkbookResponse | null) => void | Promise<void>;
 };
 
 export const CreateWorkbookDialog: React.FC<Props> = (props) => {
     const dispatch: AppDispatch = useDispatch();
-    const {open, onClose} = props;
+    const {open, dialogTitle, defaultWorkbookTitle, onClose} = props;
 
     const handleApply = async ({title, description}: {title: string; description?: string}) => {
         const {collectionId, onApply} = props;
@@ -43,7 +45,10 @@ export const CreateWorkbookDialog: React.FC<Props> = (props) => {
         );
 
         if (onApply) {
-            onApply(result);
+            const promise = onApply(result);
+            if (promise) {
+                await promise;
+            }
         }
 
         return result;
@@ -53,10 +58,11 @@ export const CreateWorkbookDialog: React.FC<Props> = (props) => {
 
     return (
         <WorkbookDialog
-            title={i18n('action_create-workbook')}
+            title={dialogTitle ?? i18n('action_create-workbook')}
             textButtonApply={i18n('action_create')}
             open={open}
             isLoading={isLoading}
+            titleValue={defaultWorkbookTitle}
             onApply={handleApply}
             onClose={onClose}
             titleAutoFocus

diff --git a/src/ui/registry/units/collections/functionts-map.ts b/src/ui/registry/units/collections/functionts-map.ts
@@ -2,6 +2,8 @@ import type {DropdownMenuItem} from '@gravity-ui/uikit';
 import type {CollectionWithPermissions, WorkbookWithPermissions} from 'shared/schema';
 import {makeFunctionTemplate} from 'shared/utils/makeFunctionTemplate';
 
+import type {CustomizeEmptyPlaceholder} from './types';
+
 export const collectionsFunctionsMap = {
     customizeCollectionsActions:
         makeFunctionTemplate<
@@ -17,4 +19,5 @@ export const collectionsFunctionsMap = {
                 actions: (DropdownMenuItem[] | DropdownMenuItem)[],
             ) => (DropdownMenuItem[] | DropdownMenuItem)[]
         >(),
+    customizeEmptyPlaceholder: makeFunctionTemplate<CustomizeEmptyPlaceholder>(),
 } as const;
diff --git a/src/ui/registry/units/collections/register.ts b/src/ui/registry/units/collections/register.ts
@@ -1,5 +1,6 @@
 import {
     customizeCollectionsActions,
+    customizeEmptyPlaceholder,
     customizeWorkbooksActions,
 } from '../../../units/collections/components/CollectionContent/utils';
 import {registry} from '../../index';
@@ -8,5 +9,6 @@ export const registerCollectionsPlugins = () => {
     registry.collections.functions.register({
         customizeWorkbooksActions,
         customizeCollectionsActions,
+        customizeEmptyPlaceholder,
     });
 };
diff --git a/src/ui/registry/units/collections/types/customizeEmptyPlaceholder.ts b/src/ui/registry/units/collections/types/customizeEmptyPlaceholder.ts
@@ -0,0 +1,18 @@
+import type {History} from 'history';
+
+import type {AppDispatch} from '../../../../store';
+import type {EmptyPlaceholderAction} from '../../../../units/collections/components/types';
+
+export type CustomizeEmptyPlaceholder = (args: {
+    dispatch: AppDispatch;
+    history: History;
+    canCreateWorkbook: boolean;
+    curCollectionId: string | null;
+    title: string;
+    description?: string;
+    actions: EmptyPlaceholderAction[];
+}) => {
+    title: string;
+    description?: string;
+    actions: EmptyPlaceholderAction[];
+};
diff --git a/src/ui/registry/units/collections/types/index.ts b/src/ui/registry/units/collections/types/index.ts
@@ -0,0 +1 @@
+export * from './customizeEmptyPlaceholder';
diff --git a/src/ui/store/actions/collectionsStructure.ts b/src/ui/store/actions/collectionsStructure.ts
@@ -460,7 +460,7 @@ export const copyTemplate = ({
 }: {
     templateName: string;
     workbookId: string;
-    productId: string;
+    productId?: string;
     connectionId?: string;
 }) => {
     return (dispatch: CollectionsStructureDispatch) => {

diff --git a/src/ui/store/actions/openDialogTypes.ts b/src/ui/store/actions/openDialogTypes.ts
@@ -17,7 +17,7 @@ import type {OpenDialogConfirmArgs} from '../../components/DialogConfirm/DialogC
 import type {OpenDialogWarningArgs} from '../../components/DialogWarning/DialogWarning';
 import type {OpenDialogDatasetFieldInspectorArgs} from '../../units/datasets/components/dialogs/DatasetFieldInspector/DatasetFieldInspector';
 import type {OpenDialogParameterArgs} from '../../components/DialogParameter/DialogParameter';
-import type {OpenDialogMultidatasetArgs} from 'units/wizard/components/Dialogs/DialogMultidataset';
+import type {OpenDialogMultidatasetArgs} from '../../units/wizard/components/Dialogs/DialogMultidataset';
 import type {OpenDialogRelationsArgs} from '../../components/DialogRelations/DialogRelations';
 import type {OpenDialogAliasesArgs} from '../../components/DialogRelations/components/DialogAliases/DialogAliases';
 import type {OpenDialogColumnSettingsArgs} from '../../units/wizard/components/Dialogs/DialogColumnSettings/DialogColumnSettings';

diff --git a/src/ui/units/collections/components/CollectionContent/CollectionContent.scss b/src/ui/units/collections/components/CollectionContent/CollectionContent.scss
@@ -11,6 +11,8 @@
     }
 
     &__placeholder-controls {
+        display: flex;
+        gap: 8px;
         margin-top: 16px;
     }
 

diff --git a/src/ui/units/collections/components/CollectionContent/CollectionContent.tsx b/src/ui/units/collections/components/CollectionContent/CollectionContent.tsx
@@ -4,7 +4,8 @@ import type {CancellablePromise} from '@gravity-ui/sdk';
 import {Button} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
+import {useHistory} from 'react-router-dom';
 import {Waypoint} from 'react-waypoint';
 import {DL} from 'ui/constants/common';
 
@@ -19,6 +20,8 @@ import type {StructureItemsFilters} from '../../../../components/CollectionFilte
 import {CollectionPageViewMode} from '../../../../components/CollectionFilters';
 import {PlaceholderIllustration} from '../../../../components/PlaceholderIllustration/PlaceholderIllustration';
 import {SmartLoader} from '../../../../components/SmartLoader/SmartLoader';
+import {registry} from '../../../../registry';
+import type {AppDispatch} from '../../../../store';
 import {
     selectStructureItemsError,
     selectStructureItemsIsLoading,
@@ -29,7 +32,8 @@ import {CollectionBatchPanel} from '../CollectionBatchPanel/CollectionBatchPanel
 import {CollectionContentGrid} from '../CollectionContentGrid';
 import {CollectionContentTable} from '../CollectionContentTable';
 import type {SelectedMap, UpdateCheckboxArgs} from '../CollectionPage/hooks';
-import {DEFAULT_FILTERS, PAGE_SIZE} from '../constants';
+import {DEFAULT_FILTERS, EmptyPlaceholderActionId, PAGE_SIZE} from '../constants';
+import type {EmptyPlaceholderAction} from '../types';
 
 import {useActions} from './hooks';
 
@@ -54,7 +58,7 @@ interface Props {
     ) => CancellablePromise<GetStructureItemsResponse | null>;
     fetchStructureItems: () => void;
     onCloseMoveDialog: (structureChanged: boolean) => void;
-    onCreateWorkbookClick: () => void;
+    onCreateWorkbookWithConnectionClick: () => void;
     onClearFiltersClick: () => void;
     onMoveSelectedEntitiesClick: () => void;
     onDeleteSelectedEntitiesClick: () => void;
@@ -77,14 +81,17 @@ export const CollectionContent: React.FC<Props> = ({
     getStructureItemsRecursively,
     fetchStructureItems,
     onCloseMoveDialog,
-    onCreateWorkbookClick,
+    onCreateWorkbookWithConnectionClick,
     onClearFiltersClick,
     onMoveSelectedEntitiesClick,
     onDeleteSelectedEntitiesClick,
     onUpdateCheckboxClick,
     onUpdateAllCheckboxesClick,
     resetSelected,
 }) => {
+    const dispatch: AppDispatch = useDispatch();
+    const history = useHistory();
+
     const isStructureItemsLoading = useSelector(selectStructureItemsIsLoading);
     const structureItemsError = useSelector(selectStructureItemsError);
     const nextPageToken = useSelector(selectStructureItemsNextPageToken);
@@ -153,21 +160,53 @@ export const CollectionContent: React.FC<Props> = ({
 
     if (isEmptyItems) {
         if (isDefaultFilters || DL.IS_MOBILE) {
+            const actions: EmptyPlaceholderAction[] = [];
+
+            if (canCreateWorkbook) {
+                actions.push({
+                    id: EmptyPlaceholderActionId.ConnectYourData,
+                    title: i18n('action_connect-your-data'),
+                    view: 'action',
+                    handler: onCreateWorkbookWithConnectionClick,
+                });
+            }
+
+            const {customizeEmptyPlaceholder} = registry.collections.functions.getAll();
+
+            const {
+                title: emptyPlaceholderTitle,
+                description: emptyPlaceholderDescription,
+                actions: emptyPlaceholderActions,
+            } = customizeEmptyPlaceholder({
+                dispatch,
+                history,
+                curCollectionId,
+                canCreateWorkbook,
+                title: i18n('label_empty-list'),
+                description: canCreateWorkbook ? i18n('section_create-first') : undefined,
+                actions,
+            });
+
             return (
                 <AnimateBlock className={b('empty-state')}>
                     <PlaceholderIllustration
                         name="template"
-                        title={i18n('label_empty-list')}
-                        description={canCreateWorkbook ? i18n('section_create-first') : undefined}
+                        title={emptyPlaceholderTitle}
+                        description={emptyPlaceholderDescription}
                         renderAction={() => {
-                            if (canCreateWorkbook) {
+                            if (emptyPlaceholderActions.length > 0) {
                                 return (
-                                    <Button
-                                        className={b('placeholder-controls')}
-                                        onClick={onCreateWorkbookClick}
-                                    >
-                                        {i18n('action_create-workbook')}
-                                    </Button>
+                                    <div className={b('placeholder-controls')}>
+                                        {emptyPlaceholderActions.map((action) => (
+                                            <Button
+                                                key={action.id}
+                                                view={action.view}
+                                                onClick={action.handler}
+                                            >
+                                                {action.title}
+                                            </Button>
+                                        ))}
+                                    </div>
                                 );
                             }
                             return null;

diff --git a/src/ui/units/collections/components/CollectionContent/utils.ts b/src/ui/units/collections/components/CollectionContent/utils.ts
@@ -2,6 +2,8 @@ import type {DropdownMenuItem} from '@gravity-ui/uikit';
 import type {CollectionWithPermissions} from 'shared/schema/us/types/collections';
 import type {WorkbookWithPermissions} from 'shared/schema/us/types/workbooks';
 
+import type {CustomizeEmptyPlaceholder} from '../../../../registry/units/collections/types';
+
 export const customizeCollectionsActions = (
     _item: CollectionWithPermissions,
     actions: (DropdownMenuItem[] | DropdownMenuItem)[],
@@ -11,3 +13,11 @@ export const customizeWorkbooksActions = (
     _item: WorkbookWithPermissions,
     actions: (DropdownMenuItem[] | DropdownMenuItem)[],
 ) => actions;
+
+export const customizeEmptyPlaceholder: CustomizeEmptyPlaceholder = ({
+    title,
+    description,
+    actions,
+}) => {
+    return {title, description, actions};
+};
diff --git a/src/ui/units/collections/components/CollectionPage/CollectionPage.tsx b/src/ui/units/collections/components/CollectionPage/CollectionPage.tsx
@@ -110,6 +110,26 @@ export const CollectionPage = () => {
         );
     }, [curCollectionId, dispatch, history]);
 
+    const handleCreateWorkbookWithConnection = React.useCallback(() => {
+        dispatch(
+            openDialog({
+                id: DIALOG_CREATE_WORKBOOK,
+                props: {
+                    open: true,
+                    collectionId: curCollectionId,
+                    onApply: (result) => {
+                        if (result) {
+                            history.push(`${WORKBOOKS_PATH}/${result.workbookId}/connections/new`);
+                        }
+                    },
+                    onClose: () => {
+                        dispatch(closeDialog());
+                    },
+                },
+            }),
+        );
+    }, [curCollectionId, dispatch, history]);
+
     const handleMoveSelectedEntities = React.useCallback(() => {
         const workbookIds: string[] = [];
         const collectionIds: string[] = [];
@@ -270,7 +290,7 @@ export const CollectionPage = () => {
                     getStructureItemsRecursively={getStructureItemsRecursively}
                     fetchStructureItems={fetchStructureItems}
                     onCloseMoveDialog={handeCloseMoveDialog}
-                    onCreateWorkbookClick={handleCreateWorkbook}
+                    onCreateWorkbookWithConnectionClick={handleCreateWorkbookWithConnection}
                     onClearFiltersClick={() => {
                         updateFilters({
                             ...DEFAULT_FILTERS,

diff --git a/src/ui/units/collections/components/constants.ts b/src/ui/units/collections/components/constants.ts
@@ -19,3 +19,7 @@ export const DEFAULT_FILTERS: {
     mode: 'all',
     onlyMy: false,
 };
+
+export enum EmptyPlaceholderActionId {
+    ConnectYourData = 'connectYourData',
+}
diff --git a/src/ui/units/collections/components/types.ts b/src/ui/units/collections/components/types.ts
@@ -0,0 +1,8 @@
+import type {ButtonView} from '@gravity-ui/uikit';
+
+export type EmptyPlaceholderAction = {
+    id: string;
+    title: string;
+    view?: ButtonView;
+    handler: () => void;
+};