@gravity-ui/querieskit 1.0.1

package/src/components/MonacoEditor/monaco-yql-languages/yql/yql.ts

@@ -0,0 +1,178 @@
+import {type languages} from '../fillers/monaco-editor-core';
+import {builtinFunctions, keywords, typeKeywords} from './yql.keywords';
+
+export const conf: languages.LanguageConfiguration = {
+    comments: {
+        lineComment: '--',
+        blockComment: ['/*', '*/'],
+    },
+    brackets: [
+        ['{', '}'],
+        ['[', ']'],
+        ['(', ')'],
+    ],
+    autoClosingPairs: [
+        {open: '{', close: '}'},
+        {open: '[', close: ']'},
+        {open: '(', close: ')'},
+        {open: '"', close: '"'},
+        {open: "'", close: "'"},
+        {open: '`', close: '`'},
+    ],
+    surroundingPairs: [
+        {open: '{', close: '}'},
+        {open: '[', close: ']'},
+        {open: '(', close: ')'},
+        {open: '"', close: '"'},
+        {open: "'", close: "'"},
+        {open: '`', close: '`'},
+    ],
+    wordPattern: /(-?\d*\.\d\w*)|([^`~!@#%^&*()\-=+[{\]}\\|;:'",./?\s]+)/g,
+};
+
+export const language: languages.IMonarchLanguage & Record<string, unknown> = {
+    defaultToken: 'text',
+    ignoreCase: true,
+    brackets: [
+        {open: '[', close: ']', token: 'delimiter.square'},
+        {open: '(', close: ')', token: 'delimiter.parenthesis'},
+        {open: '{', close: '}', token: 'delimiter.curly'},
+    ],
+
+    keywords,
+
+    typeKeywords,
+
+    constants: ['true', 'false'],
+
+    builtinFunctions,
+
+    operators: [
+        '+',
+        '-',
+        '/',
+        '//',
+        '%',
+        '<@>',
+        '@>',
+        '<@',
+        '&',
+        '^',
+        '~',
+        '<',
+        '>',
+        '<=',
+        '=>',
+        '==',
+        '!=',
+        '<>',
+        '=',
+    ],
+
+    symbols: /[=><!~?:&|+\-*/^%]+/,
+    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+    variables: /[a-zA-Z_]\w*/,
+
+    tokenizer: {
+        root: [
+            {include: '@whitespace'},
+            {include: '@comments'},
+            {include: '@numbers'},
+            {include: '@tablePath'},
+            {include: '@strings'},
+            // support function
+            [/(@variables)::(@variables)/, 'support.function'],
+            [/[;,.]/, 'delimiter'],
+            [/[{}()[\]]/, '@brackets'],
+            [/(\w+\.)*`\/\/(.*?)`/g, {token: 'path'}],
+            // identifiers and keywords
+            [
+                /@?[a-zA-Z_$]\w*/,
+                {
+                    cases: {
+                        '@keywords': 'keyword',
+                        '@typeKeywords': 'keyword.type',
+                        '@constants': 'constant.yql',
+                        '@builtinFunctions': 'constant.other.color',
+                        '[$@][a-zA-Z_]\\w*': 'variable',
+                        '@default': 'identifier',
+                    },
+                },
+            ],
+            [
+                /@symbols/,
+                {
+                    cases: {
+                        '@operators': 'operator.sql',
+                        '@default': '',
+                    },
+                },
+            ],
+        ],
+        whitespace: [[/\s+/, 'white']],
+        comments: [
+            [/--.*/, 'comment'],
+            [/\/\*/, {token: 'comment.quote', next: '@comment'}],
+        ],
+        comment: [
+            [/[^*/]+/, 'comment'],
+            [/\*\//, {token: 'comment.quote', next: '@pop'}],
+            [/./, 'comment'],
+        ],
+        commentAnsi: [
+            [/\/\*/, {token: 'comment.quote', next: '@comment'}],
+            [/[^*/]+/, 'comment'],
+            [/\*\//, {token: 'comment.quote', next: '@pop'}],
+            [/./, 'comment'],
+        ],
+        numbers: [
+            [/[+-]?\d+(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?f?\b/, 'number.float'],
+            [/[+-]?(?:\d+|0b[01]+|0o[0-7]+|0x[\da-f]+)(?:u?[lst]?)?\b/, 'number'],
+        ],
+        strings: [
+            [/'/, {token: 'string', next: '@stringSingle'}],
+            [/"/, {token: 'string', next: '@stringDouble'}],
+            [/[@]{2}/, {token: 'string', next: '@multilineString'}],
+        ],
+        stringSingle: [
+            [/[^\\']+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/'[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        stringAnsiSingle: [
+            [/[^']+/, 'string'],
+            [/''/, 'string'],
+            [/'[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        stringDouble: [
+            [/[^\\"]+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/"[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        stringAnsiDouble: [
+            [/[^"]+/, 'string'],
+            [/""/, 'string'],
+            [/"[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        multilineString: [
+            [/#py/, {token: 'string.python', nextEmbedded: 'python', next: '@embedded', goBack: 3}],
+            [
+                /\/\/js/,
+                {token: 'string.js', nextEmbedded: 'javascript', next: '@embedded', goBack: 4},
+            ],
+            [/[^@]+/, 'string'],
+            [/[@]{4}/, 'string'],
+            [/[@]{2}[uyj]?/, {token: 'string', next: '@pop'}],
+            [/./, 'string'],
+        ],
+        embedded: [
+            [
+                /([^@]|^)([@]{4})*[@]{2}([@]([^@]|$)|[^@]|$)/,
+                {token: '@rematch', next: '@pop', nextEmbedded: '@pop'},
+            ],
+        ],
+        tablePath: [[/`\/?[\w/-]+`/, {token: 'string.tablepath'}]],
+    },
+};

package/src/components/MonacoEditor/monaco-yql-languages/yql_ansi/yql_ansi.contribution.ts

@@ -0,0 +1,14 @@
+import {registerLanguage} from '../_.contribution';
+import {MonacoLanguage} from '../constants';
+
+registerLanguage({
+    id: MonacoLanguage.YTQL,
+    extensions: [],
+    loader: async () => {
+        const lang = await import('./yql_ansi');
+        return {
+            conf: lang.conf,
+            language: lang.language,
+        };
+    },
+});

package/src/components/MonacoEditor/monaco-yql-languages/yql_ansi/yql_ansi.keywords.ts

@@ -0,0 +1,45 @@
+export const keywords = [
+    'SELECT',
+    'FROM',
+    'WITH',
+    'INDEX',
+    'WHERE',
+    'HAVING',
+    'OFFSET',
+    'LIMIT',
+    'JOIN',
+    'ARRAY',
+    'USING',
+    'GROUP',
+    'BY',
+    'WITH',
+    'TOTALS',
+    'ORDER',
+    'BY',
+    'ASC',
+    'DESC',
+    'LEFT',
+    'AS',
+    'ON',
+    'AND',
+    'OR',
+    'IS',
+    'NOT',
+    'NULL',
+    'BETWEEN',
+    'IN',
+    'TRANSFORM',
+    'LIKE',
+    'ILIKE',
+    'RLIKE',
+    'REGEXP',
+    'ESCAPE',
+    'FALSE',
+    'TRUE',
+    'CASE',
+    'WHEN',
+    'THEN',
+    'ELSE',
+    'END',
+    'INF',
+];

package/src/components/MonacoEditor/monaco-yql-languages/yql_ansi/yql_ansi.ts

@@ -0,0 +1,142 @@
+import {type languages} from '../fillers/monaco-editor-core';
+import {builtinFunctions, keywords, typeKeywords} from '../yql/yql.keywords';
+
+export {conf} from '../yql/yql';
+
+export const language: languages.IMonarchLanguage & Record<string, unknown> = {
+    defaultToken: 'text',
+    ignoreCase: true,
+    brackets: [
+        {open: '[', close: ']', token: 'delimiter.square'},
+        {open: '(', close: ')', token: 'delimiter.parenthesis'},
+        {open: '{', close: '}', token: 'delimiter.curly'},
+    ],
+    keywords,
+    typeKeywords,
+    constants: ['true', 'false'],
+    builtinFunctions,
+    operators: [
+        '+',
+        '-',
+        '/',
+        '//',
+        '%',
+        '<@>',
+        '@>',
+        '<@',
+        '&',
+        '^',
+        '~',
+        '<',
+        '>',
+        '<=',
+        '=>',
+        '==',
+        '!=',
+        '<>',
+        '=',
+    ],
+    symbols: /[=><!~?:&|+\-*/^%]+/,
+    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+    variables: /[a-zA-Z_]\w*/,
+    tokenizer: {
+        root: [
+            {include: '@whitespace'},
+            {include: '@comments'},
+            {include: '@numbers'},
+            {include: '@tablePath'},
+            {include: '@strings'},
+            [/(@variables)::(@variables)/, 'support.function'],
+            [/[;,.]/, 'delimiter'],
+            [/[{}()[\]]/, '@brackets'],
+            [/(\w+\.)*`\/\/(.*?)`/g, {token: 'path'}],
+            [
+                /@?[a-zA-Z_$]\w*/,
+                {
+                    cases: {
+                        '@keywords': 'keyword',
+                        '@typeKeywords': 'keyword.type',
+                        '@constants': 'constant.yql',
+                        '@builtinFunctions': 'constant.other.color',
+                        '[$@][a-zA-Z_]\\w*': 'variable',
+                        '@default': 'identifier',
+                    },
+                },
+            ],
+            [
+                /@symbols/,
+                {
+                    cases: {
+                        '@operators': 'operator.sql',
+                        '@default': '',
+                    },
+                },
+            ],
+        ],
+        whitespace: [[/\s+/, 'white']],
+        comments: [
+            [/--.*/, 'comment'],
+            [/\/\*/, {token: 'comment.quote', next: '@commentAnsi'}],
+        ],
+        comment: [
+            [/[^*/]+/, 'comment'],
+            [/\*\//, {token: 'comment.quote', next: '@pop'}],
+            [/./, 'comment'],
+        ],
+        commentAnsi: [
+            [/\/\*/, {token: 'comment.quote', next: '@comment'}],
+            [/[^*/]+/, 'comment'],
+            [/\*\//, {token: 'comment.quote', next: '@pop'}],
+            [/./, 'comment'],
+        ],
+        numbers: [
+            [/[+-]?\d+(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?f?\b/, 'number.float'],
+            [/[+-]?(?:\d+|0b[01]+|0o[0-7]+|0x[\da-f]+)(?:u?[lst]?)?\b/, 'number'],
+        ],
+        strings: [
+            [/'/, {token: 'string', next: '@stringAnsiSingle'}],
+            [/"/, {token: 'string', next: '@stringAnsiDouble'}],
+            [/[@]{2}/, {token: 'string', next: '@multilineString'}],
+        ],
+        stringSingle: [
+            [/[^\\']+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/'[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        stringAnsiSingle: [
+            [/[^']+/, 'string'],
+            [/''/, 'string'],
+            [/'[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        stringDouble: [
+            [/[^\\"]+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/"[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        stringAnsiDouble: [
+            [/[^"]+/, 'string'],
+            [/""/, 'string'],
+            [/"[uyj]?/, {token: 'string', next: '@pop'}],
+        ],
+        multilineString: [
+            [/#py/, {token: 'string.python', nextEmbedded: 'python', next: '@embedded', goBack: 3}],
+            [
+                /\/\/js/,
+                {token: 'string.js', nextEmbedded: 'javascript', next: '@embedded', goBack: 4},
+            ],
+            [/[^@]+/, 'string'],
+            [/[@]{4}/, 'string'],
+            [/[@]{2}[uyj]?/, {token: 'string', next: '@pop'}],
+            [/./, 'string'],
+        ],
+        embedded: [
+            [
+                /([^@]|^)([@]{4})*[@]{2}([@]([^@]|$)|[^@]|$)/,
+                {token: '@rematch', next: '@pop', nextEmbedded: '@pop'},
+            ],
+        ],
+        tablePath: [[/`\/?[\w/-]+`/, {token: 'string.tablepath'}]],
+    },
+};

package/src/components/QueryDuration/QueryDuration.scss

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

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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,21 @@
+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

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

package/src/components/QueryDuration/useQueryDuration.ts

@@ -0,0 +1,34 @@
+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/QueryStatusIcon/QueryStatusIcon.scss

@@ -0,0 +1,17 @@
+.qp-query-status-icon {
+  &_completed {
+    color: var(--g-color-text-positive-heavy);
+  }
+
+  &_failed {
+    color: var(--g-color-text-danger);
+  }
+
+  &_running {
+    color: var(--g-color-base-brand);
+  }
+
+  &_draft, &_aborted {
+    color: var(--g-color-text-secondary);
+  }
+}

package/src/components/QueryStatusIcon/QueryStatusIcon.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {QueryStatusIcon} from './QueryStatusIcon';
+
+const meta: Meta<typeof QueryStatusIcon> = {
+    title: 'Components/QueryStatusIcon',
+    component: QueryStatusIcon,
+    tags: ['autodocs'],
+    argTypes: {
+        status: {
+            control: 'select',
+            options: ['completed', 'failed', 'aborted', 'draft', 'running'],
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof QueryStatusIcon>;
+
+export const Completed: Story = {
+    args: {status: 'completed'},
+};
+
+export const Failed: Story = {
+    args: {status: 'failed'},
+};
+
+export const Aborted: Story = {
+    args: {status: 'aborted'},
+};
+
+export const Draft: Story = {
+    args: {status: 'draft'},
+};
+
+export const Running: Story = {
+    args: {status: 'running'},
+};
+
+export const AllStatuses: Story = {
+    render: () => (
+        <div style={{display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap'}}>
+            <QueryStatusIcon status="completed" />
+            <QueryStatusIcon status="failed" />
+            <QueryStatusIcon status="aborted" />
+            <QueryStatusIcon status="draft" />
+            <QueryStatusIcon status="running" />
+        </div>
+    ),
+};

package/src/components/QueryStatusIcon/QueryStatusIcon.tsx

@@ -0,0 +1,37 @@
+import React, {FC} from 'react';
+import {Icon, IconData, Spin} from '@gravity-ui/uikit';
+import CircleCheckIcon from '@gravity-ui/icons/svgs/circle-check.svg';
+import CircleExclamationIcon from '@gravity-ui/icons/svgs/circle-exclamation.svg';
+import FileIcon from '@gravity-ui/icons/svgs/file.svg';
+import CircleStopIcon from '@gravity-ui/icons/svgs/circle-stop.svg';
+import CirclePlayIcon from '@gravity-ui/icons/svgs/circle-play.svg';
+import {QueryStatus} from '../../types/history';
+import cn from 'bem-cn-lite';
+import './QueryStatusIcon.scss';
+import {ProgressQueryStatuses} from '../../constants/query';
+
+type Props = {
+    status: QueryStatus;
+    className?: string;
+};
+
+const STATUS_ICONS: Record<QueryStatus, IconData> = {
+    completed: CircleCheckIcon,
+    failed: CircleExclamationIcon,
+    draft: FileIcon,
+    aborted: CircleStopIcon,
+    running: CirclePlayIcon,
+};
+
+const block = cn('qp-query-status-icon');
+
+export const QueryStatusIcon: FC<Props> = ({status, className}) => {
+    if (ProgressQueryStatuses.includes(status)) {
+        return <Spin size="xs" />;
+    }
+
+    const statusIcon = STATUS_ICONS[status];
+    if (!statusIcon) return <>{status}</>;
+
+    return <Icon data={statusIcon} size={16} className={block({[status]: true}, className)} />;
+};

package/src/components/QueryStatusIcon/index.ts

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

package/src/components/RowLink/RowLink.scss

@@ -0,0 +1,8 @@
+.qp-row-link {
+  width: 100%;
+  padding: 4px 16px;
+  box-sizing: border-box;
+  text-decoration: none;
+  color: var(--g-color-text-primary);
+  cursor: pointer;
+}

package/src/components/RowLink/RowLink.tsx

@@ -0,0 +1,23 @@
+import React, {FC, ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+import './RowLink.scss';
+
+const block = cn('qp-row-link');
+
+export type RowLinkProps = {
+    href?: string;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+
+export const RowLink: FC<RowLinkProps> = ({href, disabled, className, children}) => {
+    const isLink = Boolean(href) && !disabled;
+    const Wrap = isLink ? 'a' : 'div';
+
+    return (
+        <Wrap href={isLink ? href : undefined} className={block(null, className)}>
+            {children}
+        </Wrap>
+    );
+};

package/src/components/RowLink/index.ts

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

package/src/components/SearchRowLayout/SearchRowLayout.scss

@@ -0,0 +1,18 @@
+$search-row-height: 110px;
+$search-row-vertical-padding: 4px;
+$search-row-header-height: 20px;
+$search-row-gap: 8px;
+
+.qp-search-row-layout {
+  height: $search-row-height;
+
+  &__content {
+    height: 100%;
+  }
+
+  &__monaco {
+    height: $search-row-height - 2 * $search-row-vertical-padding - $search-row-header-height -
+      $search-row-gap;
+    border: 1px solid var(--g-color-line-generic-accent);
+  }
+}