@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/widgets/QueriesNavigation/QueriesNavigation.stories.tsx

@@ -1,409 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {QueriesNavigation} from './QueriesNavigation';
-import {createNavigationDetailResolver} from './helpers/createNavigationDetailResolver';
-import {createTableDetailConfig} from './helpers/createTableDetailConfig';
-import {action} from 'storybook/actions';
-import {
-    NavigationCluster,
-    NavigationHeaderAction,
-    NavigationItem,
-    NavigationLocation,
-    NavigationSortOrder,
-    NavigationViewSection,
-} from '../../types/navigation';
-import {mockLoadPathSuggestions} from '../../components/PathEditor/PathEditor.stories.helpers';
-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 CodeIcon from '@gravity-ui/icons/svgs/code.svg';
-import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
-import {Flex, Icon, Label, Text} from '@gravity-ui/uikit';
-import {ClusterRow, NavigationItemRow} from '../../components';
-import {SCHEMA_COLUMNS} from '../../modules/NavigationSchema/story/mockData';
-import {PREVIEW_COLUMNS, PREVIEW_ROWS} from '../../modules/NavigationPreview/story/mockData';
-import {META_GROUPS} from '../../modules/NavigationMeta/story/mockData';
-import {VIEW_COLUMNS, makeViewRows} from '../../modules/NavigationView/story/mockData';
-
-const meta: Meta<typeof QueriesNavigation> = {
-    title: 'Widgets/QueriesNavigation',
-    component: QueriesNavigation,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-const onBreadcrumbsUpdate = action('onUpdate');
-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 CLUSTERS: NavigationCluster[] = [
-    {
-        id: 'northstar',
-        title: 'Northstar',
-        color: 'white',
-        backgroundColor: 'rgba(218, 68, 83, 1)',
-        description: 'Production',
-    },
-    {
-        id: 'cedar',
-        title: 'Cedar',
-        color: 'white',
-        backgroundColor: 'rgba(127, 130, 133, 1)',
-        description: 'Production',
-    },
-    {
-        id: 'sequoia',
-        title: 'Sequoia',
-        color: 'white',
-        backgroundColor: 'rgba(215, 112, 173, 1)',
-        description: 'Production',
-    },
-    {
-        id: 'pioneer-test',
-        title: 'Pioneer-Test',
-        color: 'white',
-        backgroundColor: 'rgba(150, 122, 220, 1)',
-        description: 'Testing',
-    },
-    {
-        id: 'orbit',
-        title: 'Orbit',
-        color: 'white',
-        backgroundColor: 'rgba(233, 87, 63, 1)',
-        description: 'Production',
-    },
-    {
-        id: 'lighthouse',
-        title: 'Lighthouse',
-        color: 'white',
-        backgroundColor: 'rgba(67, 68, 69, 1)',
-        description: 'Production',
-    },
-    {
-        id: 'northstar-gnd',
-        title: 'Northstar-GND',
-        color: 'white',
-        backgroundColor: 'rgba(140, 193, 82, 1)',
-        description: 'tesdting',
-    },
-    {
-        id: 'harbor',
-        title: 'Harbor',
-        color: 'white',
-        backgroundColor: 'rgba(55, 188, 155, 1)',
-        description: 'Production',
-    },
-    {
-        id: 'cedar-gnd',
-        title: 'Cedar-GND',
-        color: 'white',
-        backgroundColor: 'rgba(140, 193, 82, 1)',
-        description: 'Prestable',
-    },
-];
-
-const ITEM_NAMES: Array<Pick<NavigationItem, 'title' | 'kind' | 'hasChildren' | 'disabled'>> = [
-    {title: 'abcdapter', kind: 'folder', hasChildren: true},
-    {title: 'access_control_object', kind: 'file'},
-    {title: 'account_tree', kind: 'folder', hasChildren: true, disabled: true},
-    {title: 'cell_balancers', kind: 'folder', hasChildren: true},
-    {title: 'clusters', kind: 'folder', hasChildren: true},
-    {title: 'doctors_table', kind: 'table'},
-];
-
-const getPathDepth = (path: string | undefined): number =>
-    (path ?? '').split('/').filter(Boolean).length;
-
-const getItemsForPath = (
-    path: string | undefined,
-    sort: NavigationSortOrder = 'asc',
-): NavigationItem[] => {
-    if (getPathDepth(path) > 1) {
-        return [];
-    }
-
-    return [...ITEM_NAMES]
-        .sort(({title: leftTitle}, {title: rightTitle}) =>
-            sort === 'asc'
-                ? leftTitle.localeCompare(rightTitle)
-                : rightTitle.localeCompare(leftTitle),
-        )
-        .map(({title, kind, hasChildren, disabled}) => ({
-            path: `${path ?? ''}/${title}`,
-            title,
-            kind,
-            hasChildren,
-            disabled,
-        }));
-};
-
-export default meta;
-type Story = StoryObj<typeof QueriesNavigation>;
-
-const TABLE_VIEW_SECTIONS_WITH_ACTIONS: NavigationViewSection[] = [
-    {
-        id: 'general',
-        title: 'General',
-        columns: VIEW_COLUMNS,
-        rows: makeViewRows(2),
-        loaded: true,
-        defaultExpanded: true,
-        actions: [
-            {
-                id: 'code',
-                title: 'Show code',
-                content: <Icon data={CodeIcon} size={14} />,
-                onClick: (section) => logAction('ViewShowCode', section.id),
-            },
-            {
-                id: 'settings',
-                title: 'Settings',
-                content: <Icon data={GearIcon} size={14} />,
-                onClick: (section) => logAction('ViewSettings', section.id),
-            },
-        ],
-    },
-    {
-        id: 'attributes',
-        title: 'Attributes',
-        columns: VIEW_COLUMNS,
-        rows: makeViewRows(2),
-        loaded: true,
-    },
-];
-
-const useLocationState = (initial: NavigationLocation) => {
-    const [location, setLocation] = useState<NavigationLocation>(initial);
-    const onUpdate = (next: NavigationLocation) => {
-        onBreadcrumbsUpdate(next);
-        setLocation(next);
-    };
-    return {location, onUpdate};
-};
-
-const useNavigationStoryState = (initial: NavigationLocation) => {
-    const {location, onUpdate} = useLocationState(initial);
-    const [sort, setSort] = useState<NavigationSortOrder>('asc');
-    const items = getItemsForPath(location.path, sort);
-
-    return {location, onUpdate, sort, setSort, items};
-};
-
-const ClustersToItemsStory = () => {
-    const {location, onUpdate, sort, setSort, items} = useNavigationStoryState({
-        cluster: undefined,
-        path: undefined,
-    });
-    const [openedItem, setOpenedItem] = useState<NavigationItem | undefined>(undefined);
-
-    const resolveDetail = createNavigationDetailResolver({
-        table: createTableDetailConfig({
-            resolveSchema: () => ({columns: SCHEMA_COLUMNS, loaded: true}),
-            resolvePreview: () => ({
-                columns: PREVIEW_COLUMNS,
-                rows: PREVIEW_ROWS,
-                loaded: true,
-            }),
-            resolveMeta: () => ({groups: META_GROUPS, loaded: true}),
-            resolveView: () => ({sections: TABLE_VIEW_SECTIONS_WITH_ACTIONS, loaded: true}),
-        }),
-    });
-
-    return (
-        <div style={{width: 300, height: 500}}>
-            <QueriesNavigation
-                location={location}
-                header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
-                onUpdate={onUpdate}
-                clusters={CLUSTERS}
-                items={items}
-                sort={{value: sort, onUpdate: setSort}}
-                detail={{
-                    openedItem,
-                    onItemOpen: (item) => {
-                        action('onItemOpen')(item);
-                        setOpenedItem(item);
-                    },
-                    onClose: () => setOpenedItem(undefined),
-                    resolve: resolveDetail,
-                }}
-                onClusterClick={action('onClusterClick')}
-                onItemClick={action('onItemClick')}
-            />
-        </div>
-    );
-};
-
-const LoadingStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: undefined, path: undefined});
-
-    return (
-        <div style={{width: 300, height: 500}}>
-            <QueriesNavigation
-                location={location}
-                header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
-                onUpdate={onUpdate}
-                clusters={[]}
-                listState={{loading: true}}
-            />
-        </div>
-    );
-};
-
-const EmptyStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home/empty'});
-
-    return (
-        <div style={{width: 300, height: 500}}>
-            <QueriesNavigation
-                location={location}
-                header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
-                onUpdate={onUpdate}
-                items={[]}
-            />
-        </div>
-    );
-};
-
-const EmptySearchStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home'});
-    const [search, setSearch] = useState('no-such-item');
-
-    return (
-        <div style={{width: 300, height: 500}}>
-            <QueriesNavigation
-                location={location}
-                header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
-                onUpdate={onUpdate}
-                items={[]}
-                search={{value: search, onUpdate: setSearch}}
-            />
-        </div>
-    );
-};
-
-const ErrorStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: undefined, path: undefined});
-
-    return (
-        <div style={{width: 300, height: 500}}>
-            <QueriesNavigation
-                location={location}
-                header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
-                onUpdate={onUpdate}
-                clusters={[]}
-                listState={{error: 'Custom load error message'}}
-            />
-        </div>
-    );
-};
-
-type CustomCluster = NavigationCluster & {env: string};
-type CustomItem = NavigationItem & {owner?: string};
-
-const CUSTOM_CLUSTERS: CustomCluster[] = CLUSTERS.map((cluster) => ({
-    ...cluster,
-    env: cluster.description ?? 'Unknown',
-}));
-
-const getCustomItemsForPath = (path: string | undefined, sort: NavigationSortOrder): CustomItem[] =>
-    getItemsForPath(path, sort).map((item, index) => ({
-        ...item,
-        owner: index % 2 === 0 ? 'robot' : 'user',
-    }));
-
-const CustomRowsStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: undefined, path: undefined});
-    const [sort, setSort] = useState<NavigationSortOrder>('asc');
-
-    return (
-        <div style={{width: 340, height: 500}}>
-            <QueriesNavigation<CustomItem, CustomCluster>
-                location={location}
-                header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
-                onUpdate={onUpdate}
-                clusters={CUSTOM_CLUSTERS}
-                items={getCustomItemsForPath(location.path, sort)}
-                sort={{value: sort, onUpdate: setSort}}
-                renderClusterItem={({cluster}) => (
-                    <Flex alignItems="center" gap={2} style={{width: '100%', padding: '0 8px'}}>
-                        <ClusterRow cluster={cluster} />
-                        <Label theme="info">{cluster.env}</Label>
-                    </Flex>
-                )}
-                renderNavigationItem={({item, isParentRow}) =>
-                    isParentRow ? (
-                        <NavigationItemRow item={item} />
-                    ) : (
-                        <Flex alignItems="center" gap={2} style={{width: '100%', padding: '0 8px'}}>
-                            <NavigationItemRow item={item} />
-                            {item.owner && (
-                                <Text color="secondary" variant="caption-2">
-                                    {item.owner}
-                                </Text>
-                            )}
-                        </Flex>
-                    )
-                }
-                onClusterClick={action('onClusterClick')}
-                onItemClick={action('onItemClick')}
-            />
-        </div>
-    );
-};
-
-const CustomDetailResolverStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home'});
-    const [openedItem, setOpenedItem] = useState<NavigationItem | undefined>(undefined);
-
-    const resolveDetail = createNavigationDetailResolver({
-        file: (item) => ({
-            tabs: [
-                {id: 'content', title: 'Content', content: `Content of ${item.title}`},
-                {id: 'meta', title: 'Meta', content: 'Meta placeholder'},
-            ],
-            hasSearch: false,
-        }),
-    });
-
-    return (
-        <div style={{width: 340, height: 600}}>
-            <QueriesNavigation
-                location={location}
-                header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
-                onUpdate={onUpdate}
-                items={getItemsForPath(location.path)}
-                detail={{
-                    openedItem,
-                    onItemOpen: setOpenedItem,
-                    onClose: () => setOpenedItem(undefined),
-                    resolve: resolveDetail,
-                }}
-                onItemClick={action('onItemClick')}
-            />
-        </div>
-    );
-};
-
-export const ClustersToItems: Story = {render: () => <ClustersToItemsStory />};
-export const Loading: Story = {render: () => <LoadingStory />};
-export const Empty: Story = {render: () => <EmptyStory />};
-export const EmptySearch: Story = {render: () => <EmptySearchStory />};
-export const Error: Story = {render: () => <ErrorStory />};
-export const CustomRows: Story = {render: () => <CustomRowsStory />};
-export const CustomDetailResolver: Story = {render: () => <CustomDetailResolverStory />};

package/src/widgets/QueriesNavigation/QueriesNavigation.tsx

@@ -1,195 +0,0 @@
-import React from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import {ClustersList, NavigationDetail, NavigationHeader, NavigationItemsList} from '../../modules';
-import {EmptyContent, SearchWithButtons} from '../../components';
-import {
-    NavigationCluster,
-    NavigationDetailConfig,
-    NavigationDetailPanelConfig,
-    NavigationHeaderConfig,
-    NavigationItem,
-    NavigationListStateConfig,
-    NavigationLocation,
-    NavigationSearchConfig,
-    NavigationSortConfig,
-    RenderNavigationCluster,
-    RenderNavigationItem,
-} from '../../types/navigation';
-import {createEmptyDetailConfig} from './helpers/createEmptyDetailConfig';
-import i18n from './i18n';
-import cn from 'bem-cn-lite';
-import './QueriesNavigation.scss';
-
-const block = cn('qp-queries-navigation');
-
-export type QueriesNavigationProps<
-    TItem extends NavigationItem = NavigationItem,
-    TCluster extends NavigationCluster = NavigationCluster,
-> = {
-    location: NavigationLocation;
-    onUpdate: (location: NavigationLocation) => void;
-    clusters?: TCluster[];
-    items?: TItem[];
-    header?: NavigationHeaderConfig;
-    search?: NavigationSearchConfig;
-    sort?: NavigationSortConfig;
-    listState?: NavigationListStateConfig;
-    detail?: NavigationDetailPanelConfig<TItem>;
-    renderClusterItem?: RenderNavigationCluster<TCluster>;
-    renderNavigationItem?: RenderNavigationItem<TItem>;
-    onClusterClick?: (cluster: TCluster) => void;
-    onItemClick?: (item: TItem) => void;
-    className?: string;
-};
-
-type NavigationBody<TItem extends NavigationItem> =
-    | {type: 'loading'}
-    | {type: 'details'; item: TItem; config: NavigationDetailConfig}
-    | {type: 'clusters'}
-    | {type: 'items'};
-
-export const QueriesNavigation = <
-    TItem extends NavigationItem = NavigationItem,
-    TCluster extends NavigationCluster = NavigationCluster,
->({
-    location,
-    onUpdate,
-    clusters = [],
-    items = [],
-    header,
-    search,
-    sort,
-    listState,
-    detail,
-    renderClusterItem,
-    renderNavigationItem,
-    onClusterClick,
-    onItemClick,
-    className,
-}: QueriesNavigationProps<TItem, TCluster>) => {
-    const {loading, error, hasMore, onLoadMore} = listState ?? {};
-    const {actions, onLoadSuggestions} = header ?? {};
-    const {value: searchValue, onUpdate: onSearchUpdate} = search ?? {};
-    const {value: sortValue, onUpdate: onSortUpdate} = sort ?? {};
-    const {
-        openedItem,
-        onItemOpen,
-        onClose: onDetailClose,
-        resolve: resolveDetail,
-        search: detailSearch,
-        onSearchUpdate: onDetailSearchUpdate,
-        activeTab: detailActiveTab,
-        onTabUpdate: onDetailTabUpdate,
-        actions: detailActions,
-    } = detail ?? {};
-
-    const resolvedDetailActions = detailActions ?? actions;
-
-    const resolvedErrorContent = error ? (
-        <Text color="danger" className={block('error')}>
-            {error === true ? i18n('alert_load-error') : error}
-        </Text>
-    ) : null;
-
-    const openedConfig = openedItem
-        ? (resolveDetail?.(openedItem) ?? createEmptyDetailConfig(openedItem))
-        : undefined;
-
-    const body: NavigationBody<TItem> = (() => {
-        if (loading) {
-            return {type: 'loading'};
-        }
-        if (openedItem && openedConfig) {
-            return {type: 'details', item: openedItem, config: openedConfig};
-        }
-        if (!location.cluster) {
-            return {type: 'clusters'};
-        }
-        return {type: 'items'};
-    })();
-
-    const handleNavigate = (next: NavigationLocation) => {
-        onDetailClose?.();
-        onUpdate(next);
-    };
-
-    const handleClusterClick = (cluster: TCluster) => {
-        handleNavigate({cluster: cluster.id, path: undefined});
-        onClusterClick?.(cluster);
-    };
-
-    const handleItemClick = (item: TItem) => {
-        if (item.hasChildren) {
-            handleNavigate({cluster: location.cluster, path: item.path});
-        } else {
-            onItemOpen?.(item);
-        }
-        onItemClick?.(item);
-    };
-
-    if (body.type === 'details') {
-        return (
-            <NavigationDetail
-                key={body.item.path}
-                config={body.config}
-                location={{cluster: location.cluster, path: body.item.path}}
-                actions={resolvedDetailActions}
-                onUpdate={handleNavigate}
-                onLoadSuggestions={onLoadSuggestions}
-                search={detailSearch}
-                onSearchUpdate={onDetailSearchUpdate}
-                activeTab={detailActiveTab}
-                onTabUpdate={onDetailTabUpdate}
-                className={block(null, className)}
-            />
-        );
-    }
-
-    return (
-        <Flex direction="column" gap={1} className={block(null, className)}>
-            <NavigationHeader
-                location={location}
-                actions={actions}
-                onUpdate={handleNavigate}
-                onLoadSuggestions={onLoadSuggestions}
-            />
-            <SearchWithButtons
-                placeholder={i18n('field_search-placeholder')}
-                value={searchValue}
-                onUpdate={onSearchUpdate}
-            />
-            {body.type === 'clusters' || (body.type === 'loading' && !location.cluster) ? (
-                <ClustersList<TCluster>
-                    items={clusters}
-                    loading={loading}
-                    error={resolvedErrorContent}
-                    hasMore={hasMore}
-                    onLoadMore={onLoadMore}
-                    emptyContent={
-                        <EmptyContent variant={searchValue ? 'nothing-found' : 'no-clusters'} />
-                    }
-                    renderRowItem={renderClusterItem}
-                    onItemClick={handleClusterClick}
-                />
-            ) : (
-                <NavigationItemsList<TItem>
-                    items={items}
-                    path={location.path}
-                    search={searchValue}
-                    sort={sortValue}
-                    onSortUpdate={onSortUpdate}
-                    titleLabel={i18n('title_name')}
-                    loading={loading}
-                    error={resolvedErrorContent}
-                    hasMore={hasMore}
-                    onLoadMore={onLoadMore}
-                    emptyContent={
-                        <EmptyContent variant={searchValue ? 'nothing-found' : 'no-files'} />
-                    }
-                    renderRowItem={renderNavigationItem}
-                    onItemClick={handleItemClick}
-                />
-            )}
-        </Flex>
-    );
-};

package/src/widgets/QueriesNavigation/helpers/createEmptyDetailConfig.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import type {NavigationDetailConfig, NavigationItem} from '../../../types/navigation';
-import {EmptyContent} from '../../../components';
-
-export const createEmptyDetailConfig = (_item: NavigationItem): NavigationDetailConfig => ({
-    tabs: [],
-    emptyContent: <EmptyContent variant="no-files" />,
-});

package/src/widgets/QueriesNavigation/helpers/createNavigationDetailResolver.ts

@@ -1,28 +0,0 @@
-import type {
-    NavigationDetailConfigFactory,
-    NavigationItem,
-    NavigationItemKind,
-    ResolveNavigationDetail,
-} from '../../../types/navigation';
-import {createTableDetailConfig} from './createTableDetailConfig';
-
-const defaultDetailRegistry: Partial<Record<NavigationItemKind, NavigationDetailConfigFactory>> = {
-    table: createTableDetailConfig(),
-};
-
-export const createNavigationDetailResolver = <T extends NavigationItem = NavigationItem>(
-    registry?: Partial<Record<NavigationItemKind, NavigationDetailConfigFactory<T>>>,
-    fallback?: NavigationDetailConfigFactory<T>,
-): ResolveNavigationDetail<T> => {
-    const merged = {
-        ...(defaultDetailRegistry as Partial<
-            Record<NavigationItemKind, NavigationDetailConfigFactory<T>>
-        >),
-        ...registry,
-    };
-
-    return (item) => {
-        const factory = (item.kind && merged[item.kind]) ?? fallback;
-        return factory?.(item);
-    };
-};