@truedat/df 8.5.9 → 8.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.5.9",
+  "version": "8.6.1",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,14 +51,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.9",
+    "@truedat/test": "8.6.1",
     "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.5.9",
+    "@truedat/core": "8.6.1",
     "axios": "^1.15.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "45e6137b5aa9452db78901e8b0eaa16cc7953b7c"
+  "gitHead": "932eb0895ec71961f52a09309b99ae017977a899"
 }

package/src/api/queries.js

@@ -17,3 +17,21 @@ export const DOMAIN_PREVIEW_QUERY = gql`
     }
   }
 `;
+
+export const USER_GROUP_PREVIEW_QUERY = gql`
+  query UserGroupPreviewQuery($ids: [ID!]!) {
+    userGroupDetails(ids: $ids) {
+      id
+      name
+    }
+  }
+`;
+
+export const GROUP_PREVIEW_QUERY = gql`
+  query GroupPreviewQuery($ids: [ID!]!) {
+    groupDetails(ids: $ids) {
+      id
+      name
+    }
+  }
+`;

package/src/components/DynamicFieldValue.js

@@ -4,6 +4,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Icon, List, Container } from "semantic-ui-react";
 import OriginLabel from "@truedat/core/components/OriginLabel";
 import DomainPreview from "./widgets/DomainPreview";
+import UserGroupPreview from "./widgets/UserGroupPreview";
+import GroupPreview from "./widgets/GroupPreview";
 import HierarchyPreview from "./widgets/HierarchyPreview";
 import SystemPreview from "./widgets/SystemPreview";
 import FieldViewerValue from "./FieldViewerValue";
@@ -52,6 +54,10 @@ export const DynamicFieldValue = ({
           )
         ) : type == "domain" ? (
           <DomainPreview domainIds={_.castArray(value)} />
+        ) : type == "group" ? (
+          <GroupPreview groupId={value} />
+        ) : type == "user_group" ? (
+          <UserGroupPreview userGroupId={value} />
         ) : type == "hierarchy" ? (
           <HierarchyPreview hierarchyValue={_.castArray(value)} />
         ) : _.isArray(value) ? (

package/src/components/FieldViewerValue.js

@@ -36,6 +36,19 @@ const DynamicTableField = (field) => {
     </Table.Cell>
   );
 };
+
+const groupNameOrAlias = (group) =>
+  _.isString(group) ? group : group?.alias || group?.name;
+
+const userGroupDisplayName = (value, values) => {
+  const [_type, name] = value.split(":");
+  const group = _.find(values?.processed_groups, (group) =>
+    [groupNameOrAlias(group), _.get(group, "name")].includes(name)
+  );
+
+  return group ? groupNameOrAlias(group) : name;
+};
+
 export const FieldViewerValue = ({
   label,
   multiple,
@@ -106,19 +119,24 @@ export const FieldViewerValue = ({
       return <ImagePreview value={value} />;
     case "system":
       return <SystemPreview value={value} />;
-    case "user_group":
+    case "group":
+    case "user_group": {
       const [type, name] = value.split(":");
+      const displayName =
+        type === "group" ? userGroupDisplayName(value, values) : name;
+
       return multiple ? (
         <Label>
           <Icon name={type} />
-          {name}
+          {displayName}
         </Label>
       ) : (
         <>
           <Icon name={type} />
-          {name}
+          {displayName}
         </>
       );
+    }
     case "string":
     case "user":
     case "number":

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

@@ -1,10 +1,86 @@
 import { render } from "@truedat/test/render";
-import { DynamicFormViewer } from "../DynamicFormViewer";
+import { useTemplate } from "@truedat/core/hooks";
 import { markdownToHtml } from "@truedat/core/components/Markdown";
+import DynamicFormViewerFetcher, {
+  DynamicFormViewer,
+} from "../DynamicFormViewer";
+
+jest.mock("@truedat/core/components/Loading", () => ({
+  __esModule: true,
+  default: () => <div data-testid="loading" />,
+}));
+
+jest.mock("@truedat/core/hooks", () => {
+  const originalModule = jest.requireActual("@truedat/core/hooks");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useTemplate: jest.fn(),
+  };
+});
+
+jest.mock("../widgets/GroupPreview", () => ({
+  __esModule: true,
+  default: ({ groupId }) => (
+    <div data-testid="group-preview">{[].concat(groupId).join(",")}</div>
+  ),
+}));
+
+const groupTemplate = {
+  scope: "bg",
+  content: [
+    {
+      name: "g1",
+      fields: [
+        {
+          name: "group-field",
+          label: "group-label",
+          type: "group",
+          widget: "dropdown",
+          cardinality: "*",
+        },
+      ],
+    },
+  ],
+};
+
+const groupContent = {
+  "group-field": {
+    value: ["group:Group Alias"],
+    origin: "user",
+  },
+};
+
+const unnamedGroupTemplate = {
+  scope: "bg",
+  content: [
+    {
+      fields: [
+        {
+          name: "group-field",
+          label: "group-label",
+          type: "group",
+          widget: "dropdown",
+          cardinality: "*",
+        },
+      ],
+    },
+  ],
+};
 
 describe("<DynamicFormViewer />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useTemplate.mockReturnValue({
+      data: {},
+      loading: false,
+    });
+  });
+
   it("renders markdown content through MarkdownReader", () => {
-    const markdown = "## Title\n\n**Hello** world\n\n[link](https://example.com)";
+    const markdown =
+      "## Title\n\n**Hello** world\n\n[link](https://example.com)";
 
     const template = {
       scope: "bg",
@@ -36,5 +112,90 @@ describe("<DynamicFormViewer />", () => {
     expect(reader).toBeInTheDocument();
     expect(reader.innerHTML).toBe(markdownToHtml(markdown));
   });
-});
 
+  it("renders group fields through GroupPreview", () => {
+    const rendered = render(
+      <DynamicFormViewer template={groupTemplate} content={groupContent} />
+    );
+
+    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
+      "group:Group Alias"
+    );
+  });
+
+  it("renders groups without heading when the group name is missing", () => {
+    const rendered = render(
+      <DynamicFormViewer
+        template={unnamedGroupTemplate}
+        content={groupContent}
+      />
+    );
+
+    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
+      "group:Group Alias"
+    );
+    expect(rendered.container.querySelector("h3, h4")).not.toBeInTheDocument();
+  });
+
+  it("renders a negative message when template is missing", () => {
+    const rendered = render(<DynamicFormViewer content={groupContent} />);
+
+    expect(
+      rendered.container.querySelector(".ui.negative.message")
+    ).toBeInTheDocument();
+  });
+
+  it("renders object templates without fetching them", () => {
+    const rendered = render(
+      <DynamicFormViewerFetcher
+        template={groupTemplate}
+        content={groupContent}
+      />
+    );
+
+    expect(useTemplate).not.toHaveBeenCalled();
+    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
+      "group:Group Alias"
+    );
+  });
+
+  it("renders a loader while fetching string templates", () => {
+    useTemplate.mockReturnValue({
+      data: {},
+      loading: true,
+    });
+
+    const rendered = render(
+      <DynamicFormViewerFetcher template="group-template" />
+    );
+
+    expect(useTemplate).toHaveBeenCalledWith({
+      name: "group-template",
+      domainIds: undefined,
+    });
+    expect(rendered.getByTestId("loading")).toBeInTheDocument();
+  });
+
+  it("fetches string templates before rendering them", () => {
+    useTemplate.mockReturnValue({
+      data: { template: groupTemplate },
+      loading: false,
+    });
+
+    const rendered = render(
+      <DynamicFormViewerFetcher
+        template="group-template"
+        domainIds={[1]}
+        content={groupContent}
+      />
+    );
+
+    expect(useTemplate).toHaveBeenCalledWith({
+      name: "group-template",
+      domainIds: [1],
+    });
+    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
+      "group:Group Alias"
+    );
+  });
+});

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

@@ -1,6 +1,6 @@
 import { render } from "@truedat/test/render";
-import { FieldViewerValue } from "../FieldViewerValue";
 import { markdownToHtml } from "@truedat/core/components/Markdown";
+import { FieldViewerValue } from "../FieldViewerValue";
 
 describe("<FieldViewerValue />", () => {
   const testTypes = [
@@ -56,18 +56,24 @@ describe("<FieldViewerValue />", () => {
       type: "datetime",
     },
     {
-      values: { table_columns: [{ name: "col1", cardinality: "?", type: "string" }] },
-      value: [{ col1: { value: "v2", origin: "user" } }, { col1: { value: "v2", origin: "user" } }],
+      values: {
+        table_columns: [{ name: "col1", cardinality: "?", type: "string" }],
+      },
+      value: [
+        { col1: { value: "v2", origin: "user" } },
+        { col1: { value: "v2", origin: "user" } },
+      ],
       type: "dynamic_table",
-    }
+    },
   ];
 
   testTypes.forEach((props) =>
-    it(`matches the latest snapshot with type: ${props.type}${props.alternative ? " " + props.alternative : ""
-      }`, () => {
-        const { container } = render(<FieldViewerValue {...props} />);
-        expect(container).toMatchSnapshot();
-      })
+    it(`matches the latest snapshot with type: ${props.type}${
+      props.alternative ? " " + props.alternative : ""
+    }`, () => {
+      const { container } = render(<FieldViewerValue {...props} />);
+      expect(container).toMatchSnapshot();
+    })
   );
 
   it("matches the latest snapshot for multiple", () => {
@@ -80,10 +86,30 @@ describe("<FieldViewerValue />", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("shows group alias for user_group values when available", () => {
+    const { container } = render(
+      <FieldViewerValue
+        type="user_group"
+        value="group:Group alias"
+        values={{
+          processed_groups: ["Group alias"],
+        }}
+      />
+    );
+
+    expect(container.textContent).toContain("Group alias");
+  });
+
   it("renders MarkdownReader for type=markdown", () => {
-    const markdown = "## Title\n\n**Hello** world\n\n[link](https://example.com)";
+    const markdown =
+      "## Title\n\n**Hello** world\n\n[link](https://example.com)";
     const { container } = render(
-      <FieldViewerValue type="markdown" value={markdown} label="md" widget="markdown" />,
+      <FieldViewerValue
+        type="markdown"
+        value={markdown}
+        label="md"
+        widget="markdown"
+      />
     );
 
     const reader = container.querySelector(".markdown-reader");
@@ -93,8 +119,99 @@ describe("<FieldViewerValue />", () => {
 
   it("returns null when markdown content is empty", () => {
     const { container } = render(
-      <FieldViewerValue type="markdown" value="   " label="md" widget="markdown" />,
+      <FieldViewerValue
+        type="markdown"
+        value="   "
+        label="md"
+        widget="markdown"
+      />
     );
     expect(container.firstChild).toBeNull();
   });
+
+  it("renders only non-empty values for dynamic table array cells", () => {
+    const rendered = render(
+      <FieldViewerValue
+        type="dynamic_table"
+        values={{
+          table_columns: [{ name: "col1", cardinality: "*", type: "string" }],
+        }}
+        value={[
+          {
+            col1: {
+              value: ["v1", "", null, "v2"],
+              origin: "user",
+            },
+          },
+        ]}
+      />
+    );
+
+    const tableCell = rendered.container.querySelector("tbody td");
+
+    expect(rendered.getByText("v1")).toBeInTheDocument();
+    expect(rendered.getByText("v2")).toBeInTheDocument();
+    expect(tableCell.querySelectorAll(".ui.label")).toHaveLength(2);
+  });
+
+  it("renders an empty cell for dynamic table values when the cell content is missing", () => {
+    const rendered = render(
+      <FieldViewerValue
+        type="dynamic_table"
+        values={{
+          table_columns: [{ name: "col1", cardinality: "*", type: "string" }],
+        }}
+        value={[{}]}
+      />
+    );
+
+    expect(rendered.container.querySelector("tbody td")).toBeEmptyDOMElement();
+  });
+
+  it("returns null when the field value is nil", () => {
+    const { container } = render(
+      <FieldViewerValue type="string" value={null} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders group values using the processed group name when alias is missing", () => {
+    const rendered = render(
+      <FieldViewerValue
+        type="group"
+        value="group:Data Owners"
+        multiple
+        values={{
+          processed_groups: [{ name: "Data Owners" }],
+        }}
+      />
+    );
+
+    expect(rendered.getByText("Data Owners")).toBeInTheDocument();
+    expect(rendered.container.querySelector(".ui.label")).toBeInTheDocument();
+  });
+
+  it("renders user_group values using the raw name when they are not groups", () => {
+    const rendered = render(
+      <FieldViewerValue type="user_group" value="user:Jane Doe" multiple />
+    );
+
+    expect(rendered.getByText("Jane Doe")).toBeInTheDocument();
+    expect(rendered.container.querySelector(".ui.label")).toBeInTheDocument();
+  });
+
+  it("renders identifier widgets with the identifier css class", () => {
+    const rendered = render(
+      <FieldViewerValue
+        type="string"
+        value="identifier-value"
+        widget="identifier"
+      />
+    );
+
+    expect(
+      rendered.container.querySelector(".identifier-value")
+    ).toHaveTextContent("identifier-value");
+  });
 });

package/src/components/widgets/GroupPreview.js

@@ -0,0 +1,55 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import { Label } from "semantic-ui-react";
+import { GROUP_PREVIEW_QUERY } from "../../api/queries";
+import { LinkedUserGroupLabel } from "./UserGroupPreview";
+
+const groupName = (group) => (_.isString(group) ? group : group.name);
+const groupId = (group) => (_.isString(group) ? null : group.id);
+const isGroup = (group) => groupName(group)?.startsWith("group:");
+
+export const GroupPreview = ({ groups }) =>
+  _.flow(
+    _.filter(isGroup),
+    _.map((group) => (
+      <LinkedUserGroupLabel
+        key={groupId(group) || groupName(group)}
+        userGroup={group}
+      />
+    )),
+  )(groups);
+
+GroupPreview.propTypes = {
+  groups: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+          .isRequired,
+        name: PropTypes.string.isRequired,
+      }),
+      PropTypes.string,
+    ]),
+  ).isRequired,
+};
+
+export const GroupPreviewLoader = ({ groupId }) => {
+  const { loading, error, data } = useQuery(GROUP_PREVIEW_QUERY, {
+    variables: { ids: _.castArray(groupId) },
+  });
+  if (error) return null;
+  return loading ? (
+    <Label>...</Label>
+  ) : (
+    <GroupPreview groups={data.groupDetails} />
+  );
+};
+
+GroupPreviewLoader.propTypes = {
+  groupId: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.string,
+  ]).isRequired,
+};
+
+export default GroupPreviewLoader;

package/src/components/widgets/UserGroupPreview.js

@@ -0,0 +1,97 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import { Icon, Label } from "semantic-ui-react";
+import { Link } from "react-router";
+import { linkTo } from "@truedat/core/routes";
+import { USER_GROUP_PREVIEW_QUERY } from "../../api/queries";
+
+const typeAndName = (value) => {
+  const [type, ...nameParts] = value.split(":");
+  return { type, name: nameParts.join(":") };
+};
+
+const userGroupName = (userGroup) =>
+  _.isString(userGroup) ? userGroup : userGroup.name;
+
+const userGroupId = (userGroup) =>
+  _.isString(userGroup) ? null : userGroup.id;
+
+const isGroup = (userGroup) => userGroupName(userGroup)?.startsWith("group:");
+
+export const UserGroupLabel = ({ value }) => {
+  const { type, name } = typeAndName(value);
+
+  return (
+    <Label>
+      <Icon name={type} />
+      {name}
+    </Label>
+  );
+};
+
+UserGroupLabel.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+export const LinkedUserGroupLabel = ({ userGroup }) => {
+  const id = userGroupId(userGroup);
+  const label = <UserGroupLabel value={userGroupName(userGroup)} />;
+
+  return id && isGroup(userGroup) ? (
+    <Link to={linkTo.GROUP({ id })}>{label}</Link>
+  ) : (
+    label
+  );
+};
+
+LinkedUserGroupLabel.propTypes = {
+  userGroup: PropTypes.oneOfType([
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      name: PropTypes.string.isRequired,
+    }),
+    PropTypes.string,
+  ]).isRequired,
+};
+
+export const UserGroupPreview = ({ userGroups }) =>
+  _.map((userGroup) => (
+    <LinkedUserGroupLabel
+      key={userGroupId(userGroup) || userGroupName(userGroup)}
+      userGroup={userGroup}
+    />
+  ))(userGroups);
+
+UserGroupPreview.propTypes = {
+  userGroups: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        name: PropTypes.string.isRequired,
+      }),
+      PropTypes.string,
+    ]),
+  ).isRequired,
+};
+
+export const UserGroupPreviewLoader = ({ userGroupId }) => {
+  const { loading, error, data } = useQuery(USER_GROUP_PREVIEW_QUERY, {
+    variables: { ids: _.castArray(userGroupId) },
+  });
+  if (error) return null;
+  return loading ? (
+    <Label>...</Label>
+  ) : (
+    <UserGroupPreview userGroups={data.userGroupDetails} />
+  );
+};
+
+UserGroupPreviewLoader.propTypes = {
+  userGroupId: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.string,
+  ]).isRequired,
+};
+
+export default UserGroupPreviewLoader;