@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/components/PathEditor/PathEditor.tsx

@@ -1,380 +0,0 @@
-import React, {
-    FC,
-    type FocusEvent,
-    type KeyboardEvent,
-    type MouseEvent,
-    useCallback,
-    useEffect,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-import {Icon, Popup, Text, TextInput} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import type {
-    LoadPathSuggestions,
-    PathEditorEventPayload,
-    PathEditorSuggestion,
-    PathEditorSuggestionFilter,
-} from '../../types/pathEditor';
-import {getDefaultNavigationIcon} from '../../helpers/getDefaultNavigationIcon';
-import {
-    filterByCurrentPath,
-    getCompletedPath,
-    getLastFragment,
-    getNextSelectedIndex,
-    getPrevSelectedIndex,
-} from './helpers/suggestions';
-import i18n from './i18n';
-import './PathEditor.scss';
-
-const DEBOUNCE_MS = 300;
-const block = cn('qp-path-editor');
-
-export type PathEditorProps = {
-    className?: string;
-    placeholder?: string;
-    defaultPath?: string;
-    disabled?: boolean;
-    autoFocus?: boolean;
-    hasClear?: boolean;
-    showErrors?: boolean;
-    customFilter?: PathEditorSuggestionFilter;
-    cluster?: string;
-    suggestions?: PathEditorSuggestion[];
-    suggestionsError?: boolean;
-    errorMessage?: string;
-    onLoadSuggestions?: LoadPathSuggestions;
-    onChange?: (path: string) => void;
-    onFocus?: (event: FocusEvent<HTMLInputElement>, payload: PathEditorEventPayload) => void;
-    onBlur?: (path: string) => void;
-    onApply?: (path: string) => void;
-    onCancel?: () => void;
-};
-
-export const PathEditor: FC<PathEditorProps> = ({
-    className,
-    placeholder = i18n('field_placeholder'),
-    defaultPath = '',
-    disabled = false,
-    autoFocus = false,
-    hasClear = false,
-    showErrors = true,
-    customFilter,
-    cluster,
-    suggestions: suggestionsFromProps,
-    suggestionsError: suggestionsErrorFromProps,
-    errorMessage: errorMessageFromProps,
-    onLoadSuggestions,
-    onChange,
-    onFocus,
-    onBlur,
-    onApply,
-    onCancel,
-}) => {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const selectedItemRef = useRef<HTMLDivElement>(null);
-    const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-    const requestIdRef = useRef(0);
-    const wasDisabledRef = useRef(disabled);
-    const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null);
-
-    const onLoadSuggestionsRef = useRef(onLoadSuggestions);
-    onLoadSuggestionsRef.current = onLoadSuggestions;
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    const customFilterRef = useRef(customFilter);
-    customFilterRef.current = customFilter;
-
-    const [path, setPath] = useState(defaultPath);
-    const [loadedSuggestions, setLoadedSuggestions] = useState<PathEditorSuggestion[]>([]);
-    const [internalError, setInternalError] = useState(false);
-    const [internalErrorMessage, setInternalErrorMessage] = useState<string>();
-    const [inputFocus, setInputFocus] = useState(false);
-    const [inputChange, setInputChange] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(-1);
-    const [inputWidth, setInputWidth] = useState(0);
-
-    const suggestions = suggestionsFromProps ?? loadedSuggestions;
-    const suggestionsError = suggestionsErrorFromProps ?? internalError;
-    const errorMessage =
-        errorMessageFromProps ?? internalErrorMessage ?? i18n('message_error-default');
-
-    const actualSuggestions = useMemo(() => {
-        if (!inputFocus || !inputChange || !suggestions.length) {
-            return [];
-        }
-
-        return filterByCurrentPath(path, suggestions);
-    }, [inputFocus, inputChange, path, suggestions]);
-
-    const loadSuggestions = useCallback(
-        (nextPath: string) => {
-            const load = onLoadSuggestionsRef.current;
-            if (!load) {
-                return;
-            }
-
-            const requestId = ++requestIdRef.current;
-
-            Promise.resolve(
-                load({
-                    path: nextPath,
-                    customFilter: customFilterRef.current,
-                    cluster,
-                }),
-            )
-                .then((result) => {
-                    if (requestId !== requestIdRef.current) {
-                        return;
-                    }
-
-                    if (result) {
-                        setLoadedSuggestions(result);
-                    }
-                    setInternalError(false);
-                    setInternalErrorMessage(undefined);
-                })
-                .catch((error: unknown) => {
-                    if (requestId !== requestIdRef.current) {
-                        return;
-                    }
-
-                    setLoadedSuggestions([]);
-                    setInternalError(true);
-                    setInternalErrorMessage(error instanceof Error ? error.message : undefined);
-                });
-        },
-        [cluster],
-    );
-
-    const debounceLoading = useCallback(
-        (nextPath: string) => {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-
-            debounceTimerRef.current = setTimeout(() => {
-                loadSuggestions(nextPath);
-                onChangeRef.current?.(nextPath);
-            }, DEBOUNCE_MS);
-        },
-        [loadSuggestions],
-    );
-
-    const hideSuggestions = useCallback(() => {
-        setInputFocus(false);
-        setSelectedIndex(-1);
-    }, []);
-
-    const handleInputChange = useCallback(
-        (nextPath: string) => {
-            setPath(nextPath);
-            setSelectedIndex(-1);
-            setInputChange(true);
-            setInputFocus(true);
-            debounceLoading(nextPath);
-        },
-        [debounceLoading],
-    );
-
-    const handleInputFocus = useCallback(
-        (event: FocusEvent<HTMLInputElement>) => {
-            setInputFocus(true);
-            onFocus?.(event, {path});
-        },
-        [onFocus, path],
-    );
-
-    const handleInputBlur = useCallback(() => {
-        hideSuggestions();
-        onBlur?.(path);
-    }, [hideSuggestions, onBlur, path]);
-
-    const handleEnterClick = useCallback(
-        (event: KeyboardEvent<HTMLInputElement>) => {
-            event.preventDefault();
-
-            const inputPath = event.currentTarget.value;
-
-            if (selectedIndex === -1) {
-                setPath(inputPath);
-                setSelectedIndex(-1);
-                onApply?.(inputPath);
-                return;
-            }
-
-            const suggestion = actualSuggestions[selectedIndex];
-            if (suggestion) {
-                handleInputChange(getCompletedPath(suggestion));
-            }
-        },
-        [actualSuggestions, handleInputChange, onApply, selectedIndex],
-    );
-
-    const handleEscClick = useCallback(() => {
-        inputRef.current?.blur();
-        onCancel?.();
-    }, [onCancel]);
-
-    const handleTabClick = useCallback(
-        (event: KeyboardEvent<HTMLInputElement>) => {
-            event.preventDefault();
-
-            if (actualSuggestions.length === 1) {
-                handleInputChange(getCompletedPath(actualSuggestions[0]));
-            } else if (actualSuggestions.length > 1) {
-                setSelectedIndex((current) => getNextSelectedIndex(actualSuggestions, current));
-            }
-        },
-        [actualSuggestions, handleInputChange],
-    );
-
-    const handleKeyDown = useCallback(
-        (event: KeyboardEvent<HTMLInputElement>) => {
-            switch (event.key) {
-                case 'ArrowDown':
-                    if (!actualSuggestions.length) {
-                        break;
-                    }
-                    event.preventDefault();
-                    setSelectedIndex((current) => getNextSelectedIndex(actualSuggestions, current));
-                    break;
-                case 'ArrowUp':
-                    if (!actualSuggestions.length) {
-                        break;
-                    }
-                    event.preventDefault();
-                    setSelectedIndex((current) => getPrevSelectedIndex(actualSuggestions, current));
-                    break;
-                case 'Enter':
-                    handleEnterClick(event);
-                    break;
-                case 'Escape':
-                    handleEscClick();
-                    break;
-                case 'Tab':
-                    if (!actualSuggestions.length) {
-                        break;
-                    }
-                    handleTabClick(event);
-                    break;
-            }
-        },
-        [actualSuggestions, handleEnterClick, handleEscClick, handleTabClick],
-    );
-
-    useEffect(() => {
-        if (path) {
-            loadSuggestions(path);
-        }
-
-        return () => {
-            requestIdRef.current += 1;
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        if (wasDisabledRef.current && !disabled) {
-            inputRef.current?.focus();
-        }
-        wasDisabledRef.current = disabled;
-    }, [disabled]);
-
-    useLayoutEffect(() => {
-        if (inputFocus && rootElement) {
-            setInputWidth(rootElement.offsetWidth);
-        }
-    }, [inputFocus, path, rootElement]);
-
-    useLayoutEffect(() => {
-        selectedItemRef.current?.scrollIntoView({block: 'nearest'});
-    }, [selectedIndex]);
-
-    const isPopupVisible = Boolean(
-        (actualSuggestions.length || (suggestionsError && showErrors)) && inputFocus,
-    );
-
-    return (
-        <div className={block(null, className)} ref={setRootElement}>
-            <TextInput
-                onKeyDown={handleKeyDown}
-                onUpdate={handleInputChange}
-                onFocus={handleInputFocus}
-                onBlur={handleInputBlur}
-                placeholder={placeholder}
-                hasClear={hasClear}
-                autoFocus={autoFocus}
-                disabled={disabled}
-                controlRef={inputRef}
-                value={path}
-            />
-            <Popup
-                className={block('popup')}
-                placement="bottom-start"
-                onOpenChange={(open) => {
-                    if (!open) {
-                        hideSuggestions();
-                    }
-                }}
-                anchorElement={rootElement}
-                open={isPopupVisible}
-                offset={{mainAxis: 0, crossAxis: 0}}
-                disableEscapeKeyDown
-                disableFocusOut
-            >
-                <div
-                    className={block('items')}
-                    style={{width: inputWidth || undefined}}
-                    role="listbox"
-                >
-                    {suggestionsError && showErrors ? (
-                        <Text className={block('item', {error: true})} color="danger">
-                            {errorMessage}
-                        </Text>
-                    ) : (
-                        actualSuggestions.map((item, index) => {
-                            const completedPath = getCompletedPath(item);
-                            const isSelected = index === selectedIndex;
-                            const lastFragment = getLastFragment(item.path);
-
-                            const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {
-                                handleInputChange(completedPath);
-                                event.preventDefault();
-                            };
-
-                            return (
-                                <div
-                                    key={item.path}
-                                    ref={isSelected ? selectedItemRef : undefined}
-                                    onMouseDown={handleMouseDown}
-                                    className={block('item', {selected: isSelected})}
-                                    role="option"
-                                    aria-selected={isSelected}
-                                >
-                                    {item.icon ?? (
-                                        <Icon
-                                            data={getDefaultNavigationIcon(
-                                                item.kind,
-                                                item.targetPathBroken,
-                                            )}
-                                            size={16}
-                                        />
-                                    )}
-                                    <span className={block('item-path')}>
-                                        {lastFragment ? `\u2026/${lastFragment}` : item.path}
-                                    </span>
-                                </div>
-                            );
-                        })
-                    )}
-                </div>
-            </Popup>
-        </div>
-    );
-};

package/src/components/PathEditor/helpers/suggestions.ts

@@ -1,40 +0,0 @@
-import type {PathEditorSuggestion} from '../../../types/pathEditor';
-
-export function filterByCurrentPath(
-    currentPath: string,
-    suggestions: PathEditorSuggestion[],
-): PathEditorSuggestion[] {
-    const path = currentPath.toLowerCase();
-
-    return suggestions.filter((child) => {
-        const hasPartOfPath = child.path.toLowerCase().startsWith(path);
-        const isShowCurrentChild = child.path.toLowerCase() !== path || child.kind === 'folder';
-
-        return hasPartOfPath && isShowCurrentChild;
-    });
-}
-
-export function getNextSelectedIndex(suggestions: PathEditorSuggestion[], selectedIndex: number) {
-    if (selectedIndex === -1 || selectedIndex === suggestions.length - 1) {
-        return 0;
-    }
-
-    return selectedIndex + 1;
-}
-
-export function getPrevSelectedIndex(suggestions: PathEditorSuggestion[], selectedIndex: number) {
-    if (selectedIndex === -1 || selectedIndex === 0) {
-        return suggestions.length - 1;
-    }
-
-    return selectedIndex - 1;
-}
-
-export function getCompletedPath(suggestion: PathEditorSuggestion) {
-    return suggestion.kind === 'folder' ? `${suggestion.path}/` : suggestion.path;
-}
-
-export function getLastFragment(path: string): string | undefined {
-    const segments = path.split('/').filter(Boolean);
-    return segments[segments.length - 1];
-}

package/src/components/PathEditor/i18n/dicts.ts

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

package/src/components/PathEditor/i18n/en.json

@@ -1,4 +0,0 @@
-{
-  "message_error-default": "Oops, something went wrong",
-  "field_placeholder": "Enter the path..."
-}

package/src/components/PathEditor/i18n/index.ts

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

package/src/components/PathEditor/i18n/ru.json

@@ -1,4 +0,0 @@
-{
-  "message_error-default": "Что-то пошло не так",
-  "field_placeholder": "Введите путь..."
-}

package/src/components/PathEditor/index.ts

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

package/src/components/QueryDuration/QueryDuration.scss

@@ -1,6 +0,0 @@
-.qp-query-duration {
-  .g-label__text {
-    display: flex;
-    justify-content: center;
-  }
-}

package/src/components/QueryDuration/QueryDuration.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {QueryDuration} from './QueryDuration';
-
-const now = Date.now();
-const fiveMinutesAgo = now - 5 * 60 * 1000;
-const oneHourAgo = now - 60 * 60 * 1000;
-
-const meta: Meta<typeof QueryDuration> = {
-    title: 'Components/QueryDuration',
-    component: QueryDuration,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof QueryDuration>;
-
-/** Live timer: endTime not provided — counter ticks every second */
-export const Default: Story = {
-    args: {
-        status: 'running',
-        startTime: fiveMinutesAgo,
-    },
-};
-
-/** All variants side by side: Running updates in real time, Draft is static */
-export const AllStatuses: Story = {
-    render: () => (
-        <div style={{display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center'}}>
-            {/* Static */}
-            <QueryDuration status="completed" startTime={fiveMinutesAgo} endTime={now} />
-            <QueryDuration status="failed" startTime={oneHourAgo} endTime={now} />
-            <QueryDuration status="aborted" startTime={fiveMinutesAgo} endTime={now} />
-            {/* Live timer */}
-            <QueryDuration status="running" startTime={fiveMinutesAgo} />
-            {/* Always --:-- */}
-            <QueryDuration status="draft" startTime={now} />
-        </div>
-    ),
-};

package/src/components/QueryDuration/QueryDuration.tsx

@@ -1,21 +0,0 @@
-import React, {FC} from 'react';
-import {QueryStatus} from '../../types/history';
-import {Label} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import './QueryDuration.scss';
-import {useQueryDuration} from './useQueryDuration';
-
-type Props = {
-    startTime?: string | number;
-    endTime?: string | number;
-    status: QueryStatus;
-    className?: string;
-};
-
-const block = cn('qp-query-duration');
-
-export const QueryDuration: FC<Props> = ({startTime, endTime, status, className}) => {
-    const duration = useQueryDuration(status, startTime, endTime);
-
-    return <Label className={block(null, className)}>{duration}</Label>;
-};

package/src/components/QueryDuration/index.ts

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

package/src/components/QueryDuration/useQueryDuration.ts

@@ -1,34 +0,0 @@
-import {useEffect, useState} from 'react';
-import {QueryStatus} from '../../types/history';
-import {CompletedQueryStates} from '../../constants/query';
-import {durationDates} from '../../helpers/time';
-
-export const useQueryDuration = (
-    state: QueryStatus,
-    startTime?: string | number,
-    endTime?: string | number,
-) => {
-    const [duration, setDuration] = useState(durationDates(startTime, endTime));
-
-    useEffect(() => {
-        if (state === 'draft' || !startTime) {
-            setDuration('--:--');
-            return;
-        }
-        if (CompletedQueryStates.includes(state)) {
-            setDuration(endTime ? durationDates(startTime, endTime) : '--:--');
-            return;
-        }
-        setDuration(durationDates(startTime, endTime));
-        if (endTime) {
-            return;
-        }
-        const timer = setInterval(() => setDuration(durationDates(startTime, endTime)), 1000);
-
-        return () => {
-            clearInterval(timer);
-        };
-    }, [state, startTime, endTime]);
-
-    return duration;
-};

package/src/components/QueryResultsTable/QueryResultsTable.scss

@@ -1,65 +0,0 @@
-.qp-query-results-table {
-    --data-table-border-color: var(--g-color-line-generic);
-
-    min-width: 0;
-    overflow-x: auto;
-
-    .data-table__table-wrapper {
-        display: inline-block;
-        min-width: 100%;
-        vertical-align: top;
-    }
-
-    .data-table__th,
-    .data-table__td {
-        max-width: 700px;
-        vertical-align: top;
-    }
-
-    .data-table__td {
-        position: relative;
-        white-space: normal;
-    }
-
-    &__header {
-        display: inline-block;
-    }
-
-    &__cell {
-        display: block;
-        padding-right: var(--g-spacing-5);
-        font-family: var(--g-font-family-monospace);
-        font-size: var(--g-text-code-2-font-size);
-        line-height: var(--g-text-code-2-line-height);
-        overflow-wrap: anywhere;
-
-        &:hover .qp-query-results-table__cell-actions,
-        &:focus-within .qp-query-results-table__cell-actions {
-            opacity: 1;
-        }
-
-        .unipika {
-            display: inline;
-        }
-    }
-
-    &__cell-actions {
-        position: absolute;
-        top: var(--g-spacing-1);
-        right: var(--g-spacing-1);
-        opacity: 0;
-    }
-
-    &__show-more {
-        display: block;
-        margin-top: var(--g-spacing-1);
-    }
-
-    &__format-error {
-        color: var(--g-color-text-danger);
-    }
-
-    &__error {
-        display: block;
-    }
-}