@truedat/df 8.6.3 → 8.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.6.3",
+  "version": "8.6.6",
   "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.6.3",
+    "@truedat/test": "8.6.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.6.3",
+    "@truedat/core": "8.6.6",
     "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": "3a4e629e4c63fdec993dfe357f9b11fdf7a62e8b"
+  "gitHead": "8a7cc3d7598dde1a52abbb9933118f4a90155d42"
 }

package/src/components/DynamicFieldValue.js

@@ -5,7 +5,7 @@ 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 { GroupPreview } from "./widgets/GroupPreview";
 import HierarchyPreview from "./widgets/HierarchyPreview";
 import SystemPreview from "./widgets/SystemPreview";
 import FieldViewerValue from "./FieldViewerValue";
@@ -55,7 +55,7 @@ export const DynamicFieldValue = ({
         ) : type == "domain" ? (
           <DomainPreview domainIds={_.castArray(value)} />
         ) : type == "group" ? (
-          <GroupPreview groupId={value} />
+          <GroupPreview groups={_.castArray(value)} />
         ) : type == "user_group" ? (
           <UserGroupPreview userGroupId={value} />
         ) : type == "hierarchy" ? (

package/src/components/FieldViewerValue.js

@@ -40,8 +40,13 @@ const DynamicTableField = (field) => {
 const groupNameOrAlias = (group) =>
   _.isString(group) ? group : group?.alias || group?.name;
 
-const userGroupDisplayName = (value, values) => {
-  const [_type, name] = value.split(":");
+const stripGroupPrefix = (value) =>
+  _.isString(value) && value.startsWith("group:")
+    ? value.slice("group:".length)
+    : value;
+
+const groupDisplayName = (rawName, values) => {
+  const name = stripGroupPrefix(rawName);
   const group = _.find(values?.processed_groups, (group) =>
     [groupNameOrAlias(group), _.get(group, "name")].includes(name)
   );
@@ -49,6 +54,11 @@ const userGroupDisplayName = (value, values) => {
   return group ? groupNameOrAlias(group) : name;
 };
 
+const userGroupDisplayName = (value, values) => {
+  const [_type, name] = value.split(":");
+  return groupDisplayName(name, values);
+};
+
 export const FieldViewerValue = ({
   label,
   multiple,
@@ -119,7 +129,21 @@ export const FieldViewerValue = ({
       return <ImagePreview value={value} />;
     case "system":
       return <SystemPreview value={value} />;
-    case "group":
+    case "group": {
+      const displayName = groupDisplayName(value, values);
+
+      return multiple ? (
+        <Label>
+          <Icon name="group" />
+          {displayName}
+        </Label>
+      ) : (
+        <>
+          <Icon name="group" />
+          {displayName}
+        </>
+      );
+    }
     case "user_group": {
       const [type, name] = value.split(":");
       const displayName =

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

@@ -26,4 +26,33 @@ describe("<DynamicFieldValue />", () => {
     const wrapper = render(<DynamicFieldValue {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("renders a single group value with a group icon", () => {
+    const rendered = render(
+      <DynamicFieldValue
+        label="label"
+        value={{ value: "Data Owners", origin: "user" }}
+        type="group"
+        widget="dropdown"
+      />
+    );
+
+    expect(rendered.getByText(/data owners/i)).toBeInTheDocument();
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
+  });
+
+  it("renders multiple group values with a group icon each", () => {
+    const rendered = render(
+      <DynamicFieldValue
+        label="label"
+        value={{ value: ["Data Owners", "Quality"], origin: "user" }}
+        type="group"
+        widget="checkbox"
+      />
+    );
+
+    expect(rendered.getByText(/data owners/i)).toBeInTheDocument();
+    expect(rendered.getByText(/quality/i)).toBeInTheDocument();
+    expect(rendered.container.querySelectorAll(".group.icon")).toHaveLength(2);
+  });
 });

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

@@ -22,6 +22,9 @@ jest.mock("@truedat/core/hooks", () => {
 
 jest.mock("../widgets/GroupPreview", () => ({
   __esModule: true,
+  GroupPreview: ({ groups }) => (
+    <div data-testid="group-preview">{[].concat(groups).join(",")}</div>
+  ),
   default: ({ groupId }) => (
     <div data-testid="group-preview">{[].concat(groupId).join(",")}</div>
   ),
@@ -47,7 +50,7 @@ const groupTemplate = {
 
 const groupContent = {
   "group-field": {
-    value: ["group:Group Alias"],
+    value: ["Group Alias"],
     origin: "user",
   },
 };
@@ -119,7 +122,7 @@ describe("<DynamicFormViewer />", () => {
     );
 
     expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "group:Group Alias"
+      "Group Alias"
     );
   });
 
@@ -132,7 +135,7 @@ describe("<DynamicFormViewer />", () => {
     );
 
     expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "group:Group Alias"
+      "Group Alias"
     );
     expect(rendered.container.querySelector("h3, h4")).not.toBeInTheDocument();
   });
@@ -155,7 +158,7 @@ describe("<DynamicFormViewer />", () => {
 
     expect(useTemplate).not.toHaveBeenCalled();
     expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "group:Group Alias"
+      "Group Alias"
     );
   });
 
@@ -195,7 +198,7 @@ describe("<DynamicFormViewer />", () => {
       domainIds: [1],
     });
     expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "group:Group Alias"
+      "Group Alias"
     );
   });
 });

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

@@ -180,7 +180,7 @@ describe("<FieldViewerValue />", () => {
     const rendered = render(
       <FieldViewerValue
         type="group"
-        value="group:Data Owners"
+        value="Data Owners"
         multiple
         values={{
           processed_groups: [{ name: "Data Owners" }],
@@ -190,6 +190,23 @@ describe("<FieldViewerValue />", () => {
 
     expect(rendered.getByText("Data Owners")).toBeInTheDocument();
     expect(rendered.container.querySelector(".ui.label")).toBeInTheDocument();
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
+  });
+
+  it("strips legacy group: prefix when rendering group values", () => {
+    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(".group.icon")).toBeInTheDocument();
   });
 
   it("renders user_group values using the raw name when they are not groups", () => {

package/src/components/widgets/GroupPreview.js

@@ -1,21 +1,57 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { useQuery } from "@apollo/client";
-import { Label } from "semantic-ui-react";
+import { Icon, Label } from "semantic-ui-react";
+import { Link } from "react-router";
+import { linkTo } from "@truedat/core/routes";
 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:");
+const stripGroupPrefix = (value) =>
+  _.isString(value) && value.startsWith("group:")
+    ? value.slice("group:".length)
+    : value;
+
+const groupName = (group) => (_.isString(group) ? group : group?.name);
+const groupId = (group) => (_.isString(group) ? null : group?.id);
+const groupDisplayName = (group) => stripGroupPrefix(groupName(group));
+const isUserValue = (group) =>
+  _.isString(groupName(group)) && groupName(group).startsWith("user:");
+
+export const GroupLabel = ({ value }) => (
+  <Label>
+    <Icon name="group" />
+    {stripGroupPrefix(value)}
+  </Label>
+);
+
+GroupLabel.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+export const LinkedGroupLabel = ({ group }) => {
+  const id = groupId(group);
+  const label = <GroupLabel value={groupName(group)} />;
+
+  return id ? <Link to={linkTo.GROUP({ id })}>{label}</Link> : label;
+};
+
+LinkedGroupLabel.propTypes = {
+  group: PropTypes.oneOfType([
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      name: PropTypes.string.isRequired,
+    }),
+    PropTypes.string,
+  ]).isRequired,
+};
 
 export const GroupPreview = ({ groups }) =>
   _.flow(
-    _.filter(isGroup),
+    _.reject(isUserValue),
     _.map((group) => (
-      <LinkedUserGroupLabel
-        key={groupId(group) || groupName(group)}
-        userGroup={group}
+      <LinkedGroupLabel
+        key={groupId(group) || groupDisplayName(group)}
+        group={group}
       />
     )),
   )(groups);

package/src/components/widgets/__tests__/GroupPreview.spec.js

@@ -18,7 +18,19 @@ describe("<GroupPreview />", () => {
     jest.clearAllMocks();
   });
 
-  it("renders group values with an icon instead of the prefix", () => {
+  it("renders group values with a group icon", () => {
+    const rendered = render(
+      <GroupPreview groups={[{ id: 123, name: "Group Alias" }]} />
+    );
+
+    expect(rendered.container.textContent).toBe("Group Alias");
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
+    expect(
+      rendered.getByRole("link", { name: /group alias/i })
+    ).toHaveAttribute("href", "/groups/123");
+  });
+
+  it("strips the legacy group: prefix when rendering names", () => {
     const rendered = render(
       <GroupPreview groups={[{ id: 123, name: "group:Group Alias" }]} />
     );
@@ -33,7 +45,7 @@ describe("<GroupPreview />", () => {
   it("does not render user values", () => {
     const rendered = render(
       <GroupPreview
-        groups={["user:John Doe", { id: 123, name: "group:Group Alias" }]}
+        groups={["user:John Doe", { id: 123, name: "Group Alias" }]}
       />
     );
 
@@ -46,7 +58,7 @@ describe("<GroupPreview />", () => {
 
   it("renders string groups without a link when there is no group id", () => {
     const rendered = render(
-      <GroupPreview groups={["group:Standalone Group"]} />
+      <GroupPreview groups={["Standalone Group"]} />
     );
 
     expect(rendered.container.textContent).toBe("Standalone Group");
@@ -91,7 +103,7 @@ describe("<GroupPreview />", () => {
       loading: false,
       error: undefined,
       data: {
-        groupDetails: [{ id: 123, name: "group:Group Alias" }],
+        groupDetails: [{ id: 123, name: "Group Alias" }],
       },
     });
 

package/src/templates/utils/__tests__/filterValues.spec.js

@@ -81,10 +81,10 @@ describe("utils: validValues", () => {
 
       expect(
         filterValues(template)({
-          role: { value: "group:alias1", origin: "default" },
+          role: { value: "alias1", origin: "default" },
         }),
       ).toEqual({
-        role: { value: "group:alias1", origin: "default" },
+        role: { value: "alias1", origin: "default" },
       });
 
       expect(
@@ -94,6 +94,14 @@ describe("utils: validValues", () => {
       ).toEqual({
         role: { value: null, origin: "default" },
       });
+
+      expect(
+        filterValues(template)({
+          role: { value: "group:alias1", origin: "default" },
+        }),
+      ).toEqual({
+        role: { value: null, origin: "default" },
+      });
     });
 
     it("should nullify unlisted fixed values", () => {

package/src/templates/utils/__tests__/parseFieldOptions.spec.js

@@ -138,14 +138,14 @@ describe("utils: parseFieldOptions", () => {
         processed_groups: ["alias1", "group2"],
       },
     };
-    const content = { field: { value: "group:alias1", origin: "default" } };
+    const content = { field: { value: "alias1", origin: "default" } };
     const result = parseFormatFieldOptions(content)(field);
     expect(result).toEqual({
       ...field,
-      value: { value: "group:alias1", origin: "default" },
+      value: { value: "alias1", origin: "default" },
       parsedValues: [
-        { value: "group:alias1", text: "alias1", icon: "group" },
-        { value: "group:group2", text: "group2", icon: "group" },
+        { value: "alias1", text: "alias1", icon: "group" },
+        { value: "group2", text: "group2", icon: "group" },
       ],
     });
   });

package/src/templates/utils/filterValues.js

@@ -20,10 +20,7 @@ const userGroupValues = (field) =>
 
 const groupValues = _.flow(
   _.get("processed_groups"),
-  _.map((group) => {
-    const name = groupNameOrAlias(group);
-    return `group:${name}`;
-  }),
+  _.map(groupNameOrAlias),
 );
 
 export const validValues = _.flow(

package/src/templates/utils/parseFieldOptions.js

@@ -47,19 +47,20 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
   const groupNameOrAlias = (group) =>
     typeof group === "string" ? group : group.alias || group.name;
   const parseRoleGroups = (values) => {
+    const isGroupOnly = field?.type === "group";
     const groups = _.flow(
       _.get("processed_groups"),
       _.map((group) => {
         const name = groupNameOrAlias(group);
         return {
-          value: `group:${name}`,
+          value: isGroupOnly ? name : `group:${name}`,
           text: name,
           icon: "group",
         };
       }),
     )(values);
 
-    if (field?.type === "group") return groups;
+    if (isGroupOnly) return groups;
 
     const users = _.flow(
       _.get("processed_users"),