@gravity-ui/querieskit 1.2.0 → 1.3.0

package/src/widgets/QueryResults/QueryResults.tsx

@@ -0,0 +1,121 @@
+import React, {useCallback, useState} from 'react';
+import {Flex, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {QueryResultsTable} from '../../components';
+import type {
+    QueryResultColumn,
+    QueryResultFormatterSettings,
+    QueryResultsSchemaRenderContext,
+    QueryResultsView,
+} from '../../types/queryResults';
+import {QueryResultsSchema} from './internal/QueryResultsSchema';
+import i18n from './i18n';
+
+import './QueryResults.scss';
+
+const block = cn('qp-query-results');
+
+export type QueryResultsProps<TRow extends Record<string, unknown>> = {
+    columns: Array<QueryResultColumn<TRow>>;
+    /** Values use the YQL wire representation consumed by @gravity-ui/unipika. */
+    rows: TRow[];
+    totalRows?: number;
+    loading?: boolean;
+    errorContent?: React.ReactNode;
+    rowKey?: (row: TRow, index: number) => string | number;
+    formatterSettings?: QueryResultFormatterSettings;
+    maxVisibleLines?: number;
+    title?: React.ReactNode;
+    toolbarContent?: React.ReactNode;
+    actions?: React.ReactNode;
+    view?: QueryResultsView;
+    defaultView?: QueryResultsView;
+    onViewChange?: (view: QueryResultsView) => void;
+    renderSchema?: (context: QueryResultsSchemaRenderContext<TRow>) => React.ReactNode;
+    className?: string;
+};
+
+export function QueryResults<TRow extends Record<string, unknown>>({
+    columns,
+    rows,
+    totalRows = rows.length,
+    loading,
+    errorContent,
+    rowKey,
+    formatterSettings,
+    maxVisibleLines,
+    title,
+    toolbarContent,
+    actions,
+    view: controlledView,
+    defaultView = 'result',
+    onViewChange,
+    renderSchema,
+    className,
+}: QueryResultsProps<TRow>) {
+    const [uncontrolledView, setUncontrolledView] = useState<QueryResultsView>(defaultView);
+    const view = controlledView ?? uncontrolledView;
+
+    const handleViewChange = useCallback(
+        (nextView: string) => {
+            const next = nextView as QueryResultsView;
+            if (controlledView === undefined) {
+                setUncontrolledView(next);
+            }
+            onViewChange?.(next);
+        },
+        [controlledView, onViewChange],
+    );
+
+    const schema = renderSchema?.({columns});
+    let content: React.ReactNode;
+
+    if (errorContent) {
+        content = <Text color="danger">{errorContent}</Text>;
+    } else if (view === 'schema') {
+        content = schema ?? <QueryResultsSchema columns={columns} loading={loading} />;
+    } else {
+        content = (
+            <QueryResultsTable
+                columns={columns}
+                rows={rows}
+                loading={loading}
+                rowKey={rowKey}
+                formatterSettings={formatterSettings}
+                maxVisibleLines={maxVisibleLines}
+            />
+        );
+    }
+
+    return (
+        <Flex direction="column" gap={2} className={block(null, className)}>
+            {title && <Text variant="subheader-1">{title}</Text>}
+            <Flex gap={2} alignItems="center" className={block('toolbar')}>
+                <SegmentedRadioGroup
+                    value={view}
+                    onUpdate={handleViewChange}
+                    width="auto"
+                    size="s"
+                    className={block('views')}
+                >
+                    <SegmentedRadioGroup.Option value="result">
+                        {i18n('tab_result')}
+                    </SegmentedRadioGroup.Option>
+                    <SegmentedRadioGroup.Option value="schema">
+                        {i18n('tab_schema')}
+                    </SegmentedRadioGroup.Option>
+                </SegmentedRadioGroup>
+                <Text color="secondary" className={block('rows-info')}>
+                    {i18n('context_rows-info', {
+                        count: totalRows,
+                        visible: rows.length,
+                        total: totalRows,
+                    })}
+                </Text>
+                {toolbarContent && <div className={block('toolbar-content')}>{toolbarContent}</div>}
+                {actions && <div className={block('actions')}>{actions}</div>}
+            </Flex>
+            <div className={block('content')}>{content}</div>
+        </Flex>
+    );
+}

package/src/widgets/QueryResults/i18n/dicts.ts

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

package/src/widgets/QueryResults/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "tab_result": "Full result",
+  "tab_schema": "Schema",
+  "field_name": "Name",
+  "field_type": "Type",
+  "context_rows-info": {
+    "one": "{{visible}} of {{total}} row",
+    "other": "{{visible}} of {{total}} rows"
+  }
+}

package/src/widgets/QueryResults/i18n/index.ts

@@ -0,0 +1,4 @@
+import {addI18Keysets} from '../../../i18n';
+import dicts from './dicts';
+
+export default addI18Keysets('qp:query-results', dicts);

package/src/widgets/QueryResults/i18n/ru.json

@@ -0,0 +1,12 @@
+{
+  "tab_result": "Результат",
+  "tab_schema": "Схема",
+  "field_name": "Название",
+  "field_type": "Тип",
+  "context_rows-info": {
+    "one": "{{visible}} из {{total}} строки",
+    "few": "{{visible}} из {{total}} строк",
+    "many": "{{visible}} из {{total}} строк",
+    "other": "{{visible}} из {{total}} строки"
+  }
+}

package/src/widgets/QueryResults/index.ts

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

package/src/widgets/QueryResults/internal/QueryResultsSchema.tsx

@@ -0,0 +1,41 @@
+import React, {useMemo} from 'react';
+import type {Column} from '@gravity-ui/react-data-table';
+import {DataTable, formatQueryResultType} from '../../../components';
+import type {QueryResultColumn} from '../../../types/queryResults';
+import i18n from '../i18n';
+
+export type QueryResultsSchemaProps<TRow extends Record<string, unknown>> = {
+    columns: Array<QueryResultColumn<TRow>>;
+    loading?: boolean;
+};
+
+export function QueryResultsSchema<TRow extends Record<string, unknown>>({
+    columns,
+    loading,
+}: QueryResultsSchemaProps<TRow>) {
+    const tableColumns = useMemo<Array<Column<QueryResultColumn<TRow>>>>(
+        () => [
+            {
+                name: 'name',
+                header: i18n('field_name'),
+                render: ({row}) => row.header ?? row.name,
+            },
+            {
+                name: 'type',
+                header: i18n('field_type'),
+                render: ({row}) => <code>{formatQueryResultType(row.type)}</code>,
+            },
+        ],
+        [],
+    );
+
+    return (
+        <DataTable<QueryResultColumn<TRow>>
+            columns={tableColumns}
+            data={columns}
+            loading={loading}
+            loaded={!loading}
+            settings={{displayIndices: false, sortable: false, stripedRows: true}}
+        />
+    );
+}

package/src/widgets/index.ts

@@ -5,6 +5,8 @@ export type {SavedQueriesProps} from './SavedQueries';
 export {DashboardCharts} from './DashboardCharts';
 export {TutorialsHistory} from './TutorialsHistory';
 export type {TutorialsHistoryProps} from './TutorialsHistory';
+export {QueryResults} from './QueryResults';
+export type {QueryResultsProps} from './QueryResults';
 export {
     QueriesNavigation,
     createTableDetailConfig,