@gravity-ui/querieskit 1.1.0 → 1.3.0

package/src/modules/QueryStatistics/i18n/index.ts

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

package/src/modules/QueryStatistics/i18n/ru.json

@@ -0,0 +1,16 @@
+{
+  "action_collapse-all": "Свернуть все",
+  "action_collapse-group": "Свернуть группу",
+  "action_expand-all": "Развернуть все",
+  "action_expand-group": "Развернуть группу",
+  "field_avg": "Среднее",
+  "field_count": "Количество",
+  "field_description": "Описание",
+  "field_last": "Последнее",
+  "field_max": "Максимум",
+  "field_metric": "Метрика",
+  "field_min": "Минимум",
+  "field_search": "Поиск",
+  "field_sum": "Сумма",
+  "field_unit": "Единица измерения"
+}

package/src/modules/QueryStatistics/index.ts

@@ -0,0 +1,13 @@
+export {QueryStatistics} from './QueryStatistics';
+export type {
+    QueryStatisticsColumn,
+    QueryStatisticsColumnConfig,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsExtraColumnContext,
+    QueryStatisticsFormatValueContext,
+    QueryStatisticsGroup,
+    QueryStatisticsItem,
+    QueryStatisticsMetric,
+    QueryStatisticsProps,
+    QueryStatisticsValues,
+} from '../../types/queryStatistics';

package/src/modules/QueryStatistics/internal/MetricCell.scss

@@ -0,0 +1,12 @@
+.qp-query-statistics-metric-cell {
+    &__indent { display: inline-flex; flex-shrink: 0; }
+    &__indent-step { width: var(--g-spacing-10); flex-shrink: 0; }
+    &__row-button,
+    &__row-icon,
+    &__info-icon { flex-shrink: 0; }
+    &__name { min-width: 0; white-space: nowrap; }
+    &__info-icon { margin-inline-start: var(--g-spacing-1); color: var(--g-color-text-secondary); vertical-align: text-bottom; }
+    &__tooltip { display: grid; gap: var(--g-spacing-2); max-width: 24rem; }
+    &__tooltip-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-spacing-2); }
+    &__tooltip-label { color: var(--g-color-text-secondary); }
+}

package/src/modules/QueryStatistics/internal/MetricCell.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+    ChartLine,
+    ChevronDown,
+    ChevronRight,
+    CircleQuestion,
+    FolderArrowRight,
+} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Tooltip} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import type {QueryStatisticsItem} from '../../../types/queryStatistics';
+import {type QueryStatisticsRow, isQueryStatisticsGroup} from '../helpers';
+import i18n from '../i18n';
+
+import './MetricCell.scss';
+
+const block = cn('qp-query-statistics-metric-cell');
+
+function MetricInfo({item}: {item: QueryStatisticsItem}) {
+    const hasInfo = Boolean(item.description || item.unit);
+    const content = (
+        <span className={block('name')} tabIndex={hasInfo ? 0 : undefined}>
+            {item.name}
+            {hasInfo && <Icon data={CircleQuestion} size={14} className={block('info-icon')} />}
+        </span>
+    );
+
+    if (!hasInfo) return content;
+
+    return <Tooltip content={<MetricTooltip item={item} />}>{content}</Tooltip>;
+}
+
+function MetricTooltip({item}: {item: QueryStatisticsItem}) {
+    return (
+        <span className={block('tooltip')}>
+            {item.description && (
+                <span className={block('tooltip-row')}>
+                    <span className={block('tooltip-label')}>{i18n('field_description')}</span>
+                    <span>{item.description}</span>
+                </span>
+            )}
+            {item.unit && (
+                <span className={block('tooltip-row')}>
+                    <span className={block('tooltip-label')}>{i18n('field_unit')}</span>
+                    <span>{item.unit}</span>
+                </span>
+            )}
+        </span>
+    );
+}
+
+function Indent({level}: {level: number}) {
+    if (!level) return null;
+    return (
+        <span className={block('indent')} aria-hidden="true">
+            {Array.from({length: level}, (_, index) => (
+                <span className={block('indent-step')} key={index} />
+            ))}
+        </span>
+    );
+}
+
+export type MetricCellProps = {
+    row: QueryStatisticsRow;
+    expanded: boolean;
+    onToggle: (id: string) => void;
+};
+
+export function MetricCell({row, expanded, onToggle}: MetricCellProps) {
+    const {item, level} = row;
+    const isGroup = isQueryStatisticsGroup(item);
+
+    return (
+        <Flex alignItems="center" gap={2} className={block()}>
+            <Indent level={level} />
+            {isGroup ? (
+                <React.Fragment>
+                    <Button
+                        view="flat"
+                        size="xs"
+                        aria-label={
+                            expanded ? i18n('action_collapse-group') : i18n('action_expand-group')
+                        }
+                        aria-expanded={expanded}
+                        onClick={() => onToggle(item.id)}
+                        className={block('row-button')}
+                    >
+                        <Icon data={expanded ? ChevronDown : ChevronRight} size={16} />
+                    </Button>
+                    <Icon data={FolderArrowRight} size={16} className={block('row-icon')} />
+                </React.Fragment>
+            ) : (
+                <Icon data={ChartLine} size={16} className={block('row-icon')} />
+            )}
+            <MetricInfo item={item} />
+        </Flex>
+    );
+}

package/src/modules/QueryStatistics/internal/QueryStatisticsTable.scss

@@ -0,0 +1,8 @@
+.qp-query-statistics-table { max-width: 100%; overflow-x: auto;
+    &_fixed { overflow: visible; }
+    .qp-data-table { min-width: 55rem; }
+    &__metric-column,
+    &__value-column { border: 0; border-block-end: 1px solid var(--g-color-line-generic); }
+    &__metric-column { min-width: 19rem; }
+    &__value-column { min-width: 8rem; }
+}

package/src/modules/QueryStatistics/internal/QueryStatisticsTable.tsx

@@ -0,0 +1,135 @@
+import React, {useMemo} from 'react';
+import BaseDataTable, {type Column} from '@gravity-ui/react-data-table';
+import {DataTable} from '../../../components';
+import type {
+    QueryStatisticsColumn,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsFormatValueContext,
+} from '../../../types/queryStatistics';
+import {
+    type QueryStatisticsRow,
+    getQueryStatisticsValue,
+    isQueryStatisticsGroup,
+    isQueryStatisticsMetric,
+} from '../helpers';
+import i18n from '../i18n';
+import {MetricCell} from './MetricCell';
+
+import './QueryStatisticsTable.scss';
+
+const NO_VALUE = '—';
+const block = 'qp-query-statistics-table';
+const COLUMN_TITLES: Record<QueryStatisticsColumn, () => string> = {
+    min: () => i18n('field_min'),
+    max: () => i18n('field_max'),
+    avg: () => i18n('field_avg'),
+    sum: () => i18n('field_sum'),
+    count: () => i18n('field_count'),
+    last: () => i18n('field_last'),
+};
+
+export type QueryStatisticsTableProps = {
+    rows: QueryStatisticsRow[];
+    visibleColumns: QueryStatisticsColumn[];
+    columnConfig?: Partial<
+        Record<QueryStatisticsColumn, {title?: React.ReactNode; width?: string}>
+    >;
+    extraColumns?: QueryStatisticsExtraColumn[];
+    expandedIds: Set<string>;
+    fixedHeader: boolean;
+    virtual: boolean;
+    formatValue?: (
+        value: number | undefined,
+        context: QueryStatisticsFormatValueContext,
+    ) => React.ReactNode;
+    isSearching: boolean;
+    onToggleGroup: (id: string) => void;
+};
+
+export function QueryStatisticsTable({
+    rows,
+    visibleColumns,
+    columnConfig,
+    extraColumns,
+    expandedIds,
+    fixedHeader,
+    virtual,
+    formatValue,
+    isSearching,
+    onToggleGroup,
+}: QueryStatisticsTableProps) {
+    const numberFormatter = useMemo(
+        () => new Intl.NumberFormat(undefined, {maximumFractionDigits: 6}),
+        [],
+    );
+    const columns = useMemo<Array<Column<QueryStatisticsRow>>>(() => {
+        const metricColumn: Column<QueryStatisticsRow> = {
+            name: 'metric',
+            header: i18n('field_metric'),
+            className: `${block}__metric-column`,
+            width: '40%',
+            sortable: false,
+            render: ({row}) => (
+                <MetricCell
+                    row={row}
+                    expanded={isQueryStatisticsGroup(row.item) && expandedIds.has(row.item.id)}
+                    onToggle={onToggleGroup}
+                />
+            ),
+        };
+        const valueColumns = visibleColumns.map<Column<QueryStatisticsRow>>((column) => ({
+            name: column,
+            header: columnConfig?.[column]?.title ?? COLUMN_TITLES[column](),
+            className: `${block}__value-column`,
+            width: columnConfig?.[column]?.width ?? '12%',
+            align: BaseDataTable.RIGHT,
+            sortable: false,
+            render: ({row}) => {
+                if (!isQueryStatisticsMetric(row.item)) return NO_VALUE;
+                const value = getQueryStatisticsValue(row.item, column);
+                if (formatValue) return formatValue(value, {column, item: row.item});
+                return value === undefined || !Number.isFinite(value)
+                    ? NO_VALUE
+                    : numberFormatter.format(value);
+            },
+        }));
+        const customColumns = (extraColumns ?? []).map<Column<QueryStatisticsRow>>((column) => ({
+            name: column.id,
+            header: column.title,
+            width: column.width ?? '12%',
+            className: `${block}__value-column`,
+            sortable: false,
+            render: ({row}) => column.render({item: row.item, level: row.level}),
+        }));
+        return [metricColumn, ...valueColumns, ...customColumns];
+    }, [
+        columnConfig,
+        expandedIds,
+        extraColumns,
+        formatValue,
+        numberFormatter,
+        onToggleGroup,
+        visibleColumns,
+    ]);
+
+    return (
+        <div className={block + (fixedHeader ? ` ${block}_fixed` : '')}>
+            <DataTable<QueryStatisticsRow>
+                columns={columns}
+                data={rows}
+                loaded
+                emptyVariant={isSearching ? 'nothing-found' : 'no-data'}
+                rowKey={(row) => row.item.id}
+                settings={{
+                    displayIndices: false,
+                    sortable: false,
+                    stripedRows: false,
+                    dynamicRender: virtual,
+                    dynamicRenderType: 'uniform',
+                    stickyHead: fixedHeader ? BaseDataTable.MOVING : undefined,
+                    syncHeadOnResize: fixedHeader,
+                }}
+            />
+        </div>
+    );
+}

package/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.scss

@@ -0,0 +1 @@
+.qp-query-statistics-toolbar { margin-block-end: var(--g-spacing-4); max-width: 34rem; }

package/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {ChevronsDown, ChevronsUp} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import {SearchWithButtons} from '../../../components';
+import i18n from '../i18n';
+
+import './QueryStatisticsToolbar.scss';
+
+const block = cn('qp-query-statistics-toolbar');
+
+export type QueryStatisticsToolbarProps = {
+    search: string;
+    hasGroups: boolean;
+    onSearchUpdate: (value: string) => void;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+};
+
+export function QueryStatisticsToolbar({
+    search,
+    hasGroups,
+    onSearchUpdate,
+    onExpandAll,
+    onCollapseAll,
+}: QueryStatisticsToolbarProps) {
+    const buttons = [
+        <Button
+            key="expand"
+            size="m"
+            aria-label={i18n('action_expand-all')}
+            title={i18n('action_expand-all')}
+            disabled={!hasGroups}
+            onClick={onExpandAll}
+        >
+            <Icon data={ChevronsDown} size={16} />
+        </Button>,
+        <Button
+            key="collapse"
+            size="m"
+            aria-label={i18n('action_collapse-all')}
+            title={i18n('action_collapse-all')}
+            disabled={!hasGroups}
+            onClick={onCollapseAll}
+        >
+            <Icon data={ChevronsUp} size={16} />
+        </Button>,
+    ];
+
+    return (
+        <SearchWithButtons
+            value={search}
+            placeholder={i18n('field_search')}
+            hasClear
+            onUpdate={onSearchUpdate}
+            endButtons={buttons}
+            className={block()}
+        />
+    );
+}

package/src/modules/QueryStatistics/story/QueryStatistics.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import type {QueryStatisticsItem} from '../../../types/queryStatistics';
+import {QueryStatistics} from '../QueryStatistics';
+
+const data: QueryStatisticsItem[] = [
+    {
+        id: 'input',
+        name: 'Input',
+        children: [
+            {
+                id: 'input.rows',
+                name: 'Rows',
+                description: 'Number of rows read from the input',
+                values: {min: 0, max: 1600, sum: 4200, count: 4, last: 1400},
+            },
+            {
+                id: 'input.weight',
+                name: 'Data weight',
+                unit: 'bytes',
+                values: {min: 1024, max: 1048576, avg: 120000.25, sum: 2097152, count: 4},
+            },
+        ],
+    },
+];
+
+const largeData: QueryStatisticsItem[] = Array.from({length: 12}, (_group, groupIndex) => ({
+    id: `group-${groupIndex}`,
+    name: `Group ${groupIndex + 1} with a deliberately long name for horizontal scrolling`,
+    children: Array.from({length: 25}, (_metric, metricIndex) => ({
+        id: `group-${groupIndex}.metric-${metricIndex}`,
+        name: `Metric ${metricIndex + 1}`,
+        values: {
+            min: metricIndex,
+            max: metricIndex * 10,
+            sum: metricIndex * 100,
+            count: metricIndex + 1,
+            last: metricIndex * 5,
+        },
+    })),
+}));
+
+const meta: Meta<typeof QueryStatistics> = {
+    title: 'Modules/QueryStatistics',
+    component: QueryStatistics,
+    tags: ['autodocs'],
+    args: {data},
+};
+
+export default meta;
+type Story = StoryObj<typeof QueryStatistics>;
+
+export const Default: Story = {};
+
+export const ConfiguredColumns: Story = {
+    args: {
+        visibleColumns: ['last', 'avg', 'count'],
+        columnConfig: {last: {title: 'Latest value', width: '20%'}},
+        extraColumns: [{id: 'unit', title: 'Unit', render: ({item}) => item.unit ?? '—'}],
+    },
+};
+
+export const VirtualAndFixed: Story = {
+    args: {data: largeData, virtual: true, fixedHeader: true},
+    render: (args) => (
+        <div style={{height: 360, maxWidth: 1100, overflow: 'auto'}}>
+            <QueryStatistics {...args} />
+        </div>
+    ),
+};

package/src/modules/RowsList/RowsList.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 import {
-    BaseHistoryRow,
-    QueryHistoryComparisonConfig,
-    QueryHistoryEditingConfig,
-    QueryHistoryItem,
-    QueryHistoryRowAction,
-    QueryHistoryRowRenderData,
-    QueryHistoryRowVariant,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../types/history';
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListItem,
+    QueryListRow,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListRowVariant,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
 import {EmptyContent, LazyList} from '../../components';
 import {prepareRowData} from './helpers/prepareRowData';
 import {SEARCH_ROW_HEIGHT} from '../../constants/row';
@@ -17,21 +17,21 @@ import './RowsList.scss';
 
 const block = cn('qp-rows-list');
 
-export type RowsListProps<T extends BaseHistoryRow> = {
-    items: QueryHistoryItem<T>[];
+export type RowsListProps<T extends QueryListRow> = {
+    items: QueryListItem<T>[];
     selectedRowId?: T['id'];
-    rowVariant?: QueryHistoryRowVariant;
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    editing?: QueryHistoryEditingConfig<T>;
-    comparison?: QueryHistoryComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
-    renderRow: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;
+    rowVariant?: QueryListRowVariant;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
+    renderRow: (data: QueryListRowRenderData<T>) => React.ReactNode;
     showFiltersHint?: boolean;
     className?: string;
-    onItemClick?: (item: QueryHistoryItem<T>, index: number) => void;
+    onItemClick?: (item: QueryListItem<T>, index: number) => void;
 };
 
-export const RowsList = <T extends BaseHistoryRow>({
+export const RowsList = <T extends QueryListRow>({
     items,
     selectedRowId,
     rowVariant = 'default',
@@ -44,10 +44,14 @@ export const RowsList = <T extends BaseHistoryRow>({
     className,
     onItemClick,
 }: RowsListProps<T>) => {
-    const getItemHeight = (item: QueryHistoryItem<T>) =>
+    const getItemHeight = (item: QueryListItem<T>) =>
         rowVariant === 'search' && !('header' in item) ? SEARCH_ROW_HEIGHT : item.height;
+    const selectedItemIndex =
+        selectedRowId === undefined
+            ? undefined
+            : items.findIndex((item) => !('header' in item) && item.id === selectedRowId);
 
-    const handleItemClick = (item: QueryHistoryItem<T>, index: number) => {
+    const handleItemClick = (item: QueryListItem<T>, index: number) => {
         if ('header' in item || !comparison?.enabled) {
             onItemClick?.(item, index);
             return;
@@ -67,7 +71,7 @@ export const RowsList = <T extends BaseHistoryRow>({
     }
 
     return (
-        <LazyList<QueryHistoryItem<T>>
+        <LazyList<QueryListItem<T>>
             className={block(null, className)}
             items={items}
             itemHeight={getItemHeight}
@@ -85,7 +89,7 @@ export const RowsList = <T extends BaseHistoryRow>({
                     }),
                 )
             }
-            selectedItemIndex={selectedRowId}
+            selectedItemIndex={selectedItemIndex}
             onItemClick={handleItemClick}
         />
     );

package/src/modules/RowsList/helpers/prepareRowData.ts

@@ -1,26 +1,26 @@
 import {
-    BaseHistoryRow,
-    QueryHistoryComparisonConfig,
-    QueryHistoryEditingConfig,
-    QueryHistoryItem,
-    QueryHistoryRowAction,
-    QueryHistoryRowRenderData,
-    QueryHistoryRowVariant,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../../types/history';
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListItem,
+    QueryListRow,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListRowVariant,
+    QueryListVisibleFieldsConfig,
+} from '../../../types/queryList';
 
-type Props<T extends BaseHistoryRow> = {
-    item: QueryHistoryItem<T>;
+type Props<T extends QueryListRow> = {
+    item: QueryListItem<T>;
     isActive: boolean;
     index: number;
-    variant: QueryHistoryRowVariant;
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    editing?: QueryHistoryEditingConfig<T>;
-    comparison?: QueryHistoryComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
+    variant: QueryListRowVariant;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
 };
 
-export const prepareRowData = <T extends BaseHistoryRow>({
+export const prepareRowData = <T extends QueryListRow>({
     item,
     isActive,
     index,
@@ -29,7 +29,7 @@ export const prepareRowData = <T extends BaseHistoryRow>({
     editing,
     comparison,
     getRowActions,
-}: Props<T>): QueryHistoryRowRenderData<T> => {
+}: Props<T>): QueryListRowRenderData<T> => {
     const isRow = !('header' in item);
     const actions = isRow && getRowActions ? getRowActions(item) : undefined;
     const editingData =

package/src/modules/SavedQueryRow/SavedQueryRow.scss

@@ -0,0 +1,20 @@
+.qp-saved-query-row {
+  height: 100%;
+
+  &_compared {
+    background-color: var(--g-color-base-utility-light);
+  }
+
+  &__content {
+    min-width: 0;
+  }
+
+  &__header {
+    height: 20px;
+    min-width: 0;
+  }
+
+  &__metadata {
+    min-width: 0;
+  }
+}

package/src/modules/SavedQueryRow/SavedQueryRow.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Avatar, Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {EditableRowTitle, RowActionsMenu, RowLink} from '../../components';
+import {formatDateCanonical} from '../../helpers/time';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {SavedQuery} from '../../types/savedQueries';
+import './SavedQueryRow.scss';
+
+const block = cn('qp-saved-query-row');
+
+export type SavedQueryRowProps<T extends SavedQuery = SavedQuery> = {
+    item: T;
+    renderAuthor?: (item: T) => React.ReactNode;
+} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
+
+export const SavedQueryRow = <T extends SavedQuery>({
+    item,
+    actions,
+    isActive,
+    comparison,
+    editing,
+    visibleFields,
+    renderAuthor,
+}: SavedQueryRowProps<T>) => {
+    const {author, engine, href, savedAt} = item;
+    const isEditing = Boolean(editing?.enabled);
+    const isComparisonMode = Boolean(comparison?.enabled);
+    const isChecked = Boolean(comparison?.checked);
+    const showMenu = isActive && Boolean(actions?.length) && !isComparisonMode;
+    const isFieldVisible = (field: string) =>
+        visibleFields === undefined || (visibleFields.value as string[]).includes(field);
+    const authorContent =
+        renderAuthor?.(item) ??
+        (author ? <Avatar size="3xs" text={author} title={author} /> : null);
+
+    return (
+        <RowLink
+            href={href}
+            disabled={isEditing || isComparisonMode}
+            className={block({compared: isChecked})}
+        >
+            <Flex direction="column" gap={1} className={block('content')}>
+                <Flex justifyContent="space-between" className={block('header')}>
+                    <EditableRowTitle item={item} editing={editing} />
+                    {showMenu && <RowActionsMenu item={item} actions={actions} />}
+                </Flex>
+                <Flex gap={2} alignItems="center" className={block('metadata')}>
+                    {isFieldVisible('savedAt') && savedAt && (
+                        <Text color="complementary">{formatDateCanonical(savedAt)}</Text>
+                    )}
+                    {isFieldVisible('engine') && engine && (
+                        <Text color="complementary">{engine}</Text>
+                    )}
+                    {isFieldVisible('author') && authorContent}
+                </Flex>
+            </Flex>
+        </RowLink>
+    );
+};

package/src/modules/SavedQueryRow/index.ts

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

package/src/modules/SavedQuerySearchRow/SavedQuerySearchRow.scss

@@ -0,0 +1,15 @@
+.qp-saved-query-search-row {
+  &__header {
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__fixed-metadata {
+    flex-shrink: 0;
+  }
+}