@databiosphere/findable-ui 21.3.0 → 22.0.0

package/src/components/Export/components/ExportMethod/exportMethod.stories.tsx

@@ -1,8 +1,7 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ExportMethod } from "./exportMethod";
 
-export default {
+const meta = {
   argTypes: {
     buttonLabel: { control: "text" },
     description: { control: "text" },
@@ -11,16 +10,17 @@ export default {
   },
   component: ExportMethod,
   title: "Components/Section/Export/ExportMethod",
-} as ComponentMeta<typeof ExportMethod>;
+} satisfies Meta<typeof ExportMethod>;
 
-const ExportMethodTemplate: ComponentStory<typeof ExportMethod> = (args) => (
-  <ExportMethod {...args} />
-);
+export default meta;
 
-export const ExportMethodStory = ExportMethodTemplate.bind({});
-ExportMethodStory.args = {
-  buttonLabel: "Request curl Command",
-  description: "Obtain a curl command for downloading the selected data.",
-  route: "/request-curl-command",
-  title: "Download Study Data and Metadata (Curl Command)",
+type Story = StoryObj<typeof meta>;
+
+export const ExportMethodStory: Story = {
+  args: {
+    buttonLabel: "Request curl Command",
+    description: "Obtain a curl command for downloading the selected data.",
+    route: "/request-curl-command",
+    title: "Download Study Data and Metadata (Curl Command)",
+  },
 };

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.tsx

@@ -10,6 +10,7 @@ import React, { useRef } 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 { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
 import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import {
@@ -46,6 +47,9 @@ export const FileManifestDownload = ({
   const isInProgress = (isIdle || isLoading) && !disabled;
   const isReady = Boolean(manifestURL) || disabled;
 
+  // Prompt user for login before download and copy, if required.
+  const { requireLogin } = useLoginGuard();
+
   // Copies file manifest.
   const copyManifestURL = (url?: string): void => {
     if (!url) return;
@@ -89,15 +93,19 @@ export const FileManifestDownload = ({
                                 action="Download file manifest"
                                 disabled={disabled}
                                 label={<DownloadIconSmall />}
-                                onClick={downloadManifestURL}
+                                onClick={() =>
+                                  requireLogin(downloadManifestURL)
+                                }
                               />,
                               <ButtonGroupButton
                                 key="copy"
                                 action="Copy file manifest"
                                 disabled={disabled}
                                 label={<ContentCopyIconSmall />}
-                                onClick={(): void =>
-                                  copyManifestURL(manifestURL)
+                                onClick={() =>
+                                  requireLogin((): void =>
+                                    copyManifestURL(manifestURL)
+                                  )
                                 }
                               />,
                             ]}

package/src/components/Filter/components/Filter/filter.stories.tsx

@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Filter } from "./filter";
 
-export default {
+const meta = {
   argTypes: {
     tags: { control: { disable: true } },
   },
@@ -15,37 +15,38 @@ export default {
     ),
   ],
   title: "Components/Filter/Filter",
-} as ComponentMeta<typeof Filter>;
+} satisfies Meta<typeof Filter>;
 
-const FilterTemplate: ComponentStory<typeof Filter> = (args) => (
-  <Filter {...args} />
-);
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const onFilter = (): void => {
   // onFilter function
 };
 
-export const FilterStory = FilterTemplate.bind({});
-FilterStory.args = {
-  categoryView: {
-    isDisabled: false,
-    key: "genusSpecies",
-    label: "Genus Species",
-    values: [
-      {
-        count: 12,
-        key: "homoSapiens",
-        label: "Homo sapiens",
-        selected: false,
-      },
-      {
-        count: 6,
-        key: "musMusculus",
-        label: "Mus musculus",
-        selected: false,
-      },
-    ],
+export const FilterStory: Story = {
+  args: {
+    categoryView: {
+      isDisabled: false,
+      key: "genusSpecies",
+      label: "Genus Species",
+      values: [
+        {
+          count: 12,
+          key: "homoSapiens",
+          label: "Homo sapiens",
+          selected: false,
+        },
+        {
+          count: 6,
+          key: "musMusculus",
+          label: "Mus musculus",
+          selected: false,
+        },
+      ],
+    },
+    isFilterDrawer: false,
+    onFilter,
   },
-  isFilterDrawer: false,
-  onFilter,
 };

package/src/components/Filter/components/FilterLabel/filterLabel.stories.tsx

@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { FilterLabel } from "./filterLabel";
 
-export default {
+const meta = {
   argTypes: {
     count: { control: "number" },
     disabled: { control: "boolean" },
@@ -18,16 +18,18 @@ export default {
     ),
   ],
   title: "Components/Filter/FilterLabel",
-} as ComponentMeta<typeof FilterLabel>;
+} satisfies Meta<typeof FilterLabel>;
 
-const FilterLabelTemplate: ComponentStory<typeof FilterLabel> = (args) => (
-  <FilterLabel {...args} />
-);
+export default meta;
 
-export const FilterLabelStory = FilterLabelTemplate.bind({});
-FilterLabelStory.args = {
-  count: 123,
-  disabled: false,
-  isOpen: false,
-  label: "Label",
+type Story = StoryObj<typeof meta>;
+
+export const FilterLabelStory: Story = {
+  args: {
+    count: 123,
+    disabled: false,
+    isOpen: false,
+    label: "Label",
+    onClick: () => {},
+  },
 };

package/src/components/Filter/components/FilterMenu/filterMenu.stories.tsx

@@ -1,15 +1,13 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { FilterMenu } from "./filterMenu";
 
-export default {
+const meta = {
   argTypes: {
-    argTypes: {
-      categoryKey: { control: { disable: true } },
-      menuWidth: { control: "number" },
-      onFilter: { control: { disable: true } },
-      values: { control: { disable: true } },
-    },
+    categoryKey: { control: { disable: true } },
+    menuWidth: { control: "number" },
+    onFilter: { control: { disable: true } },
+    values: { control: { disable: true } },
   },
   component: FilterMenu,
   decorators: [
@@ -20,106 +18,111 @@ export default {
     ),
   ],
   title: "Components/Filter/FilterMenu",
-} as ComponentMeta<typeof FilterMenu>;
+} satisfies Meta<typeof FilterMenu>;
 
-const FilterMenuTemplate: ComponentStory<typeof FilterMenu> = (args) => (
-  <FilterMenu {...args} />
-);
+export default meta;
 
-export const FilterMenuStory = FilterMenuTemplate.bind({});
-FilterMenuStory.args = {
-  categoryKey: "donorDisease",
-  menuWidth: 312,
-  values: [
-    {
-      count: 312,
-      key: "normal",
-      label: "Normal",
-      selected: false,
-    },
-    {
-      count: 0,
-      key: "abscess",
-      label: "abscess",
-      selected: false,
-    },
-    {
-      count: 3,
-      key: "acoustic neuroma",
-      label: "acoustic neuroma",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "acute kidney failure",
-      label: "acute kidney failure",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "acute kidney tubular necrosis",
-      label: "acute kidney tubular necrosis",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "alcohol abuse",
-      label: "alcohol abuse",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "Alzheimer disease",
-      label: "Alzheimer disease",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "amyotrophic lateral sclerosis",
-      label: "amyotrophic lateral sclerosis",
-      selected: true,
-    },
-    {
-      count: 1,
-      key: "anxiety disorder",
-      label: "anxiety disorder",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "aplastic anemia",
-      label: "aplastic anemia",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "arthritis",
-      label: "arthritis",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "asthma",
-      label: "asthma",
-      selected: true,
-    },
-    {
-      count: 222,
-      key: "atherosclerosis",
-      label: "atherosclerosis",
-      selected: false,
-    },
-    {
-      count: 222,
-      key: "atrial fibrillation",
-      label: "atrial fibrillation",
-      selected: true,
-    },
-    {
-      count: 222,
-      key: "benign prostatic hyperplasia",
-      label: "benign prostatic hyperplasia",
-      selected: true,
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const FilterMenuStory: Story = {
+  args: {
+    categoryKey: "donorDisease",
+    categoryLabel: "Donor Disease",
+    isFilterDrawer: false,
+    menuWidth: 312,
+    onCloseFilter: () => {},
+    onFilter: () => {},
+    values: [
+      {
+        count: 312,
+        key: "normal",
+        label: "Normal",
+        selected: false,
+      },
+      {
+        count: 0,
+        key: "abscess",
+        label: "abscess",
+        selected: false,
+      },
+      {
+        count: 3,
+        key: "acoustic neuroma",
+        label: "acoustic neuroma",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "acute kidney failure",
+        label: "acute kidney failure",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "acute kidney tubular necrosis",
+        label: "acute kidney tubular necrosis",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "alcohol abuse",
+        label: "alcohol abuse",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "Alzheimer disease",
+        label: "Alzheimer disease",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "amyotrophic lateral sclerosis",
+        label: "amyotrophic lateral sclerosis",
+        selected: true,
+      },
+      {
+        count: 1,
+        key: "anxiety disorder",
+        label: "anxiety disorder",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "aplastic anemia",
+        label: "aplastic anemia",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "arthritis",
+        label: "arthritis",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "asthma",
+        label: "asthma",
+        selected: true,
+      },
+      {
+        count: 222,
+        key: "atherosclerosis",
+        label: "atherosclerosis",
+        selected: false,
+      },
+      {
+        count: 222,
+        key: "atrial fibrillation",
+        label: "atrial fibrillation",
+        selected: true,
+      },
+      {
+        count: 222,
+        key: "benign prostatic hyperplasia",
+        label: "benign prostatic hyperplasia",
+        selected: true,
+      },
+    ],
+  },
 };

package/src/components/Filter/components/FilterTag/filterTag.stories.tsx

@@ -1,22 +1,23 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { FilterTag } from "./filterTag";
 
-export default {
+const meta = {
   argTypes: {
     label: { control: "text" },
     superseded: { control: "boolean" },
   },
   component: FilterTag,
   title: "Components/Filter/FilterTag",
-} as ComponentMeta<typeof FilterTag>;
+} satisfies Meta<typeof FilterTag>;
 
-const FilterTagTemplate: ComponentStory<typeof FilterTag> = (args) => (
-  <FilterTag {...args} />
-);
+export default meta;
 
-export const FilterTagStory = FilterTagTemplate.bind({});
-FilterTagStory.args = {
-  label: "Male",
-  superseded: false,
+type Story = StoryObj<typeof meta>;
+
+export const FilterTagStory: Story = {
+  args: {
+    label: "Male",
+    onRemove: () => {},
+    superseded: false,
+  },
 };

package/src/components/Filter/components/FilterTags/filterTags.stories.tsx

@@ -1,8 +1,12 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { FilterTags } from "./filterTags";
 
-export default {
+const onRemove = (): void => {
+  // onRemove function
+};
+
+const meta = {
   argTypes: {
     tags: { control: { disable: true } },
   },
@@ -15,48 +19,45 @@ export default {
     ),
   ],
   title: "Components/Filter/FilterTags",
-} as ComponentMeta<typeof FilterTags>;
+} satisfies Meta<typeof FilterTags>;
 
-const FilterTagsTemplate: ComponentStory<typeof FilterTags> = (args) => (
-  <FilterTags {...args} />
-);
+export default meta;
 
-const onRemove = (): void => {
-  // onRemove function
-};
+type Story = StoryObj<typeof meta>;
 
-export const FilterTagsStory = FilterTagsTemplate.bind({});
-FilterTagsStory.args = {
-  tags: [
-    {
-      label: "Normal",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "abscess",
-      onRemove: onRemove,
-      superseded: true,
-    },
-    {
-      label: "acoustic neuroma",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "acute kidney failure",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "acute kidney tubular necrosis",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "alcohol abuse",
-      onRemove: onRemove,
-      superseded: false,
-    },
-  ],
+export const FilterTagsStory: Story = {
+  args: {
+    tags: [
+      {
+        label: "Normal",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "abscess",
+        onRemove: onRemove,
+        superseded: true,
+      },
+      {
+        label: "acoustic neuroma",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "acute kidney failure",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "acute kidney tubular necrosis",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "alcohol abuse",
+        onRemove: onRemove,
+        superseded: false,
+      },
+    ],
+  },
 };

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

@@ -1,17 +1,20 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { AzulFileDownload } from "./azulFileDownload";
 
-export default {
+const meta = {
   component: AzulFileDownload,
   title: "Components/Common/IconButton/Download",
-} as ComponentMeta<typeof AzulFileDownload>;
+} satisfies Meta<typeof AzulFileDownload>;
 
-const AzulFileDownloadTemplate: ComponentStory<typeof AzulFileDownload> = (
-  args
-) => <AzulFileDownload {...args} />;
+export default meta;
 
-export const AzulFileDownloadStory = AzulFileDownloadTemplate.bind({});
-AzulFileDownloadStory.args = {
-  url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+type Story = StoryObj<typeof meta>;
+
+export const AzulFileDownloadStory: Story = {
+  args: {
+    entityName: "",
+    relatedEntityId: "",
+    relatedEntityName: "",
+    url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+  },
 };

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

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { useFileLocation } from "../../../../hooks/useFileLocation";
+import { useLoginGuard } from "../../../../providers/loginGuard/hook";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
@@ -29,6 +30,9 @@ export const AzulFileDownload = ({
   const downloadRef = useRef<HTMLAnchorElement>(null);
   const [isRequestPending, setIsRequestPending] = useState(false);
 
+  // Prompt user for login before download, if required.
+  const { requireLogin } = useLoginGuard();
+
   // Initiates file download when file location request is successful.
   useEffect(() => {
     if (!fileUrl) return;
@@ -39,6 +43,13 @@ export const AzulFileDownload = ({
     setIsRequestPending(false);
   }, [fileUrl]);
 
+  // Initiates file download when download button is clicked.
+  const handleDownloadClick = (): void => {
+    setIsRequestPending(true);
+    trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
+    run();
+  };
+
   return (
     <Fragment>
       {isRequestPending ? (
@@ -54,11 +65,7 @@ export const AzulFileDownload = ({
           data-testid={AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID}
           disabled={!url}
           Icon={isLoading ? LoadingIcon : DownloadIcon}
-          onClick={(): void => {
-            setIsRequestPending(true);
-            trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
-            run();
-          }}
+          onClick={() => requireLogin(handleDownloadClick)}
           size="medium"
         />
       )}