Fixed file download, updated preview port

ui/src/common/components/DataTable/DataTable.module.scss

@@ -22,7 +22,7 @@
 }
 
 .tableContainer {
-  max-height: 600px;
+  max-height: 800px;
 }
 
 .table {

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[];

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' },
+];

ui/src/common/store/util.thunks.ts

@@ -27,14 +27,16 @@ 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);
 
       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();

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;
+}

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<DatasetHeaderProps>) {
   const [location] = useLocation();
   const dispatch = useAppDispatch();
@@ -108,7 +102,7 @@ export function DatasetHeader({ dataset }: Readonly<DatasetHeaderProps>) {
 
       <div className={classes.buttonContainer}>
         <DownloadMenu
-          options={datasetDownloadOptions}
+          options={fileDownloadOptions}
           url={`/datasets/${dataset.id}/download`}
           target={
             <Button

ui/src/pages/DatasetPage/ReactionList/ReactionCard/ReactionCard.tsx

@@ -15,23 +15,19 @@
  */
 import { Button, Flex, Paper } from '@mantine/core';
 import { Link, useParams } from 'wouter';
-import { CopyButton, type CopyButtonOptions } from '../../../../common/components/CopyButton/CopyButton';
+import { CopyButton, type CopyButtonOptions } from 'common/components/CopyButton/CopyButton';
 import { CheckListIcon, ChevronDownIcon, DotsIcon, DownloadIcon } from 'common/icons';
-import { DownloadMenu, type DownloadMenuOptions } from '../../../../common/components/DownloadMenu/DownloadMenu';
+import { DownloadMenu } from 'common/components/DownloadMenu/DownloadMenu';
 import classes from './ReactionCard.module.scss';
 import { useSelector } from 'react-redux';
 import { selectReactionById } from 'store/reactions/reactions.selectors';
+import { fileDownloadOptions } from 'common/constants';
 
 interface ReactionCardProps {
   id: number;
   index: number;
 }
 
-const reactionDownloadOptions: DownloadMenuOptions[] = [
-  { label: '.pb', format: 'binpb' },
-  { label: '.pbtxt', format: 'txtpb' },
-];
-
 export function ReactionCard({ id, index }: Readonly<ReactionCardProps>) {
   const { datasetId } = useParams();
   const reaction = useSelector(selectReactionById(id));
@@ -83,7 +79,7 @@ export function ReactionCard({ id, index }: Readonly<ReactionCardProps>) {
           </Button>
 
           <DownloadMenu
-            options={reactionDownloadOptions}
+            options={fileDownloadOptions}
             url={`/datasets/${datasetId}/reactions/${id}/download`}
             target={
               <Button

ui/src/pages/ReactionPage/ReactionHeader/ReactionHeader.tsx

@@ -19,20 +19,15 @@ import { useSelector } from 'react-redux';
 import { CopyButton } from 'common/components/CopyButton/CopyButton';
 import { CheckListIcon, ChevronDownIcon, DownloadIcon, EditIcon, TrashIcon } from 'common/icons';
 import { useCallback, useMemo } from 'react';
-import { DownloadMenu, type DownloadMenuOptions } from 'common/components/DownloadMenu/DownloadMenu';
+import { DownloadMenu } from 'common/components/DownloadMenu/DownloadMenu';
 import { useLocation } from 'wouter';
-import { domain } from 'common/constants';
+import { domain, fileDownloadOptions } from 'common/constants';
 import classes from './reactionHeader.module.scss';
 import { useDisclosure } from '@mantine/hooks';
 import { useAppDispatch } from 'store/useAppDispatch';
 import { InputModal } from '../../../common/components/InputModal/InputModal';
 import { renameReaction } from '../../../store/reactions/reactions.thunks';
 
-const reactionDownloadOptions: DownloadMenuOptions[] = [
-  { label: '.pb', format: 'binpb' },
-  { label: '.pbtxt', format: 'txtpb' },
-];
-
 interface ReactionHeaderProps {
   datasetId: number;
   reactionId: number;
@@ -110,7 +105,7 @@ export function ReactionHeader({ datasetId, reactionId }: Readonly<ReactionHeade
               Save as Template
             </Button>
             <DownloadMenu
-              options={reactionDownloadOptions}
+              options={fileDownloadOptions}
               url={`/datasets/${datasetId}/reactions/${reactionId}/download`}
               target={
                 <Button

ui/vite.config.ts

@@ -24,4 +24,7 @@ export default defineConfig({
   test: {
     globals: true,
   },
+  preview: {
+    port: 5173,
+  },
 });