@databiosphere/findable-ui 21.3.0 → 22.0.0

package/lib/providers/loginGuard/context.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+/**
+ * LoginGuardContext provides a way to trigger a login process. Default value is to
+ * call the callback immediately, if specified.
+ */
+export const LoginGuardContext = createContext({
+    requireLogin: (callback) => {
+        callback?.();
+    },
+});

package/lib/providers/loginGuard/hook.d.ts

@@ -0,0 +1,9 @@
+import { LoginGuardContextProps } from "./common/types";
+/**
+ * Custom hook to access the LoginGuard context. This hook returns an object
+ * containing the "requireLogin" function, which allows triggering the application's
+ * login process.
+ *
+ * @returns The current LoginGuard context value.
+ */
+export declare function useLoginGuard(): LoginGuardContextProps;

package/lib/providers/loginGuard/hook.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { LoginGuardContext } from "./context";
+/**
+ * Custom hook to access the LoginGuard context. This hook returns an object
+ * containing the "requireLogin" function, which allows triggering the application's
+ * login process.
+ *
+ * @returns The current LoginGuard context value.
+ */
+export function useLoginGuard() {
+    return useContext(LoginGuardContext);
+}

package/lib/providers/loginGuard/provider.d.ts

@@ -0,0 +1,11 @@
+import { LoginGuardProviderProps } from "./common/types";
+/**
+ * LoginGuardProvider is responsible for intercepting actions that require user authentication.
+ * It provides a "requireLogin" function via context. When a protected action is triggered while the
+ * user is unauthenticated, the LoginDialog is displayed. Upon successful authentication, the saved
+ * callback is invoked.
+ *
+ * @param {LoginGuardProviderProps} props - The provider props that include children.
+ * @returns The provider component.
+ */
+export declare function LoginGuardProvider({ children, }: LoginGuardProviderProps): JSX.Element;

package/lib/providers/loginGuard/provider.js

@@ -0,0 +1,55 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { LoginDialog } from "../../components/common/LoginDialog/loginDialog";
+import { useAuthenticationConfig } from "../../hooks/authentication/config/useAuthenticationConfig";
+import { useConfig } from "../../hooks/useConfig";
+import { useAuth } from "../authentication/auth/hook";
+import { LoginGuardContext } from "./context";
+/**
+ * LoginGuardProvider is responsible for intercepting actions that require user authentication.
+ * It provides a "requireLogin" function via context. When a protected action is triggered while the
+ * user is unauthenticated, the LoginDialog is displayed. Upon successful authentication, the saved
+ * callback is invoked.
+ *
+ * @param {LoginGuardProviderProps} props - The provider props that include children.
+ * @returns The provider component.
+ */
+export function LoginGuardProvider({ children, }) {
+    // Dialog open state.
+    const [open, setOpen] = useState(false);
+    // Use ref to store the callback without triggering re-render.
+    const callbackRef = useRef(undefined);
+    // Determine if authentication is enabled.
+    const authConfig = useAuthenticationConfig();
+    // Determine if authentication is required for downloads and exports.
+    const { config: { exportsRequireAuth }, } = useConfig();
+    // Get the user's authenticated state.
+    const { authState: { isAuthenticated }, } = useAuth();
+    // If the user authenticates, close dialog then fire and clear callback.
+    useEffect(() => {
+        if (isAuthenticated) {
+            setOpen(false);
+            callbackRef.current?.();
+            // Clear callback after firing.
+            callbackRef.current = undefined;
+        }
+    }, [isAuthenticated]);
+    // Handler to close the dialog.
+    const onClose = useCallback(() => {
+        setOpen(false);
+        // Clear any stored callback.
+        callbackRef.current = undefined;
+    }, []);
+    // Block actions that require authentication, or fire callback if already authenticated.
+    const requireLogin = useCallback((cb) => {
+        if (authConfig && exportsRequireAuth && !isAuthenticated) {
+            callbackRef.current = cb;
+            setOpen(true);
+        }
+        else {
+            cb?.();
+        }
+    }, [authConfig, exportsRequireAuth, isAuthenticated]);
+    return (React.createElement(LoginGuardContext.Provider, { value: { requireLogin } },
+        children,
+        React.createElement(LoginDialog, { open: open, onClose: onClose })));
+}

package/lib/styles/common/mui/typography.d.ts

@@ -1,2 +1,3 @@
 import { TypographyOwnProps } from "@mui/material";
+export declare const COLOR: Record<string, TypographyOwnProps["color"]>;
 export declare const VARIANT: Record<string, TypographyOwnProps["variant"]>;

package/lib/styles/common/mui/typography.js

@@ -1,3 +1,11 @@
+export const COLOR = {
+    INHERIT: "inherit",
+    INK_LIGHT: "ink.light",
+    INK_MAIN: "ink.main",
+};
 export const VARIANT = {
     INHERIT: "inherit",
+    TEXT_BODY_400: "text-body-400",
+    TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+    TEXT_HEADING_SMALL: "text-heading-small",
 };

package/lib/views/DataDictionaryView/dataDictionaryView.d.ts

@@ -0,0 +1,2 @@
+import { BaseComponentProps } from "../../components/types";
+export declare const DataDictionaryView: ({ className, }: BaseComponentProps) => JSX.Element;

package/lib/views/DataDictionaryView/dataDictionaryView.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
+export const DataDictionaryView = ({ className, }) => {
+    return React.createElement(DataDictionary, { className: className });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "21.3.0",
+  "version": "22.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -26,15 +26,15 @@
     "@commitlint/config-conventional": "^17.4.2",
     "@mui/types": "^7.2.18",
     "@next/eslint-plugin-next": "^14.1.0",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/nextjs": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/types": "^7.6.17",
+    "@storybook/addon-actions": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-mdx-gfm": "^8.6.4",
+    "@storybook/nextjs": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/types": "^8.6.4",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.4.0",
     "@types/react": "^18.3.5",
@@ -60,7 +60,7 @@
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
-    "storybook": "^7.6.17",
+    "storybook": "^8.6.4",
     "ts-jest": "^29.2.5",
     "typescript": "^5.5.4"
   },
@@ -72,7 +72,7 @@
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "copy-to-clipboard": "3.3.1",
-    "isomorphic-dompurify": "0.24.0",
+    "isomorphic-dompurify": "^2.22.0",
     "ky": "^1.7.2",
     "next": "^14.1.0",
     "next-auth": "^4.24.7",
@@ -83,7 +83,7 @@
     "react-idle-timer": "^5.7.2",
     "react-window": "1.8.9",
     "uuid": "8.3.2",
-    "validate.js": "^0.13.1"
+    "yup": "^1.6.1"
   },
   "engines": {
     "node": "20.10.0"

package/src/components/DataDictionary/components/Entities/constants.ts

@@ -0,0 +1,8 @@
+import { Grid2Props } from "@mui/material";
+
+export const GRID2_PROPS: Grid2Props = {
+  container: true,
+  direction: "column",
+  flexWrap: "nowrap",
+  rowGap: 8,
+};

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -0,0 +1,15 @@
+import { Grid2 } from "@mui/material";
+import React from "react";
+import { Entity } from "../Entity/entity";
+import { GRID2_PROPS } from "./constants";
+import { ClassesProps } from "./types";
+
+export const Entities = ({ classes }: ClassesProps): JSX.Element => {
+  return (
+    <Grid2 {...GRID2_PROPS}>
+      {classes.map((classData) => (
+        <Entity key={classData.key} class={classData} />
+      ))}
+    </Grid2>
+  );
+};

package/src/components/DataDictionary/components/Entities/types.ts

@@ -0,0 +1,5 @@
+import { Class } from "../../../../common/entities";
+
+export interface ClassesProps {
+  classes: Class[];
+}

package/src/components/DataDictionary/components/Entity/constants.ts

@@ -0,0 +1,7 @@
+import { Grid2Props } from "@mui/material";
+
+export const GRID2_PROPS: Grid2Props = {
+  container: true,
+  direction: "column",
+  flexWrap: "nowrap",
+};

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -0,0 +1,28 @@
+import { Grid2, Typography } from "@mui/material";
+import React from "react";
+import { COLOR, VARIANT } from "../../../../styles/common/mui/typography";
+import { useTable } from "../Table/hook";
+import { Table } from "../Table/table";
+import { GRID2_PROPS } from "./constants";
+import { EntityProps } from "./types";
+
+export const Entity = ({ class: classData }: EntityProps): JSX.Element => {
+  const table = useTable(classData.attributes);
+  return (
+    <Grid2 {...GRID2_PROPS} rowGap={4}>
+      <Grid2 {...GRID2_PROPS} rowGap={1}>
+        <Typography component="h3" variant={VARIANT.TEXT_HEADING_SMALL}>
+          {classData.label}
+        </Typography>
+        <Typography
+          color={COLOR.INK_LIGHT}
+          component="div"
+          variant={VARIANT.TEXT_BODY_400_2_LINES}
+        >
+          {classData.description}
+        </Typography>
+      </Grid2>
+      <Table table={table} />
+    </Grid2>
+  );
+};

package/src/components/DataDictionary/components/Entity/types.ts

@@ -0,0 +1,5 @@
+import { Class } from "../../../../common/entities";
+
+export interface EntityProps {
+  class: Class;
+}

package/src/components/DataDictionary/components/Table/columns/columnDef.ts

@@ -0,0 +1,47 @@
+import { CellContext, ColumnDef } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { BasicCell } from "../components/BasicCell/basicCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+import { AttributeValue } from "./types";
+
+const COLUMN_DEF_DESCRIPTION: ColumnDef<Attribute, AttributeValue> = {
+  accessorFn: (row) => row.description,
+  cell: (props: CellContext<Attribute, AttributeValue>) =>
+    BasicCell({ ...props }),
+  header: "Description",
+  id: COLUMN_IDENTIFIER.DESCRIPTION,
+  meta: { width: { max: "2fr", min: "480px" } },
+};
+
+const COLUMN_DEF_KEY: ColumnDef<Attribute, AttributeValue> = {
+  accessorFn: (row) => row.key,
+  cell: (props: CellContext<Attribute, AttributeValue>) =>
+    BasicCell({ ...props }),
+  header: "Key",
+  id: COLUMN_IDENTIFIER.KEY,
+  meta: { width: { max: "1fr", min: "180px" } },
+};
+
+const COLUMN_DEF_LABEL: ColumnDef<Attribute, AttributeValue> = {
+  accessorFn: (row) => row.label,
+  cell: (props: CellContext<Attribute, AttributeValue>) =>
+    BasicCell({ ...props }),
+  header: "Label",
+  id: COLUMN_IDENTIFIER.LABEL,
+  meta: { width: { max: "1fr", min: "200px" } },
+};
+
+export const COLUMN_DEF: Record<
+  keyof typeof COLUMN_IDENTIFIER,
+  ColumnDef<Attribute, AttributeValue>
+> = {
+  DESCRIPTION: COLUMN_DEF_DESCRIPTION,
+  KEY: COLUMN_DEF_KEY,
+  LABEL: COLUMN_DEF_LABEL,
+};
+
+export const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[] = [
+  COLUMN_DEF.LABEL,
+  COLUMN_DEF.KEY,
+  COLUMN_DEF.DESCRIPTION,
+];

package/src/components/DataDictionary/components/Table/columns/columnIdentifier.ts

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

package/src/components/DataDictionary/components/Table/columns/types.ts

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

package/src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx

@@ -0,0 +1,8 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { VARIANT } from "../../../../../../styles/common/mui/typography";
+import { BasicCellProps } from "./types";
+
+export const BasicCell = ({ getValue }: BasicCellProps): JSX.Element => {
+  return <Typography variant={VARIANT.INHERIT}>{getValue()}</Typography>;
+};

package/src/components/DataDictionary/components/Table/components/BasicCell/types.ts

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

package/src/components/DataDictionary/components/Table/hook.ts

@@ -0,0 +1,13 @@
+import { Table, useReactTable } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { COLUMN_DEFS } from "./columns/columnDef";
+import { useTableOptions } from "./options/hook";
+
+export const useTable = (data: Attribute[]): Table<Attribute> => {
+  const tableOptions = useTableOptions();
+  return useReactTable<Attribute>({
+    ...tableOptions,
+    columns: COLUMN_DEFS,
+    data,
+  });
+};

package/src/components/DataDictionary/components/Table/options/core/constants.ts

@@ -0,0 +1,12 @@
+import { CoreOptions, getCoreRowModel } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { ROW_POSITION } from "../../../../../Table/features/RowPosition/constants";
+import { ROW_PREVIEW } from "../../../../../Table/features/RowPreview/constants";
+
+export const CORE_OPTIONS: Pick<
+  CoreOptions<Attribute>,
+  "_features" | "getCoreRowModel"
+> = {
+  _features: [ROW_POSITION, ROW_PREVIEW],
+  getCoreRowModel: getCoreRowModel(),
+};

package/src/components/DataDictionary/components/Table/options/hook.ts

@@ -0,0 +1,14 @@
+import { TableOptions } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { CORE_OPTIONS } from "./core/constants";
+import { SORTING_OPTIONS } from "./sorting/constants";
+
+export const useTableOptions = (): Omit<
+  TableOptions<Attribute>,
+  "columns" | "data"
+> => {
+  return {
+    ...CORE_OPTIONS,
+    ...SORTING_OPTIONS,
+  };
+};

package/src/components/DataDictionary/components/Table/options/sorting/constants.ts

@@ -0,0 +1,9 @@
+import { SortingOptions } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+
+export const SORTING_OPTIONS: Pick<
+  SortingOptions<Attribute>,
+  "enableSorting"
+> = {
+  enableSorting: false,
+};

package/src/components/DataDictionary/components/Table/table.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../common/Paper/paper.styles";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  box-shadow: none;
+`;

package/src/components/DataDictionary/components/Table/table.tsx

@@ -0,0 +1,35 @@
+import { TableContainer } from "@mui/material";
+import React from "react";
+import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
+import { ROW_DIRECTION } from "../../../Table/common/entities";
+import { TableHead } from "../../../Table/components/TableHead/tableHead";
+import { GridTable } from "../../../Table/table.styles";
+import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
+import { GridPaper } from "../../../common/Paper/paper.styles";
+import { StyledRoundedPaper } from "./table.styles";
+import { TableProps } from "./types";
+
+export const Table = ({ table }: TableProps): JSX.Element => {
+  return (
+    <StyledRoundedPaper variant="table">
+      <GridPaper>
+        <TableContainer>
+          <GridTable
+            gridTemplateColumns={getColumnTrackSizing(
+              table.getVisibleFlatColumns()
+            )}
+          >
+            <TableHead
+              rowDirection={ROW_DIRECTION.DEFAULT}
+              tableInstance={table}
+            />
+            <TableBody
+              rowDirection={ROW_DIRECTION.DEFAULT}
+              tableInstance={table}
+            />
+          </GridTable>
+        </TableContainer>
+      </GridPaper>
+    </StyledRoundedPaper>
+  );
+};

package/src/components/DataDictionary/components/Table/types.ts

@@ -0,0 +1,6 @@
+import { Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+
+export interface TableProps {
+  table: Table<Attribute>;
+}

package/src/components/DataDictionary/dataDictionary.styles.ts

@@ -0,0 +1,8 @@
+import { styled } from "@mui/material";
+
+export const View = styled("div")`
+  flex: 1;
+  margin: 0 auto;
+  max-width: calc(100vw - 48px);
+  padding: 24px 0;
+`;

package/src/components/DataDictionary/dataDictionary.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { BaseComponentProps } from "../types";
+import { Entities } from "./components/Entities/entities";
+import { View } from "./dataDictionary.styles";
+import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
+
+export const DataDictionary = ({
+  className,
+}: BaseComponentProps): JSX.Element => {
+  const { classes } = useDataDictionary();
+  return (
+    <View className={className}>
+      <Entities classes={classes} />
+    </View>
+  );
+};

package/src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

@@ -0,0 +1,9 @@
+import { useConfig } from "../../../../hooks/useConfig";
+import { UseDataDictionary } from "./types";
+
+export const useDataDictionary = (): UseDataDictionary => {
+  const {
+    config: { dataDictionary: { classes = [] } = {} },
+  } = useConfig();
+  return { classes };
+};

package/src/components/DataDictionary/hooks/UseDataDictionary/types.ts

@@ -0,0 +1,5 @@
+import { Class } from "../../../../common/entities";
+
+export interface UseDataDictionary {
+  classes: Class[];
+}

package/src/components/Detail/detail.stories.tsx

@@ -1,17 +1,25 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { CollaboratingOrganizations } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { Contacts } from "../Project/components/Contacts/contacts";
 import { ContactsStory } from "../Project/components/Contacts/contacts.stories";
+import { Contributors } from "../Project/components/Contributors/contributors";
 import { ContributorsStory } from "../Project/components/Contributors/contributors.stories";
+import { DataCurators } from "../Project/components/DataCurators/dataCurators";
 import { DataCuratorsStory } from "../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicyStory } from "../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DataReleasePolicy } from "../Project/components/DataReleasePolicy/dataReleasePolicy";
+import { Description } from "../Project/components/Description/description";
 import { DescriptionStory } from "../Project/components/Description/description.stories";
+import { Details } from "../Project/components/Details/details";
 import { DetailsStory } from "../Project/components/Details/details.stories";
+import { Publications } from "../Project/components/Publications/publications";
 import { PublicationsStory } from "../Project/components/Publications/publications.stories";
+import { SupplementaryLinks } from "../Project/components/SupplementaryLinks/supplementaryLinks";
 import { SupplementaryLinksStory } from "../Project/components/SupplementaryLinks/supplementaryLinks.stories";
 import { Detail } from "./detail";
 
-export default {
+const meta = {
   argTypes: {
     Tabs: { table: { disable: true } },
     isDetailOverview: { control: "boolean" },
@@ -24,39 +32,36 @@ export default {
     layout: "fullscreen",
   },
   title: "Views/EntityDetailView",
-} as ComponentMeta<typeof Detail>;
+} satisfies Meta<typeof Detail>;
 
-const DetailTemplate: ComponentStory<typeof Detail> = (args) => (
-  <Detail {...args} />
-);
+export default meta;
 
-export const DetailStory = DetailTemplate.bind({});
-DetailStory.args = {
-  isDetailOverview: true,
-  mainColumn: (
-    <>
-      <DescriptionStory
-        projectDescription={DescriptionStory.args?.projectDescription || "None"}
-      />
-      <ContactsStory {...ContactsStory.args} />
-      <PublicationsStory {...PublicationsStory.args} />
-      <ContributorsStory {...ContributorsStory.args} />
-      <CollaboratingOrganizationsStory
-        {...CollaboratingOrganizationsStory.args}
-      />
-      <DataCuratorsStory {...DataCuratorsStory.args} />
-      {/*<CitationStory {...CitationStory.args} />*/}
-      <SupplementaryLinksStory {...SupplementaryLinksStory.args} />
-      <DataReleasePolicyStory />
-    </>
-  ),
-  sideColumn: (
-    <>
-      <DetailsStory
-        keyValuePairs={DetailsStory.args?.keyValuePairs}
-        title={DetailsStory.args?.title ?? ""}
-      />
-    </>
-  ),
-  top: <></>,
+type Story = StoryObj<typeof meta>;
+
+export const DetailStory: Story = {
+  args: {
+    isDetailOverview: true,
+    mainColumn: (
+      <>
+        <Description
+          projectDescription={
+            DescriptionStory.args.projectDescription || "None"
+          }
+        />
+        <Contacts {...ContactsStory.args} />
+        <Publications {...PublicationsStory.args} />
+        <Contributors {...ContributorsStory.args} />
+        <CollaboratingOrganizations {...CollaboratingOrganizationsStory.args} />
+        <DataCurators {...DataCuratorsStory.args} />
+        <SupplementaryLinks {...SupplementaryLinksStory.args} />
+        <DataReleasePolicy />
+      </>
+    ),
+    sideColumn: (
+      <>
+        <Details {...DetailsStory.args} />
+      </>
+    ),
+    top: <></>,
+  },
 };

package/src/components/Export/components/ExportForm/components/ExportButton/exportButton.tsx

@@ -2,6 +2,7 @@ import { Tooltip } from "@mui/material";
 import React, { ElementType, ReactNode } from "react";
 import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
 import { useFileManifestState } from "../../../../../../hooks/useFileManifestState";
+import { useLoginGuard } from "../../../../../../providers/loginGuard/hook";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 
 export interface ExportButtonProps {
@@ -19,6 +20,10 @@ export const ExportButton = ({
   const {
     fileManifestState: { isLoading },
   } = useFileManifestState();
+
+  // Prompt user for login before export, if required.
+  const { requireLogin } = useLoginGuard();
+
   return (
     <Tooltip arrow title={isLoading ? null : downloadStatus.message}>
       <span>
@@ -26,7 +31,9 @@ export const ExportButton = ({
           disabled={
             isLoading || downloadStatus.disabled || downloadStatus.isLoading
           }
-          onClick={onClick}
+          onClick={() => {
+            requireLogin(onClick);
+          }}
         >
           <span>{children}</span>
         </Button>