@jskit-ai/workspaces-web 0.1.212 → 0.1.213

package/fixtures/role-labels/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Workspace role labels</title></head><body><div id="app"></div><script type="module" src="/main.js"></script></body></html>

package/fixtures/role-labels/main.js

@@ -0,0 +1,37 @@
+import { createApp, h } from "vue";
+import { createRouter, createWebHistory, RouterView } from "vue-router";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
+import WorkspaceMembersClientElement from "../../src/client/components/WorkspaceMembersClientElement.vue";
+
+const context = {
+  permissions: ["*"],
+  surfaceConfig: {
+    tenancyMode: "workspaces",
+    defaultSurfaceId: "admin",
+    enabledSurfaceIds: ["admin"],
+    surfacesById: {
+      admin: { id: "admin", enabled: true, pagesRoot: "w/[workspaceSlug]/admin", routeBase: "/w/:workspaceSlug/admin", requiresWorkspace: true }
+    }
+  }
+};
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: "/w/:workspaceSlug/admin/members", component: WorkspaceMembersClientElement }]
+});
+const app = createApp({ render: () => h(components.VApp, null, { default: () => h(components.VMain, null, { default: () => h(RouterView) }) }) });
+app.provide("jskit.shell-web.runtime.web-placement.client", {
+  getContext: () => context,
+  getPlacements: () => [],
+  subscribe: () => () => {},
+  setContext: () => context
+});
+app.use(router);
+app.use(VueQueryPlugin, { queryClient: new QueryClient({ defaultOptions: { queries: { retry: false } } }) });
+app.use(createVuetify({ components, directives, icons: { defaultSet: "mdi", aliases, sets: { mdi } } }));
+await router.isReady();
+app.mount("#app");

package/fixtures/role-labels/vite.config.mjs

@@ -0,0 +1,9 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  root: fileURLToPath(new URL("./", import.meta.url)),
+  plugins: [vue()],
+  server: { host: "127.0.0.1", strictPort: true }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/workspaces-web",
-  "version": "0.1.212",
+  "version": "0.1.213",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -14,16 +14,16 @@
     "./client/composables/useWorkspaceRouteContext": "./src/client/composables/useWorkspaceRouteContext.js"
   },
   "dependencies": {
-    "@jskit-ai/users-core": "0.1.246",
-    "@jskit-ai/workspaces-core": "0.1.211",
+    "@jskit-ai/users-core": "0.1.247",
+    "@jskit-ai/workspaces-core": "0.1.212",
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/auth-web": "0.1.233",
-    "@jskit-ai/http-web": "0.1.78",
-    "@jskit-ai/kernel": "0.1.233",
-    "@jskit-ai/shell-web": "0.1.237",
-    "@jskit-ai/users-web": "0.1.251",
+    "@jskit-ai/auth-web": "0.1.234",
+    "@jskit-ai/http-web": "0.1.79",
+    "@jskit-ai/kernel": "0.1.234",
+    "@jskit-ai/shell-web": "0.1.238",
+    "@jskit-ai/users-web": "0.1.252",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/src/client/account-settings/useAccountSettingsInvitesSectionRuntime.js

@@ -43,6 +43,7 @@ function normalizePendingInvite(entry) {
     workspaceName: String(entry.workspaceName || workspaceSlug).trim() || workspaceSlug,
     workspaceAvatarUrl: String(entry.workspaceAvatarUrl || "").trim(),
     roleSid: String(entry.roleSid || "member").trim().toLowerCase() || "member",
+    roleLabel: typeof entry.roleLabel === "string" ? entry.roleLabel.trim() : "",
     status: String(entry.status || "pending").trim().toLowerCase() || "pending",
     expiresAt: String(entry.expiresAt || "").trim()
   };

package/src/client/components/AccountSettingsInvitesSection.vue

@@ -28,7 +28,7 @@ const invites = useAccountSettingsInvitesSectionRuntime();
             v-for="invite in invites.items.value"
             :key="invite.id"
             :title="invite.workspaceName"
-            :subtitle="`/${invite.workspaceSlug} • role: ${invite.roleSid}`"
+            :subtitle="`/${invite.workspaceSlug} • role: ${invite.roleLabel || invite.roleSid}`"
             class="px-0"
           >
             <template #prepend>

package/src/client/components/MembersAdminClientElement.vue

@@ -140,7 +140,9 @@
                           class="member-role-select"
                           :disabled="showMembersRefreshingIndicator || isMemberRoleLocked(member)"
                           @update:model-value="(value) => onMemberRoleUpdate(member, value)"
-                        />
+                        >
+                          <template #selection="{ internalItem }">{{ formatRole(internalItem.value, internalItem.title) }}</template>
+                        </v-select>
                         <v-btn
                           variant="text"
                           color="error"
@@ -164,7 +166,7 @@
                       {{ invite.email }}
                     </template>
                     <template #subtitle>
-                      Role: {{ invite.roleSid }} • expires {{ formatDateTime(invite.expiresAt) }}
+                      Role: {{ formatRole(invite.roleSid) }} • expires {{ formatDateTime(invite.expiresAt) }}
                     </template>
                     <template #append>
                       <v-btn
@@ -373,6 +375,10 @@ const inviteLinkStatusText = computed(() => {
   return "Copy this link to share the invite.";
 });
 
+function formatRole(roleSid, fallback = roleSid) {
+  return typeof options.value.formatRole === "function" ? options.value.formatRole(roleSid, fallback) : fallback;
+}
+
 function formatDateTime(value) {
   if (typeof options.value.formatDateTime === "function") {
     return options.value.formatDateTime(value);

package/src/client/components/WorkspaceMembersClientElement.vue

@@ -65,6 +65,10 @@ const forms = reactive({
 const options = reactive({
   inviteRoleOptions: [],
   memberRoleOptions: [],
+  roleLabels: Object.create(null),
+  formatRole(roleSid, fallback = roleSid) {
+    return options.roleLabels[roleSid] || fallback;
+  },
   formatDateTime(value) {
     return formatDateTime(value);
   }
@@ -156,6 +160,7 @@ function resetMessages() {
 function clearRoleOptions() {
   options.inviteRoleOptions = [];
   options.memberRoleOptions = [];
+  options.roleLabels = Object.create(null);
 }
 
 function resetViewState() {
@@ -206,8 +211,16 @@ function normalizeRoleCatalog(payload = {}) {
   }
 
   const uniqueRoleIds = Array.from(new Set(assignableRoleIds));
+  const roleLabels = Object.create(null);
+  for (const role of roles) {
+    const id = String(role?.id || "").trim().toLowerCase();
+    const label = typeof role?.label === "string" ? role.label.trim() : "";
+    if (id && label) {
+      roleLabels[id] = label;
+    }
+  }
   const roleOptions = uniqueRoleIds.map((roleSid) => ({
-    title: toRoleTitle(roleSid),
+    title: roleLabels[roleSid] || toRoleTitle(roleSid),
     value: roleSid
   }));
 
@@ -217,12 +230,14 @@ function normalizeRoleCatalog(payload = {}) {
 
   return {
     roleOptions,
+    roleLabels,
     defaultInviteRole
   };
 }
 
 function applyRoleCatalog(payload = {}) {
   const normalizedCatalog = normalizeRoleCatalog(payload);
+  options.roleLabels = normalizedCatalog.roleLabels;
   options.inviteRoleOptions = [...normalizedCatalog.roleOptions];
   options.memberRoleOptions = [...normalizedCatalog.roleOptions];
 

package/src/client/components/WorkspacesClientElement.vue

@@ -44,6 +44,7 @@ function normalizePendingInvite(entry) {
     workspaceName: String(entry.workspaceName || workspaceSlug).trim() || workspaceSlug,
     workspaceAvatarUrl: String(entry.workspaceAvatarUrl || "").trim(),
     roleSid: String(entry.roleSid || "member").trim().toLowerCase() || "member",
+    roleLabel: typeof entry.roleLabel === "string" ? entry.roleLabel.trim() : "",
     status: String(entry.status || "pending").trim().toLowerCase() || "pending",
     expiresAt: String(entry.expiresAt || "").trim()
   };
@@ -469,7 +470,7 @@ watch(
                       :title="workspace.name"
                       :subtitle="
                         workspace.isAccessible
-                          ? `/${workspace.slug} • role: ${workspace.roleSid || 'member'}`
+                          ? `/${workspace.slug} • role: ${workspace.roleLabel || workspace.roleSid || 'member'}`
                           : `/${workspace.slug} • unavailable on this surface`
                       "
                       class="px-0"
@@ -514,7 +515,7 @@ watch(
                       v-for="invite in pendingInvites"
                       :key="invite.id"
                       :title="invite.workspaceName"
-                      :subtitle="`Role: ${invite.roleSid}`"
+                      :subtitle="`Role: ${invite.roleLabel || invite.roleSid}`"
                       class="px-0"
                     >
                       <template #prepend>

package/src/client/lib/bootstrap.js

@@ -23,6 +23,7 @@ function normalizeWorkspaceEntry(entry = null) {
     name,
     avatarUrl: normalizeText(entry.avatarUrl),
     roleSid: normalizeLowerText(entry.roleSid || "member") || "member",
+    ...(typeof entry.roleLabel === "string" && entry.roleLabel.trim() ? { roleLabel: entry.roleLabel.trim() } : {}),
     isAccessible: entry.isAccessible !== false
   });
 }

package/test/roleLabels.browser.test.js

@@ -0,0 +1,114 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { chromium, expect } from "@playwright/test";
+import { createWorkspaceRoleCatalog } from "../../workspaces-core/src/shared/roles.js";
+import { createChromiumLaunchOptions, startViteFixture, stopProcess } from "../../../tooling/testUtils/browserFixture.mjs";
+
+test("Members displays configured labels but sends and reloads role IDs", {
+  skip: process.env.JSKIT_WORKSPACE_ROLE_LABELS_BROWSER !== "1",
+  timeout: 120_000
+}, async () => {
+  const runtime = await startViteFixture({ fixtureRoot: fileURLToPath(new URL("../fixtures/role-labels/", import.meta.url)) });
+  let browser;
+  let page;
+  try {
+    browser = await chromium.launch(createChromiumLaunchOptions());
+    page = await browser.newPage({ baseURL: runtime.baseURL });
+    page.setDefaultTimeout(15_000);
+    page.setDefaultNavigationTimeout(60_000);
+    const errors = [];
+    page.on("pageerror", (error) => {
+      errors.push(error.message);
+      console.error(error.message);
+    });
+    let labelled = true;
+    let memberRole = "worker";
+    const writes = [];
+    const roles = {
+      owner: { label: "Workspace owner", assignable: true, permissions: ["*"] },
+      worker: { label: "Member", assignable: true, permissions: [] },
+      safety_manager: { label: "Operator", assignable: true, permissions: [] },
+      administrator: { label: "Controller", assignable: true, permissions: [] },
+      training_assessor: { label: "Training assessor", assignable: true, permissions: [] }
+    };
+    const workspace = { id: "7", slug: "example", name: "Example", ownerUserId: "9", avatarUrl: "" };
+    await page.route("**/api/**", async (route) => {
+      const request = route.request();
+      const path = new URL(request.url()).pathname;
+      if (path === "/api/session") {
+        await route.fulfill({ json: { csrfToken: "fixture-csrf" } });
+        return;
+      }
+      const catalog = createWorkspaceRoleCatalog({ roleCatalog: {
+        workspace: { defaultInviteRole: "worker" },
+        roles: Object.fromEntries(Object.entries(roles).map(([id, role]) => [id, labelled ? role : { assignable: role.assignable, permissions: role.permissions }]))
+      } });
+      if (request.method() !== "GET") {
+        const body = request.postDataJSON();
+        writes.push({ method: request.method(), path, attributes: body.data.attributes });
+        if (request.method() === "PATCH") memberRole = body.data.attributes.roleSid;
+      }
+      let type;
+      let attributes;
+      if (path.endsWith("/roles")) {
+        type = "workspace-role-catalogs";
+        attributes = catalog;
+      } else if (path.endsWith("/settings")) {
+        type = "workspace-settings";
+        attributes = { workspace, roleCatalog: catalog, settings: { invitesEnabled: true, invitesAvailable: true } };
+      } else if (path.endsWith("/invites")) {
+        type = "workspace-invites";
+        attributes = { workspace, roleCatalog: catalog, invites: [{ id: "10", email: "pending@example.com", roleSid: "safety_manager", status: "pending", expiresAt: "2099-01-01T00:00:00.000Z", invitedByUserId: "9" }], createdInviteId: "10", inviteUrl: "", inviteDelivery: { status: "mailer_unconfigured" } };
+      } else {
+        type = "workspace-members";
+        attributes = { workspace, roleCatalog: catalog, members: [
+          { userId: "11", displayName: "Person", email: "person@example.com", roleSid: memberRole, status: "active", isOwner: false },
+          { userId: "9", displayName: "Workspace creator", email: "owner@example.com", roleSid: "owner", status: "active", isOwner: true }
+        ] };
+      }
+      await route.fulfill({ contentType: "application/vnd.api+json", json: { data: { type, id: "7", attributes } } });
+    });
+    await page.goto("/w/example/admin/members");
+    const inviteRole = page.getByRole("combobox").first();
+    const memberSelect = page.locator(".member-role-select");
+    await memberSelect.getByText("Member", { exact: true }).waitFor();
+    await expect(memberSelect.last()).toContainText("Workspace owner");
+    await expect(memberSelect.last().locator("input")).toBeDisabled();
+    await page.getByText(/Role: Operator/u).waitFor();
+    assert.match(await inviteRole.locator("xpath=ancestor::*[contains(@class, 'v-select')][1]").textContent(), /Member/u);
+    for (const [id, label] of [["worker", "Member"], ["safety_manager", "Operator"], ["administrator", "Controller"], ["training_assessor", "Training assessor"]]) {
+      await inviteRole.click();
+      assert.equal(await page.getByRole("option", { name: "Workspace owner", exact: true }).count(), 0);
+      await page.getByRole("option", { name: label, exact: true }).click();
+      await page.getByLabel("Email", { exact: true }).fill("invite@example.com");
+      await Promise.all([
+        page.waitForResponse((response) => response.request().method() === "POST" && response.url().endsWith("/invites")),
+        page.getByRole("button", { name: "Send invite", exact: true }).click()
+      ]);
+      await expect(page.getByLabel("Email", { exact: true })).toHaveValue("");
+      assert.equal(writes.at(-1).attributes.roleSid, id);
+      await memberSelect.getByRole("combobox").first().click();
+      const changed = memberRole !== id;
+      const saved = changed
+        ? page.waitForResponse((response) => response.request().method() === "PATCH" && response.url().endsWith("/role"))
+        : Promise.resolve();
+      await page.getByRole("option", { name: label, exact: true }).click();
+      await saved;
+      await page.reload();
+      await memberSelect.getByText(label, { exact: true }).waitFor();
+      assert.equal(memberRole, id);
+    }
+    labelled = false;
+    await page.reload();
+    await memberSelect.getByText("Training_assessor", { exact: true }).waitFor();
+    await page.getByText(/Role: safety_manager/u).waitFor();
+    assert.deepEqual(errors, []);
+  } catch (error) {
+    console.error(await page?.locator("body").innerText());
+    throw error;
+  } finally {
+    if (browser) await browser.close();
+    await stopProcess(runtime);
+  }
+});