Workbook page redesign

src/i18n-keysets/dash.control-dialog.edit/ru.json

@@ -76,4 +76,4 @@
   "value_source-external": "Внешний селектор",
   "value_source-manual": "Ручной ввод",
   "value_undefined": "Не определено"
-}
+}

src/i18n-keysets/new-workbooks/en.json

@@ -8,27 +8,36 @@
   "action_create-dashboard": "Create dashboard",
   "action_create-dataset": "Create dataset",
   "action_delete": "Delete",
+  "action_duplicate": "Duplicate",
   "action_edit": "Edit",
   "action_move": "Move",
   "action_rename": "Rename",
-  "action_duplicate": "Duplicate",
+  "action_retry": "Retry",
+  "action_show-more": "Show more",
   "button_apply": "Apply",
   "button_cancel": "Cancel",
   "button_workbook-table-load-more": "Load more",
   "button_workbook-table-retry": "Reload page",
+  "label_author": "Author",
   "label_copy": "copy",
   "label_delete-entry": "Delete",
   "label_entry-name-already-exists": "That name is already in use, try another one",
+  "label_error-load-entities": "Unable to load entities",
   "label_last-modified": "Last modified",
   "label_no-data": "Empty",
+  "label_placeholder": "Name",
   "label_rename-entry": "Rename",
   "label_title": "Name",
-  "label_placeholder": "Name",
   "menu_connection": "Connection",
   "menu_dashboard": "Dashboard",
   "menu_dataset": "Dataset",
   "menu_editor-chart": "Editor chart",
   "menu_ql-chart": "QL Chart",
   "menu_wizard-chart": "Wizard chart",
-  "section_delete-entry": "Are you sure you want to delete \"{{entryName}}\"?"
+  "no_objects": "Empty",
+  "section_delete-entry": "Are you sure you want to delete \"{{entryName}}\"?",
+  "title_charts": "Charts",
+  "title_connections": "Connections",
+  "title_dashboards": "Dashboards",
+  "title_datasets": "Datasets"
 }

src/i18n-keysets/new-workbooks/ru.json

@@ -8,27 +8,36 @@
   "action_create-dashboard": "Создать дашборд",
   "action_create-dataset": "Создать датасет",
   "action_delete": "Удалить",
+  "action_duplicate": "Дублировать",
   "action_edit": "Редактировать",
   "action_move": "Переместить",
   "action_rename": "Переименовать",
-  "action_duplicate": "Дублировать",
+  "action_retry": "Обновить",
+  "action_show-more": "Показать еще",
   "button_apply": "Применить",
   "button_cancel": "Отменить",
   "button_workbook-table-load-more": "Загрузить ещё",
   "button_workbook-table-retry": "Обновить страницу",
+  "label_author": "Автор",
   "label_copy": "копия",
   "label_delete-entry": "Удаление",
   "label_entry-name-already-exists": "Название уже используется, придумайте другое",
+  "label_error-load-entities": "Не удалось загрузить сущности",
   "label_last-modified": "Последнее изменение",
   "label_no-data": "Пусто",
+  "label_placeholder": "Введите имя",
   "label_rename-entry": "Переименование",
   "label_title": "Название",
-  "label_placeholder": "Введите имя",
   "menu_connection": "Подключение",
   "menu_dashboard": "Дашборд",
   "menu_dataset": "Датасет",
   "menu_editor-chart": "Чарт в Editor",
   "menu_ql-chart": "QL-чарт",
   "menu_wizard-chart": "Чарт в Wizard",
-  "section_delete-entry": "Вы действительно хотите удалить \"{{entryName}}\"?"
+  "no_objects": "Пока нет объектов",
+  "section_delete-entry": "Вы действительно хотите удалить \"{{entryName}}\"?",
+  "title_charts": "Чарты",
+  "title_connections": "Подключения",
+  "title_dashboards": "Дашборды",
+  "title_datasets": "Датасеты"
 }

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

@@ -14,6 +14,7 @@ import {
 export interface GetEntryResponse extends EntryFields {
     isFavorite: boolean;
     permissions?: Permissions;
+    isLocked?: boolean;
     links?: EntryFieldLinks;
     parentDashEntryId?: string;
     parentDashName?: string;

src/ui/units/workbooks/components/EntryActions/EntryActions.tsx

@@ -83,7 +83,7 @@ export const EntryActions = ({
 
     return (
         <DropdownMenu
-            size="s"
+            size="m"
             items={items}
             defaultSwitcherProps={{qa: WorkbookPage.MenuDropDownBtn}}
         />

src/ui/units/workbooks/components/Table/WorkbookEntriesTable/ChunkGroup/ChunkGroup.scss

@@ -0,0 +1,11 @@
+.dl-workbook-entries-chunk-group {
+    display: table-row-group;
+
+    &:last-child .dl-content-row:last-child .dl-content-row__content-cell {
+        border-bottom: 0;
+    }
+
+    &__hidden-row {
+        display: table-row;
+    }
+}

src/ui/units/workbooks/components/Table/WorkbookEntriesTable/ChunkGroup/ChunkGroup.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import block from 'bem-cn-lite';
+import {useInView} from 'react-intersection-observer';
+import {ChunkItem} from 'ui/units/workbooks/types';
+
+import {EmptyRow, Row} from '../Row/Row';
+import {ROW_HEIGHT, options} from '../constants';
+import {WorkbookEntriesTableProps} from '../types';
+
+import './ChunkGroup.scss';
+
+interface ChunkGroupProps extends WorkbookEntriesTableProps {
+    chunk: ChunkItem[];
+}
+
+const b = block('dl-workbook-entries-chunk-group');
+
+export function ChunkGroup({
+    chunk,
+    workbook,
+    onRenameEntry,
+    onDeleteEntry,
+    onDuplicateEntry,
+    onCopyEntry,
+}: ChunkGroupProps) {
+    const {ref, inView} = useInView(options);
+
+    const height = chunk.length * ROW_HEIGHT;
+
+    const renderContent = () =>
+        chunk.map((chunkItem) => {
+            switch (chunkItem.type) {
+                case 'entry':
+                    return (
+                        <Row
+                            key={chunkItem.key}
+                            workbook={workbook}
+                            item={chunkItem.item}
+                            onRenameEntry={onRenameEntry}
+                            onDeleteEntry={onDeleteEntry}
+                            onDuplicateEntry={onDuplicateEntry}
+                            onCopyEntry={onCopyEntry}
+                        />
+                    );
+                case 'empty':
+                    return <EmptyRow key={chunkItem.key} />;
+                default:
+                    return null;
+            }
+        });
+
+    return (
+        <div ref={ref} className={b()}>
+            {inView ? renderContent() : <div className={b('hidden-row')} style={{height}} />}
+        </div>
+    );
+}

src/ui/units/workbooks/components/Table/WorkbookEntriesTable/MainTabContent/MainTabContent.scss

@@ -0,0 +1,78 @@
+.dl-main-tab-content {
+    display: flex;
+    flex-direction: column;
+
+    &__table {
+        display: table;
+        width: 100%;
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        height: 48px;
+    }
+
+    &__header_closed {
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
+
+    &__table-header {
+        display: table-header-group;
+    }
+
+    &__table-header-cell {
+        display: table-cell;
+    }
+
+    &__table-header-cell_title {
+        width: 58%;
+    }
+
+    &__table-header-cell_author {
+        width: 165px;
+    }
+
+    &__table-header-cell_date {
+        width: 145px;
+    }
+
+    &__content {
+        margin: auto 0;
+    }
+
+    &__title {
+        display: flex;
+        font-style: normal;
+        font-weight: 500;
+        cursor: pointer;
+    }
+
+    &__title-text {
+        margin-left: 6px;
+    }
+
+    &__create-btn {
+        text-align: right;
+    }
+
+    &__no-objects {
+        color: var(--g-color-text-secondary);
+        margin-left: 20px;
+    }
+
+    &__show-more-btn {
+        width: 100%;
+        margin-top: 16px;
+    }
+
+    &__retry-btn {
+        margin-top: 16px;
+        max-width: 83px;
+    }
+
+    &__error-text {
+        font-size: 15px;
+        color: var(--yc-color-text-danger);
+    }
+}

src/ui/units/workbooks/components/Table/WorkbookEntriesTable/MainTabContent/MainTabContent.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+
+import {ChevronDown, ChevronUp, Plus} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import {SmartLoader} from 'components/SmartLoader/SmartLoader';
+import {I18n} from 'i18n';
+import {useDispatch} from 'react-redux';
+import {CreateEntryActionType} from 'ui/units/workbooks/constants';
+import {setCreateWorkbookEntryType} from 'ui/units/workbooks/store/actions';
+import {ChunkItem} from 'ui/units/workbooks/types';
+
+import {ChunkGroup} from '../ChunkGroup/ChunkGroup';
+import {EmptyRow} from '../Row/Row';
+import {WorkbookEntriesTableProps} from '../types';
+
+import './MainTabContent.scss';
+
+const b = block('dl-main-tab-content');
+
+const i18n = I18n.keyset('new-workbooks');
+
+interface MainTabContentProps extends WorkbookEntriesTableProps {
+    chunk: ChunkItem[];
+    actionCreateText: string;
+    title: string;
+    isErrorMessage?: boolean;
+    isLoading?: boolean;
+    actionType: CreateEntryActionType;
+    isShowMoreBtn: boolean;
+    loadMoreEntries: () => void;
+    retryLoadEntries: () => void;
+}
+
+const MainTabContent = ({
+    workbook,
+    chunk,
+    onRenameEntry,
+    onDeleteEntry,
+    onDuplicateEntry,
+    onCopyEntry,
+    actionCreateText,
+    title,
+    actionType,
+    isShowMoreBtn,
+    loadMoreEntries,
+    retryLoadEntries,
+    isErrorMessage,
+    isLoading,
+}: MainTabContentProps) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+
+    const dispatch = useDispatch();
+
+    const handleCreateEntity = () => {
+        dispatch(setCreateWorkbookEntryType(actionType));
+    };
+
+    const getContentTab = () => {
+        if (isErrorMessage)
+            return <div className={b('error-text')}>{i18n('label_error-load-entities')}</div>;
+
+        if (chunk.length > 0 && isOpen) {
+            return (
+                <ChunkGroup
+                    key={chunk[0].key}
+                    workbook={workbook}
+                    chunk={chunk}
+                    onRenameEntry={onRenameEntry}
+                    onDeleteEntry={onDeleteEntry}
+                    onDuplicateEntry={onDuplicateEntry}
+                    onCopyEntry={onCopyEntry}
+                />
+            );
+        }
+
+        if (isOpen)
+            return <EmptyRow label={<div className={b('no-objects')}>{i18n('no_objects')}</div>} />;
+
+        return null;
+    };
+
+    const getActionBtn = () => {
+        if (isErrorMessage) {
+            return (
+                <Button onClick={retryLoadEntries} className={b('retry-btn')} view="outlined">
+                    {i18n('action_retry')}
+                </Button>
+            );
+        }
+
+        if (isShowMoreBtn && isOpen) {
+            return (
+                <Button onClick={loadMoreEntries} className={b('show-more-btn')} view="outlined">
+                    {i18n('action_show-more')}
+                </Button>
+            );
+        }
+
+        return null;
+    };
+
+    return (
+        <div className={b()}>
+            <div className={b('header', {closed: !isOpen})}>
+                <div className={b('content')}>
+                    <div className={b('title')} onClick={() => setIsOpen(!isOpen)}>
+                        {isOpen ? <ChevronDown /> : <ChevronUp />}
+
+                        <div className={b('title-text')}>{title}</div>
+                    </div>
+                </div>
+                {workbook.permissions.update && (
+                    <div className={b('content')}>
+                        <div className={b('create-btn')}>
+                            <Button onClick={handleCreateEntity}>
+                                <Icon data={Plus} />
+                                {actionCreateText}
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <div className={b('table')}>
+                <div className={b('table-header')}>
+                    <div className={b('table-header-cell', {title: true})} />
+                    <div className={b('table-header-cell', {author: true})} />
+                    <div className={b('table-header-cell', {date: true})} />
+                    <div className={b('table-header-cell')} />
+                    <div className={b('table-header-cell')} />
+                </div>
+                {!isLoading && getContentTab()}
+            </div>
+
+            {isLoading ? <SmartLoader size="m" showAfter={0} /> : getActionBtn()}
+        </div>
+    );
+};
+
+export {MainTabContent};