Add uiMetdata prefix to roles everywhere

2024-09-13 14:03:21 +01:00 · 2024-09-13 14:03:21 +01:00 · 2849a7a4ff
parent 0404050897
commit 2849a7a4ff
13 changed files with 49 additions and 46 deletions
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@ -29,7 +29,7 @@
  $: roleMismatch = checkRoleMismatch(permissions)
  $: selectedRole = roleMismatch ? null : permissions?.[0]?.value
  $: readableRole = selectedRole
-    ? $roles.find(x => x._id === selectedRole)?.displayName
+    ? $roles.find(x => x._id === selectedRole)?.uiMetadata.displayName
    : null
  $: buttonLabel = readableRole ? `Access: ${readableRole}` : "Access"
  $: highlight = roleMismatch || selectedRole === Roles.PUBLIC
@ -39,8 +39,8 @@
    .filter(x => !builtins.includes(x._id))
    .slice()
    .toSorted((a, b) => {
-      const aName = a.displayName || a.name
-      const bName = b.displayName || b.name
+      const aName = a.uiMetadata.displayName || a.name
+      const bName = b.uiMetadata.displayName || b.name
      return aName < bName ? -1 : 1
    })

@ -159,23 +159,23 @@
  <List>
    {#each builtInRoles as role}
      <ListItem
-        title={role.displayName}
-        subtitle={role.description}
+        title={role.uiMetadata.displayName}
+        subtitle={role.uiMetadata.description}
        hoverable
        selected={selectedRole === role._id}
        icon="StatusLight"
-        iconColor={role.color}
+        iconColor={role.uiMetadata.color}
        on:click={() => changePermission(role._id)}
      />
    {/each}
    {#each customRoles as role}
      <ListItem
-        title={role.displayName}
-        subtitle={role.description}
+        title={role.uiMetadata.displayName}
+        subtitle={role.uiMetadata.description}
        hoverable
        selected={selectedRole === role._id}
        icon="StatusLight"
-        iconColor={role.color}
+        iconColor={role.uiMetadata.color}
        on:click={() => changePermission(role._id)}
      />
    {/each}
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@ -125,7 +125,7 @@
    label="Role"
    bind:value={row.roleId}
    options={$roles}
-    getOptionLabel={role => role.displayName}
+    getOptionLabel={role => role.uiMetadata.displayName}
    getOptionValue={role => role._id}
    disabled={!creating}
  />
--- a/packages/builder/src/components/backend/RoleEditor/Controls.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/Controls.svelte
@ -14,11 +14,13 @@
  const addRole = async () => {
    const role = {
      name: Helpers.uuid(),
-      displayName: getSequentialName($nodes, "New role ", {
-        getName: x => x.data.displayName,
+      uiMetadata: {
+        displayName: getSequentialName($roles, "New role ", {
+          getName: x => x.uiMetadata.displayName,
        }),
        color: "var(--spectrum-global-color-gray-700)",
        description: "Custom role",
+      },
      permissionId: "write",
      inherits: Roles.BASIC,
    }
--- a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
@ -38,7 +38,7 @@
  $: targetRole = $roles.find(x => x._id === target)
  $: tooltip =
    sourceRole && targetRole
-      ? `Stop ${targetRole.displayName} from inheriting ${sourceRole.displayName}`
+      ? `Stop ${targetRole.uiMetadata.displayName} from inheriting ${sourceRole.uiMetadata.displayName}`
      : null

  const getEdgeClasses = (hovered, labelHovered) => {
--- a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
@ -36,7 +36,7 @@
    if (!name?.length) {
      return "Please enter a name"
    }
-    if (roles.some(x => x.displayName === name && x._id !== id)) {
+    if (roles.some(x => x.uiMetadata.displayName === name && x._id !== id)) {
      return "That name is already used by another role"
    }
    return null
@ -171,6 +171,7 @@
    background: var(--color);
  }
  .content {
+    width: 0;
    flex: 1 1 auto;
    padding: 0 12px;
    display: flex;
@ -201,7 +202,8 @@
  .title :global(.spectrum-Icon) {
    color: var(--spectrum-global-color-gray-600);
  }
-  .name {
+  .name,
+  .description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
@ -209,12 +211,6 @@
  .description {
    color: var(--spectrum-global-color-gray-600);
    font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    -webkit-box-orient: vertical;
  }
  .node:hover .buttons {
    display: flex;
--- a/packages/builder/src/components/backend/RoleEditor/layout.js
+++ b/packages/builder/src/components/backend/RoleEditor/layout.js
@ -14,9 +14,7 @@ export const roleToNode = role => ({
  type: "role",
  position: { x: 0, y: 0 },
  data: {
-    displayName: role.displayName,
-    description: role.description,
-    color: role.color,
+    ...role.uiMetadata,
    custom: !role._id.match(/[A-Z]+/),
  },
 })
@ -26,9 +24,11 @@ export const nodeToRole = node => {
  const role = get(roles).find(x => x._id === node.id)
  return {
    ...role,
+    uiMetadata: {
      displayName: node.data.displayName,
      color: node.data.color,
      description: node.data.description,
+    },
  }
 }

--- a/packages/builder/src/components/common/RoleSelect.svelte
+++ b/packages/builder/src/components/common/RoleSelect.svelte
@ -49,8 +49,8 @@
      let options = roles
        .filter(role => allowedRoles.includes(role._id))
        .map(role => ({
-          color: role.color,
-          name: enrichLabel(role.displayName),
+          color: role.uiMetadata.color,
+          name: enrichLabel(role.uiMetadata.displayName),
          _id: role._id,
        }))
      if (allowedRoles.includes(Constants.Roles.CREATOR)) {
@ -65,8 +65,8 @@

    // Allow all core roles
    let options = roles.map(role => ({
-      color: role.color,
-      name: enrichLabel(role.displayName),
+      color: role.uiMetadata.color,
+      name: enrichLabel(role.uiMetadata.displayName),
      _id: role._id,
    }))

--- a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
@ -11,9 +11,9 @@
  bind:value
  on:change
  options={$roles}
-  getOptionLabel={role => role.displayName}
+  getOptionLabel={role => role.uiMetadata.displayName}
  getOptionValue={role => role._id}
-  getOptionColour={role => role.color}
+  getOptionColour={role => role.uiMetadata.color}
  {placeholder}
  {error}
 />
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@ -725,10 +725,10 @@ const getRoleBindings = () => {
    return {
      type: "context",
      runtimeBinding: `'${role._id}'`,
-      readableBinding: `Role.${role.displayName}`,
+      readableBinding: `Role.${role.uiMetadata.displayName}`,
      category: "Role",
      icon: "UserGroup",
-      display: { type: "string", name: role.displayName },
+      display: { type: "string", name: role.uiMetadata.displayName },
    }
  })
 }
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
@ -7,12 +7,13 @@

  let showTooltip = false

-  $: color = role.color || "var(--spectrum-global-color-static-magenta-400)"
  $: role = $roles.find(role => role._id === roleId)
+  $: color =
+    role?.uiMetadata.color || "var(--spectrum-global-color-static-magenta-400)"
  $: tooltip =
    roleId === Roles.PUBLIC
      ? "Open to the public"
-      : `Requires ${role?.displayName} access`
+      : `Requires ${role?.uiMetadata.displayName || "Unknown role"} access`
 </script>

 <!-- svelte-ignore a11y-no-static-element-interactions -->
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
@ -11,7 +11,7 @@
  const getRoleLabel = roleId => {
    return roleId === Constants.Roles.CREATOR
      ? capitalise(Constants.Roles.CREATOR.toLowerCase())
-      : role?.displayName || role?.name || "Custom role"
+      : role?.uiMetadata.displayName || role?.name || "Custom role"
  }
 </script>

--- a/packages/builder/src/stores/builder/roles.js
+++ b/packages/builder/src/stores/builder/roles.js
@ -9,9 +9,12 @@ export function createRolesStore() {
      ...role,

      // Ensure we have new metadata for all roles
-      displayName: role.displayName || role.name,
-      color: role.color || "var(--spectrum-global-color-magenta-400)",
-      description: role.description || "Custom role",
+      uiMetadata: {
+        displayName: role.uiMetadata?.displayName || role.name,
+        color:
+          role.uiMetadata?.color || "var(--spectrum-global-color-magenta-400)",
+        description: role.uiMetadata?.description || "Custom role",
+      },
    }))
  })

--- a/packages/frontend-core/src/components/grid/cells/RoleCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RoleCell.svelte
@ -12,11 +12,12 @@
    <StatusLight
      square
      size="L"
-      color={role?.color || "var(--spectrum-global-color-magenta-400)"}
+      color={role?.uiMetadata?.color ||
+        "var(--spectrum-global-color-static-magenta-400)"}
    />
  </div>
  <div class="value">
-    {role?.displayName || role?.name || value}
+    {role?.uiMetadata?.displayName || role?.name || "Unknown role"}
  </div>
 </div>