Give the sidebar groups, and tidy the tables, disclosures and tab bar
The desktop sidebar is now grouped: Queue, On-call, Alerts and Stats; Team and Admin; then Account at the foot, shown as the signed-in person with an avatar and their name. The active item has a bar as well as a tint. The queue's row of team chips is gone: the team selector is the one place the team is chosen, and the chips offered the same choice a second time. Tables get 16px between columns, so a right-aligned count no longer touches the text beside it. An empty SSO group reads "Not configured" instead of a dash, and the main action on each of those pages (New source, New switch, Add member, Assign, and the admin Add, Create invite and Create) is a filled button, with Edit and Cancel staying secondary. The bare triangles on "Grouped by" and the label lists are real disclosure buttons: a chevron that turns and a 44px target on a touch screen. On a phone the More tab was a <button> that kept the browser's grey box, so it looked highlighted next to four plain links. It now matches them, the labels are 12px and the open tab's icon is filled. Web UI only: no endpoint or JSON shape changed, so nothing to mirror in terdut-tui.
This commit is contained in:
@@ -564,7 +564,7 @@ function assignForm() {
|
||||
// API enforces: a plain assignment that silently moved a shift would move
|
||||
// who gets paged without telling either of them.
|
||||
h('label', { class: 'checkbox' }, replace, ' Take days somebody else holds'),
|
||||
h('button', { class: 'btn', type: 'submit', text: 'Assign' }));
|
||||
h('button', { class: 'btn btn-primary', type: 'submit', text: 'Assign' }));
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
@@ -822,7 +822,7 @@ function integrationsCard() {
|
||||
h('div', { class: 'card-head' },
|
||||
h('h2', { text: 'Alert sources' }),
|
||||
isOwner() && h('button', {
|
||||
class: 'btn', type: 'button', text: 'New source', onclick: openNewSource,
|
||||
class: 'btn btn-primary', type: 'button', text: 'New source', onclick: openNewSource,
|
||||
})),
|
||||
h('p', { class: 'muted small' },
|
||||
'Alerts arrive on an integration key, which says both that the sender may ',
|
||||
@@ -1044,7 +1044,7 @@ function deadmanCard() {
|
||||
h('div', { class: 'card-head' },
|
||||
h('h2', { text: 'Dead man’s switches' }),
|
||||
isOwner() && h('button', {
|
||||
class: 'btn', type: 'button', text: 'New switch', onclick: () => openSwitchForm(),
|
||||
class: 'btn btn-primary', type: 'button', text: 'New switch', onclick: () => openSwitchForm(),
|
||||
})),
|
||||
h('p', { class: 'muted small' },
|
||||
'Alerts whose ABSENCE is the signal. Receiving one opens nothing; going ',
|
||||
@@ -1196,23 +1196,27 @@ function shiftCell(m) {
|
||||
function oidcGroupsCard() {
|
||||
if (!state.auth?.oidc?.enabled) return null;
|
||||
const g = data.oidcGroups || { member_group: '', owner_group: '' };
|
||||
// With nothing set, Edit is the one thing to do here, so it leads.
|
||||
const unset = !g.member_group && !g.owner_group;
|
||||
return h('div', { class: 'card' },
|
||||
h('div', { class: 'card-head' },
|
||||
h('h2', { text: 'Single sign-on' }),
|
||||
isOwner() && h('button', {
|
||||
class: 'btn', type: 'button', text: 'Edit', onclick: openOidcGroupsEditor,
|
||||
class: unset ? 'btn btn-primary' : 'btn', type: 'button', text: 'Edit', onclick: openOidcGroupsEditor,
|
||||
})),
|
||||
h('p', { class: 'muted small' },
|
||||
'Members of the group below are added to this team automatically at ',
|
||||
'sign-in; members of the owner group become owners. Leave a field ',
|
||||
'blank to grant nothing this way.'),
|
||||
h('dl', { class: 'user-facts' },
|
||||
fact('Member group', g.member_group || '—'),
|
||||
fact('Owner group', g.owner_group || '—'),
|
||||
fact('Member group', g.member_group || notConfigured()),
|
||||
fact('Owner group', g.owner_group || notConfigured()),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const notConfigured = () => h('span', { class: 'muted', text: 'Not configured' });
|
||||
|
||||
function fact(label, value) {
|
||||
return [h('dt', { text: label }), h('dd', { text: value })];
|
||||
}
|
||||
@@ -1277,7 +1281,7 @@ function membersCard() {
|
||||
h('div', { class: 'card-head' },
|
||||
h('h2', { text: 'Members' }),
|
||||
isOwner() && h('button', {
|
||||
class: 'btn', type: 'button', text: 'Add member', onclick: openAddMember,
|
||||
class: 'btn btn-primary', type: 'button', text: 'Add member', onclick: openAddMember,
|
||||
})),
|
||||
h('p', { class: 'muted small' },
|
||||
'Owners set up the team; members work its incidents. Somebody who can’t be ',
|
||||
|
||||
Reference in New Issue
Block a user