@truedat/dq 8.11.3 → 8.11.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "8.11.3",
+  "version": "8.11.6",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -55,42 +55,42 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
-    "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.6.7",
-    "@truedat/test": "8.11.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@truedat/test": "8.11.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
-    "@apollo/client": "^3.13.9",
-    "axios": "^1.15.2",
+    "@apollo/client": "^3.13.8",
+    "axios": "^1.15.0",
     "file-saver": "^2.0.5",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
-    "lodash": "^4.17.23",
+    "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.3",
-    "react": "^19.2.8",
+    "react": "^19.2.7",
     "react-csv": "^2.2.2",
-    "react-dom": "^19.2.8",
+    "react-dom": "^19.2.7",
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.56.4",
-    "react-intl": "^7.1.14",
-    "react-moment": "^1.1.4",
+    "react-intl": "^7.1.11",
+    "react-moment": "^1.1.3",
     "react-redux": "^9.2.0",
-    "react-router": "^8.3.1",
+    "react-router": "^8.3.0",
     "redux": "^5.0.1",
     "redux-saga": "^1.3.0",
     "redux-saga-routines": "^3.2.3",
     "reselect": "^5.1.1",
     "semantic-ui-react": "^3.0.0-beta.2",
-    "swr": "^2.3.8"
+    "swr": "^2.3.3"
   },
-  "gitHead": "c0d3c1ed5c9480e6207a6e696d8941043c34de2f"
+  "gitHead": "bfd7e4d934a88ec244c45032ca76103f236e9462"
 }

package/src/components/ExecutionForm.js

@@ -1,96 +1,96 @@
 import _ from "lodash/fp";
-import { lazy, useState } from "react";
-import { Button, Form, Header } from "semantic-ui-react";
+import { useState, useEffect } from "react";
+import { Button, Modal } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { TemplateSelector } from "@truedat/core/components";
 import { validateContent } from "@truedat/df/utils";
+import { ExecutionTemplateSelector } from "./ExecutionTemplateSelector";
+import { ExecutionWarning } from "./ExecutionWarning";
 
-const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
-
-export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
+export const ExecutionForm = ({ count, onSubmit, onCancel, open }) => {
   const { formatMessage } = useIntl();
   const [content, setContent] = useState({});
   const [template, setTemplate] = useState();
-  const [templatesLoading, setTemplatesLoading] = useState(true);
-
-  const handleContentChange = (content) => setContent(content);
+  const [templates, setTemplates] = useState();
 
-  const handleTemplatesLoaded = ({ templates }) => {
-    setTemplatesLoading(false);
-    if (templates?.length === 1) {
-      setTemplate(templates[0]);
+  useEffect(() => {
+    if (open) {
+      setTemplate(templates?.length === 1 ? templates[0] : undefined);
+      setContent({});
     }
-  };
+  }, [open, templates]);
 
-  const handleTemplateSelected = (e, { template }) => setTemplate(template);
+  const handleTemplatesLoaded = ({ templates }) =>
+    setTemplates(templates || []);
+
+  const handleTemplateSelected = (e, { template }) => {
+    setTemplate(template);
+    setContent({});
+  };
 
-  const isInvalid = () =>
-    template && !_.isEmpty(validateContent(template)(content));
+  const isExecuteDisabled =
+    !!template &&
+    !_.isEmpty(template ? validateContent(template)(content) : []);
 
   return (
     <>
-      <Header
-        as="h2"
-        content={formatMessage({
-          id: "implementations.actions.execution.confirmation.header",
-        })}
-      />
-      <Form loading={templatesLoading}>
-        <TemplateSelector
-          scope="qe"
-          selectedValue={template?.id}
-          onChange={handleTemplateSelected}
-          onLoad={handleTemplatesLoaded}
-          clearable
-        />
-        {template?.id ? (
-          <>
-            <Header
-              as="h3"
-              content={formatMessage({
-                id: "implementations.actions.execution.confirmation.legend",
+      <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",
               })}
-            />
-            <div
-              style={{
-                maxHeight: "calc(100vh - 20rem)",
-                overflowY: "auto",
-              }}
-            >
-              <DynamicForm
-                onChange={handleContentChange}
-                content={content}
-                template={template}
-              />
-            </div>
-          </>
-        ) : null}
-        <p>
-          {formatMessage(
-            {
-              id:
-                count === 1
-                  ? "implementation.actions.execution.confirmation.content"
-                  : "implementations.actions.execution.confirmation.content",
-            },
-            { implementations_count: count },
-          )}
-        </p>
-        <div className="actions">
-          <Button
-            secondary
+            </p>
+          </div>
+          <button
+            type="button"
+            className="close-button"
             onClick={onCancel}
-            content={formatMessage({ id: "actions.cancel" })}
-          />
-          <Button
-            primary
-            disabled={isInvalid()}
-            onClick={() => onSubmit(content)}
-            content={formatMessage({ id: "actions.create" })}
-          />
+            aria-label={formatMessage({
+              id: "actions.close",
+              defaultMessage: "Close",
+            })}
+          >
+            &times;
+          </button>
         </div>
-      </Form>
+      </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({
+            id: "actions.cancel",
+            defaultMessage: "Cancel",
+          })}
+          onClick={onCancel}
+        />
+        <Button
+          primary
+          disabled={isExecuteDisabled}
+          content={formatMessage({
+            id: "actions.create",
+            defaultMessage: "Execute",
+          })}
+          onClick={() => onSubmit(template ? content : {})}
+        />
+      </Modal.Actions>
     </>
   );
 };
@@ -99,6 +99,7 @@ ExecutionForm.propTypes = {
   count: PropTypes.number,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
+  open: PropTypes.bool,
 };
 
 export default ExecutionForm;

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, Popup } from "semantic-ui-react";
+import { Button, Modal } from "semantic-ui-react";
 import ExecutionForm from "./ExecutionForm";
 
 export const ExecutionPopup = ({
@@ -14,36 +14,34 @@ export const ExecutionPopup = ({
   const { formatMessage } = useIntl();
   const [open, setOpen] = useState(false);
 
+  const executeLabelId =
+    count === 1
+      ? "implementation.actions.do_execution"
+      : "implementations.actions.do_execution";
+
   return (
-    <Popup
-      on="click"
-      basic
-      flowing
-      onOpen={() => setOpen(true)}
-      onClose={() => false}
-      open={open}
-      position="bottom center"
-      size="small"
-      trigger={
-        <Button
-          secondary
-          disabled={disabled}
-          loading={executionGroupLoading}
-          content={formatMessage({
-            id:
-              count === 1
-                ? "implementation.actions.do_execution"
-                : "implementations.actions.do_execution",
-          })}
-        />
-      }
-    >
-      <ExecutionForm
-        count={count}
-        onSubmit={onSubmit}
-        onCancel={() => setOpen(false)}
+    <div className="execution-popup-wrapper">
+      <Button
+        primary
+        disabled={disabled}
+        loading={executionGroupLoading}
+        content={formatMessage({ id: executeLabelId })}
+        onClick={() => setOpen(true)}
       />
-    </Popup>
+      <Modal
+        className="execution-popup-modal"
+        open={open}
+        onClose={() => setOpen(false)}
+        size="small"
+      >
+        <ExecutionForm
+          count={count}
+          onSubmit={onSubmit}
+          onCancel={() => setOpen(false)}
+          open={open}
+        />
+      </Modal>
+    </div>
   );
 };
 

package/src/components/ExecutionTemplateSelector.js

@@ -0,0 +1,108 @@
+import { lazy } from "react";
+import { Icon } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import _ from "lodash/fp";
+import { TemplateSelector } from "@truedat/core/components";
+import { validateContent, flattenFields, isRequired } from "@truedat/df/utils";
+
+const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
+
+export const ExecutionTemplateSelector = ({
+  templates,
+  template,
+  content,
+  onTemplateSelected,
+  onTemplatesLoaded,
+  onContentChange,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const validationErrors = template ? validateContent(template)(content) : [];
+  const hasPendingMandatoryFields = !_.isEmpty(validationErrors);
+  const templateHasMandatoryFields = template
+    ? _.some((field) => isRequired(field, {}))(flattenFields(template))
+    : false;
+
+  const isSingleTemplate = templates?.length === 1;
+
+  return (
+    <div className="execution-popup-template-area">
+      {templates?.length !== 0 && !isSingleTemplate ? (
+        <div className="execution-popup-selector-label">
+          <span>
+            {formatMessage({
+              id: "implementations.actions.execution.template_label",
+              defaultMessage: "Select template",
+            })}
+          </span>
+          <span
+            className={
+              templateHasMandatoryFields
+                ? hasPendingMandatoryFields
+                  ? "mandatory-badge pending"
+                  : "mandatory-badge complete"
+                : "optional-badge"
+            }
+          >
+            {templateHasMandatoryFields
+              ? formatMessage({
+                  id: "implementations.actions.execution.mandatory_fields",
+                  defaultMessage: "Mandatory fields",
+                })
+              : formatMessage({
+                  id: "implementations.actions.execution.optional",
+                  defaultMessage: "optional",
+                })}
+          </span>
+        </div>
+      ) : null}
+      <TemplateSelector
+        scope="qe"
+        selectedValue={template?.id}
+        onChange={onTemplateSelected}
+        onLoad={onTemplatesLoaded}
+        clearable
+        hideLabel
+      />
+      {isSingleTemplate ? (
+        <div className="execution-popup-single-template-label">
+          {formatMessage({
+            id: "implementations.actions.execution.label.single",
+            defaultMessage:
+              "Complete the template for additional information (optional)",
+          })}
+        </div>
+      ) : null}
+      {template?.id ? (
+        <div className="execution-popup-template-fields">
+          <h4>
+            <Icon name="info circle" size="small" />
+            {formatMessage({
+              id: "implementations.actions.execution.confirmation.legend",
+              defaultMessage: "Template fields",
+            })}
+          </h4>
+          <div className="execution-popup-template-scroll">
+            <DynamicForm
+              onChange={onContentChange}
+              content={content}
+              template={template}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+ExecutionTemplateSelector.propTypes = {
+  templates: PropTypes.array,
+  template: PropTypes.object,
+  content: PropTypes.object,
+  onTemplateSelected: PropTypes.func,
+  onTemplatesLoaded: PropTypes.func,
+  onContentChange: PropTypes.func,
+};
+
+export default ExecutionTemplateSelector;

package/src/components/ExecutionWarning.js

@@ -0,0 +1,36 @@
+import { Icon } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+
+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>
+  );
+};
+
+ExecutionWarning.propTypes = {
+  count: PropTypes.number,
+};
+
+export default ExecutionWarning;

package/src/components/ImplementationActions.js

@@ -101,7 +101,7 @@ export const ImplementationActions = ({
     <>
       {actions?.edit ? (
         <Button
-          primary
+          secondary
           content={formatMessage({ id: "actions.edit" })}
           as={Link}
           to={linkTo.IMPLEMENTATION_EDIT({ implementation_id: id })}
@@ -134,7 +134,9 @@ export const ImplementationActions = ({
           onClick={() => submitImplementation({ id })}
         />
       ) : null}
-      {actions?.execute ? <ExecutionPopup onSubmit={handleExecute} /> : null}
+      {actions?.execute ? (
+        <ExecutionPopup count={1} onSubmit={handleExecute} />
+      ) : null}
       {_.isEmpty(secondaryActions) ? null : (
         <GroupActions availableActions={secondaryActions} />
       )}

package/src/components/RuleImplementation.js

@@ -23,7 +23,7 @@ export const RuleImplementation = ({ children, ruleImplementation }) => {
           </Header>
         </Grid.Column>
         <Grid.Column width={8} textAlign="right">
-          <>
+          <div className="rule-implementation-actions">
             {deletedAt ? null : (
               <Subscription
                 resource={ruleImplementation}
@@ -31,7 +31,7 @@ export const RuleImplementation = ({ children, ruleImplementation }) => {
               />
             )}
             <ImplementationActions />
-          </>
+          </div>
         </Grid.Column>
       </Grid>
       <RuleImplementationTabs />

package/src/components/Subscription.js

@@ -223,7 +223,7 @@ export const Subscription = ({
         <Button
           basic
           icon={<Icon name="eye" className={className} />}
-          className="button icon group-actions"
+          className="button icon group-actions subscription-action-button"
           data-tooltip={buttonMesage}
         />
       }

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

@@ -1,24 +1,118 @@
 import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
-import { multipleTemplatesMock } from "@truedat/test/mocks";
+import {
+  multipleTemplatesMock,
+  singleTemplateMock,
+  templatesMockWith,
+} from "@truedat/test/mocks";
 import { ExecutionForm } from "../ExecutionForm";
 
+const variables = { scope: "qe" };
+const optionalTemplate = {
+  __typename: "Template",
+  id: "optional",
+  name: "optional",
+  scope: "qe",
+  label: "Optional template",
+  content: [
+    {
+      name: "additional_information",
+      fields: [{ name: "notes", label: "Notes" }],
+    },
+  ],
+};
+const requiredTemplate = {
+  ...optionalTemplate,
+  id: "required",
+  label: "Required template",
+  content: [
+    {
+      name: "additional_information",
+      fields: [
+        { name: "notes", label: "Notes", type: "string", cardinality: "1" },
+      ],
+    },
+  ],
+};
+
+const renderForm = (props = {}, mocks = [multipleTemplatesMock(variables)]) =>
+  render(
+    <ExecutionForm
+      count={2}
+      onSubmit={jest.fn()}
+      onCancel={jest.fn()}
+      open
+      {...props}
+    />,
+    { mocks },
+  );
+
 describe("<ExecutionForm />", () => {
-  const handleSubmit = jest.fn();
-  const selectTemplate = jest.fn();
-  const props = {
-    count: 1,
-    templates: [],
-    handleSubmit,
-    selectTemplate,
-  };
-  const renderOpts = {
-    mocks: [multipleTemplatesMock({ scope: "qe" })],
-  };
-
-  it("matches the latest snapshot", async () => {
-    const rendered = render(<ExecutionForm {...props} />, renderOpts);
+  it("shows the template selector and the bulk execution warning", async () => {
+    const rendered = renderForm();
     await waitForLoad(rendered);
+
+    expect(rendered.queryByRole("radio")).not.toBeInTheDocument();
+    expect(
+      rendered.getByText("Select template for additional information"),
+    ).toBeInTheDocument();
+    expect(rendered.getByText("Select template")).toBeInTheDocument();
+    expect(rendered.getByText("optional")).toHaveClass("optional-badge");
+    expect(rendered.getByRole("combobox")).toBeInTheDocument();
+    expect(rendered.getByText("2")).toHaveClass("count");
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("shows a single template directly without selector or info banner", async () => {
+    const rendered = renderForm({ count: 1 }, [singleTemplateMock(variables)]);
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText(
+        "Complete the template for additional information (optional)",
+      ),
+    ).toBeInTheDocument();
+    expect(rendered.queryByRole("combobox")).not.toBeInTheDocument();
+    expect(rendered.queryByText(/will be executed/i)).not.toBeInTheDocument();
+  });
+
+  it("enables execution when the template has no required fields", async () => {
+    const rendered = renderForm({ count: 1 }, [
+      templatesMockWith(variables, [optionalTemplate]),
+    ]);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByRole("button", { name: "Execute" })).toBeEnabled();
+  });
+
+  it("marks a selected template as mandatory and switches from pending to complete", async () => {
+    const rendered = renderForm({ count: 1 }, [
+      templatesMockWith(variables, [requiredTemplate, optionalTemplate]),
+    ]);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByRole("combobox"));
+    await user.click(
+      rendered.getByRole("option", { name: "Required template" }),
+    );
+
+    const executeButton = rendered.getByRole("button", { name: "Execute" });
+    expect(rendered.getByText("Mandatory fields")).toHaveClass(
+      "mandatory-badge",
+      "pending",
+    );
+    expect(executeButton).toBeDisabled();
+
+    await user.type(
+      rendered.container.querySelector('input[name="notes"]'),
+      "Additional information",
+    );
+
+    expect(rendered.getByText("Mandatory fields")).toHaveClass(
+      "mandatory-badge",
+      "complete",
+    );
+    expect(executeButton).toBeEnabled();
+  });
 });