components/permission-matrix/permission-matrix.react.tsx

Functions

Imports

It imports components/permission-matrix/permission-matrix.ts. No module of this repo imports it.

Source

1import { useId, useState } from "react";
2import { holders, holdings, type PermMatrix, type PermView } from "./permission-matrix.ts";
3
4export interface PermissionMatrixProps {
5  matrix: PermMatrix;
6  // The table region's name and the agent cards' list name.
7  label?: string;
8  defaultView?: PermView;
9  // Controlled view, for an app that keeps it in the address.
10  view?: PermView;
11  onViewChange?: (view: PermView) => void;
12  note?: string;
13}
14
15const Check = ({ held }: { held: boolean }) => (
16  <span className="cap-perms-check" aria-hidden="true">
17    {held ? (
18      <svg viewBox="0 0 16 16" focusable="false">
19        <path fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="m3.5 8.5 3 3 6-7" />
20      </svg>
21    ) : null}
22  </span>
23);
24
25function Names({ names }: { names: string[] }) {
26  return (
27    <>
28      {names.map((n, i) => (
29        <span key={n}>
30          {i > 0 ? ", " : ""}
31          <span className="cap-mono">{n}</span>
32        </span>
33      ))}
34    </>
35  );
36}
37
38export function PermissionMatrix(props: PermissionMatrixProps) {
39  const { matrix, label = "Permissions by agent", defaultView = "agent", note } = props;
40  const id = useId();
41  const [own, setOwn] = useState<PermView>(defaultView);
42  const view = props.view ?? own;
43  const choose = (v: PermView) => {
44    setOwn(v);
45    props.onViewChange?.(v);
46  };
47  const byAgent = holdings(matrix);
48  const byPerm = holders(matrix);
49
50  return (
51    <div className="cap-perms" data-cap="permission-matrix" data-cap-ready="" data-current={view}>
52      <div className="cap-perms-bar">
53        <fieldset className="cap-seg">
54          <legend className="cap-sr-only">View</legend>
55          {(["agent", "permission"] as const).map((v) => (
56            <label key={v}>
57              <input type="radio" name={`${id}-view`} value={v} checked={view === v} onChange={() => choose(v)} />
58              {v === "agent" ? "By agent" : "By permission"}
59            </label>
60          ))}
61        </fieldset>
62        {note ? <p className="cap-perms-note">{note}</p> : null}
63      </div>
64
65      <div className="cap-perms-view" data-view="agent" hidden={view !== "agent"}>
66        <div className="cap-perms-wide">
67          <div className="cap-table-wrap" role="region" aria-label={label} tabIndex={0}>
68            <table className="cap-table">
69              <thead>
70                <tr>
71                  <th scope="col">Agent</th>
72                  {matrix.permissions.map((p) => (
73                    <th scope="col" className="cap-perms-col" key={p}>
74                      {p}
75                    </th>
76                  ))}
77                </tr>
78              </thead>
79              <tbody>
80                {matrix.agents.map((a) => (
81                  <tr key={a.name}>
82                    <th scope="row" className="cap-perms-agent cap-mono">
83                      {a.name}
84                    </th>
85                    {matrix.permissions.map((p) => {
86                      const held = a.holds.includes(p);
87                      return (
88                        <td className="cap-perms-cell" data-held={held ? "yes" : "no"} key={p}>
89                          <Check held={held} />
90                          <span className="cap-sr-only">{held ? "Yes" : "No"}</span>
91                        </td>
92                      );
93                    })}
94                  </tr>
95                ))}
96              </tbody>
97            </table>
98          </div>
99        </div>
100        <div className="cap-perms-narrow">
101          <ul className="cap-perms-cards" aria-label={label}>
102            {byAgent.map((h) => (
103              <li className="cap-perms-card" key={h.agent}>
104                <span className="cap-perms-name cap-mono">{h.agent}</span>
105                {h.held.length ? (
106                  <div className="cap-perms-holds">
107                    <span className="cap-perms-key">Holds:</span> {h.held.join(", ")}
108                  </div>
109                ) : (
110                  <div className="cap-perms-holds" data-empty="">
111                    Holds no permissions
112                  </div>
113                )}
114              </li>
115            ))}
116          </ul>
117        </div>
118      </div>
119
120      <div className="cap-perms-view" data-view="permission" hidden={view !== "permission"}>
121        <ul className="cap-perms-cards" aria-label="Agents by permission">
122          {byPerm.map((h) => (
123            <li className="cap-perms-card" key={h.permission}>
124              <span className="cap-perms-name">{h.permission}</span>
125              {h.agents.length ? (
126                <div className="cap-perms-holds">
127                  <span className="cap-perms-key">Held by:</span> <Names names={h.agents} />
128                </div>
129              ) : (
130                <div className="cap-perms-holds" data-empty="">
131                  Nobody holds this
132                </div>
133              )}
134            </li>
135          ))}
136        </ul>
137      </div>
138    </div>
139  );
140}