@truedat/dd 8.8.6 → 8.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.8.6",
+  "version": "8.8.7",
   "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.7",
     "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": "ece3f2e166776ff7827198a134bad5a28b029dc7"
 }

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/__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/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;
+}