@truedat/dq 7.11.0 → 7.11.2

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

@@ -27,12 +27,14 @@ exports[`<Implementations /> matches the latest snapshot 1`] = `
       class="ui bottom attached segment"
     >
       <div
+        border="1px red"
         class="ui bottom attached segment"
       >
         <div
           style="float: right;"
         >
           <div
+            aria-disabled="false"
             aria-expanded="false"
             class="ui floating dropdown button icon group-actions button-update"
             role="listbox"
@@ -46,8 +48,8 @@ exports[`<Implementations /> matches the latest snapshot 1`] = `
               class="menu transition left"
             >
               <div
-                aria-disabled="true"
-                class="disabled item"
+                aria-disabled="false"
+                class="item"
                 role="option"
               >
                 <i
@@ -55,15 +57,11 @@ exports[`<Implementations /> matches the latest snapshot 1`] = `
                   class="download icon"
                 />
                 <span>
-                  implementations.actions.download.tooltip
+                  implementations.actions.downloadXlsx.tooltip
                 </span>
-                <p
-                  class="menu-item-description"
-                >
-                  implementations.actions.download.empty
-                </p>
               </div>
               <div
+                aria-disabled="false"
                 class="item"
                 role="option"
               >
@@ -83,15 +81,14 @@ exports[`<Implementations /> matches the latest snapshot 1`] = `
         <div
           class="ui action left icon input"
         >
-          <input
-            placeholder="implementations.search.placeholder"
-            type="text"
-            value="foo"
-          />
           <i
             aria-hidden="true"
             class="search link icon"
           />
+          <input
+            placeholder="search.placeholder"
+            type="text"
+          />
           <div
             aria-expanded="false"
             class="ui button floating labeled scrolling dropdown icon"
@@ -135,19 +132,123 @@ exports[`<Implementations /> matches the latest snapshot 1`] = `
           >
             ruleImplementations.retrieved.results
           </div>
-          <h4
-            class="ui header"
+          <div
+            class="implementations-table-overflow"
           >
-            <i
-              aria-hidden="true"
-              class="search icon"
-            />
-            <div
-              class="content"
+            <table
+              class="ui sortable table"
             >
-              ruleImplementations.search.results.empty
-            </div>
-          </h4>
+              <thead
+                class=""
+              >
+                <tr
+                  class=""
+                >
+                  <th
+                    class="two wide"
+                  >
+                    ruleImplementations.props.implementation_key
+                  </th>
+                  <th
+                    class="two wide"
+                  >
+                    ruleImplementations.props.rule
+                  </th>
+                  <th
+                    class="two wide ascending sorted disabled"
+                  >
+                    ruleImplementations.props.business_concepts
+                  </th>
+                  <th
+                    class="two wide"
+                  >
+                    ruleImplementations.props.last_execution_at
+                  </th>
+                  <th
+                    class="two wide"
+                  >
+                    ruleImplementations.props.result_type
+                  </th>
+                  <th
+                    class="one wide"
+                  >
+                    ruleImplementations.props.minimum
+                  </th>
+                  <th
+                    class="one wide"
+                  >
+                    ruleImplementations.props.goal
+                  </th>
+                  <th
+                    class="two wide"
+                  >
+                    ruleImplementations.props.result
+                  </th>
+                  <th
+                    class=""
+                  >
+                    ruleImplementations.props.inserted_at
+                  </th>
+                  <th
+                    class=""
+                  >
+                    ruleImplementations.props.updated_at
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class=""
+              >
+                <tr
+                  class=""
+                >
+                  <td
+                    class=""
+                  >
+                    <a
+                      data-discover="true"
+                      href="/implementations/1330"
+                    >
+                      bar_impl
+                    </a>
+                  </td>
+                  <td
+                    class=""
+                  />
+                  <td
+                    class=""
+                  />
+                  <td
+                    class=""
+                  />
+                  <td
+                    class=""
+                  >
+                    ruleImplementations.props.result_type.percentage
+                  </td>
+                  <td
+                    class="right aligned"
+                  >
+                    10%
+                  </td>
+                  <td
+                    class="right aligned"
+                  >
+                    20%
+                  </td>
+                  <td
+                    class="center aligned"
+                  />
+                  <td
+                    class=""
+                  />
+                  <td
+                    class=""
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>

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

@@ -58,8 +58,8 @@ exports[`<RuleImplementationsActions /> matches the latest snapshot 1`] = `
         class="menu transition left"
       >
         <div
-          aria-disabled="true"
-          class="disabled item"
+          aria-disabled="false"
+          class="item"
           role="option"
         >
           <i
@@ -67,15 +67,11 @@ exports[`<RuleImplementationsActions /> matches the latest snapshot 1`] = `
             class="download icon"
           />
           <span>
-            implementations.actions.download.tooltip
+            implementations.actions.downloadXlsx.tooltip
           </span>
-          <p
-            class="menu-item-description"
-          >
-            implementations.actions.download.empty
-          </p>
         </div>
         <div
+          aria-disabled="false"
           class="item"
           role="option"
         >

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

@@ -3,6 +3,7 @@
 exports[`<RuleImplementationsOptions /> matches the latest snapshot 1`] = `
 <div>
   <div
+    aria-disabled="false"
     aria-expanded="false"
     class="ui floating dropdown button icon group-actions button-update"
     role="listbox"
@@ -16,8 +17,8 @@ exports[`<RuleImplementationsOptions /> matches the latest snapshot 1`] = `
       class="menu transition left"
     >
       <div
-        aria-disabled="true"
-        class="disabled item"
+        aria-disabled="false"
+        class="item"
         role="option"
       >
         <i
@@ -25,15 +26,11 @@ exports[`<RuleImplementationsOptions /> matches the latest snapshot 1`] = `
           class="download icon"
         />
         <span>
-          implementations.actions.download.tooltip
+          implementations.actions.downloadXlsx.tooltip
         </span>
-        <p
-          class="menu-item-description"
-        >
-          implementations.actions.download.empty
-        </p>
       </div>
       <div
+        aria-disabled="false"
         class="item"
         role="option"
       >

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

@@ -0,0 +1,105 @@
+import { render } from "@truedat/test/render";
+import { StatusPill, ResponseCell } from "../implementationsUploadJobParser";
+
+describe("<StatusPill />", () => {
+  it("renders with correct color based on status", async () => {
+    const statuses = ["COMPLETED", "FAILED", "ERROR", "INFO", "OTHER"];
+    const expectedColors = ["green", "red", "red", "blue", "grey"];
+
+    statuses.forEach((status, index) => {
+      const rendered = render(<StatusPill status={status} />);
+      const label = rendered.container.querySelector(".ui.label");
+      expect(label).toHaveClass(expectedColors[index]);
+      expect(
+        rendered.getByText(
+          new RegExp(`implementations.bulkUpload.event.status.${status}`, "i")
+        )
+      ).toBeInTheDocument();
+    });
+  });
+});
+
+describe("<ResponseCell />", () => {
+  it("returns null when response is empty", () => {
+    const rendered = render(
+      <ResponseCell response={null} status="COMPLETED" />
+    );
+    expect(rendered.container.firstChild).toBeNull();
+
+    const rendered2 = render(<ResponseCell response={{}} status="COMPLETED" />);
+    expect(rendered2.container.firstChild).toBeNull();
+  });
+
+  it("renders FAILED status with message", () => {
+    const response = { message: "missing_required_headers" };
+    const rendered = render(
+      <ResponseCell response={response} status="FAILED" />
+    );
+    expect(
+      rendered.getByText(
+        /implementations.bulkUpload.error.missing_required_headers/i
+      )
+    ).toBeInTheDocument();
+  });
+
+  it("renders ERROR status with details", () => {
+    const response = {
+      type: "missing_required_headers",
+      details: {
+        missing_headers: ["header1", "header2"],
+      },
+    };
+    const rendered = render(
+      <ResponseCell response={response} status="ERROR" />
+    );
+    expect(
+      rendered.getByText(
+        /implementations.bulkUpload.error.missing_required_headers/i
+      )
+    ).toBeInTheDocument();
+    expect(rendered.getByText(/header1, header2/i)).toBeInTheDocument();
+  });
+
+  it("renders COMPLETED status with summary", () => {
+    const response = {
+      insert_count: 2,
+      update_count: 1,
+      error_count: 0,
+    };
+    const rendered = render(
+      <ResponseCell response={response} status="COMPLETED" />
+    );
+    expect(
+      rendered.getByText(/implementations.bulkUpload.result.summary.created/i)
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByText(/implementations.bulkUpload.result.summary.updated/i)
+    ).toBeInTheDocument();
+  });
+
+  it("renders INFO status with implementation details", () => {
+    const response = {
+      type: "implementation_updated",
+      details: {
+        id: 123,
+        changes: {
+          name: "new name",
+        },
+      },
+    };
+    const rendered = render(<ResponseCell response={response} status="INFO" />);
+    expect(
+      rendered.getByText(
+        /implementations.bulkUpload.info.implementation_updated/i
+      )
+    ).toBeInTheDocument();
+  });
+
+  it("renders default case for unknown status", () => {
+    const response = "some text";
+    const rendered = render(
+      <ResponseCell response={response} status="UNKNOWN" />
+    );
+    expect(rendered.getByText(/some text/i)).toBeInTheDocument();
+  });
+});

package/src/components/implementationsUploadJobParser.js

@@ -0,0 +1,276 @@
+import _ from "lodash/fp";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Label } from "semantic-ui-react";
+import { RichTextEditor } from "@truedat/core/components";
+
+import RuleImplementationLink from "./RuleImplementationLink";
+
+export const StatusPill = ({ status }) => (
+  <Label
+    color={_.cond([
+      [_.eq("COMPLETED"), _.constant("green")],
+      [_.eq("FAILED"), _.constant("red")],
+      [_.eq("ERROR"), _.constant("red")],
+      [_.eq("INFO"), _.constant("blue")],
+      [_.stubTrue, _.constant("grey")],
+    ])(status)}
+    size="small"
+  >
+    <FormattedMessage
+      id={`implementations.bulkUpload.event.status.${status}`}
+    />
+  </Label>
+);
+
+export const ResponseCell = ({ response, status }) => {
+  if (!response || (_.isObject(response) && _.isEmpty(response))) return null;
+
+  switch (status) {
+    case "FAILED":
+      return (
+        <FormattedMessage
+          id={`implementations.bulkUpload.error.${response.message}`}
+        />
+      );
+    case "ERROR":
+      return <ErrorDetail response={response} />;
+    case "COMPLETED":
+      return <CompletedDetail response={response} />;
+    case "INFO":
+      return <InfoDetail response={response} />;
+    default:
+      return (
+        <pre
+          style={{
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all",
+            margin: 0,
+          }}
+        >
+          {typeof response === "string"
+            ? response
+            : JSON.stringify(response, null, 2)}
+        </pre>
+      );
+  }
+};
+
+const SheetAndLine = ({ response }) => (
+  <Label size="small">
+    <span>{response.sheet}</span>
+    {response.row_number ? (
+      <span>
+        {" "}
+        -{" "}
+        <FormattedMessage id="implementations.bulkUpload.result.prop.row_number" />
+        : {response.row_number}
+      </span>
+    ) : null}
+  </Label>
+);
+
+const CellHeader = ({ header, response }) => (
+  <div style={{ display: "flex", justifyContent: "space-between" }}>
+    <b>
+      <FormattedMessage id={header} />
+    </b>
+    <div>
+      <SheetAndLine response={response} />
+    </div>
+  </div>
+);
+
+const ErrorDetail = ({ response }) => {
+  const { formatMessage } = useIntl();
+
+  if (!response || !response.type) {
+    return null;
+  }
+  const { type } = response;
+  const messagePrefix = "implementations.bulkUpload.detail";
+
+  const detailBuilders = {
+    missing_required_headers: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.headers` }),
+        details.missing_headers?.join(", "),
+      ],
+    ],
+    invalid_template_name: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.templateName` }),
+        details.template_name,
+      ],
+    ],
+    invalid_domain_external_id: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.domainExternalId` }),
+        details.domain_external_id,
+      ],
+    ],
+    invalid_associated_rule: (details) => [
+      [formatMessage({ id: `${messagePrefix}.ruleName` }), details.rule_name],
+    ],
+    implementation_creation_error: (details) =>
+      details?.map(([field, [error]]) => [field, error]),
+  };
+
+  const detailBuilder = _.propOr(() => {}, type)(detailBuilders);
+
+  return (
+    <div>
+      <CellHeader
+        header={`implementations.bulkUpload.error.${type}`}
+        response={response}
+      />
+
+      {response.details
+        ? detailBuilder(response.details).map(([key, value], idx) => (
+            <div key={idx} style={{ paddingLeft: "10px" }}>
+              <span
+                style={{
+                  fontSize: "0.85em",
+                  fontWeight: "bold",
+                  paddingRight: "5px",
+                }}
+              >
+                {key}:
+              </span>
+              {value}
+            </div>
+          ))
+        : null}
+    </div>
+  );
+};
+const summaryItems = [
+  {
+    key: "invalid_sheet_count",
+    messageId: "implementations.bulkUpload.result.summary.invalid_sheets",
+  },
+  {
+    key: "insert_count",
+    messageId: "implementations.bulkUpload.result.summary.created",
+  },
+  {
+    key: "update_count",
+    messageId: "implementations.bulkUpload.result.summary.updated",
+  },
+  {
+    key: "unchanged_count",
+    messageId: "implementations.bulkUpload.result.summary.unchanged",
+  },
+  {
+    key: "error_count",
+    messageId: "implementations.bulkUpload.result.summary.errors",
+  },
+];
+const CompletedDetail = ({ response }) => (
+  <span style={{ display: "flex", gap: "5px" }}>
+    {_.flow([
+      _.filter((item) => _.get(item.key, response) > 0),
+      _.map((item) => (
+        <span
+          key={item.key}
+          // style={{
+          //   border: "1px solid #ccc",
+          //   padding: "5px",
+          // }}
+        >
+          <FormattedMessage id={item.messageId} />
+          {`: ${response[item.key]}`}
+        </span>
+      )),
+    ])(summaryItems)}
+  </span>
+);
+
+const InfoDetail = ({ response }) =>
+  !response || !response.type ? null : (
+    <div>
+      <CellHeader
+        header={`implementations.bulkUpload.info.${response.type}`}
+        response={response}
+      />
+      {response.details ? (
+        <div>
+          <RuleImplementationLink {...response.details} />{" "}
+        </div>
+      ) : null}
+      <ChangesDetail changes={response?.details?.changes} />
+    </div>
+  );
+const ChangesDetail = ({
+  changes,
+  header = "implementations.bulkUpload.result.prop.changes",
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  if (!changes) return null;
+  const changesList = _.toPairs(changes);
+
+  return (
+    <div>
+      <div
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          cursor: "pointer",
+          display: "flex",
+          gap: "5px",
+          alignItems: "center",
+        }}
+      >
+        <span>{isExpanded ? "▼" : "▶"}</span>
+        <span>
+          <FormattedMessage id={header} />
+        </span>
+        <span>({_.size(changesList)}) :</span>
+      </div>
+      {isExpanded &&
+        changesList.map(([key, value]) => (
+          <div key={key} style={{ paddingLeft: "10px" }}>
+            {key == "df_content" ? (
+              <ChangesDetail
+                changes={value}
+                header={`ruleImplementations.props.${key}`}
+              />
+            ) : (
+              <>
+                <span
+                  style={{
+                    fontSize: "0.85em",
+                    fontWeight: "bold",
+                    paddingRight: "5px",
+                  }}
+                >
+                  <FormattedMessage
+                    id={`ruleImplementations.props.${key}`}
+                    defaultMessage={key}
+                  />
+                  :
+                </span>
+                {formatValue(value)}
+              </>
+            )}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+const formatValue = (value) => {
+  if (_.has("value")(value)) return formatValue(value.value);
+  if (_.isArray(value)) {
+    return _.flow(_.map(formatValue), _.join(", "))(value);
+  }
+  if (_.isObject(value)) {
+    if (_.has("document")(value))
+      return <RichTextEditor readOnly value={value} />;
+    if (_.has("url_value")(value))
+      return `[${value.url_name}] (${value.url_value})`;
+
+    return _.flow(_.keys, _.join(", "))(value);
+  }
+
+  return value;
+};

package/src/components/index.js

@@ -12,7 +12,6 @@ import Rule from "./Rule";
 import RuleForm from "./RuleForm";
 import RuleFormImplementations from "./RuleFormImplementations";
 import RuleImplementationEvents from "./RuleImplementationEvents";
-import RuleImplementationsFromRuleLoader from "./RuleImplementationsFromRuleLoader";
 import RuleImplementationsLoader from "./RuleImplementationsLoader";
 import RuleLoader from "./RuleLoader";
 import RuleProperties from "./RuleProperties";
@@ -36,7 +35,6 @@ export {
   RuleFormImplementations,
   RuleImplementationEvents,
   RuleImplementationsLoader,
-  RuleImplementationsFromRuleLoader,
   RuleLoader,
   RuleProperties,
   RuleRow,