@databiosphere/findable-ui 21.0.0 → 21.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "21.0.0"
+  ".": "21.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [21.1.0](https://github.com/DataBiosphere/findable-ui/compare/v21.0.0...v21.1.0) (2025-01-30)
+
+
+### Features
+
+* support unifying export views  [#4102](https://github.com/DataBiosphere/findable-ui/issues/4102) ([#312](https://github.com/DataBiosphere/findable-ui/issues/312)) ([cbeb6e5](https://github.com/DataBiosphere/findable-ui/commit/cbeb6e5c6c264049767c3e7a5bebe4c72e25e6b1))
+
 ## [21.0.0](https://github.com/DataBiosphere/findable-ui/compare/v20.0.0...v21.0.0) (2025-01-06)
 
 

package/lib/common/constants.d.ts

@@ -6,7 +6,9 @@ export declare const COLLATOR_CASE_INSENSITIVE: Intl.Collator;
  * Values to determine the index for each param.
  * https://host/explore/[slug]/[param-uuid]/[param-tab]
  * - ExploreView 0 returns the current UUID
- * - ExploreView 1 returns the current tab
+ * - ExploreView 1 returns the current tab (or choose export)
+ * - ExportView 2 returns the export method
  */
 export declare const PARAMS_INDEX_UUID = 0;
 export declare const PARAMS_INDEX_TAB = 1;
+export declare const PARAMS_INDEX_EXPORT_METHOD = 2;

package/lib/common/constants.js

@@ -9,7 +9,9 @@ export const COLLATOR_CASE_INSENSITIVE = new Intl.Collator("en", {
  * Values to determine the index for each param.
  * https://host/explore/[slug]/[param-uuid]/[param-tab]
  * - ExploreView 0 returns the current UUID
- * - ExploreView 1 returns the current tab
+ * - ExploreView 1 returns the current tab (or choose export)
+ * - ExportView 2 returns the export method
  */
 export const PARAMS_INDEX_UUID = 0;
-export const PARAMS_INDEX_TAB = 1;
+export const PARAMS_INDEX_TAB = 1; // Note "export" (i.e. not a tab) can possibly be at this index too
+export const PARAMS_INDEX_EXPORT_METHOD = 2;

package/lib/config/entities.d.ts

@@ -133,8 +133,10 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     entityMapper?: EntityMapper<T, I>;
     exploreMode: ExploreMode;
     explorerTitle?: SiteConfig["explorerTitle"];
+    export?: ExportConfig;
     getId?: GetIdFunction<T>;
     getTitle?: GetTitleFunction<T>;
+    hideTabs?: boolean;
     list: ListConfig<T>;
     listView?: ListViewConfig;
     options?: Options;

package/lib/hooks/useEntityExportConfig.d.ts

@@ -0,0 +1,6 @@
+import { ExportConfig } from "../config/entities";
+/**
+ * Returns the export configuration for the given entity.
+ * @returns export configuration.
+ */
+export declare const useEntityExportConfig: () => ExportConfig;

package/lib/hooks/useEntityExportConfig.js

@@ -0,0 +1,12 @@
+import { useConfig } from "./useConfig";
+/**
+ * Returns the export configuration for the given entity.
+ * @returns export configuration.
+ */
+export const useEntityExportConfig = () => {
+    const { entityConfig } = useConfig();
+    if (!entityConfig.export) {
+        throw new Error("This entity config does not have an export field set");
+    }
+    return entityConfig.export;
+};

package/lib/views/EntityDetailView/entityDetailView.js

@@ -30,11 +30,11 @@ export const EntityDetailView = (props) => {
     const { push, query } = useRouter();
     const { entityConfig } = useConfig();
     const { mainColumn, sideColumn } = currentTab;
-    const { detail, route: entityRoute } = entityConfig;
+    const { detail, hideTabs, route: entityRoute } = entityConfig;
     const { detailOverviews, top } = detail;
     const uuid = query.params?.[PARAMS_INDEX_UUID];
     const isDetailOverview = detailOverviews?.includes(currentTab.label);
-    const tabs = getTabs(entityConfig);
+    const tabs = hideTabs ? [] : getTabs(entityConfig);
     const title = useEntityHeadTitle(response);
     if (!response) {
         return React.createElement("span", null); //TODO: return the loading UI component
@@ -50,5 +50,5 @@ export const EntityDetailView = (props) => {
     return (React.createElement(Fragment, null,
         title && (React.createElement(Head, null,
             React.createElement("title", null, title))),
-        React.createElement(DetailView, { isDetailOverview: isDetailOverview, mainColumn: React.createElement(ComponentCreator, { components: mainColumn, response: response }), sideColumn: sideColumn ? (React.createElement(ComponentCreator, { components: sideColumn, response: response })) : undefined, Tabs: React.createElement(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabRoute }), top: React.createElement(ComponentCreator, { components: top, response: response }) })));
+        React.createElement(DetailView, { isDetailOverview: isDetailOverview, mainColumn: React.createElement(ComponentCreator, { components: mainColumn, response: response }), sideColumn: sideColumn ? (React.createElement(ComponentCreator, { components: sideColumn, response: response })) : undefined, Tabs: hideTabs ? (React.createElement(React.Fragment, null)) : (React.createElement(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabRoute })), top: React.createElement(ComponentCreator, { components: top, response: response }) })));
 };

package/lib/views/EntityExportMethodView/entityExportMethodView.d.ts

@@ -0,0 +1,2 @@
+import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
+export declare const EntityExportMethodView: (props: EntityDetailViewProps) => JSX.Element;

package/lib/views/EntityExportMethodView/entityExportMethodView.js

@@ -0,0 +1,41 @@
+import { useRouter } from "next/router";
+import React from "react";
+import { PARAMS_INDEX_EXPORT_METHOD } from "../../common/constants";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
+import { useEntityExportConfig } from "../../hooks/useEntityExportConfig";
+import { useFetchEntity } from "../../hooks/useFetchEntity";
+import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
+export const EntityExportMethodView = (props) => {
+    // Update the catalog param if necessary.
+    useUpdateURLCatalogParams();
+    // Grab the entity to be exported.
+    const { response } = useFetchEntity(props);
+    // Get the column definitions for the entity export.
+    const { query } = useRouter();
+    const { exportMethods, tabs } = useEntityExportConfig();
+    const { sideColumn } = tabs[0];
+    const { mainColumn, top } = getExportMethodConfig(exportMethods, query) || {};
+    // Wait for the entity to be fetched.
+    if (!response) {
+        return React.createElement("span", null);
+    }
+    return (React.createElement(BackPageView, { mainColumn: React.createElement(ComponentCreator, { components: mainColumn || [], response: response }), sideColumn: sideColumn ? (React.createElement(ComponentCreator, { components: sideColumn, response: response })) : undefined, top: React.createElement(ComponentCreator, { components: top || [], response: response }) }));
+};
+/**
+ * Returns the export method configuration for the given pathname.
+ * @param exportMethods - Export methods config.
+ * @param query - Router query object.
+ * @returns export method configuration.
+ */
+function getExportMethodConfig(exportMethods, query) {
+    // Determine the selected export method from the URL.
+    const exportMethodRoute = query.params?.[PARAMS_INDEX_EXPORT_METHOD];
+    if (!exportMethodRoute) {
+        return;
+    }
+    // Find the config for the selected export method.
+    return exportMethods.find(({ route }) => {
+        return route.includes(exportMethodRoute);
+    });
+}

package/lib/views/EntityExportView/entityExportView.d.ts

@@ -0,0 +1,2 @@
+import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
+export declare const EntityExportView: (props: EntityDetailViewProps) => JSX.Element;

package/lib/views/EntityExportView/entityExportView.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
+import { useEntityExportConfig } from "../../hooks/useEntityExportConfig";
+import { useFetchEntity } from "../../hooks/useFetchEntity";
+import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
+export const EntityExportView = (props) => {
+    // Update the catalog param if necessary.
+    useUpdateURLCatalogParams();
+    // Grab the entity to be exported.
+    const { response } = useFetchEntity(props);
+    // Get the column definitions for the entity export.
+    const { tabs, top } = useEntityExportConfig();
+    const currentTab = tabs[0];
+    const { mainColumn, sideColumn } = currentTab;
+    // Wait for the entity to be fetched.
+    if (!response) {
+        return React.createElement("span", null);
+    }
+    return (React.createElement(BackPageView, { mainColumn: React.createElement(ComponentCreator, { components: mainColumn, response: response }), sideColumn: sideColumn ? (React.createElement(ComponentCreator, { components: sideColumn, response: response })) : undefined, top: React.createElement(ComponentCreator, { components: top, response: response }) }));
+};

package/package.json

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

package/src/common/constants.ts

@@ -10,7 +10,9 @@ export const COLLATOR_CASE_INSENSITIVE = new Intl.Collator("en", {
  * Values to determine the index for each param.
  * https://host/explore/[slug]/[param-uuid]/[param-tab]
  * - ExploreView 0 returns the current UUID
- * - ExploreView 1 returns the current tab
+ * - ExploreView 1 returns the current tab (or choose export)
+ * - ExportView 2 returns the export method
  */
 export const PARAMS_INDEX_UUID = 0;
-export const PARAMS_INDEX_TAB = 1;
+export const PARAMS_INDEX_TAB = 1; // Note "export" (i.e. not a tab) can possibly be at this index too
+export const PARAMS_INDEX_EXPORT_METHOD = 2;

package/src/config/entities.ts

@@ -176,8 +176,10 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
   entityMapper?: EntityMapper<T, I>;
   exploreMode: ExploreMode;
   explorerTitle?: SiteConfig["explorerTitle"];
+  export?: ExportConfig;
   getId?: GetIdFunction<T>;
   getTitle?: GetTitleFunction<T>;
+  hideTabs?: boolean;
   list: ListConfig<T>;
   listView?: ListViewConfig;
   options?: Options;

package/src/hooks/useEntityExportConfig.ts

@@ -0,0 +1,16 @@
+import { ExportConfig } from "../config/entities";
+import { useConfig } from "./useConfig";
+
+/**
+ * Returns the export configuration for the given entity.
+ * @returns export configuration.
+ */
+export const useEntityExportConfig = (): ExportConfig => {
+  const { entityConfig } = useConfig();
+
+  if (!entityConfig.export) {
+    throw new Error("This entity config does not have an export field set");
+  }
+
+  return entityConfig.export;
+};

package/src/views/EntityDetailView/entityDetailView.tsx

@@ -41,11 +41,11 @@ export const EntityDetailView = (props: EntityDetailViewProps): JSX.Element => {
   const { push, query } = useRouter();
   const { entityConfig } = useConfig();
   const { mainColumn, sideColumn } = currentTab;
-  const { detail, route: entityRoute } = entityConfig;
+  const { detail, hideTabs, route: entityRoute } = entityConfig;
   const { detailOverviews, top } = detail;
   const uuid = query.params?.[PARAMS_INDEX_UUID];
   const isDetailOverview = detailOverviews?.includes(currentTab.label);
-  const tabs = getTabs(entityConfig);
+  const tabs = hideTabs ? [] : getTabs(entityConfig);
   const title = useEntityHeadTitle(response);
 
   if (!response) {
@@ -78,7 +78,13 @@ export const EntityDetailView = (props: EntityDetailViewProps): JSX.Element => {
             <ComponentCreator components={sideColumn} response={response} />
           ) : undefined
         }
-        Tabs={<Tabs onTabChange={onTabChange} tabs={tabs} value={tabRoute} />}
+        Tabs={
+          hideTabs ? (
+            <></>
+          ) : (
+            <Tabs onTabChange={onTabChange} tabs={tabs} value={tabRoute} />
+          )
+        }
         top={<ComponentCreator components={top} response={response} />}
       />
     </Fragment>

package/src/views/EntityExportMethodView/entityExportMethodView.tsx

@@ -0,0 +1,67 @@
+import { useRouter } from "next/router";
+import type { ParsedUrlQuery } from "querystring";
+import React from "react";
+import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
+import { PARAMS_INDEX_EXPORT_METHOD } from "../../common/constants";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
+import { ExportMethodConfig } from "../../config/entities";
+import { useEntityExportConfig } from "../../hooks/useEntityExportConfig";
+import { useFetchEntity } from "../../hooks/useFetchEntity";
+import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
+
+export const EntityExportMethodView = (
+  props: EntityDetailViewProps
+): JSX.Element => {
+  // Update the catalog param if necessary.
+  useUpdateURLCatalogParams();
+
+  // Grab the entity to be exported.
+  const { response } = useFetchEntity(props);
+
+  // Get the column definitions for the entity export.
+  const { query } = useRouter();
+  const { exportMethods, tabs } = useEntityExportConfig();
+  const { sideColumn } = tabs[0];
+  const { mainColumn, top } = getExportMethodConfig(exportMethods, query) || {};
+
+  // Wait for the entity to be fetched.
+  if (!response) {
+    return <span></span>;
+  }
+
+  return (
+    <BackPageView
+      mainColumn={
+        <ComponentCreator components={mainColumn || []} response={response} />
+      }
+      sideColumn={
+        sideColumn ? (
+          <ComponentCreator components={sideColumn} response={response} />
+        ) : undefined
+      }
+      top={<ComponentCreator components={top || []} response={response} />}
+    />
+  );
+};
+
+/**
+ * Returns the export method configuration for the given pathname.
+ * @param exportMethods - Export methods config.
+ * @param query - Router query object.
+ * @returns export method configuration.
+ */
+function getExportMethodConfig(
+  exportMethods: ExportMethodConfig[],
+  query: ParsedUrlQuery
+): ExportMethodConfig | undefined {
+  // Determine the selected export method from the URL.
+  const exportMethodRoute = query.params?.[PARAMS_INDEX_EXPORT_METHOD];
+  if (!exportMethodRoute) {
+    return;
+  }
+  // Find the config for the selected export method.
+  return exportMethods.find(({ route }) => {
+    return route.includes(exportMethodRoute);
+  });
+}

package/src/views/EntityExportView/entityExportView.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
+import { useEntityExportConfig } from "../../hooks/useEntityExportConfig";
+import { useFetchEntity } from "../../hooks/useFetchEntity";
+import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
+
+export const EntityExportView = (props: EntityDetailViewProps): JSX.Element => {
+  // Update the catalog param if necessary.
+  useUpdateURLCatalogParams();
+
+  // Grab the entity to be exported.
+  const { response } = useFetchEntity(props);
+
+  // Get the column definitions for the entity export.
+  const { tabs, top } = useEntityExportConfig();
+  const currentTab = tabs[0];
+  const { mainColumn, sideColumn } = currentTab;
+
+  // Wait for the entity to be fetched.
+  if (!response) {
+    return <span></span>;
+  }
+
+  return (
+    <BackPageView
+      mainColumn={
+        <ComponentCreator components={mainColumn} response={response} />
+      }
+      sideColumn={
+        sideColumn ? (
+          <ComponentCreator components={sideColumn} response={response} />
+        ) : undefined
+      }
+      top={<ComponentCreator components={top} response={response} />}
+    />
+  );
+};