diff --git a/ui/src/common/components/DataTable/DataTable.module.scss b/ui/src/common/components/DataTable/DataTable.module.scss index de8d9f4..546a041 100644 --- a/ui/src/common/components/DataTable/DataTable.module.scss +++ b/ui/src/common/components/DataTable/DataTable.module.scss @@ -22,7 +22,7 @@ } .tableContainer { - max-height: 600px; + max-height: 800px; } .table { diff --git a/ui/src/common/components/DownloadMenu/DownloadMenu.tsx b/ui/src/common/components/DownloadMenu/DownloadMenu.tsx index 1d63e71..0c1606d 100644 --- a/ui/src/common/components/DownloadMenu/DownloadMenu.tsx +++ b/ui/src/common/components/DownloadMenu/DownloadMenu.tsx @@ -19,11 +19,7 @@ import { useAppDispatch } from 'store/useAppDispatch'; import { Menu } from '@mantine/core'; import { DownloadIcon } from 'common/icons'; import classes from './DownloadMenu.module.scss'; - -export interface DownloadMenuOptions { - label: string; - format: string; -} +import type { DownloadMenuOptions } from 'common/types/downloadMenuOptions'; interface DownloadMenuProps { options: DownloadMenuOptions[]; diff --git a/ui/src/common/constants.ts b/ui/src/common/constants.ts index 9a220a1..f4f905a 100644 --- a/ui/src/common/constants.ts +++ b/ui/src/common/constants.ts @@ -14,6 +14,7 @@ * limitations under the License. */ import type { Pagination } from './types'; +import type { DownloadMenuOptions } from './types/downloadMenuOptions'; export const isDev = !import.meta.env.PROD; @@ -26,3 +27,9 @@ export const auth0Scope = import.meta.env.VITE_AUTH0_SCOPE as string; export const domain = window.location.origin; export const emptyPagination: Pagination = { page: 1, size: 10, total: 0, pages: 0 }; + +export const fileDownloadOptions: DownloadMenuOptions[] = [ + { label: '.binpb', format: 'binpb' }, + { label: '.txtpb', format: 'txtpb' }, + { label: '.json', format: 'json' }, +]; diff --git a/ui/src/common/store/util.thunks.ts b/ui/src/common/store/util.thunks.ts index 85c052e..d00ce6f 100644 --- a/ui/src/common/store/util.thunks.ts +++ b/ui/src/common/store/util.thunks.ts @@ -27,6 +27,8 @@ export const downloadFile = }); const blob = new Blob([response.data], { type: response.headers['content-type'] }); + const header = response.headers['content-disposition']; + const fileName = header.replace(/^.*filename="(.*)"/, '$1'); const link = document.createElement('a'); fileUrl = URL.createObjectURL(blob); @@ -34,7 +36,7 @@ export const downloadFile = link.href = fileUrl; // We need content-disposition value to get filename from BE. // Waiting to be exposed by CORS - link.setAttribute('download', 'test.txt'); + link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); diff --git a/ui/src/common/types/downloadMenuOptions.ts b/ui/src/common/types/downloadMenuOptions.ts new file mode 100644 index 0000000..3627f4a --- /dev/null +++ b/ui/src/common/types/downloadMenuOptions.ts @@ -0,0 +1,19 @@ +/* + * Copyright 2024 Open Reaction Database Project Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export interface DownloadMenuOptions { + label: string; + format: string; +} diff --git a/ui/src/pages/DatasetPage/DatasetHeader/DatasetHeader.tsx b/ui/src/pages/DatasetPage/DatasetHeader/DatasetHeader.tsx index 2140db5..b1dc63c 100644 --- a/ui/src/pages/DatasetPage/DatasetHeader/DatasetHeader.tsx +++ b/ui/src/pages/DatasetPage/DatasetHeader/DatasetHeader.tsx @@ -19,7 +19,7 @@ import { UserField } from 'common/components/UserField/UserField'; import { ActionIcon, Button, Flex, Paper, Title } from '@mantine/core'; import { CopyButton, type CopyButtonOptions } from 'common/components/CopyButton/CopyButton'; import { formatDate } from 'common/utils'; -import { DownloadMenu, type DownloadMenuOptions } from 'common/components/DownloadMenu/DownloadMenu'; +import { DownloadMenu } from 'common/components/DownloadMenu/DownloadMenu'; import { ChevronDownIcon, EditIcon } from 'common/icons'; import type { Dataset } from 'store/datasets/datasets.types'; import { useCallback, useMemo } from 'react'; @@ -29,18 +29,12 @@ import { useSelector } from 'react-redux'; import { selectIsDatasetOpened } from 'store/datasets/datasets.selectors'; import { setDatasetEditOpenedAction } from 'store/datasets/datasets.actions'; import { useAppDispatch } from 'store/useAppDispatch'; -import { domain } from 'common/constants'; +import { domain, fileDownloadOptions } from 'common/constants'; interface DatasetHeaderProps { dataset: Dataset; } -const datasetDownloadOptions: DownloadMenuOptions[] = [ - { label: '.pb', format: 'binpb' }, - { label: '.pbtxt', format: 'txtpb' }, - { label: '.json', format: 'json' }, -]; - export function DatasetHeader({ dataset }: Readonly) { const [location] = useLocation(); const dispatch = useAppDispatch(); @@ -108,7 +102,7 @@ export function DatasetHeader({ dataset }: Readonly) {
) { const { datasetId } = useParams(); const reaction = useSelector(selectReactionById(id)); @@ -83,7 +79,7 @@ export function ReactionCard({ id, index }: Readonly) {