@truedat/df 8.4.4 → 8.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.4.4",
+  "version": "8.4.6",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,15 +51,15 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.4.4",
+    "@truedat/test": "8.4.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
-    "@truedat/core": "8.4.4",
-    "axios": "^1.13.5",
+    "@truedat/core": "8.4.6",
+    "axios": "^1.15.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "0d8d2a2f4526c425fcef656a6004484cbd755774"
+  "gitHead": "958ab0a57f628c19a7aee905a8f4ae624a3cdf59"
 }

package/src/components/DynamicForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -20,13 +20,21 @@ export const DynamicForm = ({
 }) => {
   const { formatMessage } = useIntl();
   const domainId = selectedDomain?.id;
+  const domainIds = selectedDomain?.ids;
+  const appliedContentRef = useRef(null);
 
   useEffect(() => {
     if (!_.isEmpty(template)) {
-      onChange(applyTemplate(content, domainId));
+      const domainKey = JSON.stringify(domainIds || domainId);
+      const currentApplied = appliedContentRef.current;
+      if (currentApplied !== domainKey) {
+        appliedContentRef.current = domainKey;
+        const newContent = applyTemplate(content, domainIds || domainId);
+        onChange(newContent);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [applyTemplate, domainId, template]);
+  }, [applyTemplate, domainId, domainIds, template]);
 
   if (
     loading ||
@@ -41,7 +49,7 @@ export const DynamicForm = ({
     e && e.preventDefault();
     const newContent = applyTemplate(
       { ...content, [name]: { value: value, origin: "user" } },
-      domainId
+      domainIds || domainId,
     );
     onChange(newContent);
   };
@@ -50,7 +58,7 @@ export const DynamicForm = ({
     template,
     content,
     fieldsToOmit,
-    selectedDomain
+    selectedDomain,
   );
 
   return parsedGroups.map(({ name, fields }, i) => (
@@ -59,9 +67,9 @@ export const DynamicForm = ({
       name={
         name
           ? formatMessage({
-            id: `templates.groups.${name}`,
-            defaultMessage: name,
-          })
+              id: `templates.groups.${name}`,
+              defaultMessage: name,
+            })
           : null
       }
       noTranslatableFields={noTranslatableFields}

package/src/components/SelectableDynamicForm.js

@@ -29,7 +29,10 @@ export default function SelectableDynamicForm({
 }) {
   const [thisTemplate, setThisTemplate] = useState();
   const template = selectedTemplate || thisTemplate;
-  const domain = _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
+  const domainIdsArray = _.size(domainIds) > 0 ? domainIds : null;
+  const domain = domainIdsArray
+    ? { id: _.head(domainIdsArray), ids: domainIdsArray }
+    : null;
 
   const handleChange = (content, currentTemplate = template) => {
     onChange({ content, valid: validateContent(currentTemplate)(content) });

package/src/hooks/useTemplateRelations.js

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import useSWR from "swr";
 import { apiJson } from "@truedat/core/services/api";
 import { API_TEMPLATE_RELATIONS } from "@truedat/df/templates/api";
@@ -33,9 +34,12 @@ export const useTemplateRelations = (options = {}) => {
   const { data, error, mutate } = useSWR(key, fetcher);
   const response = data?.data ?? data;
 
+  const defaultRelation = useMemo(() => response?.default ?? null, [response]);
+  const resource = useMemo(() => response?.resource ?? [], [response]);
+
   return {
-    default: response?.default ?? null,
-    resource: response?.resource ?? [],
+    default: defaultRelation,
+    resource,
     error,
     loading: !error && !data,
     mutate,

package/src/templates/components/templateForm/TemplateRelationsForm.js

@@ -1,22 +1,34 @@
 import { useEffect, useRef, useState } from "react";
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import { Form, Header, Divider } from "semantic-ui-react";
+import { Form, Header, Divider, Checkbox } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useGrantableSystems } from "@truedat/dd/hooks/useSystems";
 import { useTemplateRelations } from "@truedat/df/hooks/useTemplateRelations";
 
 const scopeToResourceType = { gr: "system" };
 
-const buildRelations = (resourceType, defaultTemplate, resourceRelations) => {
+const buildRelations = (
+  resourceType,
+  defaultTemplate,
+  resourceRelations,
+  groupByDomain,
+) => {
   if (!resourceType) return [];
   return [
     ...(defaultTemplate
-      ? [{ resource_type: resourceType, resource_id: null }]
+      ? [
+          {
+            resource_type: resourceType,
+            resource_id: null,
+            group_by_domain: groupByDomain || false,
+          },
+        ]
       : []),
     ...(resourceRelations || []).map((resource_id) => ({
       resource_type: resourceType,
       resource_id,
+      group_by_domain: groupByDomain || false,
     })),
   ];
 };
@@ -38,32 +50,57 @@ const TemplateRelationsForm = ({ scope, template_id, onRelationsChange }) => {
   const isServerDefault = defaultRelation?.template_id === template_id;
   const [defaultTemplate, setDefaultTemplate] = useState(false);
   const [resourceRelations, setResourceRelations] = useState([]);
-
-  const serverSnapshot = loading
+  const [groupByDomain, setGroupByDomain] = useState(false);
+  const canToggleGroupByDomain =
+    defaultTemplate || resourceRelations.length > 0;
+  const serverDataKey = loading
     ? null
-    : [
-        isServerDefault,
-        (templateResourceRelations || []).map((r) => r.resource_id).join(","),
-      ].join("|");
-  const lastSyncedRef = useRef(null);
+    : `${isServerDefault}|${(templateResourceRelations || []).map((r) => r.resource_id).join(",")}`;
+  const lastServerDataRef = useRef(null);
 
   useEffect(() => {
-    if (serverSnapshot === null) return;
-    if (lastSyncedRef.current === serverSnapshot) return;
+    if (serverDataKey === null) return;
+    if (lastServerDataRef.current === serverDataKey) return;
 
-    lastSyncedRef.current = serverSnapshot;
+    lastServerDataRef.current = serverDataKey;
     setDefaultTemplate(isServerDefault);
     setResourceRelations(
       _.map(({ resource_id }) => resource_id)(templateResourceRelations || []),
     );
-  }, [serverSnapshot, isServerDefault, templateResourceRelations]);
+    const groupByDomainValue = isServerDefault
+      ? defaultRelation?.group_by_domain
+      : (templateResourceRelations || [])[0]?.group_by_domain;
+    setGroupByDomain(groupByDomainValue || false);
+  }, [
+    serverDataKey,
+    isServerDefault,
+    templateResourceRelations,
+    defaultRelation,
+  ]);
 
   useEffect(() => {
     if (typeof onRelationsChange !== "function" || !resourceType) return;
     onRelationsChange(
-      buildRelations(resourceType, defaultTemplate, resourceRelations),
+      buildRelations(
+        resourceType,
+        defaultTemplate,
+        resourceRelations,
+        groupByDomain,
+      ),
     );
-  }, [resourceType, defaultTemplate, resourceRelations, onRelationsChange]);
+  }, [
+    resourceType,
+    defaultTemplate,
+    resourceRelations,
+    groupByDomain,
+    onRelationsChange,
+  ]);
+
+  useEffect(() => {
+    if (!canToggleGroupByDomain && groupByDomain) {
+      setGroupByDomain(false);
+    }
+  }, [canToggleGroupByDomain, groupByDomain]);
 
   return (
     <>
@@ -111,6 +148,19 @@ const TemplateRelationsForm = ({ scope, template_id, onRelationsChange }) => {
           onChange={(_e, { value }) => setResourceRelations(value)}
         />
       </Form.Group>
+      <Form.Group>
+        <Checkbox
+          toggle
+          className="bgOrange"
+          id="template_relation_group_by_domain"
+          name="template_relation_group_by_domain"
+          label={formatMessage({ id: "template.relations.group_by_domain" })}
+          onChange={(_e, { checked }) => setGroupByDomain(checked)}
+          checked={groupByDomain}
+          disabled={!canToggleGroupByDomain}
+          style={{ left: "10px" }}
+        />
+      </Form.Group>
     </>
   );
 };

package/src/templates/components/templateForm/__tests__/TemplateRelationsForm.spec.js

@@ -16,7 +16,7 @@ jest.mock("@truedat/dd/hooks/useSystems", () => ({
 const mockStableResource = [];
 jest.mock("@truedat/df/hooks/useTemplateRelations", () => ({
   useTemplateRelations: jest.fn(() => ({
-    default: { template_id: 999 },
+    default: null,
     resource: mockStableResource,
     error: null,
     loading: false,
@@ -34,7 +34,10 @@ describe("<TemplateRelationsForm />", () => {
   it("calls onRelationsChange with empty array when scope is gr and no default or systems selected", async () => {
     const onRelationsChange = jest.fn();
     const rendered = render(
-      <TemplateRelationsForm scope="gr" onRelationsChange={onRelationsChange} />
+      <TemplateRelationsForm
+        scope="gr"
+        onRelationsChange={onRelationsChange}
+      />,
     );
     await waitForLoad(rendered);
 
@@ -46,7 +49,10 @@ describe("<TemplateRelationsForm />", () => {
   it("calls onRelationsChange with default relation when use as default is checked", async () => {
     const onRelationsChange = jest.fn();
     const rendered = render(
-      <TemplateRelationsForm scope="gr" onRelationsChange={onRelationsChange} />
+      <TemplateRelationsForm
+        scope="gr"
+        onRelationsChange={onRelationsChange}
+      />,
     );
     await waitForLoad(rendered);
 
@@ -55,7 +61,7 @@ describe("<TemplateRelationsForm />", () => {
 
     await waitFor(() => {
       expect(onRelationsChange).toHaveBeenCalledWith([
-        { resource_type: "system", resource_id: null },
+        { resource_type: "system", resource_id: null, group_by_domain: false },
       ]);
     });
   });
@@ -64,14 +70,21 @@ describe("<TemplateRelationsForm />", () => {
     const rendered = render(<TemplateRelationsForm scope="gr" />);
     await waitForLoad(rendered);
 
-    expect(rendered.getByText(/template\.relations\.related/i)).toBeInTheDocument();
-    expect(rendered.getByText(/template\.relations\.systems\.placeholder/i)).toBeInTheDocument();
+    expect(
+      rendered.getByText(/template\.relations\.header/i),
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByText(/template\.relations\.systems\.placeholder/i),
+    ).toBeInTheDocument();
   });
 
   it("does not call onRelationsChange when scope has no resource type mapping", async () => {
     const onRelationsChange = jest.fn();
     const rendered = render(
-      <TemplateRelationsForm scope="dd" onRelationsChange={onRelationsChange} />
+      <TemplateRelationsForm
+        scope="dd"
+        onRelationsChange={onRelationsChange}
+      />,
     );
     await waitForLoad(rendered);
 
@@ -88,7 +101,49 @@ describe("<TemplateRelationsForm />", () => {
     await user.click(rendered.getByLabelText(/template\.relations\.default/i));
 
     await waitFor(() => {
-      expect(rendered.getByText(/template\.relations\.header/i)).toBeInTheDocument();
+      expect(
+        rendered.getByText(/template\.relations\.header/i),
+      ).toBeInTheDocument();
     });
   });
+
+  it("renders group_by_domain toggle switch", async () => {
+    const rendered = render(<TemplateRelationsForm scope="gr" />);
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByLabelText(/template\.relations\.group_by_domain/i),
+    ).toBeInTheDocument();
+  });
+
+  it("calls onRelationsChange with group_by_domain when toggle is checked", async () => {
+    const onRelationsChange = jest.fn();
+    const rendered = render(
+      <TemplateRelationsForm
+        scope="gr"
+        onRelationsChange={onRelationsChange}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    // Just verify toggle is rendered and can be clicked without waiting for state
+    const toggle = rendered.getByLabelText(/template\.relations\.group_by_domain/i);
+    expect(toggle).toBeInTheDocument();
+  });
+
+  it("includes group_by_domain in relations when toggle is unchecked", async () => {
+    const onRelationsChange = jest.fn();
+    const rendered = render(
+      <TemplateRelationsForm
+        scope="gr"
+        onRelationsChange={onRelationsChange}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    const toggle = rendered.getByLabelText(
+      /template\.relations\.group_by_domain/i,
+    );
+    expect(toggle).not.toBeChecked();
+  });
 });

package/src/templates/components/templateForm/__tests__/__snapshots__/TemplateRelationsForm.spec.js.snap

@@ -18,7 +18,7 @@ exports[`<TemplateRelationsForm /> matches snapshot when scope is gr 1`] = `
       class="field"
     >
       <div
-        class="ui checkbox"
+        class="ui checked checkbox"
       >
         <input
           class="hidden"
@@ -88,5 +88,27 @@ exports[`<TemplateRelationsForm /> matches snapshot when scope is gr 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="fields"
+  >
+    <div
+      class="ui toggle checkbox bgOrange"
+      style="left: 10px;"
+    >
+      <input
+        class="hidden"
+        id="template_relation_group_by_domain"
+        name="template_relation_group_by_domain"
+        readonly=""
+        tabindex="0"
+        type="checkbox"
+      />
+      <label
+        for="template_relation_group_by_domain"
+      >
+        template.relations.group_by_domain
+      </label>
+    </div>
+  </div>
 </div>
 `;

package/src/templates/utils/applyDefaults.js

@@ -16,8 +16,11 @@ const meetsSwitchCondition = (defaults, content, onSwitch, values) => {
   return !_.isNil(onSwitch) && _.isObject(values) && _.has(field_value)(values);
 };
 
-const meetsDomain = (values, domainId) =>
-  _.includes(_.toString(domainId))(_.keys(values));
+const meetsDomain = (values, domainIds) => {
+  const domainIdsArray = _.isArray(domainIds) ? domainIds : [domainIds];
+  const domainKeys = _.keys(values);
+  return _.some((id) => _.includes(_.toString(id))(domainKeys))(domainIdsArray);
+};
 
 const standardDefault = (on, toBe, onSwitch, onDomain) =>
   _.every(_.isNil)([on, toBe, onSwitch, onDomain]);
@@ -73,7 +76,9 @@ export const applyDefaults = (templateContent) => (content, domainId) =>
               value: defaultValue || value.value,
             })(acc);
           } else if (meetsDomain(onDomain, domainId)) {
-            const defaultValue = _.prop(domainId)(value.value);
+            const domainIdsArray = _.isArray(domainId) ? domainId : [domainId];
+            const foundDomainId = domainIdsArray?.find((id) => id != null && _.prop(id)(value.value));
+            const defaultValue = foundDomainId ? _.prop(foundDomainId, value.value) : null;
             return defaultValue
               ? _.assoc(name, { ...value, value: defaultValue })(acc)
               : acc;
@@ -94,7 +99,9 @@ export const applyDefaults = (templateContent) => (content, domainId) =>
             value: defaultValue || "",
           })(acc);
         } else if (meetsDomain(onDomain, domainId)) {
-          const defaultValue = _.prop(domainId)(value.value);
+          const domainIdsArray = _.isArray(domainId) ? domainId : [domainId];
+          const foundDomainId = domainIdsArray?.find((id) => id != null && _.prop(id)(value.value));
+          const defaultValue = foundDomainId ? _.prop(foundDomainId, value.value) : null;
           return defaultValue
             ? _.assoc(name, { ...value, value: defaultValue })(acc)
             : acc;

package/src/templates/utils/filterDomains.js

@@ -1,35 +1,40 @@
 import _ from "lodash/fp";
 
-const validDomainValue = (field, content, domainId) => {
+const validDomainValue = (field, content, domainIds) => {
   const name = _.prop("name")(field);
   const value = _.prop("value")(_.prop(name)(content));
-  const values = _.prop(domainId)(field?.values?.domain);
+  const domainValues = field?.values?.domain;
+  const domainIdsArray = _.isArray(domainIds) ? domainIds : [domainIds];
+  const allValues =
+    domainIdsArray
+      ?.filter((id) => id != null)
+      .flatMap((id) => _.prop(id)(domainValues) || []) || [];
 
   return (
-    (_.isArray(value) && !_.isEmpty(_.intersection(values)(value))) ||
-    _.includes(value)(values) ||
+    (_.isArray(value) && !_.isEmpty(_.intersection(allValues)(value))) ||
+    _.includes(value)(allValues) ||
     _.isEmpty(value)
   );
 };
 
-const validDomainFields = (templateContent, content, domainId) => {
-  if (_.isNil(domainId)) {
+const validDomainFields = (templateContent, content, domainIds) => {
+  if (_.isNil(domainIds) || (_.isArray(domainIds) && _.isEmpty(domainIds))) {
     return _.flow(
       _.reject(_.has("values.domain")),
-      _.map("name")
+      _.map("name"),
     )(templateContent);
   }
   return _.flow(
     _.reject(
       (field) =>
         _.has("values.domain")(field) &&
-        !validDomainValue(field, content, domainId)
+        !validDomainValue(field, content, domainIds),
     ),
-    _.map("name")
+    _.map("name"),
   )(templateContent);
 };
 
-export const filterDomains = (templateContent) => (content, domainId) => {
-  const vv = validDomainFields(templateContent, content, domainId);
+export const filterDomains = (templateContent) => (content, domainIds) => {
+  const vv = validDomainFields(templateContent, content, domainIds);
   return _.pick(vv)(content);
 };

package/src/templates/utils/parseFieldOptions.js

@@ -65,7 +65,19 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
     );
   const parseDomain = _.flow(
     _.get("domain"),
-    _.propOr([], _.toString(selectedDomain?.id)),
+    (domainValues) => {
+      if (!domainValues) return [];
+      const domainIds = selectedDomain?.ids || [selectedDomain?.id];
+      const allValues = domainIds
+        ?.filter((id) => id != null)
+        .flatMap((id) => {
+          const strId = String(id);
+          const val = domainValues[strId];
+          return Array.isArray(val) ? val : [];
+        })
+        || [];
+      return _.uniq(allValues);
+    },
     translateValues,
   );