@truedat/qx 7.14.5 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "7.14.5",
+  "version": "8.0.0",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.14.5",
+    "@truedat/test": "8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "c27ba60d1a158d6c21105f73d6ac4a20d83e5630"
+  "gitHead": "5a3af0f7a7833b2e02a876a08e228a5d678927ea"
 }

package/src/components/dataViews/__tests__/DataViewSummary.spec.js

@@ -1,6 +1,50 @@
 import { render, waitForLoad } from "@truedat/test/render";
 import DataViewSummary from "../DataViewSummary";
 
+jest.mock("@truedat/qx/hooks/useFunctions", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useFunctions: jest.fn(() => ({
+      data: {
+        data: [
+          {
+            name: "eq",
+            type: "boolean",
+            params: [
+              { name: "arg1", type: "any" },
+              { name: "arg2", type: "any" },
+            ],
+          },
+          {
+            name: "gt",
+            type: "boolean",
+            params: [
+              { name: "arg1", type: "any" },
+              { name: "arg2", type: "any" },
+            ],
+          },
+          {
+            name: "sum",
+            type: "number",
+            params: [{ name: "arg1", type: "any" }],
+          },
+          {
+            name: "count",
+            type: "number",
+            params: [],
+          },
+        ],
+      },
+      loading: false,
+      error: null,
+      mutate: jest.fn(),
+    })),
+  };
+});
+
 const messages = {
   "dataViews.form.queryable.from": "FROM",
   "dataViews.form.queryable.join": "JOIN",

package/src/components/dataViews/__tests__/__snapshots__/DataViewSummary.spec.js.snap

@@ -304,40 +304,23 @@ exports[`<DataViewSummary /> matches snapshot for FROM with JOIN 1`] = `
                   class="ui segment no-margin text-break-word"
                 >
                   <div
-                    class="text-align-left"
+                    class="condition-function-viewer"
                   >
                     <div
-                      class="ui tiny horizontal label text-break-word"
-                      title="eq"
+                      class="ui blue label text-break-word"
+                      title="users.user_id"
                     >
-                      eq
+                      users.user_id
                     </div>
-                    (
+                    <b
+                      class="font-big"
+                    />
                     <div
-                      class="clause-viewer-function"
+                      class="ui orange label text-break-word"
+                      title="orders.user_id"
                     >
-                      <div
-                        class="display-flex"
-                      >
-                        <div
-                          class="ui blue label text-break-word"
-                          title="users.user_id"
-                        >
-                          users.user_id
-                        </div>
-                      </div>
-                      <div
-                        class="display-flex"
-                      >
-                        <div
-                          class="ui orange label text-break-word"
-                          title="orders.user_id"
-                        >
-                          orders.user_id
-                        </div>
-                      </div>
+                      orders.user_id
                     </div>
-                    )
                   </div>
                 </div>
               </div>
@@ -427,47 +410,7 @@ exports[`<DataViewSummary /> matches snapshot for FROM with WHERE clause 1`] = `
           >
             <div
               class="ui basic compact segment text-break-word"
-            >
-              <div
-                class="ui segment no-margin text-break-word"
-              >
-                <div
-                  class="text-align-left"
-                >
-                  <div
-                    class="ui tiny horizontal label text-break-word"
-                    title="gt"
-                  >
-                    gt
-                  </div>
-                  (
-                  <div
-                    class="clause-viewer-function"
-                  >
-                    <div
-                      class="display-flex"
-                    >
-                      <div
-                        class="ui blue label text-break-word"
-                        title="users.age"
-                      >
-                        users.age
-                      </div>
-                    </div>
-                    <div
-                      class="display-flex"
-                    >
-                      <div
-                        class="ui basic label text-break-word"
-                      >
-                        18
-                      </div>
-                    </div>
-                  </div>
-                  )
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -603,40 +546,23 @@ exports[`<DataViewSummary /> matches snapshot for complete data view with all qu
                   class="ui segment no-margin text-break-word"
                 >
                   <div
-                    class="text-align-left"
+                    class="condition-function-viewer"
                   >
                     <div
-                      class="ui tiny horizontal label text-break-word"
-                      title="eq"
+                      class="ui blue label text-break-word"
+                      title="users.user_id"
                     >
-                      eq
+                      users.user_id
                     </div>
-                    (
+                    <b
+                      class="font-big"
+                    />
                     <div
-                      class="clause-viewer-function"
+                      class="ui orange label text-break-word"
+                      title="orders.user_id"
                     >
-                      <div
-                        class="display-flex"
-                      >
-                        <div
-                          class="ui blue label text-break-word"
-                          title="users.user_id"
-                        >
-                          users.user_id
-                        </div>
-                      </div>
-                      <div
-                        class="display-flex"
-                      >
-                        <div
-                          class="ui orange label text-break-word"
-                          title="orders.user_id"
-                        >
-                          orders.user_id
-                        </div>
-                      </div>
+                      orders.user_id
                     </div>
-                    )
                   </div>
                 </div>
               </div>
@@ -669,47 +595,7 @@ exports[`<DataViewSummary /> matches snapshot for complete data view with all qu
           >
             <div
               class="ui basic compact segment text-break-word"
-            >
-              <div
-                class="ui segment no-margin text-break-word"
-              >
-                <div
-                  class="text-align-left"
-                >
-                  <div
-                    class="ui tiny horizontal label text-break-word"
-                    title="gt"
-                  >
-                    gt
-                  </div>
-                  (
-                  <div
-                    class="clause-viewer-function"
-                  >
-                    <div
-                      class="display-flex"
-                    >
-                      <div
-                        class="ui orange label text-break-word"
-                        title="orders.total"
-                      >
-                        orders.total
-                      </div>
-                    </div>
-                    <div
-                      class="display-flex"
-                    >
-                      <div
-                        class="ui basic label text-break-word"
-                      >
-                        100
-                      </div>
-                    </div>
-                  </div>
-                  )
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -1304,47 +1190,7 @@ exports[`<DataViewSummary /> matches snapshot with HAVING clause (where after gr
           >
             <div
               class="ui basic compact segment text-break-word"
-            >
-              <div
-                class="ui segment no-margin text-break-word"
-              >
-                <div
-                  class="text-align-left"
-                >
-                  <div
-                    class="ui tiny horizontal label text-break-word"
-                    title="gt"
-                  >
-                    gt
-                  </div>
-                  (
-                  <div
-                    class="clause-viewer-function"
-                  >
-                    <div
-                      class="display-flex"
-                    >
-                      <div
-                        class="ui orange label text-break-word"
-                        title="Group By.total"
-                      >
-                        Group By.total
-                      </div>
-                    </div>
-                    <div
-                      class="display-flex"
-                    >
-                      <div
-                        class="ui basic label text-break-word"
-                      >
-                        1000
-                      </div>
-                    </div>
-                  </div>
-                  )
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>

package/src/components/qualityControls/QualityControlEvents.js

@@ -0,0 +1,74 @@
+import { Segment, Feed } from "semantic-ui-react";
+import { useEvents } from "@truedat/audit/hooks/useEvents";
+import PropTypes from "prop-types";
+import { use, useMemo } from "react";
+import QxContext from "../QxContext";
+import { getParsedEvents } from "./events/getParsedEvents";
+import { useIntl } from "react-intl";
+import Moment from "react-moment";
+
+const MESSAGE_ID = 0;
+const MESSAGE_PARAMS = 1;
+
+const EventRow = ({ user, ts, payload }) => {
+  const { formatMessage, locale } = useIntl();
+  const translateParams = (params) => {
+    if (!params || typeof params !== "object") return params;
+    if (params.value && typeof params.value === "object" && params.value.id) {
+      return { ...params, value: formatMessage(params.value) };
+    }
+    return params;
+  };
+  return (
+    <Feed.Event>
+      <Feed.Content>
+        <Feed.Summary>
+          <Feed.User>{user?.user_name}</Feed.User>{" "}
+          <Feed.Date>
+            <Moment locale={locale} date={ts} format="YYYY-MM-DD HH:mm" />
+          </Feed.Date>
+        </Feed.Summary>
+        {payload.map((content, i) => (
+          <Feed.Extra
+            key={i}
+            text
+            content={formatMessage(
+              content[MESSAGE_ID],
+              translateParams(content[MESSAGE_PARAMS])
+            )}
+          />
+        ))}
+      </Feed.Content>
+    </Feed.Event>
+  );
+};
+
+EventRow.propTypes = {
+  user: PropTypes.object.isRequired,
+  ts: PropTypes.string.isRequired,
+  payload: PropTypes.array.isRequired,
+};
+
+export default function QualityControlEvents() {
+  const { qualityControl, loading: qualityControlLoading } = use(QxContext);
+  const { data, error, loading } = useEvents(
+    qualityControl.id,
+    "quality_control"
+  );
+  const events = data?.data || [];
+  const parsedEvents = useMemo(() => getParsedEvents(events), [events]);
+
+  return (
+    <Segment
+      attached="bottom"
+      loading={loading || qualityControlLoading}
+      error={error}
+    >
+      <Feed size="small">
+        {parsedEvents.map((event, index) => (
+          <EventRow key={index} {...event} />
+        ))}
+      </Feed>
+    </Segment>
+  );
+}

package/src/components/qualityControls/QualityControlRoutes.js

@@ -26,6 +26,7 @@ import NewQualityControl from "./NewQualityControl";
 import EditQualityControl from "./EditQualityControl";
 import NewDraftQualityControl from "./NewDraftQualityControl";
 import { ScoreContextProvider } from "../scores/ScoreContext";
+import QualityControlEvents from "./QualityControlEvents";
 
 const LoaderQualityControlScores = () => {
   const { id } = useParams();
@@ -75,7 +76,7 @@ export default function QualityControlRoutes() {
         element={
           <SearchContextProvider
             {...searchProps}
-            defaultFilters={{ status: "draft" }}
+            defaultFilters={{ status: ["draft", "rejected"] }}
           >
             <QualityControls />
           </SearchContextProvider>
@@ -95,6 +96,7 @@ export default function QualityControlRoutes() {
         <Route index element={<QualityControl />} />
         <Route path="history" element={<QualityControlHistory />} />
         <Route path="scores" element={<LoaderQualityControlScores />} />
+        <Route path="events" element={<QualityControlEvents />} />
       </Route>
     </Routes>
   );

package/src/components/qualityControls/QualityControlTabs.js

@@ -21,6 +21,10 @@ export default function QualityControlTabs() {
       url: linkTo.QUALITY_CONTROL_SCORES(urlParams),
       text: "quality_control.tabs.scores",
     },
+    {
+      url: linkTo.QUALITY_CONTROL_EVENTS(urlParams),
+      text: "quality_control.tabs.events",
+    },
   ];
 
   return (

package/src/components/qualityControls/__tests__/QualityControlEvents.spec.js

@@ -0,0 +1,115 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages as baseMessages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { useEvents } from "@truedat/audit/hooks/useEvents";
+import QxContext from "../../QxContext";
+import QualityControlEvents from "../QualityControlEvents";
+
+jest.mock("@truedat/audit/hooks/useEvents", () => ({
+  useEvents: jest.fn(),
+}));
+
+const messages = {
+  ...baseMessages,
+  en: {
+    ...baseMessages.en,
+    "quality_controls.events.action_created": "<b>{field}</b> created",
+    "quality_controls.events.action_field_changed":
+      "<b>{field}</b> changed to {value}",
+    "quality_controls.events.action_dynamic_field_changed":
+      "<b>{field}</b> updated",
+    "quality_controls.events.action_enabled": "Quality control enabled",
+    "quality_controls.events.action_disabled": "Quality control disabled",
+    "quality_controls.events.action_draft_version_created":
+      "Draft version <b>{value}</b> created",
+  },
+};
+
+const renderOpts = { messages };
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe("<QualityControlEvents />", () => {
+  it("renders parsed events with highlighted fields", () => {
+    useEvents.mockReturnValue({
+      data: {
+        data: [
+          {
+            event: "quality_control_created",
+            payload: { name: "Sample control" },
+            ts: "2024-01-01T00:00:00Z",
+            user: { user_name: "Jane Doe" },
+          },
+        ],
+      },
+      error: null,
+      loading: false,
+    });
+
+    const contextValue = {
+      qualityControl: { id: "qc-1" },
+      loading: false,
+    };
+
+    const rendered = render(
+      <QxContext.Provider value={contextValue}>
+        <QualityControlEvents />
+      </QxContext.Provider>,
+      renderOpts
+    );
+
+    expect(rendered.container).toMatchSnapshot();
+    expect(useEvents).toHaveBeenCalledWith("qc-1", "quality_control");
+    expect(rendered.getByText(/jane doe/i)).toBeInTheDocument();
+
+    const boldField = rendered.getByText(/sample control/i);
+    expect(boldField.tagName).toBe("B");
+    expect(rendered.getByText(/created/i)).toBeInTheDocument();
+  });
+
+  it("shows loading state when events are loading", () => {
+    useEvents.mockReturnValue({
+      data: null,
+      error: null,
+      loading: true,
+    });
+
+    const contextValue = {
+      qualityControl: { id: "qc-1" },
+      loading: false,
+    };
+
+    const rendered = render(
+      <QxContext.Provider value={contextValue}>
+        <QualityControlEvents />
+      </QxContext.Provider>,
+      renderOpts
+    );
+
+    expect(rendered.container.querySelector(".segment.loading")).toBeTruthy();
+  });
+
+  it("shows loading state when quality control is loading", () => {
+    useEvents.mockReturnValue({
+      data: { data: [] },
+      error: null,
+      loading: false,
+    });
+
+    const contextValue = {
+      qualityControl: { id: "qc-1" },
+      loading: true,
+    };
+
+    const rendered = render(
+      <QxContext.Provider value={contextValue}>
+        <QualityControlEvents />
+      </QxContext.Provider>,
+      renderOpts
+    );
+
+    expect(rendered.container.querySelector(".segment.loading")).toBeTruthy();
+  });
+});

package/src/components/qualityControls/__tests__/__snapshots__/QualityControlEvents.spec.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QualityControlEvents /> renders parsed events with highlighted fields 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      class="ui small feed"
+    >
+      <div
+        class="event"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="summary"
+          >
+            <a
+              class="user"
+            >
+              Jane Doe
+            </a>
+             
+            <div
+              class="date"
+            >
+              <time
+                datetime="1704067200000"
+              >
+                2024-01-01 00:00
+              </time>
+            </div>
+          </div>
+          <div
+            class="text extra"
+          >
+            <b>
+              Sample control
+            </b>
+             created
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/qualityControls/__tests__/__snapshots__/QualityControlHeader.spec.js.snap

@@ -180,6 +180,13 @@ exports[`<QualityControlHeader /> matches the latest snapshot with control quali
       >
         quality_control.tabs.scores
       </a>
+      <a
+        class="item"
+        data-discover="true"
+        href="/qualityControls/8/version/1/events"
+      >
+        quality_control.tabs.events
+      </a>
     </div>
   </div>
 </div>

package/src/components/qualityControls/__tests__/__snapshots__/QualityControlTabs.spec.js.snap

@@ -26,6 +26,13 @@ exports[`<QualityControlTabs /> matches the latest snapshot 1`] = `
     >
       Scores
     </a>
+    <a
+      class="item"
+      data-discover="true"
+      href="/qualityControls/8/version/1/events"
+    >
+      quality_control.tabs.events
+    </a>
   </div>
 </div>
 `;

package/src/components/qualityControls/events/__tests__/getParsedEvents.spec.js

@@ -0,0 +1,106 @@
+import { getParsedEvents, bold } from "../getParsedEvents";
+const user = { user_name: "Jane" };
+const timestamp = "2024-01-01T00:00:00Z";
+
+describe("getParsedEvents", () => {
+  it("returns payload for quality_control_created", () => {
+    const events = [
+      {
+        event: "quality_control_created",
+        payload: { name: "Control A" },
+        ts: timestamp,
+        user,
+      },
+    ];
+
+    expect(getParsedEvents(events)).toEqual([
+      {
+        ts: timestamp,
+        user,
+        payload: [
+          [
+            { id: "quality_controls.events.action_created" },
+            { field: "Control A", b: bold },
+          ],
+        ],
+      },
+    ]);
+  });
+
+  it("combines payload sections for quality_control_updated", () => {
+    const events = [
+      {
+        event: "quality_control_updated",
+        ts: timestamp,
+        user,
+        payload: {
+          changes: {
+            active: false,
+            name: "New name",
+            dynamic_content: {
+              threshold: { value: 10 },
+            },
+          },
+        },
+      },
+    ];
+    expect(getParsedEvents(events)).toEqual([
+      {
+        ts: timestamp,
+        user,
+        payload: [
+          [{ id: "quality_controls.events.action_disabled" }, { b: bold }],
+          [
+            { id: "quality_controls.events.action_field_changed" },
+            { field: "name", value: "New name", b: bold },
+          ],
+          [
+            { id: "quality_controls.events.action_dynamic_field_changed" },
+            { field: "threshold", value: 10, b: bold },
+          ],
+        ],
+      },
+    ]);
+  });
+
+  it("returns payload for version status update", () => {
+    const events = [
+      {
+        event: "quality_control_version_status_updated",
+        payload: { action: "approved", version: "v2", status: "published" },
+        ts: timestamp,
+        user,
+      },
+    ];
+
+    expect(getParsedEvents(events)).toEqual([
+      {
+        ts: timestamp,
+        user,
+        payload: [
+          [
+            { id: "quality_controls.events.action_approved" },
+            {
+              field: "v2",
+              value: { id: "quality_control.status.published" },
+              b: bold,
+            },
+          ],
+        ],
+      },
+    ]);
+  });
+
+  it("filters out unsupported events", () => {
+    const events = [
+      {
+        event: "quality_control_deleted",
+        ts: timestamp,
+        user,
+        payload: {},
+      },
+    ];
+
+    expect(getParsedEvents(events)).toEqual([]);
+  });
+});

package/src/components/qualityControls/events/getParsedEvents.js

@@ -0,0 +1,134 @@
+import _ from "lodash/fp";
+
+export const bold = (text) => <b>{text}</b>;
+
+const normalizeValue = (value) => {
+  if (_.isObject(value)) return JSON.stringify(value);
+  if (_.isBoolean(value)) return String(value);
+  return value;
+};
+
+const getPayloadFromActiveChange = (event) => {
+  if (_.has("payload.changes.active")(event)) {
+    return _.prop("payload.changes.active")(event)
+      ? [[{ id: "quality_controls.events.action_enabled" }, { b: bold }]]
+      : [[{ id: "quality_controls.events.action_disabled" }, { b: bold }]];
+  }
+  return [];
+};
+
+const getDomainNames = (path) => (event) =>
+  _.flow(_.prop(path), _.defaultTo([]), _.map(_.prop("name")))(event);
+
+const getPayloadFromDomainChange = (event) => {
+  if (_.has("payload.changes.domains")(event)) {
+    const domainNames = _.join(", ")(
+      getDomainNames("payload.changes.domains")(event)
+    );
+    const currentDomainNames = _.join(", ")(
+      getDomainNames("payload.current_domains")(event)
+    );
+    return [
+      [
+        { id: "quality_controls.events.action_domain_changed" },
+        { domainNames, currentDomainNames, b: bold },
+      ],
+    ];
+  }
+  return [];
+};
+
+const getPayloadFromDynamicContentChange = (event) => {
+  const content = _.propOr({}, "payload.changes.dynamic_content")(event);
+  if (!_.isEmpty(content)) {
+    return _.flow(
+      _.toPairs,
+      _.map(([field, value]) => [
+        { id: "quality_controls.events.action_dynamic_field_changed" },
+        { field, value: normalizeValue(value?.value), b: bold },
+      ])
+    )(content);
+  }
+  return [];
+};
+
+const getPayloadFromRegularFields = (event) => {
+  if (_.has("payload.changes")(event)) {
+    return _.flow(
+      _.omit(["dynamic_content"]),
+      _.omit(["domains"]),
+      _.omit(["active"]),
+      _.toPairs,
+      _.map(([field, value]) => [
+        { id: "quality_controls.events.action_field_changed" },
+        { field, value: normalizeValue(value), b: bold },
+      ])
+    )(event?.payload?.changes);
+  }
+  return [];
+};
+
+const getPayloadFromUpdateEvent = (event) => {
+  const payloadFromActiveChange = getPayloadFromActiveChange(event);
+  const payloadFromRegularFields = getPayloadFromRegularFields(event);
+  const payloadFromDomainChange = getPayloadFromDomainChange(event);
+  const payloadFromDynamicContentChange =
+    getPayloadFromDynamicContentChange(event);
+
+  return [
+    ...payloadFromActiveChange,
+    ...payloadFromRegularFields,
+    ...payloadFromDomainChange,
+    ...payloadFromDynamicContentChange,
+  ];
+};
+
+const payloadFromEvent = (event) => {
+  const eventBase = _.pick(["ts", "user"])(event);
+
+  switch (event.event) {
+    case "quality_control_created":
+      return {
+        ...eventBase,
+        payload: [
+          [
+            { id: "quality_controls.events.action_created" },
+            { field: event?.payload?.name, b: bold },
+          ],
+        ],
+      };
+    case "quality_control_version_status_updated":
+      return {
+        ...eventBase,
+        payload: [
+          [
+            { id: `quality_controls.events.action_${event?.payload?.action}` },
+            {
+              field: event?.payload?.version,
+              value: { id: `quality_control.status.${event?.payload?.status}` },
+              b: bold,
+            },
+          ],
+        ],
+      };
+    case "quality_control_version_draft_created":
+      return {
+        ...eventBase,
+        payload: [
+          [
+            { id: "quality_controls.events.action_draft_version_created" },
+            { value: event?.payload?.version, b: bold },
+          ],
+        ],
+      };
+    case "quality_control_updated":
+      return { ...eventBase, payload: getPayloadFromUpdateEvent(event) };
+    case "quality_control_version_draft_updated":
+      return { ...eventBase, payload: getPayloadFromUpdateEvent(event) };
+    default:
+      return null;
+  }
+};
+export const getParsedEvents = (events) => {
+  return events.map(payloadFromEvent).filter(Boolean);
+};