@truedat/dd 7.12.1 → 7.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.12.1",
+    "@truedat/test": "7.12.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -83,5 +83,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "b89751f9b306e3efd68dc2bbdab718e2fed62d07"
+  "gitHead": "b5edde19955e90a0e17d4e8bdaf2c1fe871bc3b9"
 }

package/src/api.js

@@ -53,6 +53,8 @@ const API_STRUCTURES_UPLOAD_EVENTS =
   "/api/data_structures/bulk_update_template_content_events";
 const API_STRUCTURE_NOTE = "/api/data_structures/:data_structure_id/notes/:id";
 const API_STRUCTURE_NOTES = "/api/data_structures/:data_structure_id/notes";
+const API_STRUCTURE_NOTES_XLSX_DOWNLOAD =
+  "/api/data_structures/:id/notes/xlsx/download";
 
 export {
   API_BUCKET_STRUCTURES,
@@ -104,6 +106,7 @@ export {
   API_STRUCTURES_UPLOAD_EVENTS,
   API_STRUCTURE_NOTE,
   API_STRUCTURE_NOTES,
+  API_STRUCTURE_NOTES_XLSX_DOWNLOAD,
   API_STRUCTURE_TO_STRUCTURE_LINKS,
   API_STRUCTURE_TO_STRUCTURE_LINK,
 };

package/src/components/StructureNotesDownloadButton.js

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Checkbox, Modal, Icon } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useStructureNotesDownload } from "../hooks/useStructures";
+
+export const StructureNotesDownloadButton = ({ structureId }) => {
+  const { formatMessage, locale } = useIntl();
+  const [open, setOpen] = useState(false);
+  const [selectedStatuses, setSelectedStatuses] = useState(["published"]);
+  const [includeChildren, setIncludeChildren] = useState(false);
+
+  const { trigger: triggerDownload, isMutating: isDownloading } =
+    useStructureNotesDownload();
+ 
+  const handleDownload = () => {
+    triggerDownload({
+      id: structureId,
+      statuses: selectedStatuses,
+      include_children: includeChildren,
+      lang: locale
+    });
+    setOpen(false);
+  };
+
+  return (
+    <Modal
+      trigger={
+        <Button
+          icon="download"
+          onClick={() => setOpen(true)}
+          loading={isDownloading} 
+          className="basic structureButton profile"
+        />
+      }
+      open={open}
+      onClose={() => setOpen(false)}
+      size="small"
+    >
+      <Modal.Header>
+        <Icon name="download" />
+        {formatMessage({ id: "structure.actions.downloadNotes.modal.title" })}
+      </Modal.Header>
+      <Modal.Content>
+          <Checkbox
+            className="bgOrange"
+            toggle
+            label={formatMessage({
+              id: "structure.actions.downloadNotes.includeChildren",
+            })}
+            onChange={() => setIncludeChildren(!includeChildren)}
+            checked={includeChildren}
+            style={{ top: "6px", marginRight: "7.5px" }}
+          />
+
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={() => setOpen(false)}>
+          {formatMessage({ id: "actions.cancel" })}
+        </Button>
+        <Button
+          primary
+          onClick={handleDownload}
+          loading={isDownloading}
+        >
+          <Icon name="download" />
+          {formatMessage({ id: "actions.download" })}
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+};
+
+StructureNotesDownloadButton.propTypes = {
+  structureId: PropTypes.string.isRequired,
+};
+
+export default StructureNotesDownloadButton;

package/src/components/StructureSummary.js

@@ -10,6 +10,7 @@ import StructureProperties from "./StructureProperties";
 import StructureConfidentialButton from "./StructureConfidentialButton";
 import StructureDeleteButton from "./StructureDeleteButton";
 import StructureGrantSummaryButton from "./StructureGrantSummaryButton";
+import StructureNotesDownloadButton from "./StructureNotesDownloadButton";
 import StructureProfileButton from "./StructureProfileButton";
 import StructureTags from "./StructureTags";
 
@@ -50,6 +51,7 @@ const dateProperties = (deleted_at, updatedAt) =>
       };
 
 export const StructureSummary = ({
+  id,
   class: structureClass,
   classes: structureClasses,
   name,
@@ -63,7 +65,7 @@ export const StructureSummary = ({
   const { formatMessage } = useIntl();
   const shareUrl = window.location.href;
   const shareTitle = formatMessage({ id: "structure.share.title" });
-
+ 
   return (
     <>
       <Grid>
@@ -94,6 +96,7 @@ export const StructureSummary = ({
               icon="structures"
               popupType="structures"
             />
+            <StructureNotesDownloadButton structureId={id} />
             {userPermissions.profile_permission &&
             structureClass === "field" ? (
               <StructureProfileButton />
@@ -112,6 +115,7 @@ export const StructureSummary = ({
 };
 
 StructureSummary.propTypes = {
+  id: PropTypes.string,
   class: PropTypes.string,
   classes: PropTypes.object,
   name: PropTypes.string,

package/src/components/StructuresView.js

@@ -19,7 +19,7 @@ import StructuresOptions from "./StructuresOptions";
 import StructuresSearchResults from "./StructuresSearchResults";
 import SystemCards from "./SystemCards";
 import CatalogCustomViewCards from "./CatalogCustomViewCards";
-
+ 
 const StructuresHeader = () => {
   const { formatMessage } = useIntl();
   const match = useMatch(BUCKETS_VIEW);

package/src/components/__tests__/StructureNotesDownloadButton.spec.js

@@ -0,0 +1,219 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import { StructureNotesDownloadButton } from "../StructureNotesDownloadButton";
+import * as useStructures from "../../hooks/useStructures";
+
+const messages = {
+  "structure.actions.downloadNotes": "Download notes",
+  "structure.actions.downloadNotes.modal.title": "Download Structure Notes",
+  "structure.actions.downloadNotes.includeChildren": "Include direct children notes",
+  "actions.cancel": "Cancel",
+  "actions.download": "Download",
+};
+
+const renderWithIntl = (component) => {
+  return render(
+    <IntlProvider locale="en" messages={messages}>
+      {component}
+    </IntlProvider>
+  );
+};
+
+// Helper function to get checkbox by label text
+const getCheckboxByLabel = (labelText) => {
+  const label = screen.getByText(labelText);
+  const checkboxContainer = label.closest(".ui.checkbox");
+  return checkboxContainer.querySelector("input[type='checkbox']");
+};
+
+describe("StructureNotesDownloadButton", () => {
+  const mockTrigger = jest.fn();
+  const mockStructureId = "123";
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.spyOn(useStructures, "useStructureNotesDownload").mockReturnValue({
+      trigger: mockTrigger,
+      isMutating: false,
+    });
+  });
+
+  it("always renders download button", () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("class", expect.stringContaining("basic"));
+  });
+
+  it("opens modal when button is clicked", () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    expect(
+      screen.getByText("Download Structure Notes")
+    ).toBeInTheDocument();
+  });
+
+  it("displays include children checkbox in modal", () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    const includeChildrenCheckbox = screen.getByText("Include direct children notes");
+    expect(includeChildrenCheckbox).toBeInTheDocument();
+  });
+
+  it("allows toggling include children checkbox", () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    const includeChildrenCheckbox = getCheckboxByLabel("Include direct children notes");
+    
+    // Initially should not be checked
+    expect(includeChildrenCheckbox).not.toBeChecked();
+
+    fireEvent.click(includeChildrenCheckbox);
+    expect(includeChildrenCheckbox).toBeChecked();
+
+    fireEvent.click(includeChildrenCheckbox);
+    expect(includeChildrenCheckbox).not.toBeChecked();
+  });
+
+  it("calls trigger with correct parameters when download button is clicked", async () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const openButton = screen.getByRole("button");
+    fireEvent.click(openButton);
+
+    // Toggle the "Include direct children notes" checkbox to checked
+    const includeChildrenCheckbox = getCheckboxByLabel("Include direct children notes");
+    fireEvent.click(includeChildrenCheckbox);
+    expect(includeChildrenCheckbox).toBeChecked();
+
+    const downloadButton = screen.getByRole("button", { name: /^download$/i });
+    fireEvent.click(downloadButton);
+
+    await waitFor(() => {
+      expect(mockTrigger).toHaveBeenCalledWith({
+        id: mockStructureId,
+        include_children: true,
+        lang: "en",
+        statuses: ["published"]
+      });
+    });
+  });
+
+  it("calls trigger with include_children false when checkbox is not selected", async () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const openButton = screen.getByRole("button");
+    fireEvent.click(openButton);
+
+    // Ensure "Include direct children notes" checkbox is not checked
+    const includeChildrenCheckbox = getCheckboxByLabel("Include direct children notes");
+    expect(includeChildrenCheckbox).not.toBeChecked();
+
+    const downloadButton = screen.getByRole("button", { name: /^download$/i });
+    fireEvent.click(downloadButton);
+
+    await waitFor(() => {
+      expect(mockTrigger).toHaveBeenCalledWith({
+        id: mockStructureId,
+        include_children: false,
+        lang: "en",
+        statuses: ["published"]
+      });
+    });
+  });
+
+  it("closes modal after download", async () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const openButton = screen.getByRole("button");
+    fireEvent.click(openButton);
+
+    const modalTitle = screen.getByText("Download Structure Notes");
+    expect(modalTitle).toBeInTheDocument();
+
+    const downloadButton = screen.getByRole("button", { name: /^download$/i });
+    fireEvent.click(downloadButton);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText("Download Structure Notes")
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("shows loading state when downloading", () => {
+    jest.spyOn(useStructures, "useStructureNotesDownload").mockReturnValue({
+      trigger: mockTrigger,
+      isMutating: true,
+    });
+
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("class", expect.stringContaining("loading"));
+  });
+
+  it("closes modal when cancel button is clicked", () => {
+    renderWithIntl(
+      <StructureNotesDownloadButton 
+        structureId={mockStructureId} 
+      />
+    );
+
+    const openButton = screen.getByRole("button");
+    fireEvent.click(openButton);
+
+    const modalTitle = screen.getByText("Download Structure Notes");
+    expect(modalTitle).toBeInTheDocument();
+
+    const cancelButton = screen.getByRole("button", { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(
+      screen.queryByText("Download Structure Notes")
+    ).not.toBeInTheDocument();
+  });
+});

package/src/components/__tests__/__snapshots__/StructureSummary.spec.js.snap

@@ -52,6 +52,14 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
             class="share alternate icon"
           />
         </button>
+        <button
+          class="ui icon button basic structureButton profile"
+        >
+          <i
+            aria-hidden="true"
+            class="download icon"
+          />
+        </button>
         <button
           class="ui icon button basic"
         >
@@ -200,6 +208,14 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
             class="share alternate icon"
           />
         </button>
+        <button
+          class="ui icon button basic structureButton profile"
+        >
+          <i
+            aria-hidden="true"
+            class="download icon"
+          />
+        </button>
         <button
           class="ui icon button basic"
         >

package/src/hooks/useStructures.js

@@ -16,6 +16,7 @@ import {
   API_DATA_STRUCTURE_FILTERS_SEARCH,
   API_DATA_STRUCTURES_XLSX_DOWNLOAD,
   API_DATA_STRUCTURES_XLSX_UPLOAD,
+  API_STRUCTURE_NOTES_XLSX_DOWNLOAD,
 } from "../api";
 
 const toApiPath = compile(API_SYSTEM_STRUCTURES);
@@ -95,3 +96,16 @@ export const useDataStructureSuggestions = () => {
     return apiJsonPost(url, arg);
   });
 };
+
+export const useStructureNotesDownload = () => {
+  return useSWRMutations(API_STRUCTURE_NOTES_XLSX_DOWNLOAD, (url, { arg }) => {
+    const { id, ...params } = arg;
+    const downloadUrl = url.replace(":id", id);
+    return apiJsonPost(downloadUrl, params, {
+      ...JSON_OPTS,
+      responseType: "blob",
+    }).then(({ data, headers }) => {
+      saveFile({ data, headers });
+    });
+  });
+};