@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/modules/HistoryLayout/HistoryLayout.tsx

@@ -1,43 +0,0 @@
-import React, {FC, ReactNode} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import './HistoryLayout.scss';
-
-const block = cn('qp-history-layout');
-
-export type HistoryLayoutProps = {
-    title: ReactNode;
-    logo?: ReactNode;
-    actions?: ReactNode;
-    header?: ReactNode;
-    footer?: ReactNode;
-    className?: string;
-    children: ReactNode;
-};
-
-export const HistoryLayout: FC<HistoryLayoutProps> = ({
-    title,
-    logo,
-    actions,
-    header,
-    footer,
-    className,
-    children,
-}) => {
-    return (
-        <Flex direction="column" gap={1} className={block(null, className)}>
-            <Flex direction="column" gap={1} className={block('header')}>
-                {(logo || actions) && (
-                    <Flex alignItems="center" justifyContent={logo ? 'space-between' : 'flex-end'}>
-                        {logo}
-                        {actions}
-                    </Flex>
-                )}
-                <Text variant="subheader-1">{title}</Text>
-                {header}
-            </Flex>
-            {children}
-            {footer}
-        </Flex>
-    );
-};

package/src/modules/HistoryLayout/index.ts

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

package/src/modules/HistoryRow/HistoryRow.scss

@@ -1,32 +0,0 @@
-.qp-history-row {
-  height: 100%;
-  display: grid;
-  grid-template-columns: 20px 1fr;
-  gap: 4px;
-
-  &_compared {
-    background-color: var(--g-color-base-utility-light);
-  }
-
-  &__icon {
-    flex: 0 0 20px;
-  }
-
-  &__header {
-    height: 20px;
-  }
-
-  &__right-column {
-    overflow: hidden;
-  }
-
-  &__data {
-    display: grid;
-    grid-template-columns: 52px 1fr;
-    grid-gap: 8px;
-  }
-
-  &__duration {
-    text-align: center;
-  }
-}

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

@@ -1,91 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {HistoryRow} from './HistoryRow';
-import {QueryListRowAction} from '../../types/queryList';
-import {QueryHistoryRow} from '../../types/history';
-
-const now = Date.now();
-const min = 60 * 1000;
-
-const makeRow = (overrides: Partial<QueryHistoryRow>): QueryHistoryRow => ({
-    id: 1,
-    title: 'Query 1',
-    status: 'completed',
-    engine: 'YQL',
-    mode: 'batch',
-    isPrivate: false,
-    startTime: now - 5 * min,
-    endTime: now - min,
-    height: 64,
-    ...overrides,
-});
-
-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}`)},
-];
-
-const meta: Meta<typeof HistoryRow> = {
-    title: 'Modules/HistoryRow',
-    component: HistoryRow,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    args: {
-        item: makeRow({}),
-        isActive: false,
-        index: 0,
-        actions: defaultActions,
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 380}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof HistoryRow>;
-
-/** Default row with a ready-to-use actions menu */
-export const Default: Story = {
-    args: {
-        item: makeRow({isPrivate: true}),
-        isActive: true,
-    },
-};
-
-/** Comparison mode — row highlighted as checked, menu is hidden */
-export const ComparisonMode: Story = {
-    args: {
-        comparison: {
-            enabled: true,
-            checked: true,
-        },
-    },
-};
-
-/** Comparison mode is enabled globally, but this row is not checked yet */
-export const ComparisonModeUnchecked: Story = {
-    args: {
-        comparison: {
-            enabled: true,
-            checked: false,
-        },
-    },
-};
-
-/** Title editing mode */
-export const EditingMode: Story = {
-    args: {
-        editing: {
-            enabled: true,
-            onSubmit: (_item, title) => alert(`Saved: ${title}`),
-            onCancel: () => alert('Cancelled'),
-        },
-    },
-};

package/src/modules/HistoryRow/HistoryRow.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {QueryHistoryRow} from '../../types/history';
-import {Flex, Text} from '@gravity-ui/uikit';
-import './HistoryRow.scss';
-import cn from 'bem-cn-lite';
-import {
-    EditableRowTitle,
-    HistoryPrivateIcon,
-    QueryDuration,
-    QueryStatusIcon,
-    RowActionsMenu,
-    RowLink,
-} from '../../components';
-import {formatTime} from '../../helpers/time';
-import {isFieldVisible} from '../../helpers/isFieldVisible';
-
-export type Props<T extends QueryHistoryRow> = {
-    item: T;
-} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
-
-const block = cn('qp-history-row');
-
-export const HistoryRow = <T extends QueryHistoryRow>({
-    item,
-    actions,
-    isActive,
-    comparison,
-    editing,
-    visibleFields,
-}: Props<T>) => {
-    const {href, status, mode, startTime, endTime, engine, isPrivate} = item;
-    const isEditing = Boolean(editing?.enabled);
-    const isComparisonMode = Boolean(comparison?.enabled);
-    const isChecked = Boolean(comparison?.checked);
-    const showMenu = isActive && Boolean(actions?.length) && !isComparisonMode;
-
-    return (
-        <RowLink
-            href={href}
-            disabled={isEditing || isComparisonMode}
-            className={block({[status]: true, compared: isChecked})}
-        >
-            <QueryStatusIcon status={status} />
-            <Flex direction="column" gap={1} className={block('right-column')}>
-                <Flex justifyContent="space-between" className={block('header')}>
-                    <EditableRowTitle item={item} editing={editing} />
-                    {showMenu && <RowActionsMenu item={item} actions={actions} />}
-                </Flex>
-                <div className={block('data')}>
-                    {isFieldVisible(visibleFields, 'duration') && startTime && (
-                        <QueryDuration
-                            className={block('duration')}
-                            status={status}
-                            startTime={startTime}
-                            endTime={endTime}
-                        />
-                    )}
-                    <Flex gap={2}>
-                        {isFieldVisible(visibleFields, 'mode') && mode && (
-                            <Text color="complementary">{mode}</Text>
-                        )}
-                        {isFieldVisible(visibleFields, 'startTime') && startTime && (
-                            <Text color="complementary">{formatTime(startTime)}</Text>
-                        )}
-                        {isFieldVisible(visibleFields, 'engine') && engine && (
-                            <Text color="complementary">{engine}</Text>
-                        )}
-                        {isFieldVisible(visibleFields, 'isPrivate') && (
-                            <HistoryPrivateIcon isPrivate={isPrivate} />
-                        )}
-                    </Flex>
-                </div>
-            </Flex>
-        </RowLink>
-    );
-};

package/src/modules/HistoryRow/index.ts

@@ -1 +0,0 @@
-export {HistoryRow} from './HistoryRow';

package/src/modules/HistorySearchRow/HistorySearchRow.scss

@@ -1,13 +0,0 @@
-.qp-history-search-row {
-  &__header {
-    overflow: hidden;
-  }
-
-  &__start-time {
-    flex-shrink: 0;
-  }
-
-  &__icon {
-    flex-shrink: 0;
-  }
-}

package/src/modules/HistorySearchRow/HistorySearchRow.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {HistorySearchRow} from './HistorySearchRow';
-import {QueryHistoryRow} from '../../types/history';
-
-const now = Date.now();
-const min = 60 * 1000;
-
-const makeRow = (overrides: Partial<QueryHistoryRow>): QueryHistoryRow => ({
-    id: 1,
-    title: 'Query 1',
-    query: 'SELECT *\nFROM `//home/some/table`\nWHERE status = "completed"\nLIMIT 100',
-    status: 'completed',
-    engine: 'YQL',
-    startTime: now - 5 * min,
-    endTime: now - min,
-    height: 64,
-    ...overrides,
-});
-
-const meta: Meta<typeof HistorySearchRow> = {
-    title: 'Modules/HistorySearchRow',
-    component: HistorySearchRow,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 480}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof HistorySearchRow>;
-
-/** Completed query, basic view */
-export const Completed: Story = {
-    args: {
-        item: makeRow({status: 'completed'}),
-    },
-};
-
-/** Row with mode and a private (locked) query */
-export const WithModeAndPrivate: Story = {
-    args: {
-        item: makeRow({status: 'completed', mode: 'batch', isPrivate: true}),
-    },
-};

package/src/modules/HistorySearchRow/HistorySearchRow.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {QueryHistoryRow} from '../../types/history';
-import {
-    HistoryPrivateIcon,
-    QueryDuration,
-    QueryStatusIcon,
-    SearchRowLayout,
-} from '../../components';
-import {formatTimeCanonical} from '../../helpers/time';
-import {isFieldVisible} from '../../helpers/isFieldVisible';
-import {resolveMonacoLanguage} from './helpers/resolveMonacoLanguage';
-import './HistorySearchRow.scss';
-import cn from 'bem-cn-lite';
-
-const block = cn('qp-history-search-row');
-
-export type Props<T extends QueryHistoryRow> = {
-    item: T;
-} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
-
-export const HistorySearchRow = <T extends QueryHistoryRow>({
-    item,
-    visibleFields,
-    editing,
-    comparison,
-}: Props<T>) => {
-    const {href, status, startTime, endTime, engine, mode, isPrivate, query} = item;
-
-    return (
-        <SearchRowLayout
-            query={query}
-            language={resolveMonacoLanguage(engine)}
-            href={href}
-            disabled={Boolean(editing?.enabled) || Boolean(comparison?.enabled)}
-            className={block()}
-            header={
-                <Flex gap={2} alignItems="center" className={block('header')}>
-                    <QueryStatusIcon status={status} className={block('icon')} />
-                    {isFieldVisible(visibleFields, 'duration') && startTime && (
-                        <QueryDuration status={status} startTime={startTime} endTime={endTime} />
-                    )}
-                    {isFieldVisible(visibleFields, 'mode') && mode && (
-                        <Text color="complementary">{mode}</Text>
-                    )}
-                    {isFieldVisible(visibleFields, 'startTime') && startTime && (
-                        <Text color="complementary" className={block('start-time')}>
-                            {formatTimeCanonical(startTime)}
-                        </Text>
-                    )}
-                    {isFieldVisible(visibleFields, 'engine') && engine && (
-                        <Text color="complementary">{engine}</Text>
-                    )}
-                    {isFieldVisible(visibleFields, 'isPrivate') && (
-                        <HistoryPrivateIcon isPrivate={isPrivate} />
-                    )}
-                </Flex>
-            }
-        />
-    );
-};

package/src/modules/HistorySearchRow/helpers/resolveMonacoLanguage.ts

@@ -1,19 +0,0 @@
-import {MonacoLanguage} from '../../../components';
-
-export const resolveMonacoLanguage = (engine?: string) => {
-    const normalized = engine?.toLowerCase();
-    switch (normalized) {
-        case 'chyt': {
-            return MonacoLanguage.CHYT;
-        }
-        case 'spyt': {
-            return MonacoLanguage.SPYT;
-        }
-        case 'ytql': {
-            return MonacoLanguage.YTQL;
-        }
-        default: {
-            return MonacoLanguage.YQL;
-        }
-    }
-};

package/src/modules/HistorySearchRow/index.ts

@@ -1 +0,0 @@
-export {HistorySearchRow} from './HistorySearchRow';

package/src/modules/NavigationDetail/NavigationDetail.scss

@@ -1,13 +0,0 @@
-.qp-navigation-detail {
-  min-width: 0;
-
-  &__tabs {
-    overflow-x: auto;
-  }
-
-  &__content {
-    min-width: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-}

package/src/modules/NavigationDetail/NavigationDetail.tsx

@@ -1,121 +0,0 @@
-import React, {useMemo, useState} from 'react';
-import cn from 'bem-cn-lite';
-import {Flex} from '@gravity-ui/uikit';
-import {NavigationHeader} from '../NavigationHeader';
-import {SearchWithButtons} from '../../components';
-import {
-    NavigationDetailConfig,
-    NavigationHeaderAction,
-    NavigationLocation,
-} from '../../types/navigation';
-import type {LoadPathSuggestions} from '../../types/pathEditor';
-import {NavigationDetailTabs} from './internal/NavigationDetailTabs';
-import {getInitialTab} from './helpers/getInitialTab';
-import {getVisibleTabs} from './helpers/getVisibleTabs';
-import './NavigationDetail.scss';
-
-const block = cn('qp-navigation-detail');
-
-export type NavigationDetailProps = {
-    config: NavigationDetailConfig;
-    location: NavigationLocation;
-    onUpdate: (location: NavigationLocation) => void;
-    onLoadSuggestions?: LoadPathSuggestions;
-    actions?: NavigationHeaderAction[];
-    activeTab?: string;
-    onTabUpdate?: (tab: string) => void;
-    search?: string;
-    onSearchUpdate?: (value: string) => void;
-    className?: string;
-};
-
-export const NavigationDetail: React.FC<NavigationDetailProps> = ({
-    config,
-    location,
-    onUpdate,
-    onLoadSuggestions,
-    actions,
-    activeTab: activeTabProp,
-    onTabUpdate,
-    search: searchProp,
-    onSearchUpdate,
-    className,
-}) => {
-    const isTabControlled = activeTabProp !== undefined;
-    const isSearchControlled = searchProp !== undefined;
-
-    const visibleTabs = useMemo(() => getVisibleTabs(config.tabs), [config.tabs]);
-
-    const [activeTabState, setActiveTabState] = useState(() =>
-        getInitialTab(visibleTabs, config.defaultTab),
-    );
-    const [searchState, setSearchState] = useState('');
-
-    const activeTab = isTabControlled ? activeTabProp : activeTabState;
-    const search = isSearchControlled ? searchProp : searchState;
-
-    const handleTabUpdate = (tab: string) => {
-        if (!isTabControlled) {
-            setActiveTabState(tab);
-        }
-        onTabUpdate?.(tab);
-    };
-
-    const handleSearchUpdate = (value: string) => {
-        if (!isSearchControlled) {
-            setSearchState(value);
-        }
-        onSearchUpdate?.(value);
-    };
-
-    const mergedActions = useMemo(() => {
-        if (!actions && !config.actions) {
-            return undefined;
-        }
-        return [...(actions ?? []), ...(config.actions ?? [])];
-    }, [actions, config.actions]);
-
-    const activeTabConfig = visibleTabs.find((tab) => tab.id === activeTab);
-    const activeContent = activeTabConfig
-        ? (activeTabConfig.renderContent?.({
-              search,
-              onSearchUpdate: handleSearchUpdate,
-              searchPlaceholder: config.searchPlaceholder,
-          }) ??
-          activeTabConfig.content ??
-          null)
-        : null;
-
-    const hasTabs = visibleTabs.length > 0;
-
-    return (
-        <Flex direction="column" gap={2} className={block(null, className)}>
-            <NavigationHeader
-                location={location}
-                actions={mergedActions}
-                onUpdate={onUpdate}
-                onLoadSuggestions={onLoadSuggestions}
-            />
-            {hasTabs ? (
-                <>
-                    <NavigationDetailTabs
-                        tabs={visibleTabs}
-                        activeTab={activeTab}
-                        onUpdate={handleTabUpdate}
-                        className={block('tabs')}
-                    />
-                    {config.hasSearch && (
-                        <SearchWithButtons
-                            placeholder={config.searchPlaceholder}
-                            value={search}
-                            onUpdate={handleSearchUpdate}
-                        />
-                    )}
-                    <div className={block('content')}>{activeContent}</div>
-                </>
-            ) : (
-                config.emptyContent
-            )}
-        </Flex>
-    );
-};

package/src/modules/NavigationDetail/helpers/getInitialTab.ts

@@ -1,9 +0,0 @@
-import type {NavigationDetailTab} from '../../../types/navigation';
-
-export function getInitialTab(visibleTabs: NavigationDetailTab[], defaultTab?: string): string {
-    const defaultTabConfig = defaultTab
-        ? visibleTabs.find((tab) => tab.id === defaultTab)
-        : undefined;
-    const firstEnabled = visibleTabs.find((tab) => !tab.disabled);
-    return (defaultTabConfig ?? firstEnabled ?? visibleTabs[0])?.id ?? '';
-}

package/src/modules/NavigationDetail/helpers/getVisibleTabs.ts

@@ -1,5 +0,0 @@
-import type {NavigationDetailTab} from '../../../types/navigation';
-
-export function getVisibleTabs(tabs: NavigationDetailTab[]): NavigationDetailTab[] {
-    return tabs.filter((tab) => !tab.hidden);
-}

package/src/modules/NavigationDetail/index.ts

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

package/src/modules/NavigationDetail/internal/NavigationDetailTabs.tsx

@@ -1,32 +0,0 @@
-import React, {FC} from 'react';
-import {SegmentedRadioGroup} from '@gravity-ui/uikit';
-import {NavigationDetailTab} from '../../../types/navigation';
-
-export type NavigationDetailTabsProps = {
-    tabs: NavigationDetailTab[];
-    activeTab: string;
-    onUpdate: (tab: string) => void;
-    className?: string;
-};
-
-export const NavigationDetailTabs: FC<NavigationDetailTabsProps> = ({
-    tabs,
-    activeTab,
-    onUpdate,
-    className,
-}) => {
-    return (
-        <SegmentedRadioGroup
-            value={activeTab}
-            onUpdate={onUpdate}
-            width="max"
-            className={className}
-        >
-            {tabs.map((tab) => (
-                <SegmentedRadioGroup.Option key={tab.id} value={tab.id} disabled={tab.disabled}>
-                    {tab.title}
-                </SegmentedRadioGroup.Option>
-            ))}
-        </SegmentedRadioGroup>
-    );
-};