' + (account.can_manage ? "Choose the smallest role" : "Role meanings") + " " + (account.can_manage ? "Match each person to the narrowest role that still lets them do the job they own." : "Use these role meanings to understand what each person on this roster can do.") + '
Owner Full account, billing, and access control.
Admin Workspace control, billing, and roster management.
Tech Workspace control without billing or roster ownership.
Read-only Review access without control-plane changes.
' + (account.can_manage ? "Choose the smallest role" : "Role meanings") + " " + (account.can_manage ? "Match each person to the narrowest role that still lets them do the job they own." : "Use these role meanings to understand what each person on this roster can do.") + '
Owner Full account, billing, and access control.
Admin Workspace control, billing, and roster management.
Tech Workspace control without billing or roster ownership.
Read-only Review access without control-plane changes.
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
'
' +
'
' +
'
' +
@@ -351,18 +436,20 @@ describe('account runtime', function() {
selectedWorkspaceID: 'ws_1',
manageWorkspace: { pending: false, error: '' },
accessVisible: false,
+ activeAccessJob: '',
accessQuery: { status: 'idle', error: '', data: [] },
});
entry.addWorkspaceOpen = true;
entry.selectedWorkspaceID = 'ws_1';
}, { notify: false });
- runtime.toggleAccess('acct_1');
+ await runtime.setAccessJob('acct_1', 'change_role');
await flushAsync();
expect(deps.store.getAccountState().byAccountID.acct_1.accessVisible).toBe(true);
expect(deps.store.getAccountState().byAccountID.acct_1.selectedWorkspaceID).toBe('');
expect(deps.store.getAccountState().byAccountID.acct_1.addWorkspaceOpen).toBe(false);
+ expect(deps.store.getAccountState().byAccountID.acct_1.activeAccessJob).toBe('change_role');
expect(deps.store.getAccountState().byAccountID.acct_1.accessQuery.status).toBe('ready');
expect(deps.store.getAccountState().byAccountID.acct_1.accessQuery.data).toHaveLength(1);
expect(document.getElementById('access-stats-acct_1')?.textContent).toContain('Members');
diff --git a/internal/cloudcp/portal/frontend/src/account_runtime.ts b/internal/cloudcp/portal/frontend/src/account_runtime.ts
index b30081ff5..38db6175f 100644
--- a/internal/cloudcp/portal/frontend/src/account_runtime.ts
+++ b/internal/cloudcp/portal/frontend/src/account_runtime.ts
@@ -4,7 +4,7 @@ import type { PortalAPI } from './api';
import { focusElement, getElement, renderAccountUI as renderAccountUIState } from './account_view';
import { ensurePortalAccountUIEntry } from './state';
import type { PortalStore } from './store';
-import type { PortalAccessMember } from './types';
+import type { PortalAccessJob, PortalAccessMember } from './types';
export interface AccountRuntimeDeps {
api: PortalAPI;
@@ -18,8 +18,9 @@ export interface AccountRuntime {
selectWorkspace(accountID: string, workspaceID: string): void;
clearWorkspaceSelection(accountID: string): void;
openBilling(accountID: string): Promise
;
- toggleAccess(accountID: string): void;
ensureAccessVisible(accountID: string): void;
+ setAccessJob(accountID: string, job: PortalAccessJob): Promise;
+ clearAccessJob(accountID: string): void;
inviteMember(accountID: string): Promise;
createWorkspace(accountID: string): Promise;
manageWorkspaceAction(accountID: string, tenantID: string, action: string, name: string): Promise;
@@ -114,6 +115,7 @@ export function installAccountRuntime(deps: AccountRuntimeDeps): AccountRuntime
entry.addWorkspaceOpen = !entry.addWorkspaceOpen;
if (entry.addWorkspaceOpen) {
entry.accessVisible = false;
+ entry.activeAccessJob = '';
entry.selectedWorkspaceID = '';
}
shouldFocus = entry.addWorkspaceOpen;
@@ -132,6 +134,7 @@ export function installAccountRuntime(deps: AccountRuntimeDeps): AccountRuntime
entry.selectedWorkspaceID = entry.selectedWorkspaceID === workspaceID ? '' : workspaceID;
if (entry.selectedWorkspaceID) {
entry.accessVisible = false;
+ entry.activeAccessJob = '';
entry.addWorkspaceOpen = false;
}
selectedWorkspaceID = entry.selectedWorkspaceID;
@@ -234,31 +237,15 @@ export function installAccountRuntime(deps: AccountRuntimeDeps): AccountRuntime
}
};
- var toggleAccess = function(accountID: string): void {
- var nextVisible = false;
- deps.store.updateAccountState(function(accountState) {
- var entry = ensurePortalAccountUIEntry(accountState, accountID);
- entry.accessVisible = !entry.accessVisible;
- if (entry.accessVisible) {
- entry.selectedWorkspaceID = '';
- entry.addWorkspaceOpen = false;
- }
- nextVisible = entry.accessVisible;
- });
- if (nextVisible) {
- void loadAccessRoster(accountID);
- }
- };
-
var ensureAccessVisible = function(accountID: string): void {
var shouldLoad = false;
deps.store.updateAccountState(function(accountState) {
var entry = ensurePortalAccountUIEntry(accountState, accountID);
if (!entry.accessVisible) {
entry.accessVisible = true;
- entry.selectedWorkspaceID = '';
- entry.addWorkspaceOpen = false;
}
+ entry.selectedWorkspaceID = '';
+ entry.addWorkspaceOpen = false;
shouldLoad = entry.accessQuery.status === 'idle' || entry.accessQuery.status === 'error';
});
if (shouldLoad) {
@@ -266,6 +253,37 @@ export function installAccountRuntime(deps: AccountRuntimeDeps): AccountRuntime
}
};
+ var setAccessJob = async function(accountID: string, job: PortalAccessJob): Promise {
+ var nextJob = '' as PortalAccessJob;
+ var shouldLoad = false;
+ deps.store.updateAccountState(function(accountState) {
+ var entry = ensurePortalAccountUIEntry(accountState, accountID);
+ entry.accessVisible = true;
+ entry.selectedWorkspaceID = '';
+ entry.addWorkspaceOpen = false;
+ entry.activeAccessJob = entry.activeAccessJob === job ? '' : job;
+ nextJob = entry.activeAccessJob;
+ shouldLoad = entry.accessQuery.status === 'idle' || entry.accessQuery.status === 'error';
+ });
+ if (shouldLoad) {
+ await loadAccessRoster(accountID);
+ }
+ if (nextJob) {
+ revealElementWhenReady('access-detail-' + accountID, function() {
+ if (nextJob === 'invite') {
+ focusElement('invite-email-' + accountID);
+ }
+ });
+ }
+ };
+
+ var clearAccessJob = function(accountID: string): void {
+ deps.store.updateAccountState(function(accountState) {
+ var entry = ensurePortalAccountUIEntry(accountState, accountID);
+ entry.activeAccessJob = '';
+ });
+ };
+
var inviteMember = async function(accountID: string): Promise {
var emailEl = getElement('invite-email-' + accountID);
var roleEl = getElement('invite-role-' + accountID);
@@ -334,8 +352,9 @@ export function installAccountRuntime(deps: AccountRuntimeDeps): AccountRuntime
selectWorkspace: selectWorkspace,
clearWorkspaceSelection: clearWorkspaceSelection,
openBilling: openBilling,
- toggleAccess: toggleAccess,
ensureAccessVisible: ensureAccessVisible,
+ setAccessJob: setAccessJob,
+ clearAccessJob: clearAccessJob,
inviteMember: inviteMember,
createWorkspace: createWorkspace,
manageWorkspaceAction: manageWorkspaceAction,
diff --git a/internal/cloudcp/portal/frontend/src/account_view.test.ts b/internal/cloudcp/portal/frontend/src/account_view.test.ts
index 0ebc49e14..eab41fcd3 100644
--- a/internal/cloudcp/portal/frontend/src/account_view.test.ts
+++ b/internal/cloudcp/portal/frontend/src/account_view.test.ts
@@ -16,6 +16,7 @@ function createEntry(overrides: Partial = {}): PortalAccou
error: '',
},
accessVisible: false,
+ activeAccessJob: '',
accessQuery: {
status: 'idle',
error: '',
@@ -138,12 +139,71 @@ describe('account view', function() {
},
})
);
- expect(document.querySelector('[data-action="change-role"]')).not.toBeNull();
- expect(document.querySelector('[data-action="remove-member"]')).not.toBeNull();
+ expect(document.querySelector('[data-action="change-role"]')).toBeNull();
+ expect(document.querySelector('[data-action="remove-member"]')).toBeNull();
+ expect(document.getElementById('access-list-acct_1')?.textContent).toContain('Review only');
expect(document.getElementById('access-stats-acct_1')?.textContent).toContain('Members');
expect(document.getElementById('access-stats-acct_1')?.textContent).toContain('2');
});
+ it('renders access controls only for the active access job', function() {
+ document.body.innerHTML =
+ '' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
@@ -155,6 +215,7 @@ describe('account view', function() {
'acct_1',
createEntry({
accessVisible: true,
+ activeAccessJob: 'change_role',
accessQuery: {
status: 'ready',
error: '',
diff --git a/internal/cloudcp/portal/frontend/src/account_view.ts b/internal/cloudcp/portal/frontend/src/account_view.ts
index 4f9de95e5..33b796f02 100644
--- a/internal/cloudcp/portal/frontend/src/account_view.ts
+++ b/internal/cloudcp/portal/frontend/src/account_view.ts
@@ -1,4 +1,5 @@
import type {
+ PortalAccessJob,
PortalAccountState,
PortalAccountSummary,
PortalAccountUIEntry,
@@ -207,6 +208,32 @@ function countMembersByRole(members: PortalAccessMember[], role: string): number
return count;
}
+function accessJobTitle(job: PortalAccessJob): string {
+ switch (job) {
+ case 'invite':
+ return 'Invite people';
+ case 'change_role':
+ return 'Change roles';
+ case 'remove':
+ return 'Remove access';
+ default:
+ return '';
+ }
+}
+
+function accessJobCopy(job: PortalAccessJob): string {
+ switch (job) {
+ case 'invite':
+ return 'Add one person with the minimum role they need on this account.';
+ case 'change_role':
+ return 'Use the roster to change one person at a time and keep each person on the smallest role they need.';
+ case 'remove':
+ return 'Use removal only when this person should no longer be on this hosted account.';
+ default:
+ return '';
+ }
+}
+
function renderAccessStats(accountID: string, entry: PortalAccountUIEntry, canManage: boolean): void {
var stats = getElement
('access-stats-' + accountID);
if (!stats) return;
@@ -241,10 +268,10 @@ function createAccessControlCell(className: string): HTMLDivElement {
return cell;
}
-function renderAccessRoleControl(accountID: string, member: PortalAccessMember, isOwner: boolean, canManage: boolean): HTMLElement {
+function renderAccessRoleControl(accountID: string, member: PortalAccessMember, isOwner: boolean, canManage: boolean, activeJob: PortalAccessJob): HTMLElement {
var currentRole = normalizedAccessRole(member.role);
var group = createAccessControlCell('access-control-cell-role');
- if (!canManage) {
+ if (!canManage || activeJob !== 'change_role') {
var badge = document.createElement('span');
badge.className = 'access-role-badge';
badge.textContent = roleLabel(currentRole);
@@ -276,22 +303,28 @@ function renderAccessRoleControl(accountID: string, member: PortalAccessMember,
return group;
}
-function renderAccessMemberAction(accountID: string, member: PortalAccessMember, isOwner: boolean, canManage: boolean): HTMLElement | null {
+function renderAccessMemberAction(accountID: string, member: PortalAccessMember, isOwner: boolean, canManage: boolean, activeJob: PortalAccessJob): HTMLElement | null {
+ var group = createAccessControlCell('access-control-cell-access');
if (!canManage) {
- var readonly = createAccessControlCell('access-control-cell-access');
var readonlyText = document.createElement('span');
readonlyText.className = 'access-control-locked';
readonlyText.textContent = 'View only';
- readonly.appendChild(readonlyText);
- return readonly;
+ group.appendChild(readonlyText);
+ return group;
+ }
+ if (activeJob !== 'remove') {
+ var idleText = document.createElement('span');
+ idleText.className = 'access-control-locked';
+ idleText.textContent = activeJob === 'change_role' ? 'Role change' : 'Review only';
+ group.appendChild(idleText);
+ return group;
}
if (normalizedAccessRole(member.role) === 'owner' && !isOwner) {
- var locked = createAccessControlCell('access-control-cell-access');
var lockedText = document.createElement('span');
lockedText.className = 'access-control-locked';
lockedText.textContent = 'Locked';
- locked.appendChild(lockedText);
- return locked;
+ group.appendChild(lockedText);
+ return group;
}
var btn = document.createElement('button');
@@ -302,12 +335,11 @@ function renderAccessMemberAction(accountID: string, member: PortalAccessMember,
btn.setAttribute('data-account-id', accountID);
btn.setAttribute('data-user-id', member.user_id);
btn.setAttribute('data-member-email', member.email);
- var group = createAccessControlCell('access-control-cell-access');
group.appendChild(btn);
return group;
}
-function renderAccessMemberRow(accountID: string, member: PortalAccessMember, isOwner: boolean, canManage: boolean): HTMLElement {
+function renderAccessMemberRow(accountID: string, member: PortalAccessMember, isOwner: boolean, canManage: boolean, activeJob: PortalAccessJob): HTMLElement {
var row = document.createElement('div');
row.className = 'access-member-row';
@@ -335,20 +367,18 @@ function renderAccessMemberRow(accountID: string, member: PortalAccessMember, is
identity.appendChild(caption);
row.appendChild(identity);
- row.appendChild(renderAccessRoleControl(accountID, member, isOwner, canManage));
- row.appendChild(renderAccessMemberAction(accountID, member, isOwner, canManage) || createAccessControlCell('access-control-cell-access'));
+ row.appendChild(renderAccessRoleControl(accountID, member, isOwner, canManage, activeJob));
+ row.appendChild(renderAccessMemberAction(accountID, member, isOwner, canManage, activeJob) || createAccessControlCell('access-control-cell-access'));
return row;
}
-function ensureAccessRosterHead(container: HTMLElement): void {
- var existing = container.querySelector('.access-roster-head');
- if (existing) return;
+function renderAccessRosterHead(container: HTMLElement, activeJob: PortalAccessJob): void {
var head = document.createElement('div');
head.className = 'access-roster-head';
head.innerHTML =
'Operator ' +
- 'Role ' +
- 'Access ';
+ '' + (activeJob === 'change_role' ? 'New role' : 'Role') + ' ' +
+ '' + (activeJob === 'remove' ? 'Remove' : 'Action') + ' ';
container.appendChild(head);
}
@@ -367,12 +397,42 @@ export function renderAccessSection(accountID: string, entry: PortalAccountUIEnt
var roster = getElement('access-list-' + accountID);
if (!section || !roster) return;
var rosterPanel = roster.closest('.access-roster') as HTMLElement | null;
+ var shell = getElement('access-shell-' + accountID);
+ var detail = getElement('access-detail-' + accountID);
+ var taskPanel = getElement('access-task-panel-' + accountID);
+ var taskTitle = getElement('access-task-title-' + accountID);
+ var taskCopy = getElement('access-task-copy-' + accountID);
+ var taskButtons = {
+ invite: getElement('access-task-invite-' + accountID),
+ change_role: getElement('access-task-change_role-' + accountID),
+ remove: getElement('access-task-remove-' + accountID),
+ };
+ var taskBodies = {
+ invite: getElement('access-task-body-invite-' + accountID),
+ change_role: getElement('access-task-body-change_role-' + accountID),
+ remove: getElement('access-task-body-remove-' + accountID),
+ };
var actorRole = section.getAttribute('data-actor-role') || '';
var isOwner = actorRole === 'owner';
var canManage = section.getAttribute('data-can-manage') === 'true';
+ var activeJob = canManage ? entry.activeAccessJob : '';
section.classList.toggle('visible', entry.accessVisible);
renderAccessStats(accountID, entry, canManage);
+ if (shell) {
+ shell.classList.toggle('access-shell-job-open', !!activeJob);
+ shell.classList.toggle('access-shell-idle', !activeJob);
+ }
+ if (detail) detail.hidden = !activeJob;
+ if (taskPanel) taskPanel.hidden = !activeJob;
+ if (taskTitle) taskTitle.textContent = accessJobTitle(activeJob);
+ if (taskCopy) taskCopy.textContent = accessJobCopy(activeJob);
+ taskButtons.invite?.classList.toggle('is-active', activeJob === 'invite');
+ taskButtons.change_role?.classList.toggle('is-active', activeJob === 'change_role');
+ taskButtons.remove?.classList.toggle('is-active', activeJob === 'remove');
+ if (taskBodies.invite) taskBodies.invite.hidden = activeJob !== 'invite';
+ if (taskBodies.change_role) taskBodies.change_role.hidden = activeJob !== 'change_role';
+ if (taskBodies.remove) taskBodies.remove.hidden = activeJob !== 'remove';
if (!entry.accessVisible) {
return;
@@ -403,10 +463,10 @@ export function renderAccessSection(accountID: string, entry: PortalAccountUIEnt
roster.textContent = '';
roster.classList.remove('state-only');
if (rosterPanel) rosterPanel.classList.remove('state-only');
- ensureAccessRosterHead(roster);
+ renderAccessRosterHead(roster, activeJob);
for (var i = 0; i < entry.accessQuery.data.length; i += 1) {
var member = entry.accessQuery.data[i];
- roster.appendChild(renderAccessMemberRow(accountID, member, isOwner, canManage));
+ roster.appendChild(renderAccessMemberRow(accountID, member, isOwner, canManage, activeJob));
}
}
diff --git a/internal/cloudcp/portal/frontend/src/shell_view.test.ts b/internal/cloudcp/portal/frontend/src/shell_view.test.ts
index d3aa5a5d3..16d985515 100644
--- a/internal/cloudcp/portal/frontend/src/shell_view.test.ts
+++ b/internal/cloudcp/portal/frontend/src/shell_view.test.ts
@@ -191,7 +191,10 @@ describe('shell view', function() {
expect(html).toContain('Invite people');
expect(html).toContain('Change roles');
expect(html).toContain('Remove access');
- expect(html).toContain('Pick the access job');
+ expect(html).toContain('Review the hosted roster, then open one access job at a time.');
+ expect(html).toContain('data-action="set-access-job"');
+ expect(html).toContain('Access task');
+ expect(html).toContain('id="access-detail-acct_1" hidden');
expect(html).toContain('Choose the smallest role');
expect(html).toContain('Full account, billing, and access control.');
expect(html).toContain('Workspace control, billing, and roster management.');
@@ -199,6 +202,7 @@ describe('shell view', function() {
expect(html).toContain('Review access without control-plane changes.');
expect(html).toContain('People on this account');
expect(html).toContain('data-can-manage="true"');
+ expect(html).toContain('Remove stale access');
expect(html).toContain('data-action="workspace-action"');
expect(html).toContain('billing-action-row');
expect(html).toContain('billing-action-button');
@@ -335,10 +339,11 @@ describe('shell view', function() {
expect(html).toContain('Review access');
expect(html).toContain('Owner or admin required');
- expect(html).toContain('This account is view-only for you');
- expect(html).toContain('Need an access change?');
+ expect(html).toContain('Review who already has access to this hosted account. An owner or admin must make changes.');
+ expect(html).toContain('Review the hosted roster here. An owner or admin must make changes.');
expect(html).toContain('data-can-manage="false"');
expect(html).not.toContain('data-action="invite-member"');
+ expect(html).not.toContain('data-action="set-access-job"');
});
it('renders self-hosted overview copy when no hosted accounts are attached', function() {
diff --git a/internal/cloudcp/portal/frontend/src/shell_view.ts b/internal/cloudcp/portal/frontend/src/shell_view.ts
index 58f120877..b8a073f8e 100644
--- a/internal/cloudcp/portal/frontend/src/shell_view.ts
+++ b/internal/cloudcp/portal/frontend/src/shell_view.ts
@@ -895,12 +895,18 @@ function renderAccountWorkspaceSection(account: PortalAccountSummary, accountAPI
function renderAccountAccessSection(account: PortalAccountSummary): string {
var accessHeaderTitle = account.can_manage ? 'Manage access' : 'Review access';
var accessHeaderCopy = account.can_manage
- ? 'Invite people, change roles, and remove stale access from one hosted roster.'
+ ? 'Review the hosted roster, then open one access job at a time.'
: 'Review who already has access to this hosted account. An owner or admin must make changes.';
- var accessContextChips = account.can_manage
- ? ['Invite people', 'Change roles', 'Remove access']
- : ['View roster', 'Owner or admin required'];
- var accessPolicy =
+ var accessTaskStrip = account.can_manage
+ ? (
+ '' +
+ 'Invite people ' +
+ 'Change roles ' +
+ 'Remove access ' +
+ '
'
+ )
+ : renderSectionContextChips(['View roster', 'Owner or admin required']);
+ var accessRoleGuide =
'' +
'
' +
'
' + (account.can_manage ? 'Choose the smallest role' : 'Role meanings') + ' ' +
@@ -915,7 +921,7 @@ function renderAccountAccessSection(account: PortalAccountSummary): string {
'
Read-only Review access without control-plane changes.
' +
'
' +
'
' +
'
' +
@@ -939,14 +945,26 @@ function renderAccountAccessSection(account: PortalAccountSummary): string {
'
' +
'
' +
- '
' +
- '
Need an access change? ' +
- '
An owner or admin on this account must invite people, change roles, or remove access.
' +
- '
' +
- '
' +
+ '
' +
+ '
Change roles on the roster ' +
+ '
Use the role column in the roster to change one person at a time. Keep each person on the smallest role they need.
' +
+ '
' +
+ '
' +
+ '
' +
+ '
Remove stale access ' +
+ '
Use removal only when this person should no longer be on this hosted account. Owners may still be protected when they are the last owner.
' +
+ '
' +
+ '
' +
+ '
Pick the exact person Use the roster to remove one account member at a time.
' +
+ '
Keep current owners safe The last owner cannot be removed until another owner exists.
' +
+ '
' +
+ '
' +
@@ -962,42 +980,56 @@ function renderAccountAccessSection(account: PortalAccountSummary): string {
'Access
' +
'' + accessHeaderTitle + ' ' +
'' + accessHeaderCopy + '
' +
- renderSectionContextChips(accessContextChips) +
+ accessTaskStrip +
' Back to workspaces ' +
'