From 2849a7a4ff59973c743926b9f062ba2b52dafc81 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Sep 2024 14:03:21 +0100 Subject: [PATCH] Add uiMetdata prefix to roles everywhere --- .../buttons/ManageAccessButton.svelte | 18 +++++++++--------- .../DataTable/modals/CreateEditUser.svelte | 2 +- .../backend/RoleEditor/Controls.svelte | 12 +++++++----- .../backend/RoleEditor/RoleEdge.svelte | 2 +- .../backend/RoleEditor/RoleNode.svelte | 12 ++++-------- .../components/backend/RoleEditor/layout.js | 12 ++++++------ .../src/components/common/RoleSelect.svelte | 8 ++++---- .../design/settings/controls/RoleSelect.svelte | 4 ++-- packages/builder/src/dataBinding.js | 4 ++-- .../ScreenList/RoleIndicator.svelte | 5 +++-- .../_components/AppRoleTableRenderer.svelte | 2 +- packages/builder/src/stores/builder/roles.js | 9 ++++++--- .../src/components/grid/cells/RoleCell.svelte | 5 +++-- 13 files changed, 49 insertions(+), 46 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte index 1725740a7c..2826d8d986 100644 --- 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 @@ {#each builtInRoles as role} changePermission(role._id)} /> {/each} {#each customRoles as role} changePermission(role._id)} /> {/each} diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte index befe5ec484..5ac2beab65 100644 --- 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} /> diff --git a/packages/builder/src/components/backend/RoleEditor/Controls.svelte b/packages/builder/src/components/backend/RoleEditor/Controls.svelte index 8ac8ce2668..a5c601f2dd 100644 --- 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, - }), - color: "var(--spectrum-global-color-gray-700)", - description: "Custom role", + 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, } diff --git a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte b/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte index 5dc21d6f85..4e25294d21 100644 --- 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) => { diff --git a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte b/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte index b4a3cafc58..1a387de13e 100644 --- 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; diff --git a/packages/builder/src/components/backend/RoleEditor/layout.js b/packages/builder/src/components/backend/RoleEditor/layout.js index fb1f8e795a..3671cb6782 100644 --- 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, - displayName: node.data.displayName, - color: node.data.color, - description: node.data.description, + uiMetadata: { + displayName: node.data.displayName, + color: node.data.color, + description: node.data.description, + }, } } diff --git a/packages/builder/src/components/common/RoleSelect.svelte b/packages/builder/src/components/common/RoleSelect.svelte index 152b752fd0..c59dd8fc60 100644 --- 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, })) diff --git a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte index 773abd69b9..ad466cbce7 100644 --- 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} /> diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js index 09ff8e7a81..a59ce16e5a 100644 --- 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 }, } }) } diff --git 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 index 4ee5d5dec5..09e29d806a 100644 --- 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` diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte index e63ee2493e..7ed36eb3a4 100644 --- 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" } diff --git a/packages/builder/src/stores/builder/roles.js b/packages/builder/src/stores/builder/roles.js index ef4480c6d2..0b322104b5 100644 --- 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", + }, })) }) diff --git a/packages/frontend-core/src/components/grid/cells/RoleCell.svelte b/packages/frontend-core/src/components/grid/cells/RoleCell.svelte index b638d0e0e3..82d1e26aa7 100644 --- a/packages/frontend-core/src/components/grid/cells/RoleCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RoleCell.svelte @@ -12,11 +12,12 @@
- {role?.displayName || role?.name || value} + {role?.uiMetadata?.displayName || role?.name || "Unknown role"}