@gravity-ui/querieskit 1.2.0 → 1.3.0

package/src/modules/Attachments/Attachments.tsx

@@ -0,0 +1,336 @@
+import React, {useMemo, useRef, useState} from 'react';
+import {Button, Flex, Icon, Tab, TabList, TabPanel, TabProvider, Text} from '@gravity-ui/uikit';
+import {AttachmentList, AttachmentListPlaceholder, EditAttachmentItem} from '../../components';
+import {createUuid} from '../../helpers/createUuid';
+import {isObjectEqual} from '../../helpers/isObjectEqual';
+import {Plus} from '@gravity-ui/icons';
+import type {
+    AttachmentItemProps,
+    AttachmentListPlaceholderProps,
+    AttachmentListProps,
+    EditLinkValues,
+} from '../../components';
+import cn from 'bem-cn-lite';
+
+import i18n from './i18n';
+
+import './Attachments.scss';
+
+type TabVariants = 'Current' | 'Deleted';
+
+export type AttachItem = AttachmentItemProps['attachment'] & {token?: string; isNew?: boolean};
+
+export type AttachmentsProps = {
+    tokens?: {value: string; title: string}[];
+    placeholderProps?: Omit<AttachmentListPlaceholderProps, 'onAddFile' | 'onAddLink'>;
+    attachmentListProps?: Pick<AttachmentListProps, 'className'>;
+    attachments?: AttachItem[];
+    deletedAttachments?: AttachItem[];
+    onChange?: (payload: {attachments: AttachItem[]; deletedAttachments: AttachItem[]}) => void;
+};
+
+const block = cn('qp-attachments');
+
+export const Attachments = ({
+    tokens,
+    placeholderProps,
+    attachmentListProps,
+    onChange,
+    attachments: customerAttachments,
+    deletedAttachments: customerDeletedAttachments,
+}: AttachmentsProps) => {
+    const [currentTab, setCurrentTab] = useState<'Current' | 'Deleted'>('Current');
+
+    const [innerAttachList, setInnerAttachList] = useState<AttachItem[]>(customerAttachments ?? []);
+    const [innerDeletedAttachList, setInnerDeletedAttachList] = useState<AttachItem[]>(
+        customerDeletedAttachments ?? [],
+    );
+
+    const [editingIds, setEditingIds] = useState<string[]>([]);
+    const [wasAddedIds, setWasAddedIds] = useState<string[]>([]);
+    const [wasEdited, setWasEditedIds] = useState<string[]>([]);
+
+    const attachList = customerAttachments ?? innerAttachList;
+    const deletedAttachList = customerDeletedAttachments ?? innerDeletedAttachList;
+
+    const attachCount = useMemo(() => attachList.filter((a) => !a.isNew).length, [attachList]);
+
+    const defaultAttachList = useRef(attachList);
+
+    const getDefaultValuesForLink = (linkId: string) => {
+        const currentLink = attachList.find((a) => a.id === linkId);
+        return {
+            name: currentLink?.name ?? '',
+            link: currentLink?.link ?? '',
+            token: currentLink?.token ?? '',
+        };
+    };
+
+    const runAfterAttachAdded = (attachId: string, newAttach: AttachItem) => {
+        const editedAttach = defaultAttachList.current.find((a) => a.id === attachId);
+
+        if (!editedAttach) return;
+
+        if (isObjectEqual(editedAttach, newAttach)) {
+            setWasEditedIds(wasEdited.filter((id) => id !== attachId));
+            return;
+        }
+
+        setWasEditedIds([...wasEdited, attachId]);
+    };
+
+    const handleAddEmptyFile = () => {
+        const id = createUuid();
+
+        const patchAttachList = [
+            ...attachList.filter((a) => !a.isNew),
+            {id, name: '', isNew: true},
+        ];
+
+        setInnerAttachList(patchAttachList);
+        setWasAddedIds([...wasAddedIds, id]);
+        setEditingIds([...editingIds, id]);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: deletedAttachList,
+        });
+    };
+
+    const handleAddEmptyLink = () => {
+        const id = createUuid();
+
+        const patchAttachList = [
+            ...attachList.filter((a) => !a.isNew),
+            {id, name: '', token: '', link: '', isNew: true},
+        ];
+
+        setInnerAttachList(patchAttachList);
+        setWasAddedIds([...wasAddedIds, id]);
+        setEditingIds([...editingIds, id]);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: deletedAttachList,
+        });
+    };
+
+    const handleAcceptFile = (fileId: string, fileName: string) => {
+        const patchedFile = attachList.find((a) => a.id === fileId);
+        if (!patchedFile) return;
+
+        const patchEditingIds = editingIds.filter((id) => id !== fileId);
+        const patchAttachList = attachList.map((attach) => {
+            if (attach.id === fileId) return {id: fileId, name: fileName};
+            return attach;
+        });
+
+        setEditingIds(patchEditingIds);
+        setInnerAttachList(patchAttachList);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: deletedAttachList,
+        });
+
+        runAfterAttachAdded(fileId, {id: fileId, name: fileName});
+    };
+
+    const handleAcceptLink = (linkId: string, link: EditLinkValues) => {
+        const patchedLink = attachList.find((a) => a.id === linkId);
+        if (!patchedLink) return;
+
+        const patchEditingIds = editingIds.filter((id) => id !== linkId);
+        const patchAttachList = attachList.map((attach) => {
+            if (attach.id === linkId) return {id: linkId, ...link};
+            return attach;
+        });
+
+        setEditingIds(patchEditingIds);
+        setInnerAttachList(patchAttachList);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: deletedAttachList,
+        });
+
+        runAfterAttachAdded(linkId, {id: linkId, ...link});
+    };
+
+    const handleCancelEdit = (fileId: string) => {
+        const patchEditingIds = editingIds.filter((id) => id !== fileId);
+        const patchAttachList = attachList.filter((a) => !a.isNew);
+
+        const wasItNewAttach = attachList.some((a) => a.isNew);
+        if (wasItNewAttach) {
+            setWasAddedIds(wasAddedIds.filter((id) => id !== fileId));
+        }
+
+        setInnerAttachList(patchAttachList);
+        setEditingIds(patchEditingIds);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: deletedAttachList,
+        });
+    };
+
+    const handleEdit = (editAttachId: string) => {
+        const patchEditingIds = [...editingIds, editAttachId];
+
+        setEditingIds(patchEditingIds);
+    };
+
+    const handleDelete = (attachId: string) => {
+        const deletedAttachmen = attachList.find((a) => a.id === attachId);
+
+        if (!deletedAttachmen) return;
+
+        const patchAttachList = attachList.filter((a) => a.id !== attachId);
+        const patchDeletedAttachList = [...deletedAttachList, deletedAttachmen];
+
+        setInnerAttachList(patchAttachList);
+        setInnerDeletedAttachList(patchDeletedAttachList);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: patchDeletedAttachList,
+        });
+    };
+
+    const handleDeleteAll = () => {
+        const patchAttachList: never[] = [];
+        const patchDeletedAttachList = [
+            ...deletedAttachList,
+            ...attachList.filter((a) => !a.isNew),
+        ];
+
+        setInnerAttachList(patchAttachList);
+        setInnerDeletedAttachList(patchDeletedAttachList);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: patchDeletedAttachList,
+        });
+    };
+
+    const handleRevertDelete = (attachId: string) => {
+        const revertAttach = deletedAttachList.find((a) => a.id === attachId);
+
+        if (!revertAttach) return;
+
+        const patchAttachList = [...attachList, revertAttach];
+        const patchDeletedAttachList = deletedAttachList.filter((a) => a.id !== attachId);
+
+        setInnerAttachList(patchAttachList);
+        setInnerDeletedAttachList(patchDeletedAttachList);
+
+        onChange?.({
+            attachments: patchAttachList,
+            deletedAttachments: patchDeletedAttachList,
+        });
+    };
+
+    return (
+        <Flex className={block()} direction="column" width="100%" height="100%">
+            <TabProvider value={currentTab} onUpdate={(tab) => setCurrentTab(tab as TabVariants)}>
+                <TabList>
+                    <Tab className={block('tab')} value="Current">
+                        <Text variant="body-1">Current</Text>
+                        <Text color="hint" variant="body-1">
+                            {attachCount}
+                        </Text>
+                    </Tab>
+                    <Tab className={block('tab')} value="Deleted">
+                        <Text variant="body-1">Deleted</Text>
+                        <Text color="hint" variant="body-1">
+                            {deletedAttachList.length}
+                        </Text>
+                    </Tab>
+                </TabList>
+
+                <TabPanel className={block('panel')} value="Current">
+                    <Flex spacing={{pt: 3}} direction="column" width="100%" height="100%">
+                        {attachList.length ? (
+                            <AttachmentList
+                                {...attachmentListProps}
+                                attachments={attachList}
+                                wasAddedIds={wasAddedIds}
+                                wasEditedIds={wasEdited}
+                                editingIds={editingIds}
+                                onEdit={(attach) => handleEdit(attach.id)}
+                                onDelete={(attach) => handleDelete(attach.id)}
+                                renderEditForm={(attach) => {
+                                    const isLink = typeof attach.link === 'string';
+
+                                    if (isLink) {
+                                        const defaultLinkValues = getDefaultValuesForLink(
+                                            attach.id,
+                                        );
+
+                                        return (
+                                            <EditAttachmentItem
+                                                type="link"
+                                                onAccept={(link) =>
+                                                    handleAcceptLink(attach.id, link)
+                                                }
+                                                defaultValues={defaultLinkValues}
+                                                tokens={tokens}
+                                                onCancel={() => handleCancelEdit(attach.id)}
+                                            />
+                                        );
+                                    }
+
+                                    return (
+                                        <EditAttachmentItem
+                                            type="file"
+                                            defaultFileName={attach.name}
+                                            onAccept={(pathName) =>
+                                                handleAcceptFile(attach.id, pathName)
+                                            }
+                                            onCancel={() => handleCancelEdit(attach.id)}
+                                        />
+                                    );
+                                }}
+                            />
+                        ) : (
+                            <AttachmentListPlaceholder
+                                onAddFile={handleAddEmptyFile}
+                                onAddLink={handleAddEmptyLink}
+                                {...placeholderProps}
+                            />
+                        )}
+                        {Boolean(attachList.length) && (
+                            <Flex gap={2}>
+                                <Button onClick={handleAddEmptyFile}>
+                                    <Icon data={Plus} />
+                                    {i18n('action_add-file')}
+                                </Button>
+
+                                <Button view="outlined" onClick={handleAddEmptyLink}>
+                                    <Icon data={Plus} />
+                                    {i18n('action_add-link')}
+                                </Button>
+
+                                <Button view="flat" onClick={handleDeleteAll}>
+                                    {i18n('action_remove-all')}
+                                </Button>
+                            </Flex>
+                        )}
+                    </Flex>
+                </TabPanel>
+
+                <TabPanel className={block('panel')} value="Deleted">
+                    <Flex spacing={{pt: 3}} width="100%" height="100%">
+                        <AttachmentList
+                            {...attachmentListProps}
+                            isDeleted
+                            attachments={deletedAttachList}
+                            onRevert={(attach) => handleRevertDelete(attach.id)}
+                        />
+                    </Flex>
+                </TabPanel>
+            </TabProvider>
+        </Flex>
+    );
+};

package/src/modules/Attachments/i18n/dicts.ts

@@ -0,0 +1,4 @@
+import en from './en.json';
+import ru from './ru.json';
+
+export default {en, ru};

package/src/modules/Attachments/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "action_add-file": "File",
+  "action_add-link": "Link",
+  "action_remove-all": "Remove all"
+}

package/src/modules/Attachments/i18n/index.ts

@@ -0,0 +1,5 @@
+import {addI18Keysets} from '../../../i18n';
+
+import dicts from './dicts';
+
+export default addI18Keysets('qp:attachments', dicts);

package/src/modules/Attachments/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "action_add-file": "Файл",
+  "action_add-link": "Ссылка",
+  "action_remove-all": "Удалить все"
+}

package/src/modules/Attachments/index.ts

@@ -0,0 +1,2 @@
+export {Attachments} from './Attachments';
+export type {AttachmentsProps, AttachItem} from './Attachments';

package/src/modules/NavigationPreview/NavigationPreview.scss

@@ -1,24 +1,32 @@
 .qp-navigation-preview {
-  --data-table-border-color: var(--g-color-line-generic);
+    --data-table-border-color: var(--g-color-line-generic);
 
-  min-width: 0;
+    min-width: 0;
 
-  &__error {
-    display: block;
-  }
+    &__error {
+        display: block;
+    }
 
-  &__table {
-    overflow-x: auto;
-  }
+    &__table {
+        overflow-x: auto;
+    }
 
-  .data-table__row,
-  .data-table__head {
-    height: 40px;
-  }
+    .data-table__row,
+    .data-table__head-row {
+        height: 40px;
+    }
 
-  .data-table__th,
-  .data-table__td {
-    border-width: 0 0 1px;
-    vertical-align: middle;
-  }
+    .data-table__box_sticky-head_moving .data-table__head-row {
+        height: auto;
+    }
+
+    .data-table__sticky_head .data-table__head-row {
+        height: 40px;
+    }
+
+    .data-table__th,
+    .data-table__td {
+        border-width: 0 0 1px;
+        vertical-align: middle;
+    }
 }

package/src/modules/NavigationPreview/NavigationPreview.tsx

@@ -1,9 +1,15 @@
 import React, {useMemo} from 'react';
 import {Flex, Text} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
-import {type Column, DataTable, FieldsSearchToolbar} from '../../components';
+import {type Column, DataTable, FieldsSearchToolbar, QueryResultsTable} from '../../components';
 import {useVisibleColumns} from '../../helpers/useVisibleColumns';
-import type {NavigationPreviewConfig, NavigationPreviewRow} from '../../types/navigation';
+import type {
+    NavigationPreviewColumn,
+    NavigationPreviewConfig,
+    NavigationPreviewFormatterConfig,
+    NavigationPreviewRow,
+} from '../../types/navigation';
+import type {QueryResultColumn} from '../../types/queryResults';
 import {buildPreviewColumns} from './helpers/buildPreviewColumns';
 import {filterPreviewRows} from './helpers/filterPreviewRows';
 import i18n from './i18n';
@@ -12,7 +18,7 @@ import './NavigationPreview.scss';
 const block = cn('qp-navigation-preview');
 
 export type NavigationPreviewViewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> =
-    {
+    NavigationPreviewFormatterConfig & {
         tableColumns?: Array<Column<TRow>>;
         extraColumns?: Array<Column<TRow>>;
     };
@@ -31,6 +37,16 @@ export type NavigationPreviewProps<TRow extends NavigationPreviewRow = Navigatio
     className?: string;
 };
 
+function getColumnName<TRow extends NavigationPreviewRow>(column: NavigationPreviewColumn<TRow>) {
+    return typeof column === 'string' ? column : column.name;
+}
+
+function isQueryResultColumn<TRow extends NavigationPreviewRow>(
+    column: NavigationPreviewColumn<TRow>,
+): column is QueryResultColumn<TRow> {
+    return typeof column !== 'string';
+}
+
 export function NavigationPreview<TRow extends NavigationPreviewRow = NavigationPreviewRow>({
     data,
     view,
@@ -45,18 +61,29 @@ export function NavigationPreview<TRow extends NavigationPreviewRow = Navigation
     className,
 }: NavigationPreviewProps<TRow>) {
     const {columns, rows, loading, loaded, errorContent} = data;
-    const {tableColumns, extraColumns} = view ?? {};
+    const {tableColumns, extraColumns, formatterSettings, maxVisibleLines} = view ?? {};
+    const columnNames = useMemo(() => columns.map(getColumnName), [columns]);
 
-    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(columns, {
+    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(columnNames, {
         value: visibleColumns,
         onChange: onVisibleColumnsChange,
         defaultValue: defaultVisibleColumns,
     });
 
-    const displayedColumnNames = useMemo(
-        () => columns.filter((column) => activeVisibleColumns.includes(column)),
+    const displayedColumns = useMemo(
+        () => columns.filter((column) => activeVisibleColumns.includes(getColumnName(column))),
         [columns, activeVisibleColumns],
     );
+    const displayedColumnNames = useMemo(
+        () => displayedColumns.map(getColumnName),
+        [displayedColumns],
+    );
+    const typedColumns = useMemo(
+        () => displayedColumns.filter(isQueryResultColumn),
+        [displayedColumns],
+    );
+    const canUseQueryResultsTable =
+        !tableColumns && !extraColumns?.length && typedColumns.length === displayedColumns.length;
 
     const resolvedColumns = useMemo(() => {
         if (tableColumns) {
@@ -66,7 +93,11 @@ export function NavigationPreview<TRow extends NavigationPreviewRow = Navigation
     }, [tableColumns, extraColumns, displayedColumnNames]);
 
     const fieldsOptions = useMemo(
-        () => columns.map((column) => ({id: column, title: column})),
+        () =>
+            columns.map((column) => ({
+                id: getColumnName(column),
+                title: typeof column === 'string' ? column : (column.header ?? column.name),
+            })),
         [columns],
     );
 
@@ -96,15 +127,29 @@ export function NavigationPreview<TRow extends NavigationPreviewRow = Navigation
                     hideFieldsSelector={hideFieldsSelector}
                 />
             )}
-            <DataTable<TRow>
-                columns={resolvedColumns}
-                data={filteredRows}
-                loading={loading}
-                loaded={loaded}
-                emptyVariant={search ? 'nothing-found' : 'no-data'}
-                settings={{displayIndices: false}}
-                className={block('table')}
-            />
+            {canUseQueryResultsTable ? (
+                <QueryResultsTable<TRow>
+                    columns={typedColumns}
+                    rows={filteredRows}
+                    loading={loading}
+                    loaded={loaded}
+                    formatterSettings={formatterSettings}
+                    maxVisibleLines={maxVisibleLines}
+                    emptyVariant={search ? 'nothing-found' : 'no-data'}
+                    displayIndices={false}
+                    className={block('table')}
+                />
+            ) : (
+                <DataTable<TRow>
+                    columns={resolvedColumns}
+                    data={filteredRows}
+                    loading={loading}
+                    loaded={loaded}
+                    emptyVariant={search ? 'nothing-found' : 'no-data'}
+                    settings={{displayIndices: false}}
+                    className={block('table')}
+                />
+            )}
         </Flex>
     );
 }

package/src/modules/NavigationPreview/story/NavigationPreview.stories.tsx

@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {Icon, Label} from '@gravity-ui/uikit';
 import LockIcon from '@gravity-ui/icons/svgs/lock.svg';
 import {NavigationPreview} from '..';
-import type {NavigationPreviewRow} from '../../../types/navigation';
+import type {NavigationPreviewColumn, NavigationPreviewRow} from '../../../types/navigation';
 import {PREVIEW_COLUMNS, PREVIEW_ROWS} from './mockData';
 
 const meta: Meta<typeof NavigationPreview> = {
@@ -68,6 +68,31 @@ export const Error: Story = {
     },
 };
 
+const TYPED_COLUMNS: Array<NavigationPreviewColumn<NavigationPreviewRow>> = [
+    {name: 'id', type: ['DataType', 'Uint64']},
+    {name: 'tags', type: ['ListType', ['DataType', 'Utf8']]},
+    {
+        name: 'details',
+        type: [
+            'StructType',
+            [
+                ['name', ['DataType', 'Utf8']],
+                ['score', ['DataType', 'Double']],
+            ],
+        ],
+    },
+];
+
+const TYPED_ROWS: NavigationPreviewRow[] = [
+    {id: 1, tags: ['primary', 'preview'], details: ['Result', 42.5]},
+];
+
+export const TypedValues: Story = {
+    args: {
+        data: {columns: TYPED_COLUMNS, rows: TYPED_ROWS, loaded: true},
+    },
+};
+
 type CustomRow = NavigationPreviewRow & {lock?: string};
 
 const CUSTOM_ROWS: CustomRow[] = PREVIEW_ROWS.map((row, index) => ({

package/src/modules/NavigationPreview/story/mockData.ts

@@ -1,9 +1,14 @@
-import type {NavigationPreviewRow} from '../../../types/navigation';
+import type {NavigationPreviewColumn, NavigationPreviewRow} from '../../../types/navigation';
 
-export const PREVIEW_COLUMNS = ['id', 'created_at', 'title', 'status'];
+export const PREVIEW_COLUMNS: Array<NavigationPreviewColumn<NavigationPreviewRow>> = [
+    {name: 'id', type: ['DataType', 'Int32']},
+    {name: 'created_at', type: ['DataType', 'Utf8']},
+    {name: 'title', type: ['DataType', 'Utf8']},
+    {name: 'status', type: ['DataType', 'Utf8']},
+];
 
 export const PREVIEW_ROWS: NavigationPreviewRow[] = [
-    {id: '1', created_at: '2024-01-01T10:00:00Z', title: 'First row', status: 'active'},
-    {id: '2', created_at: '2024-01-02T11:30:00Z', title: 'Second row', status: 'active'},
-    {id: '3', created_at: '2024-01-03T09:15:00Z', title: 'Third row', status: 'archived'},
+    {id: 1, created_at: '2024-01-01T10:00:00Z', title: 'First row', status: 'active'},
+    {id: 2, created_at: '2024-01-02T11:30:00Z', title: 'Second row', status: 'active'},
+    {id: 3, created_at: '2024-01-03T09:15:00Z', title: 'Third row', status: 'archived'},
 ];

package/src/modules/QueryStatistics/QueryStatistics.scss

@@ -0,0 +1,3 @@
+.qp-query-statistics {
+    min-width: 0;
+}