@truedat/df 8.2.4 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.2.4",
+  "version": "8.3.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,14 +48,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.2.4",
+    "@truedat/test": "8.3.0",
     "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.2.4",
+    "@truedat/core": "8.3.0",
     "axios": "^1.13.5",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -84,5 +84,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "b98f63284093c90c57faa1794b6ccc1fcf761d89"
+  "gitHead": "d1abe685a3ae0cd2999e7bb62d3c0fd56522095f"
 }

package/src/components/SelectableDynamicForm.js

@@ -57,7 +57,7 @@ export default function SelectableDynamicForm({
 
   return (
     <>
-      {!actionKey || actionKey == "create" ? (
+      {(!actionKey || actionKey == "create") && !disableSelector ? (
         <TemplateSelector
           scope={scope}
           domainIds={domainIds}
@@ -70,7 +70,7 @@ export default function SelectableDynamicForm({
           required={required}
           requiredError={requiredError}
           selectedValue={template?.id}
-          disabled={disabled || disableSelector}
+          disabled={disabled}
         />
       ) : null}
       {!disabled && template ? (

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

@@ -175,4 +175,48 @@ describe("<SelectableDynamicForm />", () => {
       expect(rendered.container).toMatchSnapshot();
     });
   });
+
+  describe("with disableSelector and selectedTemplate", () => {
+    const selectedTemplate = {
+      id: 1,
+      name: "template1",
+      content: [
+        {
+          name: "g1",
+          fields: [
+            {
+              name: "field1",
+              label: "field1",
+              type: "string",
+            },
+          ],
+        },
+      ],
+    };
+
+    it("does not render template selector when disableSelector is true", async () => {
+      const rendered = render(
+        <SelectableDynamicForm
+          {...props}
+          disableSelector
+          selectedTemplate={selectedTemplate}
+        />
+      );
+      await waitForLoad(rendered);
+      expect(rendered.container.querySelector(".ui.search.selection.dropdown")).not.toBeInTheDocument();
+      expect(rendered.queryByText(/template\.selector\.placeholder/i)).not.toBeInTheDocument();
+    });
+
+    it("matches snapshot when disableSelector and selectedTemplate are set", async () => {
+      const rendered = render(
+        <SelectableDynamicForm
+          {...props}
+          disableSelector
+          selectedTemplate={selectedTemplate}
+        />
+      );
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
+    });
+  });
 });

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

@@ -1,5 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<SelectableDynamicForm /> with disableSelector and selectedTemplate matches snapshot when disableSelector and selectedTemplate are set 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h4
+      class="ui header"
+    >
+      g1
+    </h4>
+    <div
+      class="field"
+      data-testid="form-field"
+    >
+      <label>
+        field1
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            name="field1"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<SelectableDynamicForm /> with multiple templates matches error snapshot 1`] = `<div />`;
 
 exports[`<SelectableDynamicForm /> with multiple templates matches the latest snapshot 1`] = `

package/src/hooks/useTemplateRelations.js

@@ -0,0 +1,43 @@
+import useSWR from "swr";
+import { apiJson } from "@truedat/core/services/api";
+import { API_TEMPLATE_RELATIONS } from "@truedat/df/templates/api";
+
+const buildTemplateRelationsUrl = ({
+  resourceType,
+  templateId,
+  resourceId,
+  listAll,
+}) => {
+  const params = new URLSearchParams();
+  params.set("resource_type", resourceType);
+  if (templateId != null) params.set("template_id", String(templateId));
+  if (resourceId != null) params.set("resource_id", String(resourceId));
+  if (listAll) params.set("list_all", "true");
+  return `${API_TEMPLATE_RELATIONS}?${params.toString()}`;
+};
+
+export const useTemplateRelations = (options = {}) => {
+  const { resourceType, templateId, resourceId, scope, listAll } = options;
+  const canFetch = !!resourceType;
+  const url = canFetch
+    ? buildTemplateRelationsUrl({
+        resourceType,
+        templateId,
+        resourceId,
+        listAll,
+      })
+    : null;
+  const key = url && scope != null ? [url, scope] : url;
+  const fetcher = (keyOrArray) =>
+    apiJson(Array.isArray(keyOrArray) ? keyOrArray[0] : keyOrArray);
+  const { data, error, mutate } = useSWR(key, fetcher);
+  const response = data?.data ?? data;
+
+  return {
+    default: response?.default ?? null,
+    resource: response?.resource ?? [],
+    error,
+    loading: !error && !data,
+    mutate,
+  };
+};

package/src/templates/api.js

@@ -1,4 +1,5 @@
 const API_TEMPLATE = "/api/templates/:id/";
 const API_TEMPLATES = "/api/templates";
+const API_TEMPLATE_RELATIONS = "/api/template_relations";
 
-export { API_TEMPLATE, API_TEMPLATES };
+export { API_TEMPLATE, API_TEMPLATES, API_TEMPLATE_RELATIONS };

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

@@ -1,12 +1,14 @@
 import _ from "lodash/fp";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Form, Grid, Label, Divider } from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
+import { useWebContext } from "@truedat/core/webContext";
 import GroupsList from "./GroupsList";
 import ActiveGroupForm from "./ActiveGroupForm";
 import TemplateFormActions from "./TemplateFormActions";
+import TemplateRelationsForm from "./TemplateRelationsForm";
 import { parseContentValidation } from "./contentValidation";
 
 const scopeOptions = (formatMessage) =>
@@ -31,10 +33,12 @@ const scopeOptions = (formatMessage) =>
 
 export const TemplateForm = ({ loading, template, onSubmit }) => {
   const { formatMessage } = useIntl();
+  const { scopesWithRelations = [] } = useWebContext();
   const [activeGroup, setActiveGroup] = useState(0);
   const [editedTemplate, setEditedTemplate] = useState({
     ...template,
     content: template?.content || [],
+    template_resource_relations: template?.template_resource_relations ?? [],
   });
 
   useEffect(() => {
@@ -61,6 +65,10 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
       content: [...editedTemplate.content, { name: "", fields: [] }],
     });
 
+  const handleRelationsChange = useCallback((relations) => {
+    setEditedTemplate((prev) => _.assoc("template_resource_relations", relations)(prev));
+  }, []);
+
   const formattedFields = (fields) => _.flow(
     _.map((field) => {
       const fieldProperties = [
@@ -205,9 +213,16 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
           label={formatMessage({ id: "template.form.subscope" })}
           value={subscopeValue}
           onChange={handleChange}
-          disabled={editedTemplate?.scope !== "bg" && editedTemplate?.scope !== "ri"} 
+          disabled={editedTemplate?.scope !== "bg" && editedTemplate?.scope !== "ri"}
         />
       </Form.Group>
+      {scopesWithRelations?.includes(editedTemplate.scope) && (
+        <TemplateRelationsForm
+          scope={editedTemplate.scope}
+          template_id={editedTemplate.id}
+          onRelationsChange={handleRelationsChange}
+        />
+      )}
       <Divider horizontal>
         <Header as="h4">
           <FormattedMessage id="template.form.fieldGroups" />

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

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from "react";
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { Form, Header, Divider } 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) => {
+  if (!resourceType) return [];
+  return [
+    ...(defaultTemplate
+      ? [{ resource_type: resourceType, resource_id: null }]
+      : []),
+    ...(resourceRelations || []).map((resource_id) => ({
+      resource_type: resourceType,
+      resource_id,
+    })),
+  ];
+};
+
+const TemplateRelationsForm = ({ scope, template_id, onRelationsChange }) => {
+  const { formatMessage } = useIntl();
+  const { data: grantableSystems } = useGrantableSystems();
+  const resourceType = scopeToResourceType[scope];
+  const {
+    default: defaultRelation,
+    resource: templateResourceRelations,
+    loading,
+  } = useTemplateRelations({
+    resourceType,
+    templateId: template_id,
+    scope,
+  });
+
+  const isServerDefault = defaultRelation?.template_id === template_id;
+  const [defaultTemplate, setDefaultTemplate] = useState(false);
+  const [resourceRelations, setResourceRelations] = useState([]);
+
+  const serverSnapshot = loading
+    ? null
+    : [
+        isServerDefault,
+        (templateResourceRelations || []).map((r) => r.resource_id).join(","),
+      ].join("|");
+  const lastSyncedRef = useRef(null);
+
+  useEffect(() => {
+    if (serverSnapshot === null) return;
+    if (lastSyncedRef.current === serverSnapshot) return;
+
+    lastSyncedRef.current = serverSnapshot;
+    setDefaultTemplate(isServerDefault);
+    setResourceRelations(
+      _.map(({ resource_id }) => resource_id)(templateResourceRelations || []),
+    );
+  }, [serverSnapshot, isServerDefault, templateResourceRelations]);
+
+  useEffect(() => {
+    if (typeof onRelationsChange !== "function" || !resourceType) return;
+    onRelationsChange(
+      buildRelations(resourceType, defaultTemplate, resourceRelations),
+    );
+  }, [resourceType, defaultTemplate, resourceRelations, onRelationsChange]);
+
+  return (
+    <>
+      <Divider horizontal>
+        <Header as="h4">
+          <FormattedMessage id="template.relations.header" />
+        </Header>
+      </Divider>
+      <Form.Group>
+        <Form.Checkbox
+          id="template_relation_default"
+          error={
+            !isServerDefault && defaultTemplate
+              ? {
+                  content: formatMessage({
+                    id: "template.relations.default.content",
+                  }),
+                  pointing: "left",
+                }
+              : false
+          }
+          name="template_relation_default"
+          label={formatMessage({ id: "template.relations.default" })}
+          onChange={(_e, { checked }) => setDefaultTemplate(checked)}
+          checked={defaultTemplate}
+        />
+      </Form.Group>
+      <Form.Group>
+        <Form.Dropdown
+          label={formatMessage({ id: "template.relations.related" })}
+          name="template_relation_resource"
+          placeholder={formatMessage({
+            id: "template.relations.systems.placeholder",
+          })}
+          search
+          selection
+          multiple
+          clearable
+          options={_.map(({ id, name }) => ({
+            key: id,
+            value: id,
+            text: name,
+          }))(grantableSystems?.data)}
+          value={resourceRelations}
+          onChange={(_e, { value }) => setResourceRelations(value)}
+        />
+      </Form.Group>
+    </>
+  );
+};
+
+TemplateRelationsForm.propTypes = {
+  scope: PropTypes.string.isRequired,
+  template_id: PropTypes.number,
+  onRelationsChange: PropTypes.func,
+};
+
+export default TemplateRelationsForm;

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

@@ -1,71 +1,169 @@
-import { render } from "@truedat/test/render";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TemplateForm from "../TemplateForm";
 
-const emptyTemplate = {
-  id: null,
-  name: "",
-  label: "",
-  scope: "",
-  content: [],
-};
+jest.mock("@truedat/core/webContext", () => ({
+  useWebContext: jest.fn(() => ({ scopesWithRelations: ["gr"] })),
+}));
 
-const template = {
-  id: 1,
-  name: "Name",
-  label: "Label",
-  scope: "bg",
-};
+jest.mock("../TemplateRelationsForm", () => {
+  const React = require("react");
+  return {
+    __esModule: true,
+    default: ({ onRelationsChange }) => {
+      React.useEffect(() => {
+        if (typeof onRelationsChange === "function") {
+          onRelationsChange([
+            { resource_type: "system", resource_id: null },
+            { resource_type: "system", resource_id: 1 },
+          ]);
+        }
+      }, [onRelationsChange]);
+      return <div data-testid="template-relations-form" />;
+    },
+  };
+});
 
-const templateContent = [
-  {
-    fields: [
-      {
-        ai_suggestion: false,
-        cardinality: "*",
-        default: {
-          origin: "default",
-          value: "",
-        },
-        label: "field",
-        name: "field",
-        subscribable: false,
-        type: "string",
-        values: null,
-        widget: "string",
-        disabledName: true,
-      },
-    ],
-    name: "group",
-  },
-];
-
-const filledTemplate = {
-  ...template,
-  content: templateContent,
+const validTemplate = {
+  name: "Test Template",
+  label: "Test Label",
+  scope: "gr",
+  content: [{ name: "Group1", fields: [{ name: "field1", label: "Field 1", type: "string" }] }],
 };
 
 describe("<TemplateForm />", () => {
-  it("matches the latest snapshot for empty template", () => {
-    const state = { templateSaving: false, templateDeleting: false };
-    const renderOpts = { state };
-    const props = { emptyTemplate, onSubmit: jest.fn() };
-    const { container } = render(<TemplateForm {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  beforeEach(() => {
+    const { useWebContext } = require("@truedat/core/webContext");
+    useWebContext.mockReturnValue({ scopesWithRelations: ["gr"] });
+  });
+
+  it("matches snapshot when scope has relations", async () => {
+    const renderOpts = {
+      state: {
+        templateDeleting: false,
+        templateSaving: false,
+      },
+    };
+    const rendered = render(
+      <TemplateForm template={validTemplate} onSubmit={jest.fn()} loading={false} />,
+      renderOpts
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for filled template", () => {
-    const state = { templateSaving: false, templateDeleting: false };
-    const renderOpts = { state };
-    const props = { template: filledTemplate, onSubmit: jest.fn() };
-    const { container } = render(<TemplateForm {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches snapshot when scope has no relations", async () => {
+    const { useWebContext } = require("@truedat/core/webContext");
+    useWebContext.mockReturnValue({ scopesWithRelations: [] });
+    const templateOtherScope = { ...validTemplate, scope: "dd" };
+    const renderOpts = {
+      state: {
+        templateDeleting: false,
+        templateSaving: false,
+      },
+    };
+    const rendered = render(
+      <TemplateForm template={templateOtherScope} onSubmit={jest.fn()} loading={false} />,
+      renderOpts
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (loading)", () => {
-    const state = { templateSaving: true, templateDeleting: false };
-    const renderOpts = { state };
-    const props = { template, onSubmit: jest.fn() };
-    const { container } = render(<TemplateForm {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("includes template_resource_relations in submit payload when scope has relations", async () => {
+    const onSubmit = jest.fn();
+    const renderOpts = {
+      state: {
+        templateDeleting: false,
+        templateSaving: false,
+      },
+    };
+    const rendered = render(
+      <TemplateForm template={validTemplate} onSubmit={onSubmit} loading={false} />,
+      renderOpts
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(rendered.getByTestId("template-relations-form")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("button", { name: /save/i }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled();
+    });
+    const submittedPayload = onSubmit.mock.calls[0][0];
+    expect(submittedPayload.template.template_resource_relations).toEqual([
+      { resource_type: "system", resource_id: null },
+      { resource_type: "system", resource_id: 1 },
+    ]);
+  });
+
+  it("initializes template_resource_relations from template when provided", async () => {
+    const onSubmit = jest.fn();
+    const initialRelations = [
+      { resource_type: "system", resource_id: null },
+      { resource_type: "system", resource_id: 2 },
+    ];
+    const templateWithRelations = {
+      ...validTemplate,
+      template_resource_relations: initialRelations,
+    };
+    const renderOpts = {
+      state: {
+        templateDeleting: false,
+        templateSaving: false,
+      },
+    };
+    const rendered = render(
+      <TemplateForm template={templateWithRelations} onSubmit={onSubmit} loading={false} />,
+      renderOpts
+    );
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("button", { name: /save/i }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled();
+    });
+    const submittedPayload = onSubmit.mock.calls[0][0];
+    expect(submittedPayload.template.template_resource_relations).toEqual([
+      { resource_type: "system", resource_id: null },
+      { resource_type: "system", resource_id: 1 },
+    ]);
+  });
+
+  it("does not render TemplateRelationsForm when scope is not in scopesWithRelations", async () => {
+    const { useWebContext } = require("@truedat/core/webContext");
+    useWebContext.mockReturnValue({ scopesWithRelations: [] });
+    const templateOtherScope = { ...validTemplate, scope: "dd" };
+    const onSubmit = jest.fn();
+    const renderOpts = {
+      state: {
+        templateDeleting: false,
+        templateSaving: false,
+      },
+    };
+    const rendered = render(
+      <TemplateForm template={templateOtherScope} onSubmit={onSubmit} loading={false} />,
+      renderOpts
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.queryByTestId("template-relations-form")).not.toBeInTheDocument();
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("button", { name: /save/i }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled();
+    });
+    const submittedPayload = onSubmit.mock.calls[0][0];
+    expect(submittedPayload.template.template_resource_relations).toEqual([]);
   });
 });