@databiosphere/findable-ui 35.0.3 → 35.2.0

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),
   };

package/lib/components/DataDictionary/components/Table/columns/columnDef.d.ts

@@ -1,6 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { Attribute } from "../../../../../common/entities";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
-import { AttributeValue } from "./types";
-export declare const COLUMN_DEF: Record<keyof typeof COLUMN_IDENTIFIER, ColumnDef<Attribute, AttributeValue>>;
-export declare const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[];

package/lib/components/DataDictionary/components/Table/columns/columnDef.js

@@ -1,33 +0,0 @@
-import { BasicCell } from "../components/BasicCell/basicCell";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
-const COLUMN_DEF_DESCRIPTION = {
-    accessorFn: (row) => row.description,
-    cell: (props) => BasicCell({ ...props }),
-    header: "Description",
-    id: COLUMN_IDENTIFIER.DESCRIPTION,
-    meta: { width: { max: "2fr", min: "480px" } },
-};
-const COLUMN_DEF_KEY = {
-    accessorFn: (row) => row.key,
-    cell: (props) => BasicCell({ ...props }),
-    header: "Key",
-    id: COLUMN_IDENTIFIER.KEY,
-    meta: { width: { max: "1fr", min: "180px" } },
-};
-const COLUMN_DEF_LABEL = {
-    accessorFn: (row) => row.label,
-    cell: (props) => BasicCell({ ...props }),
-    header: "Label",
-    id: COLUMN_IDENTIFIER.LABEL,
-    meta: { width: { max: "1fr", min: "200px" } },
-};
-export const COLUMN_DEF = {
-    DESCRIPTION: COLUMN_DEF_DESCRIPTION,
-    KEY: COLUMN_DEF_KEY,
-    LABEL: COLUMN_DEF_LABEL,
-};
-export const COLUMN_DEFS = [
-    COLUMN_DEF.LABEL,
-    COLUMN_DEF.KEY,
-    COLUMN_DEF.DESCRIPTION,
-];

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.d.ts

@@ -1,5 +0,0 @@
-export declare const COLUMN_IDENTIFIER: {
-    readonly DESCRIPTION: "description";
-    readonly KEY: "key";
-    readonly LABEL: "label";
-};

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.js

@@ -1,5 +0,0 @@
-export const COLUMN_IDENTIFIER = {
-    DESCRIPTION: "description",
-    KEY: "key",
-    LABEL: "label",
-};

package/lib/components/DataDictionary/components/Table/columns/types.d.ts

@@ -1,2 +0,0 @@
-import { Attribute } from "../../../../../common/entities";
-export type AttributeValue = Attribute[keyof Attribute];

package/lib/components/DataDictionary/components/Table/columns/types.js

@@ -1 +0,0 @@
-export {};

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.d.ts

@@ -1,4 +0,0 @@
-import { CellContext } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
-import { AttributeValue } from "../../columns/types";
-export type BasicCellProps = CellContext<Attribute, AttributeValue>;

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.js

@@ -1 +0,0 @@
-export {};

package/lib/components/Detail/components/Table/components/TableHead/tableHead.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { Table } from "@tanstack/react-table";
-import { ROW_DIRECTION } from "../../../../../Table/common/entities";
-export interface TableBodyProps<T> {
-    rowDirection: ROW_DIRECTION;
-    tableInstance: Table<T>;
-}
-export declare const TableHead: <T extends object>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;