diff --git a/package.json b/package.json index c933824..5af0126 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,34 @@ "name": "@gravity-ui/querieskit", "version": "1.3.0", "description": "Query page component library", - "main": "build/index.js", + "main": "./build/cjs/index.js", + "module": "./build/esm/index.js", + "types": "./build/esm/index.d.ts", + "exports": { + ".": { + "import": { + "types": "./build/esm/index.d.ts", + "default": "./build/esm/index.js" + }, + "require": { + "types": "./build/cjs/index.d.ts", + "default": "./build/cjs/index.js" + } + }, + "./build/esm": { + "types": "./build/esm/index.d.ts", + "default": "./build/esm/index.js" + }, + "./build/cjs": { + "types": "./build/cjs/index.d.ts", + "default": "./build/cjs/index.js" + }, + "./build/*": "./build/*", + "./package.json": "./package.json" + }, + "files": [ + "build" + ], "scripts": { "build": "app-builder build", "lint": "eslint", diff --git a/src/components/AttachmentListPlaceholder/AttachmentListPlaceholder.tsx b/src/components/AttachmentListPlaceholder/AttachmentListPlaceholder.tsx index 7f6ae78..fe7ad3c 100644 --- a/src/components/AttachmentListPlaceholder/AttachmentListPlaceholder.tsx +++ b/src/components/AttachmentListPlaceholder/AttachmentListPlaceholder.tsx @@ -1,8 +1,8 @@ import React, {ReactNode} from 'react'; import {Button, Flex, Icon, Link, Text} from '@gravity-ui/uikit'; +import {Folder} from '@gravity-ui/illustrations'; import {Plus} from '@gravity-ui/icons'; import cn from 'bem-cn-lite'; -import image from './assets/empty-attachments.svg'; import i18n from './i18n'; import './AttachmentListPlaceholder.scss'; @@ -44,7 +44,7 @@ export const AttachmentListPlaceholder = ({ className={block(null, className)} data-qa={qa} > - empty-attachments-image + {title} diff --git a/src/components/AttachmentListPlaceholder/assets/empty-attachments.svg b/src/components/AttachmentListPlaceholder/assets/empty-attachments.svg deleted file mode 100644 index 185c03b..0000000 --- a/src/components/AttachmentListPlaceholder/assets/empty-attachments.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/modules/HistoryLayout/HistoryLayout.tsx b/src/modules/HistoryLayout/HistoryLayout.tsx index e80d387..e8437bb 100644 --- a/src/modules/HistoryLayout/HistoryLayout.tsx +++ b/src/modules/HistoryLayout/HistoryLayout.tsx @@ -6,7 +6,7 @@ import './HistoryLayout.scss'; const block = cn('qp-history-layout'); export type HistoryLayoutProps = { - title: ReactNode; + title?: ReactNode; logo?: ReactNode; actions?: ReactNode; header?: ReactNode; @@ -33,7 +33,7 @@ export const HistoryLayout: FC = ({ {actions} )} - {title} + {title !== null && {title}} {header} {children} diff --git a/src/modules/RowsList/RowsList.scss b/src/modules/RowsList/RowsList.scss index 9089420..be61653 100644 --- a/src/modules/RowsList/RowsList.scss +++ b/src/modules/RowsList/RowsList.scss @@ -1,4 +1,7 @@ .qp-rows-list { + height: 100%; + overflow: auto; + .g-list__item_selected:hover { background-color: var(--g-color-base-selection-hover); } diff --git a/src/types/queryList.ts b/src/types/queryList.ts index 1834f3c..e5e3ad2 100644 --- a/src/types/queryList.ts +++ b/src/types/queryList.ts @@ -9,7 +9,7 @@ export type QueryListRowRenderProps = {height: number}; export type QueryListHeader = {header: string} & QueryListRowRenderProps; export type QueryListRow = { - id: number; + id: number | string; title: string; query?: string; href?: string; diff --git a/src/widgets/QueriesHistory/QueriesHistory.stories.tsx b/src/widgets/QueriesHistory/QueriesHistory.stories.tsx index 2b02719..a65bbfb 100644 --- a/src/widgets/QueriesHistory/QueriesHistory.stories.tsx +++ b/src/widgets/QueriesHistory/QueriesHistory.stories.tsx @@ -1,5 +1,6 @@ import React, {useState} from 'react'; import type {Meta, StoryObj} from '@storybook/react'; +import {SegmentedRadioGroup} from '@gravity-ui/uikit'; import {QueriesHistory} from './QueriesHistory'; import { QueryListFieldKey, @@ -76,6 +77,36 @@ const BASE_ITEMS: QueryListItem[] = [ query: QUERY, height: 52, }, + { + id: 6, + title: 'Query 6', + status: 'draft', + engine: 'YQL', + mode: 'Test', + startTime: now - 30 * 60 * min, + query: QUERY, + height: 52, + }, + { + id: 7, + title: 'Query 7', + status: 'draft', + engine: 'YQL', + mode: 'Test', + startTime: now - 30 * 60 * min, + query: QUERY, + height: 52, + }, + { + id: 8, + title: 'Query 8', + status: 'draft', + engine: 'YQL', + mode: 'Test', + startTime: now - 30 * 60 * min, + query: QUERY, + height: 52, + }, ]; type VisibleFields = QueryListVisibleFieldsConfig['fields']; @@ -136,6 +167,17 @@ const meta: Meta = { }, }; +const operationFilterOptions = [ + { + value: 'My', + content: 'My', + }, + { + value: 'All', + content: 'All', + }, +]; + export default meta; type Story = StoryObj; @@ -145,8 +187,8 @@ const DefaultStory = () => { const [visibleFields, setVisibleFields] = useState[]>(activeFields); const [compareMode, setCompareMode] = useState(false); - const [comparedRows, setComparedRows] = useState([]); - const [editingId, setEditingId] = useState(undefined); + const [comparedRows, setComparedRows] = useState<(number | string)[]>([]); + const [editingId, setEditingId] = useState(undefined); const handleCompareChange = (item: QueryHistoryRow, selected: boolean) => { const result = selected @@ -272,5 +314,33 @@ const EmptyStory = () => { ); }; +const WithHeaderStory = () => { + const [search, setSearch] = useState({value: '', fullSearch: false}); + const [visibleFields, setVisibleFields] = + useState[]>(activeFields); + + return ( +
+ } + visibleFields={{value: visibleFields, fields, onChange: setVisibleFields}} + filter={{ + fields: filterFields, + onApply: logFilterApply, + onReset: logFilterReset('reset'), + }} + search={{ + value: search.value, + fullSearch: search.fullSearch, + hasClear: true, + onUpdate: setSearch, + }} + /> +
+ ); +}; + export const Default: Story = {render: () => }; export const Empty: Story = {render: () => }; +export const WithHeader: Story = {render: () => }; diff --git a/src/widgets/QueriesHistory/QueriesHistory.tsx b/src/widgets/QueriesHistory/QueriesHistory.tsx index 0261e25..bd5e4fb 100644 --- a/src/widgets/QueriesHistory/QueriesHistory.tsx +++ b/src/widgets/QueriesHistory/QueriesHistory.tsx @@ -1,7 +1,6 @@ import React from 'react'; import cn from 'bem-cn-lite'; import {QueriesList} from '../../modules'; -import i18n from './i18n'; import { QueryListComparisonConfig, QueryListEditingConfig, @@ -52,7 +51,7 @@ export const QueriesHistory = ({ return ( { 'engine', 'author', ]); - const [comparedRowIds, setComparedRowIds] = useState([]); - const [editingRowId, setEditingRowId] = useState(); + const [comparedRowIds, setComparedRowIds] = useState<(number | string)[]>([]); + const [editingRowId, setEditingRowId] = useState(); const filteredItems = useMemo(() => { if (!search.value) return items;