@gravity-ui/querieskit 1.0.3 → 1.1.0

package/src/modules/NavigationHeader/NavigationHeader.stories.tsx

@@ -0,0 +1,118 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {action} from 'storybook/actions';
+import {Box, Icon} from '@gravity-ui/uikit';
+import FileArrowRightOutIcon from '@gravity-ui/icons/svgs/file-arrow-right-out.svg';
+import ArrowUpRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-up-right-from-square.svg';
+import {NavigationHeader} from './NavigationHeader';
+import {NavigationHeaderAction, NavigationLocation} from '../../types/navigation';
+import {mockLoadPathSuggestions} from '../../components/PathEditor/PathEditor.stories.helpers';
+
+const meta: Meta<typeof NavigationHeader> = {
+    title: 'Modules/NavigationHeader',
+    component: NavigationHeader,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationHeader>;
+
+const defaultLocation: NavigationLocation = {
+    cluster: 'test',
+    path: '/home/my-projects/favorites',
+};
+
+const longLocation: NavigationLocation = {
+    cluster: 'prod',
+    path: '/home/my-projects/favorites/very/long/nested/directory/structure',
+};
+
+const logAction = action('actionClick');
+
+const defaultActions: NavigationHeaderAction[] = [
+    {
+        id: 'paste',
+        title: 'Paste path',
+        content: <Icon data={FileArrowRightOutIcon} size={16} />,
+        onClick: (location) => logAction('Paste', location),
+    },
+    {
+        id: 'open',
+        title: 'Open in new tab',
+        content: <Icon data={ArrowUpRightFromSquareIcon} size={16} />,
+        onClick: (location) => logAction('Open', location),
+    },
+];
+
+const InteractiveStory = ({
+    initialLocation = defaultLocation,
+    actions = defaultActions,
+}: {
+    initialLocation?: NavigationLocation;
+    actions?: NavigationHeaderAction[];
+}) => {
+    const [location, setLocation] = useState(initialLocation);
+
+    return (
+        <Box width={300}>
+            <NavigationHeader
+                location={location}
+                actions={actions}
+                onUpdate={setLocation}
+                onLoadSuggestions={mockLoadPathSuggestions}
+            />
+        </Box>
+    );
+};
+
+export const Default: Story = {render: () => <InteractiveStory />};
+
+export const WithoutActions: Story = {
+    args: {
+        location: defaultLocation,
+        onUpdate: action('onUpdate'),
+        onLoadSuggestions: mockLoadPathSuggestions,
+    },
+    decorators: [
+        (StoryComponent) => (
+            <Box width={300}>
+                <StoryComponent />
+            </Box>
+        ),
+    ],
+};
+
+export const EmptyLocation: Story = {
+    args: {
+        location: {cluster: undefined, path: undefined},
+        actions: defaultActions,
+        onUpdate: action('onUpdate'),
+    },
+};
+
+export const LongPath: Story = {
+    render: () => <InteractiveStory initialLocation={longLocation} />,
+};
+
+export const DisabledAction: Story = {
+    render: () => (
+        <InteractiveStory
+            actions={defaultActions.map((headerAction) =>
+                headerAction.id === 'paste' ? {...headerAction, disabled: true} : headerAction,
+            )}
+        />
+    ),
+};
+
+export const HiddenAction: Story = {
+    render: () => (
+        <InteractiveStory
+            actions={defaultActions.map((headerAction) =>
+                headerAction.id === 'open' ? {...headerAction, hidden: true} : headerAction,
+            )}
+        />
+    ),
+};

package/src/modules/NavigationHeader/NavigationHeader.tsx

@@ -0,0 +1,33 @@
+import React, {FC} from 'react';
+import {Flex} from '@gravity-ui/uikit';
+import {Breadcrumbs} from '../../components/Breadcrumbs';
+import {NavigationActionButtons} from '../../components';
+import {NavigationHeaderAction, NavigationLocation} from '../../types/navigation';
+import type {LoadPathSuggestions} from '../../types/pathEditor';
+
+export type NavigationHeaderProps = {
+    location: NavigationLocation;
+    actions?: NavigationHeaderAction[];
+    onUpdate: (location: NavigationLocation) => void;
+    onLoadSuggestions?: LoadPathSuggestions;
+    className?: string;
+};
+
+export const NavigationHeader: FC<NavigationHeaderProps> = ({
+    location,
+    actions,
+    onUpdate,
+    onLoadSuggestions,
+    className,
+}) => {
+    return (
+        <Flex gap={2} justifyContent="space-between" alignItems="center" className={className}>
+            <Breadcrumbs
+                location={location}
+                onUpdate={onUpdate}
+                onLoadSuggestions={onLoadSuggestions}
+            />
+            <NavigationActionButtons actions={actions} arg={location} />
+        </Flex>
+    );
+};

package/src/modules/NavigationHeader/index.ts

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

package/src/modules/NavigationItemsList/NavigationItemsList.scss

@@ -0,0 +1,65 @@
+.qp-navigation-item-row {
+  width: 100%;
+  padding: 0 var(--g-spacing-2);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &__title {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  &_disabled {
+    color: var(--g-color-text-secondary);
+    cursor: default;
+  }
+}
+
+.qp-navigation-items-list-header {
+  padding: 0 var(--g-spacing-2);
+
+  &__button {
+    padding-left: 0;
+  }
+}
+
+.qp-navigation-items-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__header {
+    height: 28px;
+  }
+
+  &__list {
+    flex-grow: 1;
+    min-height: 0;
+
+    .g-list__item_selected:hover {
+      background-color: var(--g-color-base-selection-hover);
+    }
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 0;
+  }
+
+  &__parent-row {
+    flex-shrink: 0;
+    height: 32px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--g-color-base-simple-hover);
+    }
+  }
+
+  &__empty-content {
+    flex-grow: 1;
+    min-height: 0;
+  }
+}

package/src/modules/NavigationItemsList/NavigationItemsList.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import {NavigationItem, NavigationSortOrder, RenderNavigationItem} from '../../types/navigation';
+import {LazyList, NavigationItemRow} from '../../components';
+import {NavigationItemsListHeader} from './internal/NavigationItemsListHeader';
+import {NavigationItemsListEmptyState} from './internal/NavigationItemsListEmptyState';
+import {useParentRow} from './internal/useParentRow';
+import {NAVIGATION_ROW_HEIGHT} from '../../constants/row';
+import './NavigationItemsList.scss';
+
+const block = cn('qp-navigation-items-list');
+
+export type NavigationItemsListProps<T extends NavigationItem = NavigationItem> = {
+    items: T[];
+    path?: string;
+    search?: string;
+    sort?: NavigationSortOrder;
+    onSortUpdate?: (sort: NavigationSortOrder) => void;
+    titleLabel: string;
+    loading?: boolean;
+    error?: React.ReactNode;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    emptyContent?: React.ReactNode;
+    renderRowItem?: RenderNavigationItem<T>;
+    onItemClick?: (item: T) => void;
+    className?: string;
+};
+
+export const NavigationItemsList = <T extends NavigationItem = NavigationItem>({
+    items,
+    path,
+    search,
+    sort,
+    onSortUpdate,
+    titleLabel,
+    loading,
+    error,
+    hasMore,
+    onLoadMore,
+    emptyContent,
+    renderRowItem,
+    onItemClick,
+    className,
+}: NavigationItemsListProps<T>) => {
+    const parentRow = useParentRow(path, search);
+
+    const rows = (parentRow ? [parentRow as T, ...items] : items) as T[];
+
+    return (
+        <div className={block(null, className)}>
+            <NavigationItemsListHeader
+                titleLabel={titleLabel}
+                sort={sort}
+                onSortUpdate={onSortUpdate}
+                className={block('header')}
+            />
+            <LazyList<T>
+                className={block('list')}
+                items={rows}
+                isEmpty={!items.length}
+                itemHeight={() => NAVIGATION_ROW_HEIGHT}
+                renderItem={(item, isActive, index) => {
+                    const isParentRow = Boolean(parentRow) && item === (parentRow as T);
+
+                    return (
+                        renderRowItem?.({item, index, isActive, isParentRow}) ?? (
+                            <NavigationItemRow item={item} />
+                        )
+                    );
+                }}
+                hasMore={hasMore}
+                onLoadMore={onLoadMore}
+                loading={loading}
+                error={error}
+                emptyContent={
+                    <NavigationItemsListEmptyState
+                        parentRow={parentRow as T | undefined}
+                        emptyContent={emptyContent}
+                        renderRowItem={renderRowItem}
+                        onItemClick={onItemClick}
+                    />
+                }
+                onItemClick={(item) => {
+                    if (!item.disabled) {
+                        onItemClick?.(item);
+                    }
+                }}
+            />
+        </div>
+    );
+};

package/src/modules/NavigationItemsList/index.ts

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

package/src/modules/NavigationItemsList/internal/NavigationItemsListEmptyState.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {Flex} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {NavigationItem, RenderNavigationItem} from '../../../types/navigation';
+import {NavigationItemRow} from '../../../components';
+
+const block = cn('qp-navigation-items-list');
+
+export type NavigationItemsListEmptyStateProps<T extends NavigationItem = NavigationItem> = {
+    parentRow?: T;
+    emptyContent?: React.ReactNode;
+    renderRowItem?: RenderNavigationItem<T>;
+    onItemClick?: (item: T) => void;
+};
+
+export const NavigationItemsListEmptyState = <T extends NavigationItem = NavigationItem>({
+    parentRow,
+    emptyContent,
+    renderRowItem,
+    onItemClick,
+}: NavigationItemsListEmptyStateProps<T>) => {
+    return (
+        <div className={block('empty')}>
+            {parentRow && (
+                <Flex
+                    className={block('parent-row')}
+                    alignItems="center"
+                    onClick={() => {
+                        if (!parentRow.disabled) {
+                            onItemClick?.(parentRow);
+                        }
+                    }}
+                >
+                    {renderRowItem?.({
+                        item: parentRow,
+                        index: 0,
+                        isActive: false,
+                        isParentRow: true,
+                    }) ?? <NavigationItemRow item={parentRow} />}
+                </Flex>
+            )}
+            <div className={block('empty-content')}>{emptyContent}</div>
+        </div>
+    );
+};

package/src/modules/NavigationItemsList/internal/NavigationItemsListHeader.scss

@@ -0,0 +1,6 @@
+.qp-navigation-items-list-header {
+  &__sort {
+    cursor: pointer;
+    user-select: none;
+  }
+}

package/src/modules/NavigationItemsList/internal/NavigationItemsListHeader.tsx

@@ -0,0 +1,58 @@
+import React, {FC} from 'react';
+import {Flex, Icon, Text} from '@gravity-ui/uikit';
+import ArrowUpIcon from '@gravity-ui/icons/svgs/arrow-up.svg';
+import ArrowDownIcon from '@gravity-ui/icons/svgs/arrow-down.svg';
+import ArrowUpArrowDownIcon from '@gravity-ui/icons/svgs/arrow-up-arrow-down.svg';
+import cn from 'bem-cn-lite';
+import {NavigationSortOrder} from '../../../types/navigation';
+import './NavigationItemsListHeader.scss';
+
+const block = cn('qp-navigation-items-list-header');
+
+const SORT_ICONS: Record<NavigationSortOrder, typeof ArrowUpIcon> = {
+    asc: ArrowUpIcon,
+    desc: ArrowDownIcon,
+};
+
+export type NavigationItemsListHeaderProps = {
+    titleLabel: string;
+    sort?: NavigationSortOrder;
+    onSortUpdate?: (sort: NavigationSortOrder) => void;
+    className?: string;
+};
+
+export const NavigationItemsListHeader: FC<NavigationItemsListHeaderProps> = ({
+    titleLabel,
+    sort,
+    onSortUpdate,
+    className,
+}) => {
+    if (!onSortUpdate) {
+        return (
+            <Flex alignItems="center" className={block(null, className)}>
+                <Text>{titleLabel}</Text>
+            </Flex>
+        );
+    }
+
+    const handleClick = () => {
+        onSortUpdate(sort === 'asc' ? 'desc' : 'asc');
+    };
+
+    const icon = sort ? SORT_ICONS[sort] : ArrowUpArrowDownIcon;
+
+    return (
+        <Flex alignItems="center" className={block(null, className)}>
+            <Flex
+                inline
+                gap={2}
+                alignItems="center"
+                className={block('sort')}
+                onClick={handleClick}
+            >
+                <Text>{titleLabel}</Text>
+                <Icon data={icon} size={16} />
+            </Flex>
+        </Flex>
+    );
+};

package/src/modules/NavigationItemsList/internal/useParentRow.ts

@@ -0,0 +1,23 @@
+import {useMemo} from 'react';
+import {NavigationItem} from '../../../types/navigation';
+import {getParentPath} from '../../../helpers/getParentPath';
+
+export function useParentRow(
+    path: string | undefined,
+    search: string | undefined,
+): NavigationItem | undefined {
+    const parentPath = path && !search ? getParentPath(path) : undefined;
+
+    return useMemo<NavigationItem | undefined>(() => {
+        if (!parentPath) {
+            return undefined;
+        }
+
+        return {
+            path: parentPath,
+            title: '\u2026',
+            kind: 'folder',
+            hasChildren: true,
+        };
+    }, [parentPath]);
+}

package/src/modules/NavigationMeta/NavigationMeta.scss

@@ -0,0 +1,25 @@
+.qp-navigation-meta {
+  &__error {
+    display: block;
+  }
+
+  &__group-title {
+    display: block;
+    margin-bottom: var(--g-spacing-2);
+  }
+
+  &__group-body {
+    width: 100%;
+    display: grid;
+    grid-gap: 12px;
+    grid-template-columns: 128px 1fr;
+  }
+
+  &__skeleton-row {
+    height: 24px;
+  }
+
+  &__empty {
+    height: 100%;
+  }
+}

package/src/modules/NavigationMeta/NavigationMeta.tsx

@@ -0,0 +1,81 @@
+import React, {useMemo} from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {EmptyContent, SkeletonRows} from '../../components';
+import type {NavigationMetaConfig, NavigationMetaItem} from '../../types/navigation';
+import {buildMetaGroups} from './helpers/buildMetaGroups';
+import i18n from './i18n';
+import './NavigationMeta.scss';
+
+const block = cn('qp-navigation-meta');
+
+export type NavigationMetaViewConfig<TItem extends NavigationMetaItem = NavigationMetaItem> = {
+    render?: (data: NavigationMetaConfig<TItem>) => React.ReactNode;
+    extraContent?: React.ReactNode;
+};
+
+export type NavigationMetaProps<TItem extends NavigationMetaItem = NavigationMetaItem> = {
+    data: NavigationMetaConfig<TItem>;
+    view?: NavigationMetaViewConfig<TItem>;
+    className?: string;
+};
+
+export function NavigationMeta<TItem extends NavigationMetaItem = NavigationMetaItem>({
+    data,
+    view,
+    className,
+}: NavigationMetaProps<TItem>) {
+    const {groups, loading, loaded, errorContent} = data;
+    const {render, extraContent} = view ?? {};
+
+    const preparedGroups = useMemo(() => buildMetaGroups(groups, i18n), [groups]);
+
+    if (render) {
+        return <div className={block(null, className)}>{render(data)}</div>;
+    }
+
+    if (errorContent) {
+        return (
+            <Text color="danger" className={block('error')}>
+                {errorContent}
+            </Text>
+        );
+    }
+
+    if (loading && !loaded) {
+        return (
+            <SkeletonRows className={block(null, className)} rowClassName={block('skeleton-row')} />
+        );
+    }
+
+    const isEmpty = preparedGroups.every((group) => group.items.length === 0);
+
+    if (isEmpty && !extraContent) {
+        return <EmptyContent variant="no-data" className={block('empty')} />;
+    }
+
+    return (
+        <Flex direction="column" gap={4} className={block(null, className)}>
+            {preparedGroups.map((group, groupIndex) =>
+                group.items.length === 0 ? null : (
+                    <div key={groupIndex} className={block('group')}>
+                        {group.title ? (
+                            <Text variant="subheader-1" className={block('group-title')}>
+                                {group.title}
+                            </Text>
+                        ) : null}
+                        <div className={block('group-body')}>
+                            {group.items.map(({name, value}) => (
+                                <>
+                                    <Text color="secondary">{name}</Text>
+                                    <div>{value}</div>
+                                </>
+                            ))}
+                        </div>
+                    </div>
+                ),
+            )}
+            {extraContent}
+        </Flex>
+    );
+}

package/src/modules/NavigationMeta/helpers/buildMetaGroups.tsx

@@ -0,0 +1,27 @@
+import type {ReactNode} from 'react';
+import {isEmptyValue} from '../../../helpers/isEmptyValue';
+import type {NavigationMetaGroup, NavigationMetaItem} from '../../../types/navigation';
+import type metaI18n from '../i18n';
+
+export type PreparedMetaItem = {
+    name: string;
+    value: ReactNode;
+};
+
+export type PreparedMetaGroup = {
+    title?: string;
+    items: PreparedMetaItem[];
+};
+
+export function buildMetaGroups<TItem extends NavigationMetaItem>(
+    groups: Array<NavigationMetaGroup<TItem>>,
+    i18n: typeof metaI18n,
+): PreparedMetaGroup[] {
+    return groups.map((group) => ({
+        title: group.title,
+        items: group.items.map((item) => ({
+            name: item.name,
+            value: isEmptyValue(item.value) ? i18n('value_empty') : item.value,
+        })),
+    }));
+}

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

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

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

@@ -0,0 +1,4 @@
+{
+    "value_empty": "—",
+    "context_empty": "No metadata"
+}

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

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

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

@@ -0,0 +1,4 @@
+{
+    "value_empty": "—",
+    "context_empty": "Нет метаданных"
+}

package/src/modules/NavigationMeta/index.ts

@@ -0,0 +1,3 @@
+export {NavigationMeta} from './NavigationMeta';
+export type {NavigationMetaProps, NavigationMetaViewConfig} from './NavigationMeta';
+export {buildMetaGroups} from './helpers/buildMetaGroups';