@databiosphere/findable-ui 10.2.0 → 11.0.0

package/src/components/Index/components/AzulFileDownload/azulFileDownload.tsx

@@ -1,11 +1,15 @@
 import { Box } from "@mui/material";
-import React, { useEffect, useRef, useState } from "react";
-import { API_FILE_LOCATION_FETCH } from "../../../../apis/azul/common/constants";
-import { useRequestFileLocation } from "../../../../hooks/useRequestFileLocation";
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { useFileLocation } from "../../../../hooks/useFileLocation";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
 import { StyledIconButton } from "./azulFileDownload.styles";
+import {
+  AZUL_FILE_DOWNLOAD_TEST_ID,
+  AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID,
+  AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID,
+} from "./common/constants";
 
 export interface AzulFileDownloadProps {
   url?: string; // Original "file fetch URL" as returned from Azul endpoint.
@@ -14,72 +18,49 @@ export interface AzulFileDownloadProps {
 export const AzulFileDownload = ({
   url,
 }: AzulFileDownloadProps): JSX.Element => {
+  const { fileUrl, isLoading, run } = useFileLocation(url);
   const downloadRef = useRef<HTMLAnchorElement>(null);
-  // Used to prevent the download button from being clicked twice
-  const [isDownloading, setIsDownloading] = useState(false);
-  // Correct the file fetch URL as per the Azul spec.
-  const azulFetchUrl = buildFetchFileUrl(url);
-  const { data, isLoading, isSuccess, run } =
-    useRequestFileLocation(azulFetchUrl);
-  const fileLocation = data?.location;
+  const [isRequestPending, setIsRequestPending] = useState(false);
 
   // Initiates file download when file location request is successful.
   useEffect(() => {
-    if (isSuccess && fileLocation && downloadRef.current) {
-      const downloadEl = downloadRef.current;
-      downloadEl.href = fileLocation;
-      downloadEl.click();
-      setIsDownloading(false);
-    }
-  }, [fileLocation, isLoading, isSuccess]);
-
-  /**
-   * Initiate file location request.
-   */
-  const onFileLocationRequested = async (): Promise<void> => {
-    // Prevent duplicate downloads
-    setIsDownloading(true);
-    run();
-  };
-
-  if (isDownloading)
-    return (
-      <StyledIconButton color="primary" Icon={LoadingIcon} size="medium" />
-    );
+    if (!fileUrl) return;
+    if (!downloadRef.current) return;
+    const downloadEl = downloadRef.current;
+    downloadEl.href = fileUrl;
+    downloadEl.click();
+    setIsRequestPending(false);
+  }, [fileUrl]);
 
   return (
-    <>
-      <IconButton
-        color="primary"
-        disabled={!url}
-        Icon={isLoading ? LoadingIcon : DownloadIcon}
-        onClick={onFileLocationRequested}
-        size="medium"
+    <Fragment>
+      {isRequestPending ? (
+        <StyledIconButton
+          color="primary"
+          data-testid={AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID}
+          Icon={LoadingIcon}
+          size="medium"
+        />
+      ) : (
+        <IconButton
+          color="primary"
+          data-testid={AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID}
+          disabled={!url}
+          Icon={isLoading ? LoadingIcon : DownloadIcon}
+          onClick={(): void => {
+            setIsRequestPending(true);
+            run();
+          }}
+          size="medium"
+        />
+      )}
+      <Box
+        component="a"
+        data-testid={AZUL_FILE_DOWNLOAD_TEST_ID}
+        download
+        ref={downloadRef}
+        sx={{ display: "none" }}
       />
-      <Box component="a" download ref={downloadRef} sx={{ display: "none" }} />
-    </>
+    </Fragment>
   );
 };
-
-/**
- * Prepend "/fetch" to the path of the specified file URL, if not already included. See #1596.
- * @param fileUrl - Original file URL as returned from Azul.
- * @returns Complete and correct URL to use when requesting file location from Azul or undefined if no fileUrl is passed.
- */
-function buildFetchFileUrl(fileUrl?: string): string | undefined {
-  if (!fileUrl) {
-    return;
-  }
-
-  try {
-    const url = new URL(fileUrl);
-    const path = url.pathname;
-    if (!path.includes(API_FILE_LOCATION_FETCH)) {
-      url.pathname = `${API_FILE_LOCATION_FETCH}${path}`;
-    }
-    return url.toString();
-  } catch (error) {
-    //console.log("error parsing file URL", fileUrl);
-    return;
-  }
-}

package/src/components/Index/components/AzulFileDownload/common/constants.ts

@@ -0,0 +1,4 @@
+export const AZUL_FILE_DOWNLOAD_TEST_ID = "azul-file-download";
+export const AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID =
+  "azul-file-request-download-pending";
+export const AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID = "azul-file-request-download";

package/src/components/Index/components/NTag/components/Tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
 import {
-  PopperProps,
   Tooltip as MTooltip,
   TooltipProps as MTooltipProps,
+  PopperProps,
 } from "@mui/material";
 import { detectOverflow } from "@popperjs/core";
 import { State } from "@popperjs/core/lib/types";

package/src/components/Layout/components/BackPage/backPageView.tsx

@@ -4,8 +4,8 @@ import {
   BackPageContentMainColumn,
   BackPageContentSideColumn,
   BackPageHero,
-  BackPageTabs,
   BackPageView as BackPageLayout,
+  BackPageTabs,
   DetailPageOverviewContent,
   DetailPageOverviewContentMainColumn,
   DetailPageOverviewContentSideColumn,

package/src/components/Layout/components/Header/common/utils.ts

@@ -1,7 +1,7 @@
 import { Breakpoint } from "@mui/material";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { Navigation, SelectedMatch, SELECTED_MATCH } from "./entities";
+import { Navigation, SELECTED_MATCH, SelectedMatch } from "./entities";
 
 /**
  * Adds to the set of selected patterns, for the navigation link, at the current breakpoint.

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx

@@ -2,8 +2,8 @@ import { MenuItem } from "@mui/material";
 import React, { MouseEvent, useState } from "react";
 import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
 import {
-  AuthenticationMenu as Menu,
   Avatar,
+  AuthenticationMenu as Menu,
   UserIcon,
   UserNames,
   UserSummary,

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.tsx

@@ -1,5 +1,5 @@
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
-import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
+import { Fade, IconButton, Dialog as MDialog } from "@mui/material";
 import React, { CSSProperties, forwardRef, Fragment, useEffect } from "react";
 import { getMenuNavigationLinks } from "../../../../../../common/utils";
 import { HeaderProps } from "../../../../../../header";

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -1,7 +1,7 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import {
-  ClickAwayListener as MClickAwayListener,
   Grow,
+  ClickAwayListener as MClickAwayListener,
   MenuList as MMenuList,
   Paper as MPaper,
   PopperProps as MPopperProps,

package/src/components/Layout/components/Nav/components/NavBarHero/navBarHero.tsx

@@ -5,9 +5,9 @@ import {
   StaticImageProps,
 } from "../../../../../common/StaticImage/staticImage";
 import {
-  HeroLogo as Logo,
-  HeroText,
   NavBarHero as Hero,
+  HeroText,
+  HeroLogo as Logo,
 } from "./navBarHero.styles";
 
 export interface NavBarHeroProps {

package/src/components/Layout/components/Outline/outline.styles.ts

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Tab as MTab, TabProps, Tabs as MTabs } from "@mui/material";
+import { Tab as MTab, Tabs as MTabs, TabProps } from "@mui/material";
 import { smokeMain } from "../../../../styles/common/mixins/colors";
 import {
   textBody500,

package/src/components/Loading/loading.styles.ts

@@ -2,7 +2,7 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TABLET } from "../../theme/common/breakpoints";
 import { Paper, PAPER_PANEL_STYLE } from "../common/Paper/paper";
-import { LoadingPanelStyle, LOADING_PANEL_STYLE } from "./loading";
+import { LOADING_PANEL_STYLE, LoadingPanelStyle } from "./loading";
 
 interface Props {
   panelStyle: LoadingPanelStyle;

package/src/components/Loading/loading.tsx

@@ -1,7 +1,7 @@
 import { Fade, SvgIconProps, Typography } from "@mui/material";
 import React from "react";
 import { LoadingIcon } from "../common/CustomIcon/components/LoadingIcon/loadingIcon";
-import { PaperPanelStyle, PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { PAPER_PANEL_STYLE, PaperPanelStyle } from "../common/Paper/paper";
 import { LoadingPaper, LoadingPositioner } from "./loading.styles";
 
 /**

package/src/components/Project/components/SupplementaryLinks/supplementaryLinks.tsx

@@ -7,8 +7,8 @@ import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { Link } from "../../../Links/components/Link/link";
 import { SupplementaryLink } from "../../common/entities";
 import {
-  Marker,
   SupplementaryLink as EllipsisLink,
+  Marker,
   SupplementaryList,
 } from "./supplementaryLinks.styles";
 

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.ts

@@ -1,4 +1,4 @@
-import { FormOption, FormState, FORM_CONTROL_NAME } from "./entities";
+import { FORM_CONTROL_NAME, FormOption, FormState } from "./entities";
 
 // Validation constraints
 export const CONSTRAINTS = {

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/common/utils.ts

@@ -1,4 +1,4 @@
-import { RequestValue, REQUEST_FIELD_ID, UploadResponse } from "./entities";
+import { REQUEST_FIELD_ID, RequestValue, UploadResponse } from "./entities";
 
 /**
  * Create support request.

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.tsx

@@ -28,9 +28,9 @@ import {
   OPTIONS,
 } from "./common/constants";
 import {
-  FormState,
   FORM_CONTROL_LABEL,
   FORM_CONTROL_NAME,
+  FormState,
   RequestValue,
   ValidateResponse,
 } from "./common/entities";

package/src/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.tsx

@@ -6,8 +6,8 @@ import {
 } from "../../../../../../theme/common/typography";
 import { EmailReadIcon } from "../../../../../common/CustomIcon/components/EmailReadIcon/emailReadIcon";
 import {
-  IconBadge,
   ICON_BADGE_COLOR,
+  IconBadge,
 } from "../../../../../common/IconBadge/iconBadge";
 import {
   Section,

package/src/components/Table/common/utils.ts

@@ -21,7 +21,8 @@ import {
   GridTrackMinMax,
   GridTrackSize,
 } from "../../../config/entities";
-import { ExploreMode, EXPLORE_MODE } from "../../../hooks/useExploreMode";
+import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode";
+import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
 import { CheckboxMenuListItem } from "../components/CheckboxMenu/checkboxMenu";
 
 /**
@@ -146,8 +147,8 @@ export function generateDownloadBlob<T extends RowData>(
   if (rows.length === 0) {
     return;
   }
-  const tableHeaders = getVisibleHeadersTableData(rows);
-  const tableData = getVisibleRowsTableData(rows);
+  const tableHeaders = getHeadersTableData(rows);
+  const tableData = getRowsTableData(rows);
   const tsv = formatDataToTSV([tableHeaders, ...tableData]);
   return new Blob([tsv], { type: "text/tab-separated-values" });
 }
@@ -338,28 +339,29 @@ export function getTableStatePagination(
 }
 
 /**
- * Returns the list of visible table headers.
+ * Returns the list of table headers, excluding "select" column.
  * @param rows - Table rows.
- * @returns list of visible headers.
+ * @returns list of headers.
  */
-function getVisibleHeadersTableData<T extends RowData>(
-  rows: Row<T>[]
-): TableData[] {
+function getHeadersTableData<T extends RowData>(rows: Row<T>[]): TableData[] {
+  console.log(rows[0].getAllCells());
   return rows[0]
-    .getVisibleCells()
+    .getAllCells()
+    .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)
     .map((cell) => cell.column.columnDef.header as TableData);
 }
 
 /**
- * Returns the list of visible table data.
+ * Returns the list of table data, excluding "select" column.
  * @param rows - Table rows.
- * @returns list of visible data.
+ * @returns list of data.
  */
-function getVisibleRowsTableData<T extends RowData>(
-  rows: Row<T>[]
-): TableData[][] {
+function getRowsTableData<T extends RowData>(rows: Row<T>[]): TableData[][] {
   return rows.map((row) =>
-    row.getVisibleCells().map((cell) => cell.getValue() as TableData)
+    row
+      .getAllCells()
+      .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)
+      .map((cell) => cell.getValue() as TableData)
   );
 }
 

package/src/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
 import {
-  PopperProps,
   Tooltip as MTooltip,
   TooltipProps as MTooltipProps,
+  PopperProps,
 } from "@mui/material";
 import { detectOverflow } from "@popperjs/core";
 import { State } from "@popperjs/core/lib/types";

package/src/components/common/Accordion/accordion.tsx

@@ -1,8 +1,8 @@
 import {
-  Accordion as MAccordion,
   AccordionDetails,
-  AccordionProps as MAccordionProps,
   AccordionSummary,
+  Accordion as MAccordion,
+  AccordionProps as MAccordionProps,
   Typography,
 } from "@mui/material";
 import React, { ReactNode, useState } from "react";

package/src/components/common/Alert/alert.tsx

@@ -1,7 +1,7 @@
 import {
+  AlertTitle,
   Alert as MAlert,
   AlertProps as MAlertProps,
-  AlertTitle,
 } from "@mui/material";
 import React, { ReactNode } from "react";
 

package/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx

@@ -1,4 +1,4 @@
-import { AlertProps as MAlertProps, ButtonProps } from "@mui/material";
+import { ButtonProps, AlertProps as MAlertProps } from "@mui/material";
 import React, { forwardRef, Fragment, ReactNode } from "react";
 import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities";
 import { setLocalStorage } from "../../../../../hooks/useLocalStorage/common/utils";

package/src/components/common/Banner/components/DismissibleBanner/dismissibleBanner.tsx

@@ -1,7 +1,7 @@
 import {
+  Fade,
   Alert as MAlert,
   AlertProps as MAlertProps,
-  Fade,
 } from "@mui/material";
 import React, { ElementType, ReactNode, useEffect, useState } from "react";
 

package/src/components/common/Breadcrumbs/breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
 import {
-  Breadcrumbs as MBreadcrumbs,
   Link as BreadcrumbLink,
+  Breadcrumbs as MBreadcrumbs,
   Typography,
 } from "@mui/material";
 import Link from "next/link";

package/src/components/common/Dialog/components/DialogTitle/dialogTitle.tsx

@@ -1,5 +1,5 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import { DialogTitle as MDialogTitle, IconButton } from "@mui/material";
+import { IconButton, DialogTitle as MDialogTitle } from "@mui/material";
 import React, { ReactNode } from "react";
 
 export interface DialogTitleProps {

package/src/components/common/Form/components/Input/input.tsx

@@ -1,6 +1,6 @@
 import {
-  OutlinedInput,
   OutlinedInputProps as MOutlinedInputProps,
+  OutlinedInput,
   Typography,
 } from "@mui/material";
 import React from "react";

package/src/components/common/Form/components/Select/select.tsx

@@ -11,12 +11,12 @@ import { InputFormControl } from "./select.styles";
  * Basic form select component.
  */
 
-export interface SelectProps extends MSelectProps {
+export type SelectProps = MSelectProps & {
   children: ReactNode;
   className?: string;
   isFilled: boolean;
   label?: string;
-}
+};
 
 export const Select = ({
   children,

package/src/components/common/IconBadge/iconBadge.styles.ts

@@ -10,7 +10,7 @@ import {
   warningLightest,
   warningMain,
 } from "../../../styles/common/mixins/colors";
-import { IconBadgeColor, ICON_BADGE_COLOR } from "./iconBadge";
+import { ICON_BADGE_COLOR, IconBadgeColor } from "./iconBadge";
 
 interface Props {
   color: IconBadgeColor;

package/src/components/common/Stack/components/Divider/divider.styles.tsx

@@ -3,4 +3,4 @@ import { Box } from "@mui/material";
 
 export const Divider = styled(Box)`
   white-space: pre-wrap;
-`;
+` as typeof Box;

package/src/entity/api/service.ts

@@ -4,11 +4,11 @@
 // TODO move to Azul APIs section
 import {
   APIEndpoints,
+  AZUL_PARAM,
   AzulCatalogResponse,
   AzulEntitiesResponse,
   AzulListParams,
   AzulSummaryResponse,
-  AZUL_PARAM,
 } from "../../apis/azul/common/entities";
 import { transformFilters } from "../../apis/azul/common/filterTransformer";
 import { getConfig } from "../../config/config";

package/src/hooks/useCurrentBreakpoint.ts

@@ -1,8 +1,8 @@
 import { Breakpoint } from "@mui/material";
 import { useMemo } from "react";
 import {
-  BreakpointKey,
   BREAKPOINT_FN_NAME,
+  BreakpointKey,
   useBreakpointHelper,
 } from "./useBreakpointHelper";
 

package/src/hooks/useEntityList.ts

@@ -17,7 +17,7 @@ import { useAsync } from "./useAsync";
 import { useAuthentication } from "./useAuthentication/useAuthentication";
 import { useConfig } from "./useConfig";
 import { useEntityService } from "./useEntityService";
-import { ExploreMode, EXPLORE_MODE, useExploreMode } from "./useExploreMode";
+import { EXPLORE_MODE, ExploreMode, useExploreMode } from "./useExploreMode";
 import { useExploreState } from "./useExploreState";
 import { useURLFilterParams } from "./useURLFilterParams";
 

package/src/hooks/useEntityService.ts

@@ -1,7 +1,7 @@
 import { EntityConfig, EntityMapper } from "../config/entities";
 import { getEntityConfig } from "../config/utils";
 import { createEntityService } from "../entity/service/factory";
-import { EntityService, ENTITY_SERVICE_TYPE } from "../entity/service/model";
+import { ENTITY_SERVICE_TYPE, EntityService } from "../entity/service/model";
 import { useCatalog } from "./useCatalog";
 import { useConfig } from "./useConfig";
 import { EXPLORE_MODE } from "./useExploreMode";

package/src/hooks/useFileLocation.ts

@@ -1,35 +1,37 @@
-import { API_FILE_LOCATION_FETCH } from "../apis/azul/common/constants";
 import {
   useRequestFileLocation,
   UseRequestFileLocationResult,
 } from "./useRequestFileLocation";
 
+const NOT_PREPENDED_WITH_FETCH_REGEX = /^(\/(?!fetch))/;
+
 export interface UseFileLocation extends UseRequestFileLocationResult {
   fileUrl?: string;
 }
 
 export const useFileLocation = (fileUrl?: string): UseFileLocation => {
-  // Prepend "/fetch" to the path of the specified file URL, if not already included.
   const url = buildFetchFileUrl(fileUrl);
   const fileLocation = useRequestFileLocation(url);
-  const { data } = fileLocation;
-  const { location } = data || {};
-  return { ...fileLocation, fileUrl: location };
+  return { ...fileLocation, fileUrl: fileLocation.data?.location };
 };
 
 /**
  * Prepends "/fetch" to the path of the specified file URL, if not already included.
- * @param fileUrl - File url.
- * @returns file url with path prepended with "/fetch".
+ * @param url - URL.
+ * @returns file URL with path prepended with "/fetch".
  */
-function buildFetchFileUrl(fileUrl?: string): string | undefined {
-  if (!fileUrl) {
+export function buildFetchFileUrl(url?: string): string | undefined {
+  if (!url) {
     return;
   }
-  const url = new URL(fileUrl);
-  const path = url.pathname;
-  if (!path.includes(API_FILE_LOCATION_FETCH)) {
-    url.pathname = `${API_FILE_LOCATION_FETCH}${path}`;
+  try {
+    const urlObj = new URL(url);
+    urlObj.pathname = urlObj.pathname.replace(
+      NOT_PREPENDED_WITH_FETCH_REGEX,
+      "/fetch/"
+    );
+    return urlObj.href;
+  } catch (e) {
+    throw new Error(`Invalid file URL: ${url}`);
   }
-  return url.toString();
 }

package/src/utils/tests.ts

@@ -0,0 +1,19 @@
+import { screen } from "@testing-library/react";
+
+/**
+ * Returns anchor element by id.
+ * @param id - ID.
+ * @returns anchor element.
+ */
+export function getAnchorEl(id: string): HTMLAnchorElement {
+  return screen.getByTestId(id) as HTMLAnchorElement;
+}
+
+/**
+ * Returns button element by id.
+ * @param id - ID.
+ * @returns HTML button element.
+ */
+export function getButtonById(id: string): HTMLButtonElement {
+  return screen.getByTestId(id);
+}