@gravity-ui/querieskit 1.1.0 → 1.3.0

package/src/components/ErrorTree/internal/IntermediateMessages.tsx

@@ -0,0 +1,127 @@
+import React, {useCallback, useMemo, useState} from 'react';
+import {Button, Disclosure, Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import type {ErrorTreeItem, ErrorTreeProps} from '../../../types/errorTree';
+import {getIntermediateChain} from '../helpers/getIntermediateChain';
+import i18n from '../i18n';
+import {ErrorTreeNode} from './ErrorTreeNode';
+
+import './IntermediateMessages.scss';
+
+const block = cn('qp-error-tree');
+
+type IntermediateMessagesProps = Pick<
+    ErrorTreeProps,
+    'defaultExpanded' | 'defaultInfoExpanded' | 'renderAttributes' | 'onPositionClick'
+> & {
+    item: ErrorTreeItem;
+    level: number;
+};
+
+export function IntermediateMessages({
+    item,
+    level,
+    defaultExpanded = true,
+    defaultInfoExpanded = false,
+    renderAttributes,
+    onPositionClick,
+}: IntermediateMessagesProps) {
+    const {hiddenItems, terminalItem} = useMemo(() => getIntermediateChain(item), [item]);
+    const nodeDefaultExpanded =
+        terminalItem.severity === 'info' ? defaultInfoExpanded : defaultExpanded;
+    const [revealedParents, setRevealedParents] = useState(0);
+    const [expanded, setExpanded] = useState(nodeDefaultExpanded);
+    const [showAllVersion, setShowAllVersion] = useState(0);
+    const isCompact = hiddenItems.length > 1;
+
+    const renderChain = useCallback(
+        (itemIndex: number, className?: string): React.ReactNode => {
+            const currentItem =
+                itemIndex < hiddenItems.length ? hiddenItems[itemIndex] : terminalItem;
+            const hasHiddenParent = itemIndex > 0;
+            const hasNextItem = itemIndex < hiddenItems.length;
+            const currentDefaultExpanded =
+                currentItem.severity === 'info' ? defaultInfoExpanded : defaultExpanded;
+
+            return (
+                <ErrorTreeNode
+                    key={`${currentItem.id}-${showAllVersion}`}
+                    className={className}
+                    item={currentItem}
+                    level={level + itemIndex}
+                    defaultNodeExpanded={showAllVersion > 0 || currentDefaultExpanded}
+                    defaultExpanded={defaultExpanded}
+                    defaultInfoExpanded={defaultInfoExpanded}
+                    renderAttributes={renderAttributes}
+                    onPositionClick={onPositionClick}
+                    onShowParent={
+                        hasHiddenParent ? () => setRevealedParents((value) => value + 1) : undefined
+                    }
+                    renderChildren={
+                        hasNextItem
+                            ? (childClassName) => renderChain(itemIndex + 1, childClassName)
+                            : undefined
+                    }
+                />
+            );
+        },
+        [
+            defaultExpanded,
+            defaultInfoExpanded,
+            hiddenItems,
+            level,
+            onPositionClick,
+            renderAttributes,
+            showAllVersion,
+            terminalItem,
+        ],
+    );
+
+    if (!isCompact) {
+        return (
+            <ErrorTreeNode
+                item={item}
+                level={level}
+                defaultNodeExpanded={
+                    item.severity === 'info' ? defaultInfoExpanded : defaultExpanded
+                }
+                defaultExpanded={defaultExpanded}
+                defaultInfoExpanded={defaultInfoExpanded}
+                renderAttributes={renderAttributes}
+                onPositionClick={onPositionClick}
+            />
+        );
+    }
+
+    const firstVisibleItemIndex = Math.max(hiddenItems.length - revealedParents, 0);
+
+    return (
+        <Disclosure expanded={expanded} onUpdate={setExpanded} className={block('intermediate')}>
+            <Disclosure.Summary>
+                {(_props, defaultButton) => (
+                    <Flex alignItems="center" gap={2} className={block('intermediate-summary')}>
+                        {defaultButton}
+                        <Text color="secondary">
+                            {i18n('context_intermediate-messages', {count: hiddenItems.length})}
+                        </Text>
+                        <Button
+                            view="flat-secondary"
+                            size="s"
+                            onClick={() => {
+                                setExpanded(true);
+                                setRevealedParents(hiddenItems.length);
+                                setShowAllVersion((version) => version + 1);
+                            }}
+                        >
+                            {i18n('action_show-all')}
+                        </Button>
+                    </Flex>
+                )}
+            </Disclosure.Summary>
+            <Disclosure.Details>
+                {renderChain(firstVisibleItemIndex, block('intermediate-details'))}
+            </Disclosure.Details>
+        </Disclosure>
+    );
+}

package/src/components/HistoryFilter/HistoryFilter.tsx

@@ -3,7 +3,7 @@ import {Button, Flex, Icon, Popup} from '@gravity-ui/uikit';
 import FunnelIcon from '@gravity-ui/icons/svgs/funnel.svg';
 import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
 import {useToggle} from '../../helpers/useToggle';
-import {QueryHistoryFilterConfig} from '../../types/history';
+import {QueryListFilterConfig} from '../../types/queryList';
 import cn from 'bem-cn-lite';
 import {SimpleForm} from '../SimpleForm';
 import i18n from './i18n';
@@ -11,7 +11,7 @@ import './HistoryFilter.scss';
 
 const block = cn('qp-history-filter');
 
-export const HistoryFilter: FC<QueryHistoryFilterConfig> = ({
+export const HistoryFilter: FC<QueryListFilterConfig> = ({
     fields = [],
     values,
     initialValues,

package/src/components/Icons/LogoCPlusPlus.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const LogoCPlusPlus = () => {
+    return (
+        <svg
+            width="15"
+            height="13"
+            viewBox="0 0 15 13"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M5.40812 7.43123V4.93123C5.40812 4.51702 5.74391 4.18123 6.15812 4.18123C6.57234 4.18123 6.90812 4.51702 6.90812 4.93123V7.43123C6.90812 7.84545 6.57234 8.18123 6.15812 8.18123C5.74391 8.18123 5.40812 7.84545 5.40812 7.43123Z"
+                fill="black"
+            />
+            <path
+                d="M4.90812 5.43123H7.40812C7.82234 5.43123 8.15812 5.76702 8.15812 6.18123C8.15812 6.59545 7.82234 6.93123 7.40812 6.93123H4.90812C4.49391 6.93123 4.15812 6.59545 4.15812 6.18123C4.15812 5.76702 4.49391 5.43123 4.90812 5.43123Z"
+                fill="black"
+            />
+            <path
+                d="M11.0146 8.18123V4.18123C11.0146 3.76702 11.3504 3.43123 11.7646 3.43123C12.1788 3.43123 12.5146 3.76702 12.5146 4.18123V8.18123C12.5146 8.59545 12.1788 8.93123 11.7646 8.93123C11.3504 8.93123 11.0146 8.59545 11.0146 8.18123Z"
+                fill="black"
+            />
+            <path
+                d="M9.76458 5.43123L13.7646 5.43123C14.1788 5.43123 14.5146 5.76702 14.5146 6.18123C14.5146 6.59545 14.1788 6.93123 13.7646 6.93123L9.76458 6.93123C9.35036 6.93123 9.01458 6.59545 9.01458 6.18123C9.01458 5.76702 9.35036 5.43123 9.76458 5.43123Z"
+                fill="black"
+            />
+            <path
+                d="M9.09349 2.44504C8.38789 1.91768 7.54953 1.59693 6.67212 1.51861C5.79464 1.44033 4.91236 1.60751 4.12448 2.00167C3.33664 2.39583 2.67372 3.00143 2.21021 3.75057C1.74675 4.49969 1.50109 5.36305 1.50001 6.24394C1.49894 7.12491 1.74267 7.98906 2.20437 8.73935C2.66606 9.4896 3.32736 10.0969 4.11423 10.4929C4.90112 10.889 5.78281 11.0585 6.66046 10.9823C7.53807 10.9062 8.37721 10.5872 9.08412 10.0616C9.41651 9.81441 9.88663 9.88339 10.1338 10.2158C10.3809 10.5482 10.3115 11.018 9.9792 11.2652C9.04903 11.9568 7.9447 12.376 6.7899 12.4762C5.63512 12.5764 4.47526 12.3534 3.4399 11.8323C2.40454 11.3112 1.53425 10.5126 0.92677 9.52547C0.319272 8.53824 -0.00140641 7.40122 4.63663e-06 6.24205C0.00144048 5.08294 0.324902 3.94699 0.934769 2.96129C1.54467 1.97554 2.41702 1.17894 3.45369 0.660306C4.49033 0.141726 5.65084 -0.0782676 6.80537 0.0247355C7.95989 0.127767 9.06304 0.549624 9.99149 1.24355C10.3233 1.49152 10.3912 1.96151 10.1432 2.29329C9.89526 2.62508 9.42527 2.69302 9.09349 2.44504Z"
+                fill="black"
+            />
+        </svg>
+    );
+};

package/src/components/Icons/index.ts

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

package/src/components/LazyList/LazyList.scss

@@ -2,12 +2,12 @@
   .g-list__item_selected:hover {
     background-color: var(--g-color-base-selection-hover);
   }
-}
 
-.qp-lazy-list__sentinel {
-  height: 1px;
-}
+  &__sentinel {
+    height: 1px;
+  }
 
-.qp-lazy-list__spinner {
-  height: 100%;
+  &__spinner {
+    height: 100%;
+  }
 }

package/src/components/QueryResultsTable/QueryResultsTable.scss

@@ -0,0 +1,65 @@
+.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;
+    }
+}

package/src/components/QueryResultsTable/QueryResultsTable.tsx

@@ -0,0 +1,112 @@
+import React, {useMemo} from 'react';
+import BaseDataTable, {type Column, type Settings} from '@gravity-ui/react-data-table';
+import {Text, Tooltip} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {DataTable} from '../DataTable';
+import type {EmptyContentVariant} from '../EmptyContent';
+import type {QueryResultColumn, QueryResultFormatterSettings} from '../../types/queryResults';
+import {formatQueryResultType, isQueryResultNumericType} from './helpers/formatQueryResultType';
+import {QueryResultCell} from './internal/QueryResultCell';
+
+import '@gravity-ui/unipika/dist/unipika.css';
+import './QueryResultsTable.scss';
+
+const block = cn('qp-query-results-table');
+const DEFAULT_MAX_VISIBLE_LINES = 5;
+
+export type QueryResultsTableProps<TRow extends Record<string, unknown>> = {
+    columns: Array<QueryResultColumn<TRow>>;
+    /** Values use the YQL wire representation consumed by @gravity-ui/unipika. */
+    rows: TRow[];
+    loading?: boolean;
+    loaded?: boolean;
+    errorContent?: React.ReactNode;
+    rowKey?: (row: TRow, index: number) => string | number;
+    formatterSettings?: QueryResultFormatterSettings;
+    maxVisibleLines?: number;
+    emptyVariant?: EmptyContentVariant;
+    displayIndices?: boolean;
+    stripedRows?: boolean;
+    /** Set to false when the surrounding layout does not need a sticky header. */
+    stickyHead?: Settings['stickyHead'] | false;
+    className?: string;
+};
+
+export function QueryResultsTable<TRow extends Record<string, unknown>>({
+    columns,
+    rows,
+    loading,
+    loaded,
+    errorContent,
+    rowKey,
+    formatterSettings,
+    maxVisibleLines = DEFAULT_MAX_VISIBLE_LINES,
+    emptyVariant,
+    displayIndices = true,
+    stripedRows = true,
+    stickyHead = BaseDataTable.MOVING,
+    className,
+}: QueryResultsTableProps<TRow>) {
+    const resolvedStickyHead = stickyHead === false ? undefined : stickyHead;
+    const tableColumns = useMemo<Array<Column<TRow>>>(
+        () =>
+            columns.map((column) => {
+                const type = formatQueryResultType(column.type);
+                const align =
+                    column.align ??
+                    (isQueryResultNumericType(column.type) ? BaseDataTable.LEFT : undefined);
+
+                return {
+                    name: column.name,
+                    width: column.width,
+                    align,
+                    sortable: false,
+                    headerTitle: type,
+                    header: (
+                        <Tooltip content={type}>
+                            <span className={block('header')}>{column.header ?? column.name}</span>
+                        </Tooltip>
+                    ),
+                    render: ({row, index}) => (
+                        <QueryResultCell
+                            row={row}
+                            value={row[column.name]}
+                            index={index}
+                            column={column}
+                            formatterSettings={formatterSettings}
+                            maxVisibleLines={maxVisibleLines}
+                        />
+                    ),
+                };
+            }),
+        [columns, formatterSettings, maxVisibleLines],
+    );
+
+    if (errorContent) {
+        return (
+            <Text color="danger" className={block('error', className)}>
+                {errorContent}
+            </Text>
+        );
+    }
+
+    return (
+        <div className={block(null, className)}>
+            <DataTable<TRow>
+                columns={tableColumns}
+                data={rows}
+                loading={loading}
+                loaded={loaded ?? !loading}
+                emptyVariant={emptyVariant}
+                rowKey={rowKey}
+                settings={{
+                    displayIndices,
+                    stripedRows,
+                    sortable: false,
+                    stickyHead: resolvedStickyHead,
+                    syncHeadOnResize: Boolean(resolvedStickyHead),
+                }}
+            />
+        </div>
+    );
+}

package/src/components/QueryResultsTable/helpers/formatQueryResultType.ts

@@ -0,0 +1,76 @@
+import type {QueryResultDataType} from '../../../types/queryResults';
+
+function isQueryResultDataType(value: unknown): value is QueryResultDataType {
+    return Array.isArray(value) && typeof value[0] === 'string';
+}
+
+function formatParameter(value: unknown): string {
+    if (Array.isArray(value)) {
+        if (isQueryResultDataType(value)) {
+            return formatQueryResultType(value);
+        }
+
+        return value.map(formatParameter).join(', ');
+    }
+
+    return String(value);
+}
+
+export function formatQueryResultType(type: QueryResultDataType): string {
+    const [name, ...params] = type;
+
+    switch (name) {
+        case 'DataType':
+            return [params[0], ...params.slice(1)].filter(Boolean).join(', ');
+        case 'OptionalType':
+            return `Optional<${formatParameter(params[0])}>`;
+        case 'TaggedType':
+            return `Tagged<${formatParameter(params[0])}, ${formatParameter(params[1])}>`;
+        case 'ListType':
+        case 'StreamType':
+            return `${name.replace('Type', '')}<${formatParameter(params[0])}>`;
+        case 'DictType':
+            return `Dict<${params.map(formatParameter).join(', ')}>`;
+        case 'TupleType':
+            return `Tuple<${formatParameter(params[0])}>`;
+        case 'StructType':
+            return `Struct<${Array.isArray(params[0]) ? params[0].map(formatParameter).join(', ') : ''}>`;
+        case 'VariantType':
+            return `Variant<${formatParameter(params[0])}>`;
+        case 'PgType':
+            return `Pg<${formatParameter(params[0])}>`;
+        default:
+            return params.length ? `${name}<${params.map(formatParameter).join(', ')}>` : name;
+    }
+}
+
+const NUMERIC_TYPES = new Set([
+    'Double',
+    'Float',
+    'Int64',
+    'Int32',
+    'Int16',
+    'Int8',
+    'Uint64',
+    'Uint32',
+    'Uint16',
+    'Uint8',
+]);
+
+export function isQueryResultNumericType(type: QueryResultDataType): boolean {
+    const [name, ...params] = type;
+
+    if (name === 'DataType') {
+        return typeof params[0] === 'string' && NUMERIC_TYPES.has(params[0]);
+    }
+
+    if (name === 'OptionalType') {
+        return isQueryResultDataType(params[0]) && isQueryResultNumericType(params[0]);
+    }
+
+    if (name === 'TaggedType') {
+        return isQueryResultDataType(params[1]) && isQueryResultNumericType(params[1]);
+    }
+
+    return false;
+}

package/src/components/QueryResultsTable/helpers/formatQueryResultValue.ts

@@ -0,0 +1,38 @@
+import unipika from '@gravity-ui/unipika';
+import type {QueryResultDataType, QueryResultFormatterSettings} from '../../../types/queryResults';
+
+const formatter = unipika();
+
+const DEFAULT_FORMATTER_SETTINGS: QueryResultFormatterSettings = {
+    escapeWhitespace: false,
+    decodeUTF8: false,
+    binaryAsHex: true,
+    escapeYQLStrings: true,
+    omitStructNull: true,
+};
+
+export type FormattedQueryResultValue =
+    {html: string; text: string; error: false} | {html: ''; text: ''; error: true};
+
+export function formatQueryResultValue(
+    value: unknown,
+    type: QueryResultDataType,
+    settings?: QueryResultFormatterSettings,
+): FormattedQueryResultValue {
+    const formatterSettings = {...DEFAULT_FORMATTER_SETTINGS, ...settings};
+    const input: [unknown, unknown] = [value, type];
+
+    try {
+        return {
+            html: formatter.formatFromYQL(input, {...formatterSettings, asHTML: true}),
+            text: formatter.formatFromYQL(input, {
+                ...formatterSettings,
+                asHTML: false,
+                maxStringSize: undefined,
+            }),
+            error: false,
+        };
+    } catch {
+        return {html: '', text: '', error: true};
+    }
+}

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

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

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

@@ -0,0 +1,5 @@
+{
+  "action_show-more": "Show more",
+  "action_show-less": "Show less",
+  "alert_format-value-error": "Unable to format value"
+}

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

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

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

@@ -0,0 +1,5 @@
+{
+  "action_show-more": "Показать больше",
+  "action_show-less": "Показать меньше",
+  "alert_format-value-error": "Не удалось отформатировать значение"
+}

package/src/components/QueryResultsTable/index.ts

@@ -0,0 +1,3 @@
+export {QueryResultsTable} from './QueryResultsTable';
+export type {QueryResultsTableProps} from './QueryResultsTable';
+export {formatQueryResultType} from './helpers/formatQueryResultType';

package/src/components/QueryResultsTable/internal/QueryResultCell.tsx

@@ -0,0 +1,63 @@
+import React, {useMemo, useState} from 'react';
+import {Button, ClipboardButton} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import type {QueryResultColumn, QueryResultFormatterSettings} from '../../../types/queryResults';
+import {formatQueryResultValue} from '../helpers/formatQueryResultValue';
+import i18n from '../i18n';
+
+const block = cn('qp-query-results-table');
+
+export type QueryResultCellProps<TRow extends Record<string, unknown>> = {
+    row: TRow;
+    value: unknown;
+    index: number;
+    column: QueryResultColumn<TRow>;
+    formatterSettings?: QueryResultFormatterSettings;
+    maxVisibleLines: number;
+};
+
+export function QueryResultCell<TRow extends Record<string, unknown>>({
+    row,
+    value,
+    index,
+    column,
+    formatterSettings,
+    maxVisibleLines,
+}: QueryResultCellProps<TRow>) {
+    const [expanded, setExpanded] = useState(false);
+    const formatted = useMemo(
+        () => formatQueryResultValue(value, column.type, formatterSettings),
+        [column.type, formatterSettings, value],
+    );
+
+    if (column.render) {
+        return <>{column.render({row, value, index, column})}</>;
+    }
+
+    if (formatted.error) {
+        return <span className={block('format-error')}>{i18n('alert_format-value-error')}</span>;
+    }
+
+    const lines = formatted.html.split('\n');
+    const hasMore = lines.length > maxVisibleLines;
+    const html = expanded || !hasMore ? formatted.html : lines.slice(0, maxVisibleLines).join('\n');
+
+    return (
+        <span className={block('cell')}>
+            <span className="unipika" dangerouslySetInnerHTML={{__html: html}} />
+            <span className={block('cell-actions')}>
+                <ClipboardButton text={formatted.text} view="flat-secondary" size="s" />
+            </span>
+            {hasMore && (
+                <Button
+                    view="flat"
+                    size="s"
+                    className={block('show-more')}
+                    onClick={() => setExpanded((currentExpanded) => !currentExpanded)}
+                >
+                    {i18n(expanded ? 'action_show-less' : 'action_show-more')}
+                </Button>
+            )}
+        </span>
+    );
+}

package/src/components/RowActionsMenu/RowActionsMenu.tsx

@@ -0,0 +1,47 @@
+import React, {MouseEvent, useMemo} from 'react';
+import {Button, DropdownMenu, DropdownMenuItem, Icon} from '@gravity-ui/uikit';
+import EllipsisIcon from '@gravity-ui/icons/svgs/ellipsis.svg';
+import {QueryListRow, QueryListRowAction} from '../../types/queryList';
+
+export type RowActionsMenuProps<T extends QueryListRow = QueryListRow> = {
+    item: T;
+    actions?: QueryListRowAction<T>[];
+};
+
+export const RowActionsMenu = <T extends QueryListRow>({item, actions}: RowActionsMenuProps<T>) => {
+    const items = useMemo(() => {
+        return actions?.map<DropdownMenuItem>(({icon, text, theme, hidden, disabled, onClick}) => {
+            return {
+                text,
+                theme,
+                hidden,
+                disabled,
+                iconStart: icon,
+                action: () => {
+                    onClick(item);
+                },
+            };
+        });
+    }, [actions, item]);
+
+    if (!actions?.length) return null;
+
+    const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    return (
+        <div onClick={handleClick}>
+            <DropdownMenu
+                size="s"
+                renderSwitcher={(props) => (
+                    <Button {...props} size="xs">
+                        <Icon data={EllipsisIcon} size={12} />
+                    </Button>
+                )}
+                items={items}
+            />
+        </div>
+    );
+};

package/src/components/RowActionsMenu/index.ts

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

package/src/components/index.ts

@@ -1,5 +1,7 @@
 export {DataTable} from './DataTable';
 export type {DataTableProps, Column} from './DataTable';
+export {QueryResultsTable, formatQueryResultType} from './QueryResultsTable';
+export type {QueryResultsTableProps} from './QueryResultsTable';
 export {QueryStatusIcon} from './QueryStatusIcon';
 export {QueryDuration} from './QueryDuration';
 export {LazyList} from './LazyList';
@@ -14,6 +16,10 @@ export {HistoryFilter} from './HistoryFilter';
 export {HistoryPrivateIcon} from './HistoryPrivateIcon';
 export {FieldsSelector} from './FieldsSelector';
 export type {FieldsSelectorOption, FieldsSelectorProps} from './FieldsSelector';
+export {EditableRowTitle} from './EditableRowTitle';
+export type {EditableRowTitleProps} from './EditableRowTitle';
+export {RowActionsMenu} from './RowActionsMenu';
+export type {RowActionsMenuProps} from './RowActionsMenu';
 export {FieldsSearchToolbar} from './FieldsSearchToolbar';
 export type {FieldsSearchToolbarProps} from './FieldsSearchToolbar';
 export {HistoryGroupHeader} from './HistoryGroupHeader';
@@ -51,6 +57,7 @@ export type {
 export * from './Dashboard';
 export {Chart} from './Chart';
 export type {ChartAction, ChartProps} from './Chart';
+export {ErrorTree} from './ErrorTree';
 export {
     MonacoLanguage,
     YT_DARK_HC_MONACO_THEME,
@@ -60,3 +67,5 @@ export {
     MONACO_THEME_BY_UI,
 } from './MonacoEditor';
 export type {MonacoThemeName} from './MonacoEditor';
+export * from './AttachmentList';
+export * from './AttachmentListPlaceholder';