@truedat/df 8.6.6 → 8.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.6.6",
+  "version": "8.7.0",
   "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.6",
+    "@truedat/test": "8.7.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.6.6",
+    "@truedat/core": "8.7.0",
     "axios": "^1.15.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -78,7 +78,7 @@
     "react-intl": "^7.1.11",
     "react-moment": "^1.1.3",
     "react-redux": "^9.2.0",
-    "react-router": "^7.6.0",
+    "react-router": "^7.15.0",
     "react-sortable-hoc": "^2.0.0",
     "redux": "^5.0.1",
     "redux-saga": "^1.3.0",
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "8a7cc3d7598dde1a52abbb9933118f4a90155d42"
+  "gitHead": "375298315086154cea326bfaebc504d6e45873ed"
 }

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";
@@ -23,6 +23,7 @@ export const DynamicFieldValue = ({
     value: null,
     origin: "default",
   };
+
   const { formatMessage } = useIntl();
   return (
     <List.Item>
@@ -55,7 +56,7 @@ export const DynamicFieldValue = ({
         ) : type == "domain" ? (
           <DomainPreview domainIds={_.castArray(value)} />
         ) : type == "group" ? (
-          <GroupPreview groups={_.castArray(value)} />
+          <GroupPreview groupId={value} />
         ) : type == "user_group" ? (
           <UserGroupPreview userGroupId={value} />
         ) : type == "hierarchy" ? (

package/src/components/FieldViewerValue.js

@@ -37,21 +37,26 @@ const DynamicTableField = (field) => {
   );
 };
 
-const groupNameOrAlias = (group) =>
-  _.isString(group) ? group : group?.alias || group?.name;
-
 const stripGroupPrefix = (value) =>
   _.isString(value) && value.startsWith("group:")
     ? value.slice("group:".length)
     : value;
 
+const groupLabel = (group) =>
+  _.isString(group) ? group : group?.alias || group?.name;
+
+const groupMatchesName = (group, name) => {
+  if (_.isString(group)) return group === name;
+  return [group?.name, group?.alias].includes(name);
+};
+
 const groupDisplayName = (rawName, values) => {
   const name = stripGroupPrefix(rawName);
-  const group = _.find(values?.processed_groups, (group) =>
-    [groupNameOrAlias(group), _.get(group, "name")].includes(name)
-  );
+  const groups =
+    values?.processed_groups_details || values?.processed_groups || [];
+  const group = _.find(groups, (group) => groupMatchesName(group, name));
 
-  return group ? groupNameOrAlias(group) : name;
+  return group ? groupLabel(group) : name;
 };
 
 const userGroupDisplayName = (value, values) => {

package/src/components/SelectDynamicFormWithTranslations.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Grid, Header } from "semantic-ui-react";
 import { TemplateSelector } from "@truedat/core/components";
@@ -29,13 +29,15 @@ export default function SelectDynamicFormWithTranslations({
   showTemplateSectionTitle,
 }) {
   const [thisTemplate, setThisTemplate] = useState();
-  const template = _.isEmpty(selectedTemplate) ? thisTemplate : selectedTemplate;
+  const template = _.isEmpty(selectedTemplate)
+    ? thisTemplate
+    : selectedTemplate;
   const { enabledLangs } = useLanguage();
   const { formatMessage } = useIntl();
   const domainIdsArray = _.isArray(domainIds) ? domainIds : [];
-  const domain = _.size(domainIdsArray) > 0 ? { id: _.head(domainIdsArray) } : null;
+  const domain =
+    _.size(domainIdsArray) > 0 ? { id: _.head(domainIdsArray) } : null;
   const hasDomainSelection = domain !== null;
-  const domainKey = domainIdsArray.join(",");
   const templateTitle =
     template &&
     formatMessage({
@@ -50,17 +52,11 @@ export default function SelectDynamicFormWithTranslations({
     });
   };
 
-  useEffect(() => {
-    if (actionKey === "create") {
-      setThisTemplate(undefined);
-      onChangeTemplate(undefined);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [domainKey]);
-
   const applyTemplateToLangs = (tpl) => {
     enabledLangs.forEach((lang) => {
-      const content = tpl ? applyTemplate(tpl)(i18nContent[lang] || {}, domain?.id) : {};
+      const content = tpl
+        ? applyTemplate(tpl)(i18nContent[lang] || {}, domain?.id)
+        : {};
       handleChange(content, tpl, lang);
     });
   };
@@ -89,10 +85,13 @@ export default function SelectDynamicFormWithTranslations({
 
   return (
     <>
-      {(beforeSelector || (hasDomainSelection && (!actionKey || actionKey === "create"))) && (
+      {(beforeSelector ||
+        (hasDomainSelection && (!actionKey || actionKey === "create"))) && (
         <Grid stackable>
           <Grid.Row columns={beforeSelector ? 2 : 1} verticalAlign="bottom">
-            {beforeSelector ? <Grid.Column>{beforeSelector}</Grid.Column> : null}
+            {beforeSelector ? (
+              <Grid.Column>{beforeSelector}</Grid.Column>
+            ) : null}
             {hasDomainSelection && (!actionKey || actionKey === "create") ? (
               <Grid.Column>
                 <TemplateSelector

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

@@ -1,7 +1,22 @@
+import { useQuery } from "@apollo/client";
 import { render } from "@truedat/test/render";
 import { DynamicFieldValue } from "../DynamicFieldValue";
 
+jest.mock("@apollo/client", () => {
+  const originalModule = jest.requireActual("@apollo/client");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useQuery: jest.fn(),
+  };
+});
+
 describe("<DynamicFieldValue />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it("matches the latest snapshot", () => {
     const props = {
       label: "label",
@@ -28,31 +43,50 @@ describe("<DynamicFieldValue />", () => {
   });
 
   it("renders a single group value with a group icon", () => {
+    useQuery.mockReturnValue({
+      loading: false,
+      error: undefined,
+      data: {
+        groupDetails: [{ id: 1, name: "group:foo bar" }],
+      },
+    });
+
     const rendered = render(
       <DynamicFieldValue
         label="label"
-        value={{ value: "Data Owners", origin: "user" }}
+        value={{ value: "foo bar", origin: "user" }}
         type="group"
         widget="dropdown"
       />
     );
 
-    expect(rendered.getByText(/data owners/i)).toBeInTheDocument();
+    expect(rendered.getByText(/foo bar/i)).toBeInTheDocument();
     expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
   });
 
   it("renders multiple group values with a group icon each", () => {
+    useQuery.mockReturnValue({
+      loading: false,
+      error: undefined,
+      data: {
+        groupDetails: [
+          { id: 1, name: "group:foo bar" },
+          { id: 2, name: "group:bar baz" },
+        ],
+      },
+    });
+
     const rendered = render(
       <DynamicFieldValue
         label="label"
-        value={{ value: ["Data Owners", "Quality"], origin: "user" }}
+        value={{ value: ["foo bar", "bar baz"], origin: "user" }}
         type="group"
         widget="checkbox"
       />
     );
 
-    expect(rendered.getByText(/data owners/i)).toBeInTheDocument();
-    expect(rendered.getByText(/quality/i)).toBeInTheDocument();
+    expect(rendered.getByText(/foo bar/i)).toBeInTheDocument();
+    expect(rendered.getByText(/bar baz/i)).toBeInTheDocument();
     expect(rendered.container.querySelectorAll(".group.icon")).toHaveLength(2);
   });
 });

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

@@ -1,3 +1,4 @@
+import { useQuery } from "@apollo/client";
 import { render } from "@truedat/test/render";
 import { useTemplate } from "@truedat/core/hooks";
 import { markdownToHtml } from "@truedat/core/components/Markdown";
@@ -5,6 +6,16 @@ import DynamicFormViewerFetcher, {
   DynamicFormViewer,
 } from "../DynamicFormViewer";
 
+jest.mock("@apollo/client", () => {
+  const originalModule = jest.requireActual("@apollo/client");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useQuery: jest.fn(),
+  };
+});
+
 jest.mock("@truedat/core/components/Loading", () => ({
   __esModule: true,
   default: () => <div data-testid="loading" />,
@@ -20,16 +31,6 @@ 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>
-  ),
-}));
-
 const groupTemplate = {
   scope: "bg",
   content: [
@@ -50,7 +51,7 @@ const groupTemplate = {
 
 const groupContent = {
   "group-field": {
-    value: ["Group Alias"],
+    value: ["foo bar"],
     origin: "user",
   },
 };
@@ -75,6 +76,13 @@ const unnamedGroupTemplate = {
 describe("<DynamicFormViewer />", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    useQuery.mockReturnValue({
+      loading: false,
+      error: undefined,
+      data: {
+        groupDetails: [{ id: 1, name: "group:foo bar" }],
+      },
+    });
     useTemplate.mockReturnValue({
       data: {},
       loading: false,
@@ -121,9 +129,8 @@ describe("<DynamicFormViewer />", () => {
       <DynamicFormViewer template={groupTemplate} content={groupContent} />
     );
 
-    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "Group Alias"
-    );
+    expect(rendered.getByText(/foo bar/i)).toBeInTheDocument();
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
   });
 
   it("renders groups without heading when the group name is missing", () => {
@@ -134,9 +141,8 @@ describe("<DynamicFormViewer />", () => {
       />
     );
 
-    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "Group Alias"
-    );
+    expect(rendered.getByText(/foo bar/i)).toBeInTheDocument();
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
     expect(rendered.container.querySelector("h3, h4")).not.toBeInTheDocument();
   });
 
@@ -157,9 +163,8 @@ describe("<DynamicFormViewer />", () => {
     );
 
     expect(useTemplate).not.toHaveBeenCalled();
-    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "Group Alias"
-    );
+    expect(rendered.getByText(/foo bar/i)).toBeInTheDocument();
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
   });
 
   it("renders a loader while fetching string templates", () => {
@@ -197,8 +202,7 @@ describe("<DynamicFormViewer />", () => {
       name: "group-template",
       domainIds: [1],
     });
-    expect(rendered.getByTestId("group-preview")).toHaveTextContent(
-      "Group Alias"
-    );
+    expect(rendered.getByText(/foo bar/i)).toBeInTheDocument();
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
   });
 });

package/src/components/widgets/GroupPreview.js

@@ -17,6 +17,9 @@ const groupDisplayName = (group) => stripGroupPrefix(groupName(group));
 const isUserValue = (group) =>
   _.isString(groupName(group)) && groupName(group).startsWith("user:");
 
+const normalizeGroupId = (value) =>
+  value.startsWith("group:") ? value : `group:${value}`;
+
 export const GroupLabel = ({ value }) => (
   <Label>
     <Icon name="group" />
@@ -30,7 +33,7 @@ GroupLabel.propTypes = {
 
 export const LinkedGroupLabel = ({ group }) => {
   const id = groupId(group);
-  const label = <GroupLabel value={groupName(group)} />;
+  const label = <GroupLabel value={groupDisplayName(group)} />;
 
   return id ? <Link to={linkTo.GROUP({ id })}>{label}</Link> : label;
 };
@@ -53,7 +56,7 @@ export const GroupPreview = ({ groups }) =>
         key={groupId(group) || groupDisplayName(group)}
         group={group}
       />
-    )),
+    ))
   )(groups);
 
 GroupPreview.propTypes = {
@@ -65,13 +68,13 @@ GroupPreview.propTypes = {
         name: PropTypes.string.isRequired,
       }),
       PropTypes.string,
-    ]),
+    ])
   ).isRequired,
 };
 
 export const GroupPreviewLoader = ({ groupId }) => {
   const { loading, error, data } = useQuery(GROUP_PREVIEW_QUERY, {
-    variables: { ids: _.castArray(groupId) },
+    variables: { ids: _.map(normalizeGroupId, _.castArray(groupId)) },
   });
   if (error) return null;
   return loading ? (

package/src/components/widgets/UserGroupPreview.js

@@ -17,11 +17,19 @@ const userGroupName = (userGroup) =>
 const userGroupId = (userGroup) =>
   _.isString(userGroup) ? null : userGroup.id;
 
+const userGroupDisplayName = (userGroup) =>
+  typeAndName(userGroupName(userGroup)).name;
+
 const isGroup = (userGroup) => userGroupName(userGroup)?.startsWith("group:");
 
+const normalizeUserGroupId = (value) => {
+  if (!_.isString(value)) return value;
+  if (value.startsWith("user:") || value.startsWith("group:")) return value;
+  return `group:${value}`;
+};
+
 export const UserGroupLabel = ({ value }) => {
   const { type, name } = typeAndName(value);
-
   return (
     <Label>
       <Icon name={type} />
@@ -58,7 +66,7 @@ LinkedUserGroupLabel.propTypes = {
 export const UserGroupPreview = ({ userGroups }) =>
   _.map((userGroup) => (
     <LinkedUserGroupLabel
-      key={userGroupId(userGroup) || userGroupName(userGroup)}
+      key={userGroupId(userGroup) || userGroupDisplayName(userGroup)}
       userGroup={userGroup}
     />
   ))(userGroups);
@@ -71,13 +79,13 @@ UserGroupPreview.propTypes = {
         name: PropTypes.string.isRequired,
       }),
       PropTypes.string,
-    ]),
+    ])
   ).isRequired,
 };
 
 export const UserGroupPreviewLoader = ({ userGroupId }) => {
   const { loading, error, data } = useQuery(USER_GROUP_PREVIEW_QUERY, {
-    variables: { ids: _.castArray(userGroupId) },
+    variables: { ids: _.map(normalizeUserGroupId, _.castArray(userGroupId)) },
   });
   if (error) return null;
   return loading ? (

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

@@ -20,36 +20,36 @@ describe("<GroupPreview />", () => {
 
   it("renders group values with a group icon", () => {
     const rendered = render(
-      <GroupPreview groups={[{ id: 123, name: "Group Alias" }]} />
+      <GroupPreview groups={[{ id: 123, name: "foo bar" }]} />
     );
 
-    expect(rendered.container.textContent).toBe("Group Alias");
+    expect(rendered.container.textContent).toBe("foo bar");
     expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
-    expect(
-      rendered.getByRole("link", { name: /group alias/i })
-    ).toHaveAttribute("href", "/groups/123");
+    expect(rendered.getByRole("link", { name: /foo bar/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" }]} />
+      <GroupPreview groups={[{ id: 123, name: "group:foo bar" }]} />
     );
 
-    expect(rendered.container.textContent).toBe("Group Alias");
+    expect(rendered.container.textContent).toBe("foo bar");
     expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
-    expect(
-      rendered.getByRole("link", { name: /group alias/i })
-    ).toHaveAttribute("href", "/groups/123");
+    expect(rendered.getByRole("link", { name: /foo bar/i })).toHaveAttribute(
+      "href",
+      "/groups/123"
+    );
   });
 
   it("does not render user values", () => {
     const rendered = render(
-      <GroupPreview
-        groups={["user:John Doe", { id: 123, name: "Group Alias" }]}
-      />
+      <GroupPreview groups={["user:baz qux", { id: 123, name: "foo bar" }]} />
     );
 
-    expect(rendered.container.textContent).toBe("Group Alias");
+    expect(rendered.container.textContent).toBe("foo bar");
     expect(
       rendered.container.querySelector(".user.icon")
     ).not.toBeInTheDocument();
@@ -57,14 +57,22 @@ describe("<GroupPreview />", () => {
   });
 
   it("renders string groups without a link when there is no group id", () => {
-    const rendered = render(
-      <GroupPreview groups={["Standalone Group"]} />
-    );
+    const rendered = render(<GroupPreview groups={["lone foo bar"]} />);
+
+    expect(rendered.container.textContent).toBe("lone foo bar");
+    expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
+    expect(
+      rendered.queryByRole("link", { name: /lone foo bar/i })
+    ).not.toBeInTheDocument();
+  });
 
-    expect(rendered.container.textContent).toBe("Standalone Group");
+  it("strips the legacy group: prefix from string values stored in the database", () => {
+    const rendered = render(<GroupPreview groups={["group:foo bar"]} />);
+
+    expect(rendered.container.textContent).toBe("foo bar");
     expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
     expect(
-      rendered.queryByRole("link", { name: /standalone group/i })
+      rendered.queryByRole("link", { name: /foo bar/i })
     ).not.toBeInTheDocument();
   });
 
@@ -75,10 +83,10 @@ describe("<GroupPreview />", () => {
       data: undefined,
     });
 
-    const rendered = render(<GroupPreviewLoader groupId="123" />);
+    const rendered = render(<GroupPreviewLoader groupId="foo bar" />);
 
     expect(useQuery).toHaveBeenCalledWith(GROUP_PREVIEW_QUERY, {
-      variables: { ids: ["123"] },
+      variables: { ids: ["group:foo bar"] },
     });
     expect(rendered.container.firstChild).toBeNull();
   });
@@ -90,28 +98,73 @@ describe("<GroupPreview />", () => {
       data: undefined,
     });
 
-    const rendered = render(<GroupPreviewLoader groupId={["123"]} />);
+    const rendered = render(<GroupPreviewLoader groupId={["bar baz"]} />);
 
     expect(useQuery).toHaveBeenCalledWith(GROUP_PREVIEW_QUERY, {
-      variables: { ids: ["123"] },
+      variables: { ids: ["group:bar baz"] },
     });
     expect(rendered.getByText(/\.\.\./i)).toBeInTheDocument();
   });
 
+  it("normalizes unprefixed group ids before querying group details", () => {
+    useQuery.mockReturnValue({
+      loading: false,
+      error: undefined,
+      data: {
+        groupDetails: [{ id: 123, name: "group:foo bar" }],
+      },
+    });
+
+    const rendered = render(<GroupPreviewLoader groupId="foo bar" />);
+
+    expect(useQuery).toHaveBeenCalledWith(GROUP_PREVIEW_QUERY, {
+      variables: { ids: ["group:foo bar"] },
+    });
+    expect(rendered.getByRole("link", { name: /foo bar/i })).toHaveAttribute(
+      "href",
+      "/groups/123"
+    );
+  });
+
+  it("keeps legacy group: prefixed values when querying group details", () => {
+    useQuery.mockReturnValue({
+      loading: false,
+      error: undefined,
+      data: {
+        groupDetails: [{ id: 123, name: "group:foo bar" }],
+      },
+    });
+
+    const rendered = render(<GroupPreviewLoader groupId="group:foo bar" />);
+
+    expect(useQuery).toHaveBeenCalledWith(GROUP_PREVIEW_QUERY, {
+      variables: { ids: ["group:foo bar"] },
+    });
+    expect(rendered.getByRole("link", { name: /foo bar/i })).toHaveAttribute(
+      "href",
+      "/groups/123"
+    );
+  });
+
   it("renders the fetched group preview when loading finishes", () => {
     useQuery.mockReturnValue({
       loading: false,
       error: undefined,
       data: {
-        groupDetails: [{ id: 123, name: "Group Alias" }],
+        groupDetails: [{ id: 123, name: "foo bar" }],
       },
     });
 
-    const rendered = render(<GroupPreviewLoader groupId="123" />);
+    const rendered = render(<GroupPreviewLoader groupId="foo bar" />);
 
-    expect(
-      rendered.getByRole("link", { name: /group alias/i })
-    ).toHaveAttribute("href", "/groups/123");
+    expect(useQuery).toHaveBeenCalledWith(GROUP_PREVIEW_QUERY, {
+      variables: { ids: ["group:foo bar"] },
+    });
+
+    expect(rendered.getByRole("link", { name: /foo bar/i })).toHaveAttribute(
+      "href",
+      "/groups/123"
+    );
     expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
   });
 });

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

@@ -20,10 +20,10 @@ describe("<UserGroupPreview />", () => {
 
   it("renders users and groups with icons instead of prefixes", () => {
     const rendered = render(
-      <UserGroupPreview userGroups={["user:John Doe", "group:Group Alias"]} />,
+      <UserGroupPreview userGroups={["user:baz qux", "group:foo bar"]} />
     );
 
-    expect(rendered.container.textContent).toBe("John DoeGroup Alias");
+    expect(rendered.container.textContent).toBe("baz quxfoo bar");
     expect(rendered.container.querySelector(".user.icon")).toBeInTheDocument();
     expect(rendered.container.querySelector(".group.icon")).toBeInTheDocument();
   });
@@ -32,16 +32,16 @@ describe("<UserGroupPreview />", () => {
     const rendered = render(
       <UserGroupPreview
         userGroups={[
-          { name: "user:John Doe" },
-          { id: 123, name: "group:Group Alias" },
+          { name: "user:baz qux" },
+          { id: 123, name: "group:foo bar" },
         ]}
-      />,
+      />
     );
 
-    expect(rendered.getByText(/john doe/i).closest("a")).toBeNull();
-    expect(rendered.getByRole("link", { name: /group alias/i })).toHaveAttribute(
+    expect(rendered.getByText(/baz qux/i).closest("a")).toBeNull();
+    expect(rendered.getByRole("link", { name: /foo bar/i })).toHaveAttribute(
       "href",
-      "/groups/123",
+      "/groups/123"
     );
   });
 
@@ -52,10 +52,12 @@ describe("<UserGroupPreview />", () => {
       data: undefined,
     });
 
-    const rendered = render(<UserGroupPreviewLoader userGroupId="123" />);
+    const rendered = render(
+      <UserGroupPreviewLoader userGroupId="group:foo bar" />
+    );
 
     expect(useQuery).toHaveBeenCalledWith(USER_GROUP_PREVIEW_QUERY, {
-      variables: { ids: ["123"] },
+      variables: { ids: ["group:foo bar"] },
     });
     expect(rendered.container.firstChild).toBeNull();
   });
@@ -67,32 +69,66 @@ describe("<UserGroupPreview />", () => {
       data: undefined,
     });
 
-    const rendered = render(<UserGroupPreviewLoader userGroupId={["123"]} />);
+    const rendered = render(
+      <UserGroupPreviewLoader userGroupId={["user:baz qux", "bar baz"]} />
+    );
 
     expect(useQuery).toHaveBeenCalledWith(USER_GROUP_PREVIEW_QUERY, {
-      variables: { ids: ["123"] },
+      variables: { ids: ["user:baz qux", "group:bar baz"] },
     });
     expect(rendered.getByText(/\.\.\./i)).toBeInTheDocument();
   });
 
+  it("keeps user: and group: prefixes when querying user group details", () => {
+    useQuery.mockReturnValue({
+      loading: true,
+      error: undefined,
+      data: undefined,
+    });
+
+    render(
+      <UserGroupPreviewLoader userGroupId={["user:baz qux", "group:foo bar"]} />
+    );
+
+    expect(useQuery).toHaveBeenCalledWith(USER_GROUP_PREVIEW_QUERY, {
+      variables: { ids: ["user:baz qux", "group:foo bar"] },
+    });
+  });
+
+  it("renders group alias from userGroupDetails API response", () => {
+    const rendered = render(
+      <UserGroupPreview
+        userGroups={[{ id: "9", name: "group:foo bar alias" }]}
+      />
+    );
+
+    expect(rendered.getByText(/foo bar alias/i)).toBeInTheDocument();
+    expect(
+      rendered.getByRole("link", { name: /foo bar alias/i })
+    ).toHaveAttribute("href", "/groups/9");
+    expect(rendered.container.textContent).not.toContain("group:");
+  });
+
   it("renders the fetched user groups when loading finishes", () => {
     useQuery.mockReturnValue({
       loading: false,
       error: undefined,
       data: {
         userGroupDetails: [
-          { name: "user:John Doe" },
-          { id: 123, name: "group:Group Alias" },
+          { name: "user:baz qux" },
+          { id: 123, name: "group:foo bar" },
         ],
       },
     });
 
-    const rendered = render(<UserGroupPreviewLoader userGroupId="123" />);
+    const rendered = render(
+      <UserGroupPreviewLoader userGroupId={["user:baz qux", "group:foo bar"]} />
+    );
 
-    expect(rendered.getByText(/john doe/i).closest("a")).toBeNull();
-    expect(rendered.getByRole("link", { name: /group alias/i })).toHaveAttribute(
+    expect(rendered.getByText(/baz qux/i).closest("a")).toBeNull();
+    expect(rendered.getByRole("link", { name: /foo bar/i })).toHaveAttribute(
       "href",
-      "/groups/123",
+      "/groups/123"
     );
   });
 });

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

@@ -44,7 +44,7 @@ describe("utils: validValues", () => {
       });
     });
 
-    it("should validate processed_groups values", () => {
+    it("should validate user_group values by canonical group name", () => {
       const template = [
         {
           name: "role",
@@ -52,21 +52,80 @@ describe("utils: validValues", () => {
           values: {
             role_groups: "some_role",
             processed_users: ["u1"],
-            processed_groups: ["alias1", "group2"],
+            processed_groups_details: [
+              { id: 1, name: "group one", alias: "alias1" },
+              { id: 2, name: "group2", alias: null },
+            ],
           },
         },
       ];
 
       const result = filterValues(template)({
-        role: { value: "group:alias1", origin: "default" },
+        role: { value: "group:group one", origin: "default" },
       });
 
       expect(result).toEqual({
-        role: { value: "group:alias1", origin: "default" },
+        role: { value: "group:group one", origin: "default" },
       });
     });
 
-    it("should validate group values without allowing users", () => {
+    it("should validate legacy names when processed_groups_details are present", () => {
+      const template = [
+        {
+          name: "role",
+          type: "user_group",
+          values: {
+            role_groups: "some_role",
+            processed_users: ["u1"],
+            processed_groups: ["alias1"],
+            processed_groups_details: [
+              {
+                id: 1,
+                alias: "alias1",
+                name: "group1",
+              },
+            ],
+          },
+        },
+      ];
+
+      const result = filterValues(template)({
+        role: { value: "group:group1", origin: "default" },
+      });
+
+      expect(result).toEqual({
+        role: { value: "group:group1", origin: "default" },
+      });
+    });
+
+    it("should drop stale alias values from user_group fields on save", () => {
+      const template = [
+        {
+          name: "role",
+          type: "user_group",
+          values: {
+            role_groups: "some_role",
+            processed_users: ["u1"],
+            processed_groups_details: [
+              { id: 1, name: "bar baz", alias: "foo bar alias" },
+            ],
+          },
+        },
+      ];
+
+      const result = filterValues(template)({
+        role: {
+          value: ["group:bar baz", "group:foo bar alias", "group:qux invalid"],
+          origin: "default",
+        },
+      });
+
+      expect(result).toEqual({
+        role: { value: ["group:bar baz"], origin: "default" },
+      });
+    });
+
+    it("should validate group values by canonical name without allowing users", () => {
       const template = [
         {
           name: "role",
@@ -74,31 +133,42 @@ describe("utils: validValues", () => {
           values: {
             role_groups: "some_role",
             processed_users: ["u1"],
-            processed_groups: ["alias1", "group2"],
+            processed_groups_details: [
+              { id: 1, name: "foo bar", alias: "alias1" },
+              { id: 2, name: "group2", alias: null },
+            ],
           },
         },
       ];
 
       expect(
         filterValues(template)({
-          role: { value: "alias1", origin: "default" },
-        }),
+          role: { value: "foo bar", origin: "default" },
+        })
       ).toEqual({
-        role: { value: "alias1", origin: "default" },
+        role: { value: "foo bar", origin: "default" },
       });
 
       expect(
         filterValues(template)({
           role: { value: "user:u1", origin: "default" },
-        }),
+        })
+      ).toEqual({
+        role: { value: null, origin: "default" },
+      });
+
+      expect(
+        filterValues(template)({
+          role: { value: "alias1", origin: "default" },
+        })
       ).toEqual({
         role: { value: null, origin: "default" },
       });
 
       expect(
         filterValues(template)({
-          role: { value: "group:alias1", origin: "default" },
-        }),
+          role: { value: "group:foo bar", origin: "default" },
+        })
       ).toEqual({
         role: { value: null, origin: "default" },
       });

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

@@ -150,6 +150,108 @@ describe("utils: parseFieldOptions", () => {
     });
   });
 
+  it("normalizes legacy prefixed values for group fields", () => {
+    const field = {
+      name: "field",
+      type: "group",
+      values: {
+        role_groups: "Some Role",
+        processed_groups: [{ alias: "alias1", name: "group1" }],
+      },
+    };
+    const content = { field: { value: "group:group1", origin: "default" } };
+    const result = parseFormatFieldOptions(content)(field);
+    expect(result).toEqual({
+      ...field,
+      value: { value: "group1", origin: "default" },
+      parsedValues: [{ value: "group1", text: "alias1", icon: "group" }],
+    });
+  });
+
+  it("normalizes legacy group names to canonical names for user_group fields", () => {
+    const field = {
+      name: "field",
+      type: "user_group",
+      values: {
+        role_groups: "Some Role",
+        processed_users: ["x"],
+        processed_groups: [{ alias: "alias1", name: "group1" }],
+      },
+    };
+    const content = { field: { value: "group:group1", origin: "default" } };
+    const result = parseFormatFieldOptions(content)(field);
+    expect(result).toEqual({
+      ...field,
+      value: { value: "group:group1", origin: "default" },
+      parsedValues: [
+        { value: "user:x", text: "x", icon: "user" },
+        { value: "group:group1", text: "alias1", icon: "group" },
+      ],
+    });
+  });
+
+  it("maps legacy group values to canonical names without extra options", () => {
+    const field = {
+      name: "field",
+      type: "user_group",
+      values: {
+        role_groups: "Some Role",
+        processed_users: ["x"],
+        processed_groups: ["alias1", "foo bar alias"],
+        processed_groups_details: [
+          {
+            id: 1,
+            alias: "alias1",
+            name: "group1",
+          },
+          {
+            id: 2,
+            alias: "foo bar alias",
+            name: "bar baz",
+          },
+        ],
+      },
+    };
+    const content = {
+      field: { value: "group:bar baz", origin: "default" },
+    };
+    const result = parseFormatFieldOptions(content)(field);
+    expect(result).toEqual({
+      ...field,
+      value: { value: "group:bar baz", origin: "default" },
+      parsedValues: [
+        { value: "user:x", text: "x", icon: "user" },
+        { value: "group:group1", text: "alias1", icon: "group" },
+        {
+          value: "group:bar baz",
+          text: "foo bar alias",
+          icon: "group",
+        },
+      ],
+    });
+  });
+
+  it("normalizes legacy user prefixed values for user fields", () => {
+    const field = {
+      name: "field",
+      type: "user",
+      values: {
+        role_users: "Some Role",
+        processed_users: ["user1", "user2"],
+      },
+    };
+    const content = { field: { value: "user:user2", origin: "default" } };
+    const result = parseFormatFieldOptions(content)(field);
+    expect(result).toEqual({
+      ...field,
+      value: { value: "user2", origin: "default" },
+      parsedValues: [
+        { text: "user1", value: "user1" },
+        { text: "user2", value: "user2" },
+      ],
+    });
+  });
+
   it("handles values domain", () => {
     const selectedDomain = { id: 1 };
     const field = {

package/src/templates/utils/filterValues.js

@@ -1,27 +1,35 @@
 import _ from "lodash/fp";
 
-const groupNameOrAlias = (group) =>
-  _.isString(group) ? group : group?.alias || group?.name;
+const groupCanonicalName = (group) =>
+  _.isString(group) ? group : group?.name;
 
-const userGroupValues = (field) =>
+const processedGroups = (values = {}) => {
+  const details = _.get("processed_groups_details")(values);
+  return _.isArray(details) && !_.isEmpty(details)
+    ? details
+    : _.get("processed_groups")(values);
+};
+
+const userGroupValues = (values) =>
   _.concat(
     _.flow(
       _.get("processed_users"),
       _.map((name) => `user:${name}`),
-    )(field),
+    )(values),
     _.flow(
-      _.get("processed_groups"),
-      _.map((group) => {
-        const name = groupNameOrAlias(group);
-        return `group:${name}`;
-      }),
-    )(field),
+      () => processedGroups(values),
+      _.map((group) => `group:${groupCanonicalName(group)}`),
+      _.compact,
+    )(),
   );
 
-const groupValues = _.flow(
-  _.get("processed_groups"),
-  _.map(groupNameOrAlias),
-);
+const groupValues = (values) =>
+  _.flow(
+    () => processedGroups(values),
+    _.map(groupCanonicalName),
+    _.compact,
+    _.uniq,
+  )();
 
 export const validValues = _.flow(
   _.filter(
@@ -29,6 +37,7 @@ export const validValues = _.flow(
       _.has("values.fixed"),
       _.has("values.processed_users"),
       _.has("values.processed_groups"),
+      _.has("values.processed_groups_details"),
     ]),
   ),
   _.map(_.pick(["name", "type", "values"])),
@@ -37,10 +46,18 @@ export const validValues = _.flow(
     _.cond([
       [_.has("fixed"), _.pathOr([], "fixed")],
       [
-        () => type === "group" && _.has("processed_groups")(values),
-        groupValues,
+        () =>
+          type === "group" &&
+            (_.has("processed_groups", values) ||
+              _.has("processed_groups_details", values)),
+        () => groupValues(values),
+      ],
+      [
+        () =>
+          _.has("processed_groups", values) ||
+            _.has("processed_groups_details", values),
+        () => userGroupValues(values),
       ],
-      [_.has("processed_groups"), userGroupValues],
       [_.has("processed_users"), _.pathOr([], "processed_users")],
     ])(values),
   ]),
@@ -49,14 +66,22 @@ export const validValues = _.flow(
 
 export const filterValues = (templateContent) => {
   const vv = validValues(templateContent);
+  const fieldTypeByName = _.flow(
+    _.map(({ name, type }) => [name, type]),
+    _.fromPairs,
+  )(templateContent);
+
+  const isValidFieldValue = (fieldName, candidate) =>
+    _.includes(candidate)(_.prop(fieldName)(vv));
+
   return _.mapValues.convert({ cap: false })((value, key) =>
     _.has(key)(vv)
       ? _.isArray(value.value)
         ? _.set(
             "value",
-            _.filter((v) => _.includes(v)(_.prop(key)(vv)))(value.value),
+            _.filter((v) => isValidFieldValue(key, v))(value.value),
           )(value)
-        : _.includes(value.value)(_.prop(key)(vv))
+        : isValidFieldValue(key, value.value)
           ? value
           : { ...value, value: null }
       : value,

package/src/templates/utils/parseFieldOptions.js

@@ -7,6 +7,99 @@ const makeOptions = (formatMessage, label) =>
     text: formatMessage({ id: `fields.${label}.${v}`, defaultMessage: v }),
   }));
 
+const stripUserPrefix = (value) =>
+  typeof value === "string" && value.startsWith("user:")
+    ? value.slice("user:".length)
+    : value;
+
+const stripGroupPrefix = (value) =>
+  typeof value === "string" && value.startsWith("group:")
+    ? value.slice("group:".length)
+    : value;
+
+const groupCanonicalName = (group) =>
+  typeof group === "string" ? group : group.name;
+
+const groupDisplayName = (group) =>
+  typeof group === "string" ? group : group.alias || group.name;
+
+const groupNameCandidates = (group) =>
+  typeof group === "string"
+    ? [group]
+    : _.flow(_.at(["alias", "name"]), _.compact, _.uniq)(group);
+
+const groupEntries = (values = {}) => {
+  const details = _.get("processed_groups_details")(values);
+  if (_.isArray(details) && !_.isEmpty(details)) return details;
+  return _.getOr([], "processed_groups")(values);
+};
+
+const buildGroupNameMap = (groups = []) =>
+  groups.reduce((acc, group) => {
+    const canonicalName = groupCanonicalName(group);
+    groupNameCandidates(group).forEach((candidate) => {
+      acc[candidate] = canonicalName;
+    });
+    return acc;
+  }, {});
+
+const normalizeRoleUsersValue = (fieldValue, processedUsers = []) => {
+  const normalizeOne = (value) => {
+    if (typeof value !== "string") return value;
+    const normalizedUser = stripUserPrefix(value);
+    return processedUsers.includes(normalizedUser) ? normalizedUser : value;
+  };
+
+  return _.isArray(fieldValue)
+    ? fieldValue.map(normalizeOne)
+    : normalizeOne(fieldValue);
+};
+
+const normalizeRoleGroupsValue = (fieldValue, fieldType, values = {}) => {
+  const processedUsers = _.getOr([], "processed_users")(values);
+  const groupNameMap = buildGroupNameMap(groupEntries(values));
+  const isGroupOnly = fieldType === "group";
+
+  const normalizeOne = (value) => {
+    if (typeof value !== "string") return value;
+    if (isGroupOnly) {
+      const normalizedGroup = stripGroupPrefix(value);
+      return groupNameMap[normalizedGroup] || normalizedGroup;
+    }
+
+    if (value.startsWith("user:")) {
+      const normalizedUser = stripUserPrefix(value);
+      return processedUsers.includes(normalizedUser)
+        ? `user:${normalizedUser}`
+        : value;
+    }
+
+    const normalizedGroup = stripGroupPrefix(value);
+    const resolvedGroup = groupNameMap[normalizedGroup];
+    if (resolvedGroup) return `group:${resolvedGroup}`;
+    if (processedUsers.includes(value)) {
+      return `user:${value}`;
+    }
+
+    return value;
+  };
+
+  return _.isArray(fieldValue)
+    ? fieldValue.map(normalizeOne)
+    : normalizeOne(fieldValue);
+};
+
+const normalizeFieldValue = (fieldValue, normalizer) => {
+  if (_.isNil(fieldValue)) return fieldValue;
+  if (_.isObject(fieldValue) && _.has("value")(fieldValue)) {
+    return {
+      ...fieldValue,
+      value: normalizer(fieldValue.value),
+    };
+  }
+  return normalizer(fieldValue);
+};
+
 const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
   const value = _.prop(field?.name)(content);
 
@@ -15,8 +108,8 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
     const tableColumns = _.flow(
       _.propOr([], "values.table_columns"),
       _.map((field) =>
-        doParseFieldOptions(formatMessage, content, selectedDomain, field),
-      ),
+        doParseFieldOptions(formatMessage, content, selectedDomain, field)
+      )
     )(field);
     return {
       ...field,
@@ -26,12 +119,12 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
   }
   const translateValues = _.flow(
     makeOptions(formatMessage, field?.label),
-    _.sortBy(accentInsensitivePathOrder("text")),
+    _.sortBy(accentInsensitivePathOrder("text"))
   );
   const parseSwitch = (values) => {
     const switchOn = _.prop("switch.on")(values);
     const switchedValues = _.prop(`switch.values.${content[switchOn].value}`)(
-      values,
+      values
     );
     return translateValues(switchedValues);
   };
@@ -42,24 +135,21 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
       [_.isArray, _.identity],
       [_.stubTrue, _.constant([])],
     ]),
-    translateValues,
+    translateValues
   );
-  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"),
+      () => groupEntries(values),
       _.map((group) => {
-        const name = groupNameOrAlias(group);
+        const name = groupCanonicalName(group);
         return {
           value: isGroupOnly ? name : `group:${name}`,
-          text: name,
+          text: groupDisplayName(group),
           icon: "group",
         };
-      }),
+      })
     )(values);
-
     if (isGroupOnly) return groups;
 
     const users = _.flow(
@@ -68,7 +158,7 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
         value: `user:${name}`,
         text: name,
         icon: "user",
-      })),
+      }))
     )(values);
 
     return _.concat(users, groups);
@@ -88,7 +178,7 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
           }) || [];
       return _.uniq(allValues);
     },
-    translateValues,
+    translateValues
   );
 
   const parsedValues = _.flow(
@@ -100,9 +190,37 @@ const doParseFieldOptions = (formatMessage, content, selectedDomain, field) => {
       [_.has("role_users"), parseRoleUsers],
       [_.has("role_groups"), parseRoleGroups],
       [_.has("domain"), parseDomain],
-    ]),
+    ])
   )(field);
-  return { ...field, value, parsedValues };
+  const normalizedValue = _.flow(
+    _.get("values"),
+    _.cond([
+      [
+        _.has("role_users"),
+        () =>
+          normalizeFieldValue(value, (rawValue) =>
+            normalizeRoleUsersValue(
+              rawValue,
+              _.getOr([], "values.processed_users")(field)
+            )
+          ),
+      ],
+      [
+        _.has("role_groups"),
+        () =>
+          normalizeFieldValue(value, (rawValue) =>
+            normalizeRoleGroupsValue(
+              rawValue,
+              field?.type,
+              _.get("values")(field)
+            )
+          ),
+      ],
+      [_.stubTrue, () => value],
+    ])
+  )(field);
+
+  return { ...field, value: normalizedValue, parsedValues };
 };
 export const parseFieldOptions =
   (formatMessage) => (content, selectedDomain) => (field) =>