@databiosphere/findable-ui 35.1.0 → 35.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "35.1.0"
+  ".": "35.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [35.2.0](https://github.com/DataBiosphere/findable-ui/compare/v35.1.0...v35.2.0) (2025-06-16)
+
+
+### Features
+
+* add table <code> element ([#525](https://github.com/DataBiosphere/findable-ui/issues/525)) ([#527](https://github.com/DataBiosphere/findable-ui/issues/527)) ([02cb3b6](https://github.com/DataBiosphere/findable-ui/commit/02cb3b698b25a4295fc5ea2048541869301b918f))
+
+
+### Bug Fixes
+
+* make user request project metadata by clicking the request link button ([#530](https://github.com/DataBiosphere/findable-ui/issues/530)) ([#531](https://github.com/DataBiosphere/findable-ui/issues/531)) ([b645e0f](https://github.com/DataBiosphere/findable-ui/commit/b645e0fe5604dfc7fc195f91747d4a7985b39e4d))
+
 ## [35.1.0](https://github.com/DataBiosphere/findable-ui/compare/v35.0.3...v35.1.0) (2025-06-05)
 
 

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.js

@@ -1,49 +1,41 @@
-import { ButtonBase, TableBody, TableCell, TableRow, Tooltip, } from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useRef } from "react";
+import React from "react";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
 import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
 import { FluidPaper, GridPaper, } from "../../../../../../../common/Paper/paper.styles";
 import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import { SectionTitle, TableContainer, } from "../../manifestDownloadEntity.styles";
 export const FileManifestDownload = ({ filters, }) => {
-    const downloadRef = useRef(null);
     const { disabled, message } = useDownloadStatus();
-    const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(filters, disabled);
-    const isInProgress = (isIdle || isLoading) && !disabled;
-    const isReady = Boolean(manifestURL) || disabled;
+    const { fileName, isIdle, isLoading, manifestURL, requestManifest } = useFileManifestDownload(filters);
     // Prompt user for login before download and copy, if required.
     const { requireLogin } = useLoginGuard();
-    // Copies file manifest.
-    const copyManifestURL = (url) => {
-        if (!url)
-            return;
-        copy(url);
-    };
-    // Downloads file manifest.
-    const downloadManifestURL = () => {
-        downloadRef.current?.click();
-    };
     return (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,
             React.createElement(SectionTitle, null, "File Manifest"),
             React.createElement(TableContainer, null,
-                React.createElement(Loading, { loading: isInProgress, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-                React.createElement(GridTable, { gridTemplateColumns: isReady ? "auto 1fr" : "1fr" },
+                React.createElement(Loading, { loading: isLoading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+                React.createElement(GridTable, { gridTemplateColumns: "auto 1fr" },
                     React.createElement(TableBody, null,
-                        React.createElement(TableRow, null, isInProgress ? (React.createElement(TableCell, null)) : isReady ? (React.createElement(React.Fragment, null,
-                            React.createElement(TableCell, null,
-                                React.createElement(ButtonBase, { disabled: disabled, href: manifestURL ?? "", ref: downloadRef, sx: { display: "none" } }),
-                                React.createElement(Tooltip, { arrow: true, title: message },
-                                    React.createElement("span", null,
-                                        React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download file manifest", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: () => requireLogin(downloadManifestURL) }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy file manifest", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => requireLogin(() => copyManifestURL(manifestURL)) }),
-                                            ] })))),
-                            React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The manifest is not available for this project.")))))))));
+                        React.createElement(TableRow, null, isIdle || isLoading ? (React.createElement(TableCell, null,
+                            React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: message },
+                                React.createElement("span", null,
+                                    React.createElement(Button, { ...BUTTON_PROPS.PRIMARY_CONTAINED, disabled: disabled || isLoading, onClick: () => requireLogin(requestManifest) }, "Request link"))))) : (React.createElement(React.Fragment, null,
+                            manifestURL && (React.createElement(TableCell, null,
+                                React.createElement(ButtonGroup, { Buttons: [
+                                        React.createElement(Button, { key: "download", download: true, href: manifestURL },
+                                            React.createElement(DownloadIconSmall, null)),
+                                        React.createElement(Button, { key: "copy", onClick: () => copy(manifestURL) },
+                                            React.createElement(ContentCopyIconSmall, null)),
+                                    ] }))),
+                            React.createElement(TableCell, null, manifestURL
+                                ? fileName
+                                : "The manifest is not available for this project."))))))))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestSpreadsheet/fileManifestSpreadsheet.js

@@ -1,53 +1,38 @@
-import { ButtonBase, TableBody, TableCell, TableRow, Tooltip, } from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestSpreadsheet } from "../../../../../../../../hooks/useFileManifest/useFileManifestSpreadsheet";
-import { useRequestFileLocation } from "../../../../../../../../hooks/useRequestFileLocation";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
 import { FluidPaper, GridPaper, } from "../../../../../../../common/Paper/paper.styles";
 import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import { SectionTitle, TableContainer, } from "../../manifestDownloadEntity.styles";
 export const FileManifestSpreadsheet = ({ filters, }) => {
-    const downloadRef = useRef(null);
     const { disabled, message } = useDownloadStatus();
-    const { exists, fileName, fileUrl } = useFileManifestSpreadsheet(filters, disabled) || {};
-    const { data, isLoading, run } = useRequestFileLocation(fileUrl);
-    const spreadsheetURL = data?.location;
-    const isInProgress = (exists === undefined || isLoading) && !disabled;
-    const isReady = Boolean(spreadsheetURL) || disabled;
-    // Copies metadata spreadsheet.
-    const copyMetadataURL = (url) => {
-        if (!url)
-            return;
-        copy(url);
-    };
-    // Downloads metadata spreadsheet.
-    const downloadMetadataURL = () => {
-        downloadRef.current?.click();
-    };
-    // Requests metadata spreadsheet.
-    useEffect(() => {
-        run();
-    }, [fileUrl, run]);
+    const { fileName, isIdle = false, isLoading = false, requestManifest, spreadsheetUrl, } = useFileManifestSpreadsheet(filters) || {};
     return (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,
             React.createElement(SectionTitle, null, "Metadata"),
             React.createElement(TableContainer, null,
-                React.createElement(Loading, { loading: isInProgress, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-                React.createElement(GridTable, { gridTemplateColumns: isReady ? "auto 1fr" : "1fr" },
+                React.createElement(Loading, { loading: isLoading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+                React.createElement(GridTable, { gridTemplateColumns: "auto 1fr" },
                     React.createElement(TableBody, null,
-                        React.createElement(TableRow, null, isInProgress ? (React.createElement(TableCell, null)) : isReady ? (React.createElement(React.Fragment, null,
-                            React.createElement(TableCell, null,
-                                React.createElement(ButtonBase, { disabled: disabled, download: true, href: spreadsheetURL ?? "", ref: downloadRef, sx: { display: "none" } }),
-                                React.createElement(Tooltip, { arrow: true, title: message },
-                                    React.createElement("span", null,
-                                        React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download metadata spreadsheet", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: downloadMetadataURL }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy metadata spreadsheet", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => copyMetadataURL(spreadsheetURL) }),
-                                            ] })))),
-                            React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The metadata is not available for this project.")))))))));
+                        React.createElement(TableRow, null, isIdle || isLoading ? (React.createElement(TableCell, null,
+                            React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: message },
+                                React.createElement("span", null,
+                                    React.createElement(Button, { ...BUTTON_PROPS.PRIMARY_CONTAINED, disabled: disabled || isLoading, onClick: () => requestManifest?.() }, "Request link"))))) : (React.createElement(React.Fragment, null,
+                            spreadsheetUrl && (React.createElement(TableCell, null,
+                                React.createElement(ButtonGroup, { Buttons: [
+                                        React.createElement(Button, { key: "download", download: true, href: spreadsheetUrl },
+                                            React.createElement(DownloadIconSmall, null)),
+                                        React.createElement(Button, { key: "copy", onClick: () => copy(spreadsheetUrl) },
+                                            React.createElement(ContentCopyIconSmall, null)),
+                                    ] }))),
+                            React.createElement(TableCell, null, spreadsheetUrl
+                                ? fileName
+                                : "The metadata is not available for this project."))))))))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "@mui/material";
+export declare const TOOLTIP_PROPS: Partial<TooltipProps>;

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.js

@@ -0,0 +1,22 @@
+export const TOOLTIP_PROPS = {
+    arrow: true,
+    slotProps: {
+        popper: {
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, -4],
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    options: { padding: 8 },
+                },
+            ],
+        },
+        tooltip: {
+            sx: { maxWidth: "none" },
+        },
+    },
+};

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.d.ts

@@ -0,0 +1,3 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../../types";
+export declare const CodeCell: <T extends RowData, TValue extends string = string>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
+import { StyledChip } from "./codeCell.styles";
+export const CodeCell = ({ className, getValue, }) => {
+    const value = getValue();
+    if (!value)
+        return null;
+    return (React.createElement(StyledChip, { className: className, color: CHIP_PROPS.COLOR.DEFAULT, label: value, size: CHIP_PROPS.SIZE.SMALL }));
+};

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+export const StyledChip = styled(Chip) `
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  height: auto;
+  justify-self: flex-start;
+  min-width: 0;
+
+  .MuiChip-label {
+    padding: 2px 8px;
+    white-space: normal;
+  }
+`;

package/lib/hooks/useFileManifest/useFileManifestDownload.d.ts

@@ -4,11 +4,11 @@ export interface ManifestDownload {
     isIdle: boolean;
     isLoading: boolean;
     manifestURL?: string;
+    requestManifest: () => void;
 }
 /**
  * Returns file manifest download url and file name.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest download url and file name.
  */
-export declare const useFileManifestDownload: (filters: Filters, disabled: boolean) => ManifestDownload;
+export declare const useFileManifestDownload: (filters: Filters) => ManifestDownload;

package/lib/hooks/useFileManifest/useFileManifestDownload.js

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../apis/azul/common/entities";
 import { BULK_DOWNLOAD_EXECUTION_ENVIRONMENT } from "../../components/Export/common/entities";
 import { useCatalog } from "../useCatalog";
@@ -8,10 +7,9 @@ import { buildRequestManifest } from "../useRequestManifest/utils";
 /**
  * Returns file manifest download url and file name.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest download url and file name.
  */
-export const useFileManifestDownload = (filters, disabled) => {
+export const useFileManifestDownload = (filters) => {
     // Retrieve the endpoint URL from configured data source.
     const config = useConfig();
     const endpointUrl = config.config.dataSource.url;
@@ -19,20 +17,15 @@ export const useFileManifestDownload = (filters, disabled) => {
     const catalog = useCatalog(); // catalog should be defined.
     // Build request manifest request URL.
     const { requestMethod, requestUrl } = buildRequestManifest(endpointUrl, catalog, filters, MANIFEST_DOWNLOAD_FORMAT.COMPACT);
-    const { data, isIdle, isLoading, run } = useRequestFileLocation(requestUrl, requestMethod);
+    const { data, isIdle, isLoading, run: requestManifest, } = useRequestFileLocation(requestUrl, requestMethod);
     const manifestURL = getManifestDownloadURL(data);
     const fileName = getManifestDownloadFileName(data);
-    // Requests file manifest.
-    useEffect(() => {
-        if (disabled)
-            return;
-        run();
-    }, [disabled, requestUrl, run]);
     return {
         fileName,
         isIdle,
         isLoading,
         manifestURL,
+        requestManifest,
     };
 };
 /**

package/lib/hooks/useFileManifest/useFileManifestSpreadsheet.d.ts

@@ -1,14 +1,15 @@
 import { Filters } from "../../common/entities";
 export interface ManifestSpreadsheet {
-    exists?: boolean;
-    fileFormat?: string;
     fileName?: string;
     fileUrl?: string;
+    isIdle?: boolean;
+    isLoading?: boolean;
+    requestManifest?: () => void;
+    spreadsheetUrl?: string;
 }
 /**
  * Returns file manifest spreadsheet.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest spreadsheet.
  */
-export declare const useFileManifestSpreadsheet: (filters: Filters, disabled: boolean) => ManifestSpreadsheet | undefined;
+export declare const useFileManifestSpreadsheet: (filters: Filters) => Omit<ManifestSpreadsheet, "fileUrl">;

package/lib/hooks/useFileManifest/useFileManifestSpreadsheet.js

@@ -1,17 +1,17 @@
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { APIEndpoints, } from "../../apis/azul/common/entities";
 import { fetchEntitiesFromURL } from "../../entity/common/service";
 import { fetchQueryParams } from "../../utils/fetchQueryParams";
 import { useAsync } from "../useAsync";
 import { useCatalog } from "../useCatalog";
 import { useFetchRequestURL } from "../useFetchRequestURL";
+import { useRequestFileLocation } from "../useRequestFileLocation";
 /**
  * Returns file manifest spreadsheet.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest spreadsheet.
  */
-export const useFileManifestSpreadsheet = (filters, disabled) => {
+export const useFileManifestSpreadsheet = (filters) => {
     // Determine catalog.
     const catalog = useCatalog(); // catalog should be defined.
     // Build request params.
@@ -19,16 +19,26 @@ export const useFileManifestSpreadsheet = (filters, disabled) => {
     // Build request URL.
     const requestURL = useFetchRequestURL(APIEndpoints.FILES, requestParams);
     // Fetch files to determine if file exists.
-    const { data, run } = useAsync();
+    const { data: files, isIdle, isLoading: isFilesLoading, run: requestFiles, } = useAsync();
     // Grab manifest spreadsheet.
-    const manifestSpreadsheet = useMemo(() => getManifestSpreadsheet(data?.hits), [data]);
+    const { fileName, fileUrl } = useMemo(() => getManifestSpreadsheet(files?.hits), [files]);
+    // Fetch file manifest.
+    const { data, isLoading, run } = useRequestFileLocation(fileUrl);
     // Fetch response from files endpoint.
+    const requestManifest = useCallback(() => {
+        requestFiles(fetchEntitiesFromURL(requestURL, undefined));
+    }, [requestFiles, requestURL]);
+    // Fetch file manifest.
     useEffect(() => {
-        if (disabled)
-            return;
-        run(fetchEntitiesFromURL(requestURL, undefined));
-    }, [disabled, requestURL, run]);
-    return manifestSpreadsheet;
+        run();
+    }, [fileUrl, run]);
+    return {
+        fileName,
+        isIdle,
+        isLoading: isFilesLoading || isLoading,
+        requestManifest,
+        spreadsheetUrl: data?.location,
+    };
 };
 /**
  * Prepend "/fetch" to the path of the specified file URL, if not already included.
@@ -52,20 +62,14 @@ function buildFetchFileUrl(fileUrl) {
  * @returns manifest spreadsheet.
  */
 function getManifestSpreadsheet(files) {
-    if (!files) {
-        return;
-    }
+    if (!files)
+        return { fileName: undefined, fileUrl: undefined };
     // Handle case where file does not exist.
-    if (files.length === 0) {
-        return {
-            exists: false,
-        };
-    }
+    if (files.length === 0)
+        return { fileName: undefined, fileUrl: undefined };
     // Project manifest spreadsheet exists.
     const file = files[0];
     return {
-        exists: true,
-        fileFormat: file.files[0]?.format,
         fileName: file.files[0]?.name,
         fileUrl: buildFetchFileUrl(file.files[0]?.url),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "35.1.0",
+  "version": "35.2.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.tsx

@@ -1,18 +1,12 @@
-import {
-  ButtonBase,
-  TableBody,
-  TableCell,
-  TableRow,
-  Tooltip,
-} from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useRef } from "react";
+import React from "react";
 import { Filters } from "../../../../../../../../common/entities";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
 import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import {
   ContentCopyIconSmall,
   DownloadIconSmall,
@@ -26,6 +20,7 @@ import {
   LOADING_PANEL_STYLE,
 } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import {
   SectionTitle,
   TableContainer,
@@ -38,87 +33,64 @@ export interface FileManifestDownloadProps {
 export const FileManifestDownload = ({
   filters,
 }: FileManifestDownloadProps): JSX.Element => {
-  const downloadRef = useRef<HTMLAnchorElement>(null);
   const { disabled, message } = useDownloadStatus();
-  const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(
-    filters,
-    disabled
-  );
-  const isInProgress = (isIdle || isLoading) && !disabled;
-  const isReady = Boolean(manifestURL) || disabled;
+  const { fileName, isIdle, isLoading, manifestURL, requestManifest } =
+    useFileManifestDownload(filters);
 
   // Prompt user for login before download and copy, if required.
   const { requireLogin } = useLoginGuard();
 
-  // Copies file manifest.
-  const copyManifestURL = (url?: string): void => {
-    if (!url) return;
-    copy(url);
-  };
-
-  // Downloads file manifest.
-  const downloadManifestURL = (): void => {
-    downloadRef.current?.click();
-  };
-
   return (
     <FluidPaper>
       <GridPaper>
         <SectionTitle>File Manifest</SectionTitle>
         <TableContainer>
           <Loading
-            loading={isInProgress}
+            loading={isLoading}
             panelStyle={LOADING_PANEL_STYLE.INHERIT}
           />
-          <GridTable gridTemplateColumns={isReady ? "auto 1fr" : "1fr"}>
+          <GridTable gridTemplateColumns="auto 1fr">
             <TableBody>
               <TableRow>
-                {isInProgress ? (
-                  <TableCell />
-                ) : isReady ? (
+                {isIdle || isLoading ? (
+                  <TableCell>
+                    <Tooltip {...TOOLTIP_PROPS} title={message}>
+                      <span>
+                        <Button
+                          {...BUTTON_PROPS.PRIMARY_CONTAINED}
+                          disabled={disabled || isLoading}
+                          onClick={() => requireLogin(requestManifest)}
+                        >
+                          Request link
+                        </Button>
+                      </span>
+                    </Tooltip>
+                  </TableCell>
+                ) : (
                   <>
+                    {manifestURL && (
+                      <TableCell>
+                        <ButtonGroup
+                          Buttons={[
+                            <Button key="download" download href={manifestURL}>
+                              <DownloadIconSmall />
+                            </Button>,
+                            <Button
+                              key="copy"
+                              onClick={() => copy(manifestURL)}
+                            >
+                              <ContentCopyIconSmall />
+                            </Button>,
+                          ]}
+                        />
+                      </TableCell>
+                    )}
                     <TableCell>
-                      <ButtonBase
-                        disabled={disabled}
-                        href={manifestURL ?? ""}
-                        ref={downloadRef}
-                        sx={{ display: "none" }}
-                      />
-                      <Tooltip arrow title={message}>
-                        <span>
-                          <ButtonGroup
-                            Buttons={[
-                              <ButtonGroupButton
-                                key="download"
-                                action="Download file manifest"
-                                disabled={disabled}
-                                label={<DownloadIconSmall />}
-                                onClick={() =>
-                                  requireLogin(downloadManifestURL)
-                                }
-                              />,
-                              <ButtonGroupButton
-                                key="copy"
-                                action="Copy file manifest"
-                                disabled={disabled}
-                                label={<ContentCopyIconSmall />}
-                                onClick={() =>
-                                  requireLogin((): void =>
-                                    copyManifestURL(manifestURL)
-                                  )
-                                }
-                              />,
-                            ]}
-                          />
-                        </span>
-                      </Tooltip>
+                      {manifestURL
+                        ? fileName
+                        : "The manifest is not available for this project."}
                     </TableCell>
-                    <TableCell>{fileName}</TableCell>
                   </>
-                ) : (
-                  <TableCell>
-                    The manifest is not available for this project.
-                  </TableCell>
                 )}
               </TableRow>
             </TableBody>

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestSpreadsheet/fileManifestSpreadsheet.tsx

@@ -1,18 +1,11 @@
-import {
-  ButtonBase,
-  TableBody,
-  TableCell,
-  TableRow,
-  Tooltip,
-} from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { Filters } from "../../../../../../../../common/entities";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestSpreadsheet } from "../../../../../../../../hooks/useFileManifest/useFileManifestSpreadsheet";
-import { useRequestFileLocation } from "../../../../../../../../hooks/useRequestFileLocation";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import {
   ContentCopyIconSmall,
   DownloadIconSmall,
@@ -26,6 +19,7 @@ import {
   LOADING_PANEL_STYLE,
 } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import {
   SectionTitle,
   TableContainer,
@@ -38,30 +32,14 @@ export interface FileManifestSpreadsheetProps {
 export const FileManifestSpreadsheet = ({
   filters,
 }: FileManifestSpreadsheetProps): JSX.Element => {
-  const downloadRef = useRef<HTMLAnchorElement>(null);
   const { disabled, message } = useDownloadStatus();
-  const { exists, fileName, fileUrl } =
-    useFileManifestSpreadsheet(filters, disabled) || {};
-  const { data, isLoading, run } = useRequestFileLocation(fileUrl);
-  const spreadsheetURL = data?.location;
-  const isInProgress = (exists === undefined || isLoading) && !disabled;
-  const isReady = Boolean(spreadsheetURL) || disabled;
-
-  // Copies metadata spreadsheet.
-  const copyMetadataURL = (url?: string): void => {
-    if (!url) return;
-    copy(url);
-  };
-
-  // Downloads metadata spreadsheet.
-  const downloadMetadataURL = (): void => {
-    downloadRef.current?.click();
-  };
-
-  // Requests metadata spreadsheet.
-  useEffect(() => {
-    run();
-  }, [fileUrl, run]);
+  const {
+    fileName,
+    isIdle = false,
+    isLoading = false,
+    requestManifest,
+    spreadsheetUrl,
+  } = useFileManifestSpreadsheet(filters) || {};
 
   return (
     <FluidPaper>
@@ -69,55 +47,55 @@ export const FileManifestSpreadsheet = ({
         <SectionTitle>Metadata</SectionTitle>
         <TableContainer>
           <Loading
-            loading={isInProgress}
+            loading={isLoading}
             panelStyle={LOADING_PANEL_STYLE.INHERIT}
           />
-          <GridTable gridTemplateColumns={isReady ? "auto 1fr" : "1fr"}>
+          <GridTable gridTemplateColumns="auto 1fr">
             <TableBody>
               <TableRow>
-                {isInProgress ? (
-                  <TableCell />
-                ) : isReady ? (
+                {isIdle || isLoading ? (
+                  <TableCell>
+                    <Tooltip {...TOOLTIP_PROPS} title={message}>
+                      <span>
+                        <Button
+                          {...BUTTON_PROPS.PRIMARY_CONTAINED}
+                          disabled={disabled || isLoading}
+                          onClick={() => requestManifest?.()}
+                        >
+                          Request link
+                        </Button>
+                      </span>
+                    </Tooltip>
+                  </TableCell>
+                ) : (
                   <>
+                    {spreadsheetUrl && (
+                      <TableCell>
+                        <ButtonGroup
+                          Buttons={[
+                            <Button
+                              key="download"
+                              download
+                              href={spreadsheetUrl}
+                            >
+                              <DownloadIconSmall />
+                            </Button>,
+                            <Button
+                              key="copy"
+                              onClick={() => copy(spreadsheetUrl)}
+                            >
+                              <ContentCopyIconSmall />
+                            </Button>,
+                          ]}
+                        />
+                      </TableCell>
+                    )}
                     <TableCell>
-                      <ButtonBase
-                        disabled={disabled}
-                        download
-                        href={spreadsheetURL ?? ""}
-                        ref={downloadRef}
-                        sx={{ display: "none" }}
-                      />
-                      <Tooltip arrow title={message}>
-                        <span>
-                          <ButtonGroup
-                            Buttons={[
-                              <ButtonGroupButton
-                                key="download"
-                                action="Download metadata spreadsheet"
-                                disabled={disabled}
-                                label={<DownloadIconSmall />}
-                                onClick={downloadMetadataURL}
-                              />,
-                              <ButtonGroupButton
-                                key="copy"
-                                action="Copy metadata spreadsheet"
-                                disabled={disabled}
-                                label={<ContentCopyIconSmall />}
-                                onClick={(): void =>
-                                  copyMetadataURL(spreadsheetURL)
-                                }
-                              />,
-                            ]}
-                          />
-                        </span>
-                      </Tooltip>
+                      {spreadsheetUrl
+                        ? fileName
+                        : "The metadata is not available for this project."}
                     </TableCell>
-                    <TableCell>{fileName}</TableCell>
                   </>
-                ) : (
-                  <TableCell>
-                    The metadata is not available for this project.
-                  </TableCell>
                 )}
               </TableRow>
             </TableBody>

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.ts

@@ -0,0 +1,24 @@
+import { TooltipProps } from "@mui/material";
+
+export const TOOLTIP_PROPS: Partial<TooltipProps> = {
+  arrow: true,
+  slotProps: {
+    popper: {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, -4],
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: { padding: 8 },
+        },
+      ],
+    },
+    tooltip: {
+      sx: { maxWidth: "none" },
+    },
+  },
+};

package/src/components/Table/components/TableCell/components/CodeCell/codeCell.styles.ts

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+
+export const StyledChip = styled(Chip)`
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  height: auto;
+  justify-self: flex-start;
+  min-width: 0;
+
+  .MuiChip-label {
+    padding: 2px 8px;
+    white-space: normal;
+  }
+`;

package/src/components/Table/components/TableCell/components/CodeCell/codeCell.tsx

@@ -0,0 +1,21 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import React from "react";
+import { CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
+import { BaseComponentProps } from "../../../../../types";
+import { StyledChip } from "./codeCell.styles";
+
+export const CodeCell = <T extends RowData, TValue extends string = string>({
+  className,
+  getValue,
+}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
+  const value = getValue();
+  if (!value) return null;
+  return (
+    <StyledChip
+      className={className}
+      color={CHIP_PROPS.COLOR.DEFAULT}
+      label={value}
+      size={CHIP_PROPS.SIZE.SMALL}
+    />
+  );
+};

package/src/hooks/useFileManifest/useFileManifestDownload.ts

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../apis/azul/common/entities";
 import { Filters } from "../../common/entities";
 import { BULK_DOWNLOAD_EXECUTION_ENVIRONMENT } from "../../components/Export/common/entities";
@@ -15,18 +14,15 @@ export interface ManifestDownload {
   isIdle: boolean;
   isLoading: boolean;
   manifestURL?: string;
+  requestManifest: () => void;
 }
 
 /**
  * Returns file manifest download url and file name.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest download url and file name.
  */
-export const useFileManifestDownload = (
-  filters: Filters,
-  disabled: boolean
-): ManifestDownload => {
+export const useFileManifestDownload = (filters: Filters): ManifestDownload => {
   // Retrieve the endpoint URL from configured data source.
   const config = useConfig();
   const endpointUrl = config.config.dataSource.url;
@@ -39,24 +35,21 @@ export const useFileManifestDownload = (
     filters,
     MANIFEST_DOWNLOAD_FORMAT.COMPACT
   );
-  const { data, isIdle, isLoading, run } = useRequestFileLocation(
-    requestUrl,
-    requestMethod
-  );
+  const {
+    data,
+    isIdle,
+    isLoading,
+    run: requestManifest,
+  } = useRequestFileLocation(requestUrl, requestMethod);
   const manifestURL = getManifestDownloadURL(data);
   const fileName = getManifestDownloadFileName(data);
 
-  // Requests file manifest.
-  useEffect(() => {
-    if (disabled) return;
-    run();
-  }, [disabled, requestUrl, run]);
-
   return {
     fileName,
     isIdle,
     isLoading,
     manifestURL,
+    requestManifest,
   };
 };
 

package/src/hooks/useFileManifest/useFileManifestSpreadsheet.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import {
   APIEndpoints,
   AzulEntitiesResponse,
@@ -9,24 +9,25 @@ import { fetchQueryParams } from "../../utils/fetchQueryParams";
 import { useAsync } from "../useAsync";
 import { useCatalog } from "../useCatalog";
 import { useFetchRequestURL } from "../useFetchRequestURL";
+import { useRequestFileLocation } from "../useRequestFileLocation";
 
 export interface ManifestSpreadsheet {
-  exists?: boolean;
-  fileFormat?: string;
   fileName?: string;
   fileUrl?: string;
+  isIdle?: boolean;
+  isLoading?: boolean;
+  requestManifest?: () => void;
+  spreadsheetUrl?: string;
 }
 
 /**
  * Returns file manifest spreadsheet.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest spreadsheet.
  */
 export const useFileManifestSpreadsheet = (
-  filters: Filters,
-  disabled: boolean
-): ManifestSpreadsheet | undefined => {
+  filters: Filters
+): Omit<ManifestSpreadsheet, "fileUrl"> => {
   // Determine catalog.
   const catalog = useCatalog() as string; // catalog should be defined.
   // Build request params.
@@ -34,20 +35,39 @@ export const useFileManifestSpreadsheet = (
   // Build request URL.
   const requestURL = useFetchRequestURL(APIEndpoints.FILES, requestParams);
   // Fetch files to determine if file exists.
-  const { data, run } = useAsync<AzulEntitiesResponse>();
+  const {
+    data: files,
+    isIdle,
+    isLoading: isFilesLoading,
+    run: requestFiles,
+  } = useAsync<AzulEntitiesResponse>();
+
   // Grab manifest spreadsheet.
-  const manifestSpreadsheet = useMemo(
-    () => getManifestSpreadsheet(data?.hits),
-    [data]
+  const { fileName, fileUrl } = useMemo(
+    () => getManifestSpreadsheet(files?.hits),
+    [files]
   );
 
+  // Fetch file manifest.
+  const { data, isLoading, run } = useRequestFileLocation(fileUrl);
+
   // Fetch response from files endpoint.
+  const requestManifest = useCallback(() => {
+    requestFiles(fetchEntitiesFromURL(requestURL, undefined));
+  }, [requestFiles, requestURL]);
+
+  // Fetch file manifest.
   useEffect(() => {
-    if (disabled) return;
-    run(fetchEntitiesFromURL(requestURL, undefined));
-  }, [disabled, requestURL, run]);
+    run();
+  }, [fileUrl, run]);
 
-  return manifestSpreadsheet;
+  return {
+    fileName,
+    isIdle,
+    isLoading: isFilesLoading || isLoading,
+    requestManifest,
+    spreadsheetUrl: data?.location,
+  };
 };
 
 /**
@@ -74,21 +94,16 @@ function buildFetchFileUrl(fileUrl?: string): string | undefined {
  */
 function getManifestSpreadsheet(
   files?: AzulEntitiesResponse["hits"]
-): ManifestSpreadsheet | undefined {
-  if (!files) {
-    return;
-  }
+): Pick<ManifestSpreadsheet, "fileName" | "fileUrl"> {
+  if (!files) return { fileName: undefined, fileUrl: undefined };
+
   // Handle case where file does not exist.
-  if (files.length === 0) {
-    return {
-      exists: false,
-    };
-  }
+  if (files.length === 0) return { fileName: undefined, fileUrl: undefined };
+
   // Project manifest spreadsheet exists.
   const file = files[0];
+
   return {
-    exists: true,
-    fileFormat: file.files[0]?.format,
     fileName: file.files[0]?.name,
     fileUrl: buildFetchFileUrl(file.files[0]?.url),
   };