@skillcdn/console 0.4.4 → 0.4.5

package/src/components/plugin-settings.tsx

@@ -3,6 +3,7 @@ import type { ConsoleClient } from "../client.js";
 import type { Messages } from "../i18n/en.js";
 import { useWords } from "../i18n/index.js";
 import { PLUGIN_CAPABILITIES, type PluginCapability } from "../plugin/capabilities.js";
+import { settingsHref } from "../router.js";
 import type {
   RestEvent,
   RestPerson,
@@ -13,13 +14,17 @@ import type {
   RestPluginGrantInput,
   RestPluginSetting,
   RestProject,
+  RestTeam,
 } from "../schemas.js";
 import { useAction } from "../use-action.js";
 import { EventFeed } from "./event-feed.js";
+import { Picker } from "./picker.js";
+import { listSearch, peopleSearch, projectsSearch } from "./searches.js";
 import {
   Badge,
   Button,
   Callout,
+  Chip,
   cx,
   EmptyState,
   formatInstant,
@@ -134,6 +139,10 @@ export interface PluginSettingsViewProps {
   readonly people: readonly RestPerson[];
   readonly language: string;
   readonly client: ConsoleClient;
+  /** The plugins of the console, to grant a role of this one to another (ADR-0072); none when left out. */
+  readonly plugins?: readonly RestPlugin[] | undefined;
+  /** The teams of the workspace, to grant a role to one (ADR-0073); none when left out. */
+  readonly teams?: readonly RestTeam[] | undefined;
   /** Called after a change, so that the page reads the plugin again. */
   readonly onChanged: () => Promise<void>;
   /** Where the list is, for after a purge. */
@@ -215,6 +224,13 @@ function Overview(props: {
   } else if (enabled && detail.boardNeeds !== "none") {
     rows.push({ key: "board", name: settings.board, value: settings.nothing });
   }
+  if (detail.keeps !== undefined && detail.keeps.length > 0) {
+    rows.push({
+      key: "keeps",
+      name: settings.keeps,
+      value: detail.keeps.map((kept) => settings.keepsFor(kept.collection, kept.days)).join(", "),
+    });
+  }
   if (enabled && detail.projects !== null) {
     const names = detail.projects;
     rows.push({
@@ -401,6 +417,9 @@ function EnumListControl(props: {
   );
 }
 
+/** One of a list setting's choices: a person or a project, by id, as it reads. */
+type Candidate = { readonly id: string; readonly label: string };
+
 /**
  * A list of people or of projects: each chosen one a chip with the way to take it out, and one
  * choice to add another among those not chosen yet; the value is their ids.
@@ -410,12 +429,13 @@ function RefListControl(props: {
   readonly value: unknown;
   readonly onChange: (value: unknown) => void;
   readonly id: string;
+  readonly language: string;
   readonly people: readonly RestPerson[];
   readonly projects: readonly RestProject[];
 }) {
   const words = useWords();
   const chosen = itemsOf(props.value).map(String);
-  const candidates: readonly { readonly id: string; readonly label: string }[] =
+  const candidates: readonly Candidate[] =
     props.setting.of === "person"
       ? props.people
           .filter((person) => person.status === "active" || chosen.includes(person.id))
@@ -430,38 +450,33 @@ function RefListControl(props: {
   return (
     <div className="sc-chips">
       {chosen.map((id) => (
-        <span key={id} className="sc-chip">
+        <Chip
+          key={id}
+          onRemove={() => set(chosen.filter((kept) => kept !== id))}
+          removeLabel={`${words.common.remove}: ${labelOf(id)}`}
+        >
           {labelOf(id)}
-          <button
-            type="button"
-            className="sc-chip-remove"
-            aria-label={`${words.common.remove}: ${labelOf(id)}`}
-            onClick={() => set(chosen.filter((kept) => kept !== id))}
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </span>
+        </Chip>
       ))}
       {!full && (
-        <select
+        <Picker<Candidate>
           id={props.id}
-          className="sc-input sc-chip-add"
-          value=""
-          onChange={(event) => {
-            if (event.target.value !== "") {
-              set([...chosen, event.target.value]);
+          className="sc-picker-add"
+          value={undefined}
+          search={listSearch(
+            candidates.filter((candidate) => !chosen.includes(candidate.id)),
+            (candidate, typed) => candidate.label.toLowerCase().includes(typed),
+          )}
+          keyOf={(candidate) => candidate.id}
+          render={(candidate) => candidate.label}
+          label={pluginWord(props.setting.name, props.language)}
+          placeholder={words.plugins.settings.addOne}
+          onChange={(candidate) => {
+            if (candidate !== undefined) {
+              set([...chosen, candidate.id]);
             }
           }}
-        >
-          <option value="">{words.plugins.settings.choose}</option>
-          {candidates
-            .filter((candidate) => !chosen.includes(candidate.id))
-            .map((candidate) => (
-              <option key={candidate.id} value={candidate.id}>
-                {candidate.label}
-              </option>
-            ))}
-        </select>
+        />
       )}
     </div>
   );
@@ -498,18 +513,14 @@ function ItemListControl(props: {
   return (
     <div className="sc-chips">
       {items.map((item, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: an item may be typed twice
-        <span key={`${index}-${String(item)}`} className="sc-chip">
+        <Chip
+          // biome-ignore lint/suspicious/noArrayIndexKey: an item may be typed twice
+          key={`${index}-${String(item)}`}
+          onRemove={() => set(items.filter((_, at) => at !== index))}
+          removeLabel={`${words.common.remove}: ${String(item)}`}
+        >
           {String(item)}
-          <button
-            type="button"
-            className="sc-chip-remove"
-            aria-label={`${words.common.remove}: ${String(item)}`}
-            onClick={() => set(items.filter((_, at) => at !== index))}
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </span>
+        </Chip>
       ))}
       {!full && (
         <div className="sc-chip-input">
@@ -553,42 +564,43 @@ function SettingControl(props: {
   const words = useWords();
   const { setting, value, onChange, id } = props;
   const chosen = typeof value === "string" ? value : "";
-  const choose = (event: { readonly target: { readonly value: string } }) =>
-    onChange(event.target.value === "" ? null : event.target.value);
   switch (setting.type) {
     case "person": {
       // The people in; the one chosen stays listed when they have left, so that the value shows.
       const people = props.people.filter(
         (person) => person.status === "active" || person.id === chosen,
       );
+      const current = people.find((person) => person.id === chosen);
       return (
-        <select id={id} className="sc-input" value={chosen} onChange={choose}>
-          <option value="">—</option>
-          {people.map((person) => (
-            <option key={person.id} value={person.id}>
-              {personChoice(person)}
-            </option>
-          ))}
-          {chosen !== "" && !people.some((person) => person.id === chosen) && (
-            <option value={chosen}>{chosen}</option>
-          )}
-        </select>
+        <Picker
+          id={id}
+          value={current}
+          held={chosen !== "" && current === undefined ? chosen : undefined}
+          search={peopleSearch(people)}
+          keyOf={(person) => person.id}
+          render={personChoice}
+          label={pluginWord(setting.name, props.language)}
+          placeholder={words.plugins.settings.choose}
+          onChange={(person) => onChange(person?.id ?? null)}
+        />
       );
     }
-    case "project":
+    case "project": {
+      const current = props.projects.find((project) => project.id === chosen);
       return (
-        <select id={id} className="sc-input" value={chosen} onChange={choose}>
-          <option value="">—</option>
-          {props.projects.map((project) => (
-            <option key={project.id} value={project.id}>
-              {project.name} ({project.key})
-            </option>
-          ))}
-          {chosen !== "" && !props.projects.some((project) => project.id === chosen) && (
-            <option value={chosen}>{chosen}</option>
-          )}
-        </select>
+        <Picker
+          id={id}
+          value={current}
+          held={chosen !== "" && current === undefined ? chosen : undefined}
+          search={projectsSearch(props.projects)}
+          keyOf={(project) => project.id}
+          render={(project) => `${project.name} (${project.key})`}
+          label={pluginWord(setting.name, props.language)}
+          placeholder={words.plugins.settings.choose}
+          onChange={(project) => onChange(project?.id ?? null)}
+        />
       );
+    }
     case "boolean":
       return (
         <input
@@ -665,6 +677,7 @@ function SettingControl(props: {
       if (setting.of === "person" || setting.of === "project") {
         return (
           <RefListControl
+            language={props.language}
             setting={setting}
             value={value}
             onChange={onChange}
@@ -771,6 +784,38 @@ function SettingsForm(props: {
   );
 }
 
+/**
+ * How a secret stands, in a line (ADR-0070): set by an administrator, or sealed from an answer
+ * of a host, when; and when it expires, or that it has.
+ */
+function secretStanding(
+  settings: Messages["plugins"]["settings"],
+  setting: RestPluginSetting,
+  language: string,
+): string {
+  const when = formatInstant(setting.setAt ?? "", language);
+  const source = setting.source ?? "administrator";
+  const set =
+    source === "administrator" ? settings.secretSet(when) : settings.secretSealedFrom(source, when);
+  if (setting.expiresAt === null || setting.expiresAt === undefined) {
+    return set;
+  }
+  const expires = formatInstant(setting.expiresAt, language);
+  return `${set} · ${
+    Date.parse(setting.expiresAt) <= Date.now()
+      ? settings.secretExpired(expires)
+      : settings.secretExpires(expires)
+  }`;
+}
+
+/** Whom a role may go to (ADR-0072): everyone, a project's members, a person, or a plugin. */
+type GrantChoice =
+  | { readonly kind: "everyone" }
+  | { readonly kind: "project"; readonly project: RestProject }
+  | { readonly kind: "person"; readonly person: RestPerson }
+  | { readonly kind: "plugin"; readonly plugin: RestPlugin }
+  | { readonly kind: "team"; readonly team: RestTeam };
+
 /** One secret: whether and when it is set, a field to set it anew with its buttons on the line. */
 function SecretRow(props: {
   readonly setting: RestPluginSetting;
@@ -793,9 +838,12 @@ function SecretRow(props: {
         </label>
         <p className="sc-settings-hint">
           {setting.set && setting.setAt !== null
-            ? settings.secretSet(formatInstant(setting.setAt, props.language))
+            ? secretStanding(settings, setting, props.language)
             : settings.secretUnset}
         </p>
+        {setting.hosts !== null && setting.hosts !== undefined && setting.hosts.length > 0 && (
+          <p className="sc-settings-hint">{settings.secretHosts(setting.hosts.join(", "))}</p>
+        )}
         {setting.description !== null && (
           <p className="sc-settings-hint">{pluginWord(setting.description, props.language)}</p>
         )}
@@ -841,12 +889,18 @@ function EnableForm(props: {
   readonly projects: readonly RestProject[];
   readonly language: string;
   readonly busy: boolean;
-  readonly onEnable: (input: RestPluginEnableInput) => void;
+  readonly onEnable: (
+    input: RestPluginEnableInput,
+    grants: readonly { readonly plugin: string; readonly role: string }[],
+  ) => void;
 }) {
   const words = useWords();
   const settings = words.plugins.settings;
   const { detail, language } = props;
   const optional = detail.optionalCapabilities ?? [];
+  // The roles the plugin asks of other plugins (ADR-0072): granted on the way where ticked.
+  const asks = (detail.asks ?? []).filter((ask) => ask.state !== "granted");
+  const [askedNow, setAskedNow] = useState<ReadonlySet<string>>(() => new Set());
   const [consented, setConsented] = useState<ReadonlySet<string>>(
     () => new Set((detail.consent ?? []).filter((capability) => optional.includes(capability))),
   );
@@ -883,16 +937,21 @@ function EnableForm(props: {
         : chosen.length > 0;
   const submit = (event: FormEvent) => {
     event.preventDefault();
-    props.onEnable({
-      consent: [...detail.capabilities, ...consented],
-      board:
-        boardMode === "none"
-          ? null
-          : boardMode === "create"
-            ? { create: { key: boardKey, name: boardName, description: boardDescription } }
-            : { project: chosen },
-      projects: allProjects ? "all" : [...onProjects],
-    });
+    props.onEnable(
+      {
+        consent: [...detail.capabilities, ...consented],
+        board:
+          boardMode === "none"
+            ? null
+            : boardMode === "create"
+              ? { create: { key: boardKey, name: boardName, description: boardDescription } }
+              : { project: chosen },
+        projects: allProjects ? "all" : [...onProjects],
+      },
+      asks
+        .filter((ask) => ask.state === "ungranted" && askedNow.has(`${ask.plugin}:${ask.role}`))
+        .map((ask) => ({ plugin: ask.plugin, role: ask.role })),
+    );
   };
   return (
     <form className="sc-form sc-plugin-enable" onSubmit={submit} aria-label={settings.enable}>
@@ -1024,18 +1083,16 @@ function EnableForm(props: {
                 <label className="sc-field-label" htmlFor={ids.choose}>
                   {settings.boardChoose}
                 </label>
-                <select
+                <Picker
                   id={ids.choose}
-                  className="sc-input"
-                  value={chosen}
-                  onChange={(event) => setChosen(event.target.value)}
-                >
-                  {props.projects.map((project) => (
-                    <option key={project.key} value={project.key}>
-                      {project.name} ({project.key})
-                    </option>
-                  ))}
-                </select>
+                  value={props.projects.find((project) => project.key === chosen)}
+                  search={projectsSearch(props.projects)}
+                  keyOf={(project) => project.key}
+                  render={(project) => `${project.name} (${project.key})`}
+                  label={settings.boardChoose}
+                  placeholder={settings.boardChoose}
+                  onChange={(project) => setChosen(project?.key ?? "")}
+                />
               </div>
             </div>
           )}
@@ -1078,6 +1135,44 @@ function EnableForm(props: {
         )}
       </div>
       <div className="sc-plugin-group">
+        {asks.length > 0 && (
+          <div className="sc-plugin-group">
+            <h3 className="sc-plugin-group-title">{settings.asks}</h3>
+            <p className="sc-settings-hint">{settings.asksHint}</p>
+            <ul className="sc-plugin-ticks">
+              {asks.map((ask) => {
+                const id = `${ask.plugin}:${ask.role}`;
+                return (
+                  <TickRow
+                    key={id}
+                    checked={ask.state === "ungranted" && askedNow.has(id)}
+                    onChange={
+                      ask.state === "ungranted"
+                        ? (checked) =>
+                            setAskedNow((current) => {
+                              const next = new Set(current);
+                              if (checked) {
+                                next.add(id);
+                              } else {
+                                next.delete(id);
+                              }
+                              return next;
+                            })
+                        : undefined
+                    }
+                    locked={ask.state === "unavailable"}
+                    name={`${ask.role} (${ask.plugin})`}
+                    under={
+                      ask.state === "unavailable"
+                        ? settings.askUnavailable(ask.plugin)
+                        : pluginWord(ask.why, language)
+                    }
+                  />
+                );
+              })}
+            </ul>
+          </div>
+        )}
         <div className="sc-form-actions">
           <Button type="submit" variant="primary" disabled={props.busy || !boardReady}>
             {settings.enable}
@@ -1096,6 +1191,12 @@ function holderOf(grant: RestPluginGrant, words: Messages["plugins"]["settings"]
   if (grant.project !== null) {
     return words.grantMembersOf(grant.project.name);
   }
+  if (grant.plugin !== null && grant.plugin !== undefined) {
+    return words.grantPlugin(grant.plugin);
+  }
+  if (grant.team !== null && grant.team !== undefined) {
+    return words.grantTeam(grant.team.name);
+  }
   if (grant.person !== null) {
     return personName(grant.person);
   }
@@ -1119,13 +1220,17 @@ function RoleRow(props: {
   readonly grants: readonly RestPluginGrant[];
   readonly projects: readonly RestProject[];
   readonly people: readonly RestPerson[];
+  /** The other plugins that are enabled, to hold the role as themselves (ADR-0072). */
+  readonly plugins: readonly RestPlugin[];
+  /** The teams, whose members hold the role granted to one (ADR-0073). */
+  readonly teams: readonly RestTeam[];
   readonly language: string;
   readonly busy: boolean;
   readonly onGrant: (input: RestPluginGrantInput) => void;
   readonly onRevoke: (id: string) => void;
 }) {
   const settings = useWords().plugins.settings;
-  const [whom, setWhom] = useState("");
+  const [whom, setWhom] = useState<GrantChoice | undefined>(undefined);
   const id = useId();
   const { role, grants } = props;
   const everyoneHas = grants.some((grant) => grant.everyone);
@@ -1135,21 +1240,76 @@ function RoleRow(props: {
   const peopleWith = new Set(
     grants.flatMap((grant) => (grant.person === null ? [] : [grant.person.id])),
   );
+  const pluginsWith = new Set(
+    grants.flatMap((grant) =>
+      grant.plugin === null || grant.plugin === undefined ? [] : [grant.plugin],
+    ),
+  );
+  const plugins = props.plugins.filter((plugin) => !pluginsWith.has(plugin.key));
+  const teamsWith = new Set(
+    grants.flatMap((grant) =>
+      grant.team === null || grant.team === undefined ? [] : [grant.team.key],
+    ),
+  );
+  const teams = props.teams.filter((team) => !teamsWith.has(team.key));
   const projects = props.projects.filter((project) => !projectsWith.has(project.key));
   const people = props.people.filter(
     (person) => person.status === "active" && !peopleWith.has(person.id),
   );
   const description = pluginWord(role.description, props.language);
+  // Whom the role may go to, searched for as one list (ADR-0037): everyone where it may, then
+  // the projects, the people and the plugins without it.
+  const choices: readonly GrantChoice[] = [
+    ...(!props.isDefault && !everyoneHas ? [{ kind: "everyone" as const }] : []),
+    ...projects.map((project) => ({ kind: "project" as const, project })),
+    ...people.map((person) => ({ kind: "person" as const, person })),
+    ...plugins.map((plugin) => ({ kind: "plugin" as const, plugin })),
+    ...teams.map((team) => ({ kind: "team" as const, team })),
+  ];
+  const choiceWords = (choice: GrantChoice): string => {
+    switch (choice.kind) {
+      case "everyone":
+        return settings.grantEveryone;
+      case "project":
+        return settings.grantMembersOf(choice.project.name);
+      case "person":
+        return personChoice(choice.person);
+      case "team":
+        return settings.grantTeam(choice.team.name);
+      case "plugin":
+        return `${settings.grantPlugin(choice.plugin.key)} · ${pluginWord(choice.plugin.name, props.language)}`;
+    }
+  };
+  const findWhom = listSearch(choices, (choice, typed) =>
+    choiceWords(choice).toLowerCase().includes(typed),
+  );
+  const keyOfChoice = (choice: GrantChoice): string =>
+    choice.kind === "everyone"
+      ? "everyone"
+      : choice.kind === "project"
+        ? `project:${choice.project.key}`
+        : choice.kind === "person"
+          ? `person:${choice.person.id}`
+          : choice.kind === "team"
+            ? `team:${choice.team.key}`
+            : `plugin:${choice.plugin.key}`;
   const submit = (event: FormEvent) => {
     event.preventDefault();
-    if (whom === "everyone") {
+    if (whom === undefined) {
+      return;
+    }
+    if (whom.kind === "everyone") {
       props.onGrant({ role: role.key, everyone: true });
-    } else if (whom.startsWith("project:")) {
-      props.onGrant({ role: role.key, project: whom.slice("project:".length) });
-    } else if (whom.startsWith("person:")) {
-      props.onGrant({ role: role.key, person: whom.slice("person:".length) });
+    } else if (whom.kind === "project") {
+      props.onGrant({ role: role.key, project: whom.project.key });
+    } else if (whom.kind === "person") {
+      props.onGrant({ role: role.key, person: whom.person.id });
+    } else if (whom.kind === "team") {
+      props.onGrant({ role: role.key, team: whom.team.key });
+    } else {
+      props.onGrant({ role: role.key, plugin: whom.plugin.key });
     }
-    setWhom("");
+    setWhom(undefined);
   };
   return (
     <li className="sc-plugin-role">
@@ -1158,30 +1318,28 @@ function RoleRow(props: {
           {pluginWord(role.name, props.language)}
           <code className="sc-plugin-role-key">{role.key}</code>
           {props.isDefault && <Badge tone="accent">{settings.roleDefault}</Badge>}
+          {role.follows === "reports" && <Badge tone="accent">{settings.roleManagers}</Badge>}
         </p>
         {description !== "" && <p className="sc-settings-hint">{description}</p>}
       </div>
       <div>
-        <div className="sc-plugin-holders">
-          {props.isDefault && (
-            <span className="sc-plugin-holder sc-plugin-holder-fixed">{settings.everyMember}</span>
+        <div className="sc-chips sc-plugin-holders">
+          {props.isDefault && <Chip className="sc-plugin-holder">{settings.everyMember}</Chip>}
+          {role.follows === "reports" && (
+            <Chip className="sc-plugin-holder">{settings.whoeverManages}</Chip>
           )}
           {grants.map((grant) => {
             const holder = holderOf(grant, settings);
             return (
-              <span key={grant.id} className="sc-plugin-holder">
+              <Chip
+                key={grant.id}
+                className="sc-plugin-holder"
+                onRemove={() => props.onRevoke(grant.id)}
+                removeLabel={`${settings.revoke}: ${holder}`}
+                disabled={props.busy}
+              >
                 {holder}
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  disabled={props.busy}
-                  onClick={() => props.onRevoke(grant.id)}
-                  aria-label={`${settings.revoke}: ${holder}`}
-                  title={settings.revoke}
-                >
-                  ×
-                </Button>
-              </span>
+              </Chip>
             );
           })}
         </div>
@@ -1189,36 +1347,18 @@ function RoleRow(props: {
           <label htmlFor={id} className="sc-visually-hidden">
             {settings.grantWhom}
           </label>
-          <select
+          <Picker
             id={id}
-            className="sc-input sc-plugin-grant-input"
             value={whom}
-            onChange={(event) => setWhom(event.target.value)}
-          >
-            <option value="">{settings.grantWhom}</option>
-            {!props.isDefault && !everyoneHas && (
-              <option value="everyone">{settings.grantEveryone}</option>
-            )}
-            {projects.length > 0 && (
-              <optgroup label={settings.grantProjects}>
-                {projects.map((project) => (
-                  <option key={project.key} value={`project:${project.key}`}>
-                    {project.name}
-                  </option>
-                ))}
-              </optgroup>
-            )}
-            {people.length > 0 && (
-              <optgroup label={settings.grantPeople}>
-                {people.map((person) => (
-                  <option key={person.id} value={`person:${person.id}`}>
-                    {personChoice(person)}
-                  </option>
-                ))}
-              </optgroup>
-            )}
-          </select>
-          <Button type="submit" disabled={props.busy || whom === ""}>
+            search={findWhom}
+            keyOf={keyOfChoice}
+            render={choiceWords}
+            label={settings.grantWhom}
+            placeholder={settings.grantWhom}
+            disabled={props.busy}
+            onChange={setWhom}
+          />
+          <Button type="submit" disabled={props.busy || whom === undefined}>
             {settings.grant}
           </Button>
         </form>
@@ -1227,19 +1367,33 @@ function RoleRow(props: {
   );
 }
 
+/** Another plugin by the name it gives itself in the person's language, or its key where the page does not know it. */
+function pluginNameOf(plugins: readonly RestPlugin[], key: string, language: string): string {
+  const found = plugins.find((plugin) => plugin.key === key);
+  return found === undefined ? key : pluginWord(found.name, language);
+}
+
 /** The roles the plugin declares, each with who holds it; a plugin without roles is every member's. */
 function RolesSection(props: {
   readonly detail: RestPluginDetail;
   readonly projects: readonly RestProject[];
   readonly people: readonly RestPerson[];
+  readonly plugins: readonly RestPlugin[];
+  readonly teams: readonly RestTeam[];
   readonly language: string;
   readonly busy: boolean;
   readonly onGrant: (input: RestPluginGrantInput) => void;
   readonly onRevoke: (id: string) => void;
+  /** Grants a role this plugin asks of another plugin (ADR-0072): the other plugin's key, and the role. */
+  readonly onGrantAsked: (plugin: string, role: string) => void;
 }) {
   const settings = useWords().plugins.settings;
   const { detail } = props;
   const grants = detail.grants ?? [];
+  const others = props.plugins.filter(
+    (plugin) => plugin.state === "enabled" && plugin.key !== detail.key,
+  );
+  const asks = detail.asks ?? [];
   return (
     <section className="sc-panel" aria-label={settings.roles}>
       <h2 className="sc-section-title">{settings.roles}</h2>
@@ -1255,6 +1409,8 @@ function RolesSection(props: {
               grants={grants.filter((grant) => grant.role === role.key)}
               projects={props.projects}
               people={props.people}
+              plugins={others}
+              teams={props.teams}
               language={props.language}
               busy={props.busy}
               onGrant={props.onGrant}
@@ -1263,6 +1419,39 @@ function RolesSection(props: {
           ))}
         </ul>
       )}
+      {asks.length > 0 && (
+        <div className="sc-plugin-group">
+          <h3 className="sc-plugin-group-title">{settings.asks}</h3>
+          <p className="sc-settings-hint">{settings.asksHint}</p>
+          <ul className="sc-plugin-roles">
+            {asks.map((ask) => (
+              <li key={`${ask.plugin}:${ask.role}`} className="sc-plugin-role">
+                <div>
+                  <p className="sc-plugin-role-name">
+                    {pluginNameOf(props.plugins, ask.plugin, props.language)}
+                    <code className="sc-plugin-role-key">{ask.role}</code>
+                    {ask.state === "granted" && <Badge tone="accent">{settings.askGranted}</Badge>}
+                  </p>
+                  <p className="sc-settings-hint">{pluginWord(ask.why, props.language)}</p>
+                </div>
+                <div>
+                  {ask.state === "unavailable" ? (
+                    <span className="sc-settings-hint">{settings.askUnavailable(ask.plugin)}</span>
+                  ) : ask.state === "ungranted" ? (
+                    <Button
+                      size="sm"
+                      disabled={props.busy}
+                      onClick={() => props.onGrantAsked(ask.plugin, ask.role)}
+                    >
+                      {settings.askGrantNow}
+                    </Button>
+                  ) : null}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </section>
   );
 }
@@ -1330,6 +1519,14 @@ export function PluginSettingsView(props: PluginSettingsViewProps) {
           </ul>
         </Callout>
       )}
+      {detail.needsTimeZone === true && (
+        <Callout
+          tone="warning"
+          action={<LinkButton href={settingsHref("workspace")}>{settings.setTimeZone}</LinkButton>}
+        >
+          {settings.needsTimeZone}
+        </Callout>
+      )}
       <Overview
         detail={detail}
         projects={props.projects}
@@ -1345,7 +1542,14 @@ export function PluginSettingsView(props: PluginSettingsViewProps) {
             projects={props.projects}
             language={language}
             busy={busy}
-            onEnable={(input) => change(() => plugin.enable(input))}
+            onEnable={(input, grants) =>
+              change(async () => {
+                await plugin.enable(input);
+                for (const grant of grants) {
+                  await client.plugin(grant.plugin).grant({ role: grant.role, plugin: detail.key });
+                }
+              })
+            }
           />
         </section>
       )}
@@ -1379,6 +1583,11 @@ export function PluginSettingsView(props: PluginSettingsViewProps) {
       {detail.grants !== null && (
         <RolesSection
           detail={detail}
+          plugins={props.plugins ?? []}
+          teams={props.teams ?? []}
+          onGrantAsked={(other, role) =>
+            change(() => client.plugin(other).grant({ role, plugin: detail.key }))
+          }
           projects={props.projects}
           people={props.people}
           language={language}