@databiosphere/findable-ui 13.0.1 → 15.0.0

package/src/components/common/Banner/components/SystemIndexing/systemIndexing.tsx

@@ -1,33 +1,22 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import React, { Fragment, ReactNode } from "react";
+import { AlertProps, Fade } from "@mui/material";
+import React from "react";
 import { useSystemStatus } from "../../../../../hooks/useSystemStatus";
-import { BannerPrimary } from "../BannerPrimary/bannerPrimary";
-
-export interface SystemIndexingProps extends Omit<MAlertProps, "title"> {
-  children?: ReactNode;
-  className?: string;
-  title?: ReactNode;
-}
+import { BaseComponentProps, ContentProps } from "../../../../types";
+import { Banner } from "../../banner";
 
 export const SystemIndexing = ({
   children,
   className,
-  title = "Data indexing in progress. Downloads and exports are disabled as search results may be incomplete.",
+  content,
   ...props
-}: SystemIndexingProps): JSX.Element => {
+}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => {
   const systemStatus = useSystemStatus();
   const { indexing, loading, ok } = systemStatus;
-  const showAlert = !loading && ok && indexing;
   return (
-    <Fragment>
-      {showAlert && (
-        <BannerPrimary className={className} {...props}>
-          <Fragment>
-            {title}
-            {children}
-          </Fragment>
-        </BannerPrimary>
-      )}
-    </Fragment>
+    <Fade in={!loading && ok && indexing} unmountOnExit>
+      <Banner className={className} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

package/src/components/common/Banner/components/SystemStatus/systemStatus.tsx

@@ -1,33 +1,22 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import React, { Fragment, ReactNode } from "react";
+import { AlertProps, Fade } from "@mui/material";
+import React from "react";
 import { useSystemStatus } from "../../../../../hooks/useSystemStatus";
-import { BannerPrimary } from "../BannerPrimary/bannerPrimary";
-
-export interface SystemStatusProps extends Omit<MAlertProps, "title"> {
-  children?: ReactNode;
-  className?: string;
-  title?: ReactNode;
-}
+import { BaseComponentProps, ContentProps } from "../../../../types";
+import { Banner } from "../../banner";
 
 export const SystemStatus = ({
   children,
   className,
-  title = "One or more of the system components are currently unavailable. Functionality may be degraded.",
+  content,
   ...props
-}: SystemStatusProps): JSX.Element => {
+}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => {
   const systemStatus = useSystemStatus();
   const { loading, ok } = systemStatus;
-  const showAlert = !loading && !ok;
   return (
-    <Fragment>
-      {showAlert && (
-        <BannerPrimary className={className} {...props}>
-          <Fragment>
-            {title}
-            {children}
-          </Fragment>
-        </BannerPrimary>
-      )}
-    </Fragment>
+    <Fade in={!loading && !ok} unmountOnExit>
+      <Banner className={className} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

package/src/components/common/Banner/constants.ts

@@ -0,0 +1,11 @@
+import { AlertProps } from "@mui/material";
+import { COLOR, VARIANT } from "../../../styles/common/mui/alert";
+import { FlatPaper } from "../Paper/paper.styles";
+
+export const ALERT_PROPS: Partial<AlertProps> = {
+  color: COLOR.PRIMARY,
+  component: FlatPaper,
+  elevation: 0,
+  icon: false,
+  variant: VARIANT.FILLED,
+};

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

@@ -1,20 +1,16 @@
 import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
-import {
-  Link as BreadcrumbLink,
-  Breadcrumbs as MBreadcrumbs,
-  Typography,
-} from "@mui/material";
-import Link from "next/link";
+import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
+import NLink from "next/link";
 import React, { ReactNode } from "react";
+import { BaseComponentProps } from "../../types";
 
 export interface Breadcrumb {
   path: string;
   text: ReactNode;
 }
 
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends BaseComponentProps {
   breadcrumbs: Breadcrumb[];
-  className?: string;
   Separator?: ReactNode;
 }
 
@@ -29,8 +25,8 @@ export const Breadcrumbs = ({
         <MBreadcrumbs className={className} separator={Separator}>
           {breadcrumbs.map(({ path, text }, b) =>
             path ? (
-              <Link key={`${path}${b}`} href={path} legacyBehavior passHref>
-                <BreadcrumbLink>{text}</BreadcrumbLink>
+              <Link component={NLink} key={b} href={path}>
+                {text}
               </Link>
             ) : (
               <Typography key={`${path}${b}`} maxWidth={180} noWrap>

package/src/components/common/Paper/paper.styles.ts

@@ -7,11 +7,13 @@ import { Paper } from "./paper";
  * e.g. the entire width of mobile viewports.
  */
 export const FlatPaper = styled(Paper)`
-  align-self: stretch;
-  border-left: none;
-  border-radius: 0;
-  border-right: none;
-  box-shadow: none;
+  & {
+    align-self: stretch;
+    border-left: none;
+    border-radius: 0;
+    border-right: none;
+    box-shadow: none;
+  }
 `;
 
 /**
@@ -19,8 +21,10 @@ export const FlatPaper = styled(Paper)`
  * To use RoundedPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
  */
 export const RoundedPaper = styled(Paper)`
-  align-self: stretch;
-  border-radius: 8px;
+  & {
+    align-self: stretch;
+    border-radius: 8px;
+  }
 `;
 
 /* eslint-disable valid-jsdoc -- disable require param */
@@ -30,11 +34,13 @@ export const RoundedPaper = styled(Paper)`
  */
 /* eslint-enable valid-jsdoc -- disable require param */
 export const FluidPaper = styled(RoundedPaper)`
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
-    border-left: none;
-    border-radius: 0;
-    border-right: none;
-    box-shadow: none;
+  & {
+    ${({ theme }) => theme.breakpoints.down(TABLET)} {
+      border-left: none;
+      border-radius: 0;
+      border-right: none;
+      box-shadow: none;
+    }
   }
 `;
 

package/src/components/types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export interface BaseComponentProps {
+  className?: string;
+}
+
+export interface ContentProps {
+  content?: ReactNode;
+}
+
+export interface TestIdProps {
+  testId?: string;
+}

package/src/config/entities.ts

@@ -360,6 +360,7 @@ export interface SiteConfig {
   explorerTitle: HeroTitle;
   export?: ExportConfig;
   exportToTerraUrl?: string; // TODO(cc) revist location; possibly nest inside "export"?
+  gitHubUrl?: string;
   layout: {
     floating?: FloatingConfig;
     footer: FooterProps;

package/src/hooks/useFileManifest/common/buildFileManifestRequestURL.ts

@@ -20,13 +20,12 @@ export interface FileManifestRequestURL {
  */
 export const buildFileManifestRequestURL = (
   url: string,
-  filters: Filters,
+  filters: Filters | undefined,
   catalog: string,
   manifestFormat: ManifestDownloadFormat | undefined
 ): FileManifestRequestURL | undefined => {
-  if (!manifestFormat) {
-    return;
-  }
+  if (!manifestFormat) return;
+  if (!filters) return;
 
   // Build request params.
   const requestParams = new URLSearchParams({

package/src/hooks/useFileManifest/common/entities.ts

@@ -37,21 +37,20 @@ export interface FileFacet {
 export enum FILE_MANIFEST_TYPE {
   BULK_DOWNLOAD = "BULK_DOWNLOAD",
   DOWNLOAD_MANIFEST = "DOWNLOAD_MANIFEST",
-  ENITY_EXPORT_TO_TERRA = "ENITY_EXPORT_TO_TERRA",
   ENTITY_BULK_DOWNLOAD = "ENTITY_BULK_DOWNLOAD",
   ENTITY_DOWNLOAD_MANIFEST = "ENTITY_DOWNLOAD_MANIFEST",
+  ENTITY_EXPORT_TO_TERRA = "ENTITY_EXPORT_TO_TERRA",
   EXPORT_TO_TERRA = "EXPORT_TO_TERRA",
 }
 
 export type FileManifestType = FILE_MANIFEST_TYPE;
 
-export enum FILE_MANIFEST_STATE_STATUS {
-  ACTIVE = "ACTIVE",
-  INACTIVE = "INACTIVE",
+export enum FILES_FACETS_STATUS {
+  COMPLETED = "COMPLETED",
+  IN_PROGRESS = "IN_PROGRESS",
+  NOT_STARTED = "NOT_STARTED",
 }
 
-export type FileManifestStateStatus = FILE_MANIFEST_STATE_STATUS;
-
 export type SelectedSearchTermsBySearchKey = Map<
   CategoryKey,
   Set<CategoryValueKey>

package/src/hooks/useFileManifest/useRequestFileManifest.ts

@@ -3,14 +3,17 @@ import { ManifestDownloadFormat } from "../../apis/azul/common/entities";
 import { Filters } from "../../common/entities";
 import { FileManifestActionKind } from "../../providers/fileManifestState";
 import { useFileManifestState } from "../useFileManifestState";
+import { FileManifestType } from "./common/entities";
 
 /**
  * Initializes and fetches file manifest comprising file facets and summary for the given file manifest format.
+ * @param fileManifestType - File manifest type.
  * @param fileManifestFormat - File manifest format.
  * @param initialFilters - Filters to initialize file manifest request.
  * @param fileSummaryFacetName - File summary facet name.
  */
 export const useRequestFileManifest = (
+  fileManifestType: FileManifestType | undefined,
   fileManifestFormat: ManifestDownloadFormat | undefined,
   initialFilters: Filters | undefined = [],
   fileSummaryFacetName?: string
@@ -26,6 +29,7 @@ export const useRequestFileManifest = (
     fileManifestDispatch({
       payload: {
         fileManifestFormat,
+        fileManifestType,
         fileSummaryFacetName,
         filters: initFilters,
       },
@@ -40,6 +44,7 @@ export const useRequestFileManifest = (
   }, [
     fileManifestDispatch,
     fileManifestFormat,
+    fileManifestType,
     fileSummaryFacetName,
     initFilters,
   ]);

package/src/hooks/useLocalStorage/useLocalStorage.ts

@@ -6,8 +6,8 @@ import { getLocalStorage } from "./common/utils";
  * @param key - Local storage key.
  * @returns local storage value.
  */
-export function useLocalStorage(key: string): string | null {
-  const [value, setValue] = useState<string | null>(null);
+export function useLocalStorage(key: string): string | null | undefined {
+  const [value, setValue] = useState<string | null>();
 
   useEffect(() => {
     setValue(getLocalStorage(key));

package/src/providers/fileManifestState/actions.ts

@@ -0,0 +1,34 @@
+import { buildFileManifestRequestURL } from "../../hooks/useFileManifest/common/buildFileManifestRequestURL";
+import {
+  FileManifestContext,
+  FileManifestState,
+  UpdateFileManifestPayload,
+} from "../fileManifestState";
+import { getRequestFilters, updateFilesFacetsStatus } from "./utils";
+
+/**
+ * Update file manifest action.
+ * @param state - State.
+ * @param payload - Payload.
+ * @param context - Context.
+ * @returns state.
+ */
+export function updateFileManifestAction(
+  state: FileManifestState,
+  payload: UpdateFileManifestPayload,
+  context: FileManifestContext
+): FileManifestState {
+  const { catalog, URL } = context;
+  const filesFacetsStatus = updateFilesFacetsStatus(state, payload);
+  const nextState = { ...state, ...payload, filesFacetsStatus };
+  const fileManifestRequest = buildFileManifestRequestURL(
+    URL,
+    getRequestFilters(nextState),
+    catalog,
+    nextState.fileManifestFormat
+  );
+  return {
+    ...nextState,
+    ...fileManifestRequest,
+  };
+}

package/src/providers/fileManifestState/constants.ts

@@ -0,0 +1,31 @@
+import {
+  FILE_MANIFEST_TYPE,
+  FILES_FACETS_STATUS,
+} from "../../hooks/useFileManifest/common/entities";
+import { FileManifestState } from "../fileManifestState";
+
+export const ENTITIES_FILE_MANIFEST_TYPES: FILE_MANIFEST_TYPE[] = [
+  FILE_MANIFEST_TYPE.BULK_DOWNLOAD,
+  FILE_MANIFEST_TYPE.DOWNLOAD_MANIFEST,
+  FILE_MANIFEST_TYPE.EXPORT_TO_TERRA,
+];
+
+export const FILE_MANIFEST_STATE: FileManifestState = {
+  fileManifestFormat: undefined,
+  fileManifestType: undefined,
+  fileSummary: undefined,
+  fileSummaryFacetName: undefined,
+  fileSummaryFilters: [],
+  filesFacets: [],
+  filesFacetsStatus: FILES_FACETS_STATUS.NOT_STARTED,
+  filters: [],
+  isEnabled: false,
+  isFacetsLoading: false,
+  isFacetsSuccess: false,
+  isFileSummaryLoading: false,
+  isLoading: false,
+  isSummaryLoading: false,
+  requestParams: undefined,
+  requestURL: undefined,
+  summary: undefined,
+};

package/src/providers/fileManifestState/utils.ts

@@ -0,0 +1,108 @@
+import { Filters } from "../../common/entities";
+import {
+  FileFacet,
+  FILES_FACETS_STATUS,
+} from "../../hooks/useFileManifest/common/entities";
+import { findFacet } from "../../hooks/useFileManifest/common/utils";
+import {
+  FileManifestState,
+  UpdateFileManifestPayload,
+} from "../fileManifestState";
+import { ENTITIES_FILE_MANIFEST_TYPES } from "./constants";
+
+/**
+ * Generates the filters for a request URL based on the file manifest state.
+ * If all terms in a facet are selected, the corresponding facet is excluded.
+ * @param state - File manifest state.
+ * @returns filters for the request URL.
+ */
+export function getRequestFilters(
+  state: FileManifestState
+): Filters | undefined {
+  if (state.filesFacetsStatus !== FILES_FACETS_STATUS.COMPLETED) return;
+  // Determine if the filters are user-selected.
+  if (isFiltersUserSelected(state)) {
+    return state.filters;
+  }
+  for (const filter of state.filters) {
+    const facet = findFacet(state.filesFacets, filter.categoryKey);
+    if (!facet) return [filter]; // The entity identifier related filter will not have a corresponding term facet.
+  }
+}
+
+/**
+ * Returns true if filter values for each selected facet are partially selected.
+ * @param filters - Selected filters.
+ * @param filesFacets - Files facets.
+ * @returns true if the filters are partially selected.
+ */
+function isFiltersPartiallySelected(
+  filters: Filters,
+  filesFacets: FileFacet[]
+): boolean {
+  for (const { categoryKey, value } of filters) {
+    const facet = findFacet(filesFacets, categoryKey);
+    if (!facet) continue; // Continue; the entity identifier related filter will not have a corresponding term facet.
+    if (value.length < facet.termCount) return true;
+  }
+  return false;
+}
+
+/**
+ * Returns true if the filters are user-selected, when:
+ * - The file manifest type is not set.
+ * - The file manifest type is an entity list related type.
+ * - Filter values for each selected facet are partially selected.
+ * @param state - File manifest state.
+ * @returns true if the filters are user-selected.
+ */
+export function isFiltersUserSelected(state: FileManifestState): boolean {
+  if (!state.fileManifestType) return true;
+  if (ENTITIES_FILE_MANIFEST_TYPES.includes(state.fileManifestType))
+    return true;
+  return isFiltersPartiallySelected(state.filters, state.filesFacets);
+}
+
+/**
+ * Transitions the files facets' status.
+ * @param shouldTransition - True if transitioning, false otherwise.
+ * @param nextStatus - Next files facets' status.
+ * @param currentStatus - Current files facets' status.
+ * @returns files facets' status.
+ */
+export function transitionFilesFacetsStatus(
+  shouldTransition: boolean,
+  nextStatus: FILES_FACETS_STATUS,
+  currentStatus: FILES_FACETS_STATUS
+): FILES_FACETS_STATUS {
+  return shouldTransition ? nextStatus : currentStatus;
+}
+
+/**
+ * Returns the updated files facets' status.
+ * @param state - File manifest state.
+ * @param payload - Update file manifest payload.
+ * @returns files facets' status.
+ */
+export function updateFilesFacetsStatus(
+  state: FileManifestState,
+  payload: UpdateFileManifestPayload
+): FILES_FACETS_STATUS {
+  if (state.filesFacetsStatus === FILES_FACETS_STATUS.NOT_STARTED) {
+    // If the current status is NOT_STARTED, transition to IN_PROGRESS if facets are loading.
+    return transitionFilesFacetsStatus(
+      payload.isFacetsLoading,
+      FILES_FACETS_STATUS.IN_PROGRESS,
+      FILES_FACETS_STATUS.NOT_STARTED
+    );
+  }
+  if (state.filesFacetsStatus === FILES_FACETS_STATUS.IN_PROGRESS) {
+    // If the current status is IN_PROGRESS, transition to COMPLETED if facets are successfully loaded.
+    return transitionFilesFacetsStatus(
+      payload.isFacetsSuccess,
+      FILES_FACETS_STATUS.COMPLETED,
+      FILES_FACETS_STATUS.IN_PROGRESS
+    );
+  }
+  return FILES_FACETS_STATUS.COMPLETED;
+}

package/src/providers/fileManifestState.tsx

@@ -19,36 +19,26 @@ import {
 import { useCatalog } from "../hooks/useCatalog";
 import { buildNextFilterState } from "../hooks/useCategoryFilter";
 import { buildFileManifestRequestURL } from "../hooks/useFileManifest/common/buildFileManifestRequestURL";
-import { FileFacet } from "../hooks/useFileManifest/common/entities";
+import {
+  FileFacet,
+  FileManifestType,
+  FILES_FACETS_STATUS,
+} from "../hooks/useFileManifest/common/entities";
 import { useFetchFilesFacets } from "../hooks/useFileManifest/useFetchFilesFacets";
 import { useFetchSummary } from "../hooks/useFileManifest/useFetchSummary";
 import { useFileManifestURL } from "../hooks/useFileManifest/useFileManifestURL";
-
-// Default file manifest state.
-export const DEFAULT_FILE_MANIFEST_STATE = {
-  fileManifestFormat: undefined,
-  fileSummary: undefined,
-  fileSummaryFacetName: undefined,
-  fileSummaryFilters: [],
-  filesFacets: [],
-  filters: [],
-  isEnabled: false,
-  isFacetsLoading: false,
-  isFacetsSuccess: false,
-  isFileSummaryLoading: false,
-  isLoading: false,
-  isSummaryLoading: false,
-  requestParams: undefined,
-  requestURL: undefined,
-  summary: undefined,
-};
+import { updateFileManifestAction } from "./fileManifestState/actions";
+import { FILE_MANIFEST_STATE } from "./fileManifestState/constants";
+import { getRequestFilters } from "./fileManifestState/utils";
 
 /**
  * File manifest state.
  */
 export type FileManifestState = {
   fileManifestFormat?: ManifestDownloadFormat;
+  fileManifestType?: FileManifestType;
   filesFacets: FileFacet[];
+  filesFacetsStatus: FILES_FACETS_STATUS;
   fileSummary?: AzulSummaryResponse;
   fileSummaryFacetName?: string;
   fileSummaryFilters: Filters;
@@ -76,7 +66,7 @@ export const FileManifestStateContext =
   createContext<FileManifestStateContextProps>({
     // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
     fileManifestDispatch: () => {},
-    fileManifestState: DEFAULT_FILE_MANIFEST_STATE,
+    fileManifestState: FILE_MANIFEST_STATE,
   });
 
 export interface FileManifestStateProps {
@@ -96,7 +86,7 @@ export function FileManifestStateProvider({
   const [fileManifestState, fileManifestDispatch] = useReducer(
     (s: FileManifestState, a: FileManifestAction) =>
       fileManifestReducer(s, a, { URL, catalog }),
-    DEFAULT_FILE_MANIFEST_STATE
+    FILE_MANIFEST_STATE
   );
 
   const { fileSummaryFacetName, fileSummaryFilters, filters, isEnabled } =
@@ -233,6 +223,7 @@ type UpdateFiltersCategoryAction = {
  */
 type FetchFileManifestPayload = {
   fileManifestFormat?: ManifestDownloadFormat;
+  fileManifestType?: FileManifestType;
   fileSummaryFacetName?: string;
   filters: Filters;
 };
@@ -240,7 +231,7 @@ type FetchFileManifestPayload = {
 /**
  * Update file manifest payload.
  */
-type UpdateFileManifestPayload = {
+export type UpdateFileManifestPayload = {
   filesFacets: FileFacet[];
   fileSummary?: AzulSummaryResponse;
   isFacetsLoading: boolean;
@@ -288,6 +279,7 @@ function fileManifestReducer(
       return {
         ...state,
         fileManifestFormat: undefined,
+        filesFacetsStatus: FILES_FACETS_STATUS.NOT_STARTED,
         isEnabled: false,
         requestParams: undefined,
         requestURL: undefined,
@@ -300,35 +292,29 @@ function fileManifestReducer(
         payload.filters,
         payload.fileSummaryFacetName
       );
-      // Build request params and request URL.
-      const { requestParams, requestURL } =
-        buildFileManifestRequestURL(
-          URL,
-          payload.filters,
-          catalog,
-          payload.fileManifestFormat
-        ) || {};
       return {
         ...state,
         ...payload,
         fileSummaryFilters,
         isEnabled: true,
-        requestParams,
-        requestURL,
+        requestParams: undefined,
+        requestURL: undefined,
       };
     }
     // Updates file manifest.
     case FileManifestActionKind.UpdateFileManifest: {
-      return {
-        ...state,
-        ...payload,
-      };
+      return updateFileManifestAction(state, payload, fileManifestContext);
     }
     // Updates file manifest format.
     case FileManifestActionKind.UpdateFileManifestFormat: {
       // Build request params and request URL.
       const { requestParams, requestURL } =
-        buildFileManifestRequestURL(URL, state.filters, catalog, payload) || {};
+        buildFileManifestRequestURL(
+          URL,
+          getRequestFilters(state),
+          catalog,
+          payload
+        ) || {};
       return {
         ...state,
         fileManifestFormat: payload,
@@ -350,20 +336,13 @@ function fileManifestReducer(
         filters,
         state.fileSummaryFacetName
       );
-      // Build request params and request URL.
-      const { requestParams, requestURL } =
-        buildFileManifestRequestURL(
-          URL,
-          filters,
-          catalog,
-          state.fileManifestFormat
-        ) || {};
       return {
         ...state,
         fileSummaryFilters,
+        filesFacetsStatus: FILES_FACETS_STATUS.NOT_STARTED,
         filters,
-        requestParams,
-        requestURL,
+        requestParams: undefined,
+        requestURL: undefined,
       };
     }
     // Updates selected file manifest filters by category.
@@ -379,20 +358,13 @@ function fileManifestReducer(
         filters,
         state.fileSummaryFacetName
       );
-      // Build request params and request URL.
-      const { requestParams, requestURL } =
-        buildFileManifestRequestURL(
-          URL,
-          filters,
-          catalog,
-          state.fileManifestFormat
-        ) || {};
       return {
         ...state,
         fileSummaryFilters,
+        filesFacetsStatus: FILES_FACETS_STATUS.NOT_STARTED,
         filters,
-        requestParams,
-        requestURL,
+        requestParams: undefined,
+        requestURL: undefined,
       };
     }
     default:

package/src/styles/common/constants/size.ts

@@ -0,0 +1,5 @@
+export enum SIZE {
+  LARGE = "large",
+  MEDIUM = "medium",
+  SMALL = "small",
+}