@truedat/dq 8.12.12 → 8.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "8.12.12",
+  "version": "8.13.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -59,7 +59,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.12.12",
+    "@truedat/test": "8.13.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -92,5 +92,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "b6e3413dae81b2e28e98a21cf371174caa30ab4b"
+  "gitHead": "b9d1c2133cea6293e6a5ce5d198a4cd49133b4c1"
 }

package/src/components/ExecutionForm.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import { useState, useEffect } from "react";
-import { Button, Modal } from "semantic-ui-react";
+import { TrueModal } from "@truedat/core/components";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { validateContent } from "@truedat/df/utils";
@@ -33,65 +33,51 @@ export const ExecutionForm = ({ count, onSubmit, onCancel, open }) => {
     !_.isEmpty(template ? validateContent(template)(content) : []);
 
   return (
-    <>
-      <Modal.Header>
-        <div className="execution-popup-header">
-          <div>
-            {formatMessage({
-              id: "implementations.actions.execution.confirmation.header",
-              defaultMessage: "Implementations execution",
-            })}
-            <p className="subtitle">
-              {formatMessage({
-                id: "implementations.actions.execution.subtitle",
-                defaultMessage: "Select template for additional information",
-              })}
-            </p>
-          </div>
-          <button
-            type="button"
-            className="close-button"
-            onClick={onCancel}
-            aria-label={formatMessage({
-              id: "actions.close",
-              defaultMessage: "Close",
-            })}
-          >
-            &times;
-          </button>
-        </div>
-      </Modal.Header>
-      <Modal.Content className={template ? "has-template" : undefined}>
-        <ExecutionTemplateSelector
-          templates={templates}
-          template={template}
-          content={content}
-          onTemplateSelected={handleTemplateSelected}
-          onTemplatesLoaded={handleTemplatesLoaded}
-          onContentChange={setContent}
-        />
-        {count !== 1 ? <ExecutionWarning count={count} /> : null}
-      </Modal.Content>
-      <Modal.Actions>
-        <Button
-          secondary
-          content={formatMessage({
+    <TrueModal
+      className={`execution-popup-modal${template ? " has-template" : ""}`}
+      open={open}
+      onClose={onCancel}
+      size="small"
+      title={formatMessage({
+        id: "implementations.actions.execution.confirmation.header",
+        defaultMessage: "Implementations execution",
+      })}
+      subtitle={formatMessage({
+        id: "implementations.actions.execution.subtitle",
+        defaultMessage: "Select template for additional information",
+      })}
+      banner={count !== 1 ? <ExecutionWarning count={count} /> : null}
+      actions={[
+        {
+          key: "cancel",
+          secondary: true,
+          content: formatMessage({
             id: "actions.cancel",
             defaultMessage: "Cancel",
-          })}
-          onClick={onCancel}
-        />
-        <Button
-          primary
-          disabled={isExecuteDisabled}
-          content={formatMessage({
+          }),
+          onClick: onCancel,
+        },
+        {
+          key: "execute",
+          primary: true,
+          disabled: isExecuteDisabled,
+          content: formatMessage({
             id: "actions.create",
             defaultMessage: "Execute",
-          })}
-          onClick={() => onSubmit(template ? content : {})}
-        />
-      </Modal.Actions>
-    </>
+          }),
+          onClick: () => onSubmit(template ? content : {}),
+        },
+      ]}
+    >
+      <ExecutionTemplateSelector
+        templates={templates}
+        template={template}
+        content={content}
+        onTemplateSelected={handleTemplateSelected}
+        onTemplatesLoaded={handleTemplatesLoaded}
+        onContentChange={setContent}
+      />
+    </TrueModal>
   );
 };
 

package/src/components/ExecutionPopup.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
-import { Button, Modal } from "semantic-ui-react";
+import { Button } from "semantic-ui-react";
 import ExecutionForm from "./ExecutionForm";
 
 export const ExecutionPopup = ({
@@ -28,19 +28,14 @@ export const ExecutionPopup = ({
         content={formatMessage({ id: executeLabelId })}
         onClick={() => setOpen(true)}
       />
-      <Modal
-        className="execution-popup-modal"
-        open={open}
-        onClose={() => setOpen(false)}
-        size="small"
-      >
+      {open ? (
         <ExecutionForm
           count={count}
           onSubmit={onSubmit}
           onCancel={() => setOpen(false)}
           open={open}
         />
-      </Modal>
+      ) : null}
     </div>
   );
 };

package/src/components/ExecutionWarning.js

@@ -1,4 +1,3 @@
-import { Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 
@@ -6,26 +5,23 @@ export const ExecutionWarning = ({ count }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <div className="execution-popup-warning">
-      <Icon name="warning sign" color="yellow" size="large" />
-      <p>
-        {formatMessage(
-          {
-            id: "implementations.actions.execution.confirmation.warning",
-            defaultMessage:
-              "<b>{count}</b> implementations will be executed. Is this correct?",
-          },
-          {
-            count,
-            b: (chunks) => (
-              <strong key="count" className="count">
-                {chunks}
-              </strong>
-            ),
-          },
-        )}
-      </p>
-    </div>
+    <p className="execution-popup-warning">
+      {formatMessage(
+        {
+          id: "implementations.actions.execution.confirmation.warning",
+          defaultMessage:
+            "<b>{count}</b> implementations will be executed. Is this correct?",
+        },
+        {
+          count,
+          b: (chunks) => (
+            <strong key="count" className="count">
+              {chunks}
+            </strong>
+          ),
+        },
+      )}
+    </p>
   );
 };
 

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

@@ -1,3 +1,4 @@
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
 import {
@@ -60,7 +61,7 @@ describe("<ExecutionForm />", () => {
     expect(rendered.getByText("optional")).toHaveClass("optional-badge");
     expect(rendered.getByRole("combobox")).toBeInTheDocument();
     expect(rendered.getByText("2")).toHaveClass("count");
-    expect(rendered.container).toMatchSnapshot();
+    expect(screen.getByRole("dialog")).toMatchSnapshot();
   });
 
   it("shows a single template directly without selector or info banner", async () => {
@@ -90,7 +91,7 @@ describe("<ExecutionForm />", () => {
       templatesMockWith(variables, [requiredTemplate, optionalTemplate]),
     ]);
     await waitForLoad(rendered);
-    const user = userEvent.setup({ delay: null });
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
     await user.click(rendered.getByRole("combobox"));
     await user.click(
@@ -105,7 +106,7 @@ describe("<ExecutionForm />", () => {
     expect(executeButton).toBeDisabled();
 
     await user.type(
-      rendered.container.querySelector('input[name="notes"]'),
+      screen.getByRole("dialog").querySelector('input[name="notes"]'),
       "Additional information",
     );
 
@@ -115,4 +116,37 @@ describe("<ExecutionForm />", () => {
     );
     expect(executeButton).toBeEnabled();
   });
+  it("submits an empty object without a template", async () => {
+    const onSubmit = jest.fn();
+    const rendered = renderForm({ onSubmit });
+    await waitForLoad(rendered);
+    await userEvent
+      .setup({ advanceTimers: jest.advanceTimersByTime })
+      .click(screen.getByRole("button", { name: "Execute" }));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({});
+  });
+
+  it("submits template content and clears it when the selection is removed", async () => {
+    const onSubmit = jest.fn();
+    const rendered = renderForm({ onSubmit }, [
+      templatesMockWith(variables, [requiredTemplate, optionalTemplate]),
+    ]);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: "Required template" }));
+    await user.type(
+      screen.getByRole("dialog").querySelector('input[name="notes"]'),
+      "Additional information",
+    );
+    await user.click(screen.getByRole("button", { name: "Execute" }));
+    expect(onSubmit).toHaveBeenLastCalledWith(
+      expect.objectContaining({ notes: expect.anything() }),
+    );
+    await user.click(screen.getByRole("combobox").querySelector(".clear.icon"));
+    await user.click(screen.getByRole("button", { name: "Execute" }));
+    expect(onSubmit).toHaveBeenCalledTimes(2);
+    expect(onSubmit).toHaveBeenLastCalledWith({});
+  });
 });

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

@@ -1,20 +1,84 @@
-import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { templatesMockWith } from "@truedat/test/mocks";
 import { ExecutionPopup } from "../ExecutionPopup";
 
-describe("<ExecutionPopup />", () => {
-  const onSubmit = jest.fn();
-  const props = { count: 1, onSubmit };
-  const renderOpts = {
+const template = {
+  __typename: "Template",
+  id: "required",
+  name: "required",
+  scope: "qe",
+  label: "Required template",
+  content: [
+    {
+      name: "additional_information",
+      fields: [
+        { name: "notes", label: "Notes", type: "string", cardinality: "1" },
+      ],
+    },
+  ],
+};
+
+const renderPopup = (props = {}) =>
+  render(<ExecutionPopup count={2} onSubmit={jest.fn()} {...props} />, {
+    mocks: [
+      templatesMockWith({ scope: "qe" }, [template]),
+      templatesMockWith({ scope: "qe" }, [template]),
+    ],
     messages: {
       en: {
-        "implementation.actions.do_execution": "do_execution",
-        "implementations.actions.do_execution": "do_execution",
+        "implementations.actions.do_execution": "Execute implementations",
       },
     },
-  };
+  });
+
+const setupUser = () =>
+  userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
+describe("<ExecutionPopup />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<ExecutionPopup {...props} />, renderOpts);
+    const { container } = render(
+      <ExecutionPopup count={1} onSubmit={jest.fn()} />,
+      {
+        messages: {
+          en: { "implementation.actions.do_execution": "do_execution" },
+        },
+      },
+    );
     expect(container).toMatchSnapshot();
   });
+  it.each(["Cancel", "Close", "Escape"])(
+    "discards form content on %s and reopening",
+    async (closeMethod) => {
+      const onSubmit = jest.fn();
+      renderPopup({ onSubmit });
+      const user = setupUser();
+      await user.click(
+        screen.getByRole("button", { name: "Execute implementations" }),
+      );
+      await user.type(await screen.findByRole("textbox"), "Original content");
+      expect(screen.getByRole("button", { name: "Execute" })).toBeEnabled();
+      if (closeMethod === "Escape") {
+        await user.keyboard("{Escape}");
+      } else {
+        await user.click(screen.getByRole("button", { name: closeMethod }));
+      }
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      await user.click(
+        screen.getByRole("button", { name: "Execute implementations" }),
+      );
+      expect(await screen.findByRole("textbox")).toHaveValue("");
+      expect(screen.getByRole("button", { name: "Execute" })).toBeDisabled();
+      expect(onSubmit).not.toHaveBeenCalled();
+    },
+  );
+
+  it("does not open when its trigger is disabled", async () => {
+    renderPopup({ disabled: true });
+    await setupUser().click(
+      screen.getByRole("button", { name: "Execute implementations" }),
+    );
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
 });

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

@@ -11,12 +11,6 @@ describe("<ExecutionWarning />", () => {
     expect(rendered.getByText("5")).toHaveClass("count");
   });
 
-  it("renders the warning icon", () => {
-    const rendered = render(<ExecutionWarning count={3} />);
-
-    expect(rendered.container.querySelector(".warning")).toBeInTheDocument();
-  });
-
   it("renders the correct CSS class", () => {
     const rendered = render(<ExecutionWarning count={2} />);
 

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

@@ -1,32 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ExecutionForm /> shows the template selector and the bulk execution warning 1`] = `
-<div>
+<div
+  aria-labelledby="_r_0_"
+  class="ui small modal transition visible active true-modal execution-popup-modal"
+  role="dialog"
+>
+  <button
+    aria-label="Close"
+    class="true-modal-close"
+    type="button"
+  >
+    ×
+  </button>
   <div
     class="header"
   >
     <div
-      class="execution-popup-header"
+      class="true-modal-heading"
     >
-      <div>
+      <span
+        id="_r_0_"
+      >
         Implementations execution
-        <p
-          class="subtitle"
-        >
-          Select template for additional information
-        </p>
-      </div>
-      <button
-        aria-label="Close"
-        class="close-button"
-        type="button"
+      </span>
+      <p
+        class="true-modal-subtitle"
       >
-        ×
-      </button>
+        Select template for additional information
+      </p>
     </div>
   </div>
   <div
-    class="content"
+    class="true-modal-content content"
   >
     <div
       class="execution-popup-template-area"
@@ -111,14 +117,18 @@ exports[`<ExecutionForm /> shows the template selector and the bulk execution wa
         </div>
       </div>
     </div>
-    <div
-      class="execution-popup-warning"
-    >
-      <i
-        aria-hidden="true"
-        class="yellow warning sign large icon"
-      />
-      <p>
+  </div>
+  <div
+    class="true-modal-banner warning"
+  >
+    <i
+      aria-hidden="true"
+      class="warning sign icon"
+    />
+    <div>
+      <p
+        class="execution-popup-warning"
+      >
         <strong
           class="count"
         >
@@ -129,15 +139,17 @@ exports[`<ExecutionForm /> shows the template selector and the bulk execution wa
     </div>
   </div>
   <div
-    class="actions"
+    class="actions true-modal-actions"
   >
     <button
       class="ui secondary button"
+      type="button"
     >
       Cancel
     </button>
     <button
       class="ui primary button"
+      type="button"
     >
       Execute
     </button>

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

@@ -2,21 +2,15 @@
 
 exports[`<ExecutionWarning /> matches snapshot 1`] = `
 <div>
-  <div
+  <p
     class="execution-popup-warning"
   >
-    <i
-      aria-hidden="true"
-      class="yellow warning sign large icon"
-    />
-    <p>
-      <strong
-        class="count"
-      >
-        2
-      </strong>
-       implementations will be executed. Is this correct?
-    </p>
-  </div>
+    <strong
+      class="count"
+    >
+      2
+    </strong>
+     implementations will be executed. Is this correct?
+  </p>
 </div>
 `;

package/src/styles/ExecutionPopup.less

@@ -1,114 +1,31 @@
 @execution-popup-border-radius: 0.375rem;
 @execution-popup-padding: 0.75rem;
-@execution-popup-gap: 0.625rem;
 @execution-popup-border: #e2e8f0;
 @execution-popup-text-secondary: #475569;
 @execution-popup-text-light: #64748b;
 @execution-popup-bg-light: #f8fafc;
-@execution-popup-warning-bg: #fffbeb;
-@execution-popup-warning-border: #fde68a;
-@execution-popup-warning-text: #78350f;
 @execution-popup-badge-optional-bg: #f1f5f9;
 @execution-popup-badge-mandatory-pending-bg: #fee2e2;
 @execution-popup-badge-mandatory-pending-text: #881337;
 @execution-popup-badge-mandatory-complete-bg: #dcfce7;
 @execution-popup-badge-mandatory-complete-text: #166534;
 
-.ui.modal.execution-popup-modal {
+.ui.modal.true-modal.execution-popup-modal {
   width: min(48rem, calc(100vw - 2rem));
-  min-height: 24rem;
-  max-height: calc(100vh - 2rem);
-  padding: 0 !important;
-  border: 0 !important;
-  border-radius: 1rem !important;
-  overflow: visible;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.2),
-    0 8px 10px -6px rgba(0, 0, 0, 0.15);
+  min-height: min(24rem, calc(100dvh - 2rem));
 
-  > .header {
-    padding: 1.5rem 1.5rem 1rem;
-    border-radius: 1rem 1rem 0 0;
-    border-bottom: 0 !important;
-    background: @primaryColor;
-    color: #f8fafc;
-
-    .execution-popup-header {
-      color: #f8fafc;
-
-      .subtitle {
-        color: #cbd5e1;
-      }
-
-      .close-button {
-        color: #e2e8f0;
-
-        &:hover {
-          color: #ffffff;
-        }
-      }
-    }
-  }
-
-  > .content {
-    display: flex;
-    flex-direction: column;
-    min-height: 16rem;
-    max-height: calc(100vh - 16rem);
-    overflow: visible;
-    padding: 1.625rem 1.5rem 2rem;
-
-    &.has-template {
-      padding-bottom: 1.25rem;
-    }
-  }
-
-  > .actions {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 1rem 1.5rem;
-    border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px);
-    border-top: 1px solid @execution-popup-border;
-    background: @execution-popup-bg-light;
-
-    .button {
-      margin-left: 0;
-    }
+  &.has-template > .content {
+    padding-bottom: 1.25rem;
   }
-}
-
-.execution-popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
 
-  .subtitle {
-    font-size: 0.75rem;
-    font-weight: 400;
-    color: #94a3b8;
-    margin: 0.15rem 0 0;
-  }
-
-  .close-button {
-    flex-shrink: 0;
-    padding: 6px;
-    border: none;
-    border-radius: 0.5rem;
-    background: none;
-    color: #94a3b8;
-    cursor: pointer;
-    font-size: 1.25rem;
-    line-height: 1;
-
-    &:hover {
-      color: #334155;
-    }
+  .execution-popup-warning {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.625;
 
-    &:focus-visible {
-      outline: 2px solid @primaryColor;
-      outline-offset: 2px;
+    .count {
+      font-weight: 700;
+      font-size: 1rem;
     }
   }
 }
@@ -182,7 +99,8 @@
     width: 100%;
 
     .menu {
-      z-index: 1001;
+      position: static;
+      margin-top: 0.5rem;
       max-height: min(18rem, calc(100vh - 12rem));
       overflow-y: auto;
     }
@@ -207,38 +125,6 @@
     align-items: center;
     gap: 0.375rem;
   }
-
-  .execution-popup-template-scroll {
-    max-height: calc(100vh - 24rem);
-    overflow-y: auto;
-  }
-}
-
-.execution-popup-warning {
-  margin-top: auto;
-  padding: @execution-popup-padding;
-  background: @execution-popup-warning-bg;
-  border: 1px solid @execution-popup-warning-border;
-  border-radius: @execution-popup-border-radius;
-  display: flex;
-  align-items: center;
-  gap: @execution-popup-gap;
-
-  > .icon {
-    margin: 0;
-  }
-
-  p {
-    font-size: 0.875rem;
-    color: @execution-popup-warning-text;
-    line-height: 1.625;
-    margin: 0;
-
-    .count {
-      font-weight: 700;
-      font-size: 1rem;
-    }
-  }
 }
 
 .rule-implementation-actions {