@truedat/dd 8.8.6 → 8.8.8

package/package.json

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

package/src/components/EditDomainForm.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import { useState } from "react";
-import { Button, Checkbox, Form, Header } from "semantic-ui-react";
+import { Button, Checkbox, Form, Header, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -17,18 +17,61 @@ export const EditDomainForm = ({
   const { formatMessage } = useIntl();
   const [domainIds, setDomainIds] = useState(structure?.domain_ids || []);
   const [inherit, setInherit] = useState(true);
+  const [showConfirm, setShowConfirm] = useState(false);
 
-  const onSubmit = () => {
+  const doUpdate = () => {
     const data_structure = { id: structure.id, domain_ids: domainIds };
-
     updateStructure({ data_structure, inherit });
   };
 
+  const onSubmit = () => {
+    if (inherit) {
+      setShowConfirm(true);
+      return;
+    }
+    doUpdate();
+  };
+
+  const handleConfirm = () => {
+    setShowConfirm(false);
+    doUpdate();
+  };
+
+  const handleCancel = () => {
+    setShowConfirm(false);
+  };
+
   const handleReset = () => {
     setDomainIds(structure?.domain_ids || []);
     setInherit(true);
   };
 
+  if (showConfirm) {
+    return (
+      <div className="edit-domain-form">
+        <div className="confirm-content">
+          <div className="confirm-icon pulse-warning">
+            <Icon name="exclamation triangle" />
+          </div>
+          <p className="confirm-message">
+            {formatMessage(
+              { id: "structure.edit_domain.confirm_inherit" },
+              { name: <b>{structure.name}</b> },
+            )}
+          </p>
+          <div className="confirm-actions">
+            <Button type="button" size="tiny" onClick={handleCancel}>
+              {formatMessage({ id: "structure.edit_domain.close" })}
+            </Button>
+            <Button type="button" primary size="tiny" onClick={handleConfirm}>
+              {formatMessage({ id: "structureDomain.actions.update" })}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="edit-domain-form">
       <div className="header-wrapper">
@@ -79,6 +122,7 @@ export const EditDomainForm = ({
             type="button"
             secondary
             size="tiny"
+            disabled={_.isEqual(domainIds, structure?.domain_ids)}
             content={formatMessage({ id: "structure.edit_domain.reset" })}
             onClick={handleReset}
           />
@@ -88,7 +132,7 @@ export const EditDomainForm = ({
             disabled={
               saving ||
               _.isEmpty(domainIds) ||
-              domainIds == [structure?.domain_ids]
+              _.isEqual(domainIds, structure?.domain_ids)
             }
             primary
             content={formatMessage({ id: "structureDomain.actions.update" })}
@@ -108,7 +152,7 @@ EditDomainForm.propTypes = {
 };
 
 const mapStateToProps = ({ structure, structureUpdating }) => ({
-  structure: _.pick(["id", "domain_ids"])(structure),
+  structure: _.pick(["id", "domain_ids", "name"])(structure),
   saving: structureUpdating,
 });
 

package/src/components/EditDomainPopup.js

@@ -32,7 +32,7 @@ export const EditDomainPopup = ({
       className="edit-domain-button"
       size="tiny"
       circular
-      icon="plus"
+      icon="pencil"
     />
   );
 

package/src/components/StructureNotesEdit.js

@@ -7,7 +7,6 @@ import { useIntl } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
 import { selectTemplate, selectDomains } from "@truedat/df/routines";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
-import { apiJson } from "@truedat/core/services/api";
 import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
 import { doStructureNoteAction } from "../routines";
 import { getLatestDfContent } from "../selectors/getSortedStructureNotes";
@@ -29,9 +28,6 @@ export const StructureNotesEdit = ({
   latestDfContent,
 }) => {
   const [content, setContent] = useState(latestDfContent);
-  const aiSuggestionsUrl = _.prop("_actions.ai_suggestions.href")(
-    structureNotes,
-  );
 
   const isModification = !_.isEmpty(latestDfContent);
 
@@ -76,22 +72,28 @@ export const StructureNotesEdit = ({
     setContent({ ...content, ...suggestions });
   };
 
-  const requestAiSuggestion = (callback) => {
-    const url = `${aiSuggestionsUrl}?language=${locale}`;
-    apiJson(url).then(callback);
+  const suggestionParams = {
+    resource_type: "data_structure",
+    resource_body: {
+      name: structure.name || "",
+      domain: _.get("domains[0].name")(structure) || "",
+      type: template?.name,
+    },
+    domain_ids: structure.domain_ids,
+    template_id: template?.id,
+    language: locale,
+    resource_id: structure.id ?? null,
   };
 
   return (
     <Segment attached="bottom">
       <TemplateLoader id="templateloader" />
-      {aiSuggestionsUrl ? (
-        <SuggestionsWidget
-          requestAiSuggestion={requestAiSuggestion}
-          template={template}
-          applySuggestions={applySuggestions}
-          isModification={isModification}
-        />
-      ) : null}
+      <SuggestionsWidget
+        suggestionParams={suggestionParams}
+        template={template}
+        applySuggestions={applySuggestions}
+        isModification={isModification}
+      />
       <Form>
         <DynamicForm
           onChange={setContent}

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

@@ -49,7 +49,7 @@ describe("<EditDomainForm />", () => {
     });
   });
 
-  it("invokes function when send button clicked", async () => {
+  it("invokes function when send button clicked and confirm modal confirmed", async () => {
     const rendered = render(<EditDomainForm {...props} />, renderOpts);
     await waitForLoad(rendered);
 
@@ -63,6 +63,13 @@ describe("<EditDomainForm />", () => {
       expect(button).not.toBeDisabled();
     });
     userEvent.click(button);
+    await waitFor(() => {
+      expect(
+        rendered.getByText("structure.edit_domain.confirm_inherit"),
+      ).toBeInTheDocument();
+    });
+    const confirmButton = rendered.getByRole("button", { name: /update/i });
+    userEvent.click(confirmButton);
     await waitFor(() => {
       expect(updateStructure.mock.calls.length).toBe(1);
     });
@@ -100,7 +107,7 @@ describe("<EditDomainForm />", () => {
     );
   });
 
-  it("send selected multiple domain ids when button clicked", async () => {
+  it("send selected multiple domain ids when button clicked and confirm modal confirmed", async () => {
     const rendered = render(<EditDomainForm {...props} />, renderOpts);
     await waitForLoad(rendered);
 
@@ -115,6 +122,13 @@ describe("<EditDomainForm />", () => {
       expect(button).not.toBeDisabled();
     });
     userEvent.click(button);
+    await waitFor(() => {
+      expect(
+        rendered.getByText("structure.edit_domain.confirm_inherit"),
+      ).toBeInTheDocument();
+    });
+    const confirmButton = rendered.getByRole("button", { name: /update/i });
+    userEvent.click(confirmButton);
     await waitFor(() => {
       expect(updateStructure.mock.calls.length).toBe(1);
     });

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

@@ -2,12 +2,22 @@ import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import { applyTemplate } from "@truedat/df/utils";
+import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
 import { StructureNotesEdit } from "../StructureNotesEdit";
 
+jest.mock("@truedat/ai/components/suggestions/SuggestionsWidget", () => ({
+  __esModule: true,
+  default: jest.fn(() => null),
+}));
+
 describe("<StructureNotesEdit />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it("matches the latest snapshot", async () => {
     const props = {
-      structure: { id: 1 },
+      structure: { id: 1, domain_ids: [1] },
       template: { id: 2 },
       doStructureNoteAction: () => {},
       selectTemplate: () => {},
@@ -24,17 +34,19 @@ describe("<StructureNotesEdit />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with ai suggestion action", async () => {
+  it("passes data_structure suggestion params to the widget", async () => {
     const props = {
-      structure: { id: 1 },
-      template: { id: 2 },
+      structure: {
+        id: 7,
+        name: "my structure",
+        domain_ids: [3],
+        domains: [{ name: "my domain" }],
+      },
+      template: { id: 2, name: "my template" },
       doStructureNoteAction: () => {},
       selectTemplate: () => {},
       selectDomain: () => {},
       structureNotes: {
-        _actions: {
-          ai_suggestions: { href: "suggestion" },
-        },
         structureNotes: [],
       },
       latestDfContent: { foo: { value: "bar", origin: "user" } },
@@ -43,7 +55,19 @@ describe("<StructureNotesEdit />", () => {
     };
     const rendered = render(<StructureNotesEdit {...props} />);
     await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
+
+    await waitFor(() => expect(SuggestionsWidget).toHaveBeenCalled());
+    expect(SuggestionsWidget.mock.calls[0][0].suggestionParams).toMatchObject({
+      resource_type: "data_structure",
+      resource_id: 7,
+      template_id: 2,
+      domain_ids: [3],
+      resource_body: {
+        name: "my structure",
+        domain: "my domain",
+        type: "my template",
+      },
+    });
   });
 
   it("calls doStructureNoteAction when submit is clicked", async () => {

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

@@ -25,53 +25,3 @@ exports[`<StructureNotesEdit /> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
-
-exports[`<StructureNotesEdit /> matches the latest snapshot with ai suggestion action 1`] = `
-<div>
-  <div
-    class="ui bottom attached segment"
-  >
-    <div
-      class="ui segment"
-    >
-      <div
-        class="ui container"
-        style="display: flex; justify-content: space-between;"
-      >
-        <h4>
-          <i
-            aria-hidden="true"
-            class="lightbulb icon"
-          />
-          structure_note.ai_suggestion.header
-        </h4>
-        <div
-          class="ui hidden divider"
-        />
-        <button
-          class="ui button"
-        >
-          actions.ai_suggestion
-        </button>
-      </div>
-    </div>
-    <form
-      class="ui form"
-    >
-      <button
-        class="ui primary button"
-      >
-        actions.save
-      </button>
-      <a
-        class="ui secondary button td-icon-text-control"
-        data-discover="true"
-        href="/"
-        role="button"
-      >
-        actions.cancel
-      </a>
-    </form>
-  </div>
-</div>
-`;

package/src/styles/editDomainForm.less

@@ -75,3 +75,53 @@
   background: #f8fafc;
   margin: 1.5rem -1.5rem -1.5rem;
 }
+
+.edit-domain-form .footer-actions .button,
+.edit-domain-form .confirm-actions .button {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.edit-domain-form .confirm-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1.5rem 2rem;
+  text-align: center;
+}
+
+.edit-domain-form .confirm-icon {
+  font-size: 2.5rem;
+  color: #f59e0b;
+  margin-bottom: 1rem;
+}
+
+.edit-domain-form .confirm-message {
+  font-size: 0.9rem;
+  color: #334155;
+  margin: 0 0 1.5rem;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.edit-domain-form .confirm-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+@keyframes pulse-warning {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+}
+
+.confirm-icon.pulse-warning i {
+  animation: pulse-warning 0.9s ease-in-out 2;
+}