@gravity-ui/querieskit 1.1.0 → 1.3.0

package/src/helpers/createUuid.ts

@@ -0,0 +1,3 @@
+export const createUuid = () => {
+    return crypto.randomUUID().replace(/-/g, '');
+};

package/src/helpers/getListKey.ts

@@ -1,8 +1,8 @@
-import {BaseHistoryRow, QueryHistoryItem, QueryHistoryRowVariant} from '../types/history';
+import {QueryListItem, QueryListRow, QueryListRowVariant} from '../types/queryList';
 
-export const getListKey = <T extends BaseHistoryRow>(
-    items: QueryHistoryItem<T>[],
-    variant: QueryHistoryRowVariant,
+export const getListKey = <T extends QueryListRow>(
+    items: QueryListItem<T>[],
+    variant: QueryListRowVariant,
 ): string => {
     const itemsKey = items
         .map((item) => ('header' in item ? `h:${item.header}` : `r:${item.id}`))

package/src/helpers/isFieldVisible.ts

@@ -1,4 +1,5 @@
-import {QueryHistoryFieldKey, QueryHistoryRow} from '../types/history';
+import {QueryListFieldKey} from '../types/queryList';
+import {QueryHistoryRow} from '../types/history';
 
 /**
  * A field is visible either when no `visibleFields` config is provided
@@ -6,14 +7,14 @@ import {QueryHistoryFieldKey, QueryHistoryRow} from '../types/history';
  * the field key is explicitly included in `visibleFields.value`.
  *
  * `visibleFields` is accepted loosely as `{value: string[]}` (rather than the
- * generic `QueryHistoryVisibleFieldsConfig<T>`) so this helper works for any
+ * generic `QueryListVisibleFieldsConfig<T>`) so this helper works for any
  * `T extends QueryHistoryRow` without fighting TS variance on generic key
- * unions; `field` still uses `QueryHistoryFieldKey<QueryHistoryRow>` to keep
+ * unions; `field` still uses `QueryListFieldKey<QueryHistoryRow>` to keep
  * typo-protection for the built-in fields checked by the row renderers.
  */
 export const isFieldVisible = (
     visibleFields: {value: string[]} | undefined,
-    field: QueryHistoryFieldKey<QueryHistoryRow>,
+    field: QueryListFieldKey<QueryHistoryRow>,
 ): boolean => {
     return visibleFields === undefined || visibleFields.value.includes(field);
 };

package/src/helpers/isObjectEqual.ts

@@ -0,0 +1,15 @@
+export const isObjectEqual = (obj1: Record<string, unknown>, obj2: Record<string, unknown>) => {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    const compareKeys = keys1.length > keys2.length ? keys1 : keys2;
+
+    for (const key of compareKeys) {
+        const v1 = obj1[key];
+        const v2 = obj2[key];
+
+        if (v1 !== v2) return false;
+    }
+
+    return true;
+};

package/src/helpers/time.ts

@@ -20,6 +20,10 @@ export const formatTimeCanonical = (ts: Date) => {
     return dateTimeParse(ts)?.format('DD.MM.YYYY, HH:mm');
 };
 
+export const formatDateCanonical = (ts: Date) => {
+    return dateTimeParse(ts)?.format('DD.MM.YYYY');
+};
+
 export const getTimestampFromDate = (date: Date) => {
     return dateTimeParse(date)?.valueOf();
 };

package/src/helpers/useDebouncedValue.ts

@@ -0,0 +1,14 @@
+import {useEffect, useState} from 'react';
+
+/** Delays a changing value without duplicating timer lifecycle handling in consumers. */
+export function useDebouncedValue<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(() => {
+        const timeoutId = setTimeout(() => setDebouncedValue(value), delay);
+
+        return () => clearTimeout(timeoutId);
+    }, [delay, value]);
+
+    return debouncedValue;
+}

package/src/index.ts

@@ -1,7 +1,12 @@
 export * from './components';
 export * from './modules';
 export * from './widgets';
+export * from './types/queryList';
 export * from './types/history';
+export type {SavedQuery} from './types/savedQueries';
 export * from './types/tutorial';
 export * from './types/navigation';
 export * from './types/pathEditor';
+export * from './types/errorTree';
+export * from './types/queryStatistics';
+export * from './types/queryResults';

package/src/modules/Attachments/Attachments.scss

@@ -0,0 +1,10 @@
+.qp-attachments {
+    &__panel {
+        flex: 1;
+    }
+
+    &__tab .g-tab__title {
+        display: flex;
+        gap: var(--g-spacing-2)
+    }
+}

package/src/modules/Attachments/Attachments.stories.tsx

@@ -0,0 +1,112 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {fn} from 'storybook/test';
+import {Attachments} from './Attachments';
+
+type AttachmentsProps = React.ComponentProps<typeof Attachments>;
+type Attachment = NonNullable<AttachmentsProps['attachments']>[number];
+
+const attachments: Attachment[] = [
+    {id: 'readme', name: 'README.md'},
+    {id: 'query', name: 'daily-report.sql'},
+    {
+        id: 'documentation',
+        name: 'Query documentation',
+        link: 'https://example.com/docs/query',
+        token: 'documentation-token',
+    },
+];
+
+const deletedAttachments: Attachment[] = [
+    {id: 'archive', name: 'archive.csv'},
+    {
+        id: 'old-dashboard',
+        name: 'Old dashboard',
+        link: 'https://example.com/dashboards/old',
+        token: 'dashboard-token',
+    },
+];
+
+const tokens: NonNullable<AttachmentsProps['tokens']> = [
+    {value: 'documentation-token', title: 'Documentation token'},
+    {value: 'dashboard-token', title: 'Dashboard token'},
+];
+
+const meta = {
+    title: 'Modules/Attachments',
+    component: Attachments,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{height: 500, width: 322}}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        tokens,
+        onChange: fn(),
+    },
+} satisfies Meta<typeof Attachments>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Empty state with content configured through `placeholderProps`. */
+export const Default: Story = {
+    args: {
+        placeholderProps: {
+            title: 'No attachments',
+            description: 'Add files or links that should be available to the query.',
+            linkForDoc: '#attachments-help',
+            linkText: 'About attachments',
+        },
+    },
+};
+
+/** Initial files and links supplied through the uncontrolled `attachments` API. */
+export const WithAttachments: Story = {
+    args: {
+        attachments,
+    },
+};
+
+/** Current and deleted collections. Open the Deleted tab to restore an attachment. */
+export const WithDeletedAttachments: Story = {
+    args: {
+        attachments,
+        deletedAttachments,
+    },
+};
+
+const ControlledAttachments = (props: AttachmentsProps) => {
+    const [currentAttachments, setCurrentAttachments] = useState(props.attachments ?? []);
+    const [currentDeletedAttachments, setCurrentDeletedAttachments] = useState(
+        props.deletedAttachments ?? [],
+    );
+
+    return (
+        <Attachments
+            {...props}
+            attachments={currentAttachments}
+            deletedAttachments={currentDeletedAttachments}
+            onChange={(payload) => {
+                setCurrentAttachments(payload.attachments);
+                setCurrentDeletedAttachments(payload.deletedAttachments);
+                props.onChange?.(payload);
+            }}
+        />
+    );
+};
+
+/** Controlled usage: every edit, delete, restore, or addition is applied from `onChange`. */
+export const Controlled: Story = {
+    args: {
+        attachments,
+        deletedAttachments,
+    },
+    render: (args) => <ControlledAttachments {...args} />,
+};

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/{widgets/QueriesHistory/ComparisonActions.scss → modules/HistoryComparisonActions/HistoryComparisonActions.scss}

@@ -1,4 +1,4 @@
-.qp-query-history-comparison-action {
+.qp-history-comparison-actions {
   padding: 12px 20px;
   background: var(--g-color-base-background);
-}
+}

package/src/{widgets/QueriesHistory/ComparisonActions.tsx → modules/HistoryComparisonActions/HistoryComparisonActions.tsx}

@@ -1,22 +1,22 @@
 import React from 'react';
 import {Button, Flex, Icon} from '@gravity-ui/uikit';
-import {QueryHistoryComparisonConfig, QueryHistoryRow} from '../../types/history';
-import ArrowRotateRightIcon from '@gravity-ui/icons/svgs/arrow-rotate-right.svg';
 import ArrowRightArrowLeftIcon from '@gravity-ui/icons/svgs/arrow-right-arrow-left.svg';
-import './ComparisonActions.scss';
+import ArrowRotateRightIcon from '@gravity-ui/icons/svgs/arrow-rotate-right.svg';
+import {QueryListComparisonConfig, QueryListRow} from '../../types/queryList';
 import cn from 'bem-cn-lite';
+import './HistoryComparisonActions.scss';
 
-type Props<T extends QueryHistoryRow> = {
-    comparison: QueryHistoryComparisonConfig<T>;
+export type HistoryComparisonActionsProps<T extends QueryListRow = QueryListRow> = {
+    comparison: QueryListComparisonConfig<T>;
     className?: string;
 };
 
-const block = cn('qp-query-history-comparison-action');
+const block = cn('qp-history-comparison-actions');
 
-export const ComparisonActions = <T extends QueryHistoryRow>({
+export const HistoryComparisonActions = <T extends QueryListRow>({
     comparison: {enabled, comparedRowIds, onCompare, onCancel},
     className,
-}: Props<T>) => {
+}: HistoryComparisonActionsProps<T>) => {
     if (!enabled) return null;
 
     return (

package/src/modules/HistoryComparisonActions/index.ts

@@ -0,0 +1,2 @@
+export {HistoryComparisonActions} from './HistoryComparisonActions';
+export type {HistoryComparisonActionsProps} from './HistoryComparisonActions';

package/src/modules/HistoryHeader/HistoryHeader.tsx

@@ -1,13 +1,13 @@
 import React, {FC, useEffect, useState} from 'react';
 import {FullSearchToggleButton} from './internal/FullSearchToggleButton';
 import {HistoryFilter, SearchWithButtons} from '../../components';
-import {QueryHistoryFilterConfig} from '../../types/history';
+import {QueryListFilterConfig} from '../../types/queryList';
 
 type Props = {
     search?: string;
     fullSearch?: boolean;
     hasClear?: boolean;
-    filter?: QueryHistoryFilterConfig;
+    filter?: QueryListFilterConfig;
     onUpdate: (data: {value: string; fullSearch: boolean}) => void;
     className?: string;
 };

package/src/modules/HistoryRow/HistoryRow.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 import {HistoryRow} from './HistoryRow';
-import {QueryHistoryRow, QueryHistoryRowAction} from '../../types/history';
+import {QueryListRowAction} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
 
 const now = Date.now();
 const min = 60 * 1000;
@@ -19,7 +20,7 @@ const makeRow = (overrides: Partial<QueryHistoryRow>): QueryHistoryRow => ({
     ...overrides,
 });
 
-const defaultActions: Array<QueryHistoryRowAction<QueryHistoryRow>> = [
+const defaultActions: Array<QueryListRowAction<QueryHistoryRow>> = [
     {text: 'Run again', onClick: (row) => alert(`Run: ${row.title}`)},
     {text: 'Copy', onClick: (row) => alert(`Copy: ${row.title}`)},
     {text: 'Delete', onClick: (row) => alert(`Delete: ${row.title}`)},