Policy

import { createDataGrid, policy } from '@sv5ui/datagrid';

const grid = createDataGrid<Person>({
  columns,
  data: staff,
  getRowId: (person) => String(person.id),
  features: [
    policy<Person>({
      rules: [
        { columns: ['salary'], mask: 'hide' },
        { columns: ['email'], mask: 'email' },
        { columns: ['card'], mask: 'last4' }
      ]
    })
  ]
});

const node = grid.preWindowNodes[0];
const salary = grid.columns.visible.find((column) => column.id === 'salary')!;

grid.getValue(node, salary, 'render');      // null
grid.getValue(node, salary, 'export');      // null
grid.getValue(node, salary, 'clipboard');   // null
grid.getValue(node, salary, 'search');      // null
grid.getValue(node, salary, 'facet');       // null
grid.getValue(node, salary, 'edit');        // null

// All six are covered by default. Naming a subset is how a value ends up
// masked on screen and plain in the CSV, so write it as the decision it is.
policy<Person>({
  rules: [{ columns: ['salary'], mask: 'hide', purposes: ['render'] }]
});

import { policy } from '@sv5ui/datagrid';

policy<Person>({
  rules: [
    { columns: ['card'], mask: 'hide' },       // null
    { columns: ['note'], mask: 'redact' },     // ••••
    { columns: ['pan'], mask: 'last4' },       // ••••1234
    { columns: ['email'], mask: 'email' },     // a••••@example.com
    { columns: ['name'], mask: 'initials' },   // A. L.

    {
      columns: ['salary'],
      mask: (value, { purpose }) =>
        purpose === 'export' ? null : `${Math.round(Number(value) / 10000)}0k`
    }
  ]
});

// A value too short to partially mask is redacted whole rather than leaking
// what little it has: last4 of '123' is ••••, not ••••123.

policy<Person>({
  rules: [
    {
      columns: ['salary', 'email'],
      mask: 'redact',
      when: ({ row }) => row?.status === 'suspended'
    },
    {
      columns: ['bonus'],
      mask: 'hide',
      // row is null where the purpose has no single row behind it, such as
      // the list a set filter offers.
      when: ({ row }) => row !== null && row.level > 3
    }
  ],
  except: (column) => column.id === 'name'
});

// The grid's own sort and column filters read the real value, so a masked
// column left sortable can still be ranked. Close the door on the column:
const columns: ColumnDef<Person>[] = [
  { id: 'name', header: 'Name', flex: 1 },
  {
    id: 'salary',
    header: 'Salary',
    type: 'currency',
    sortable: false,
    filter: false
  }
];

policy<Person>({ rules: [{ columns: ['salary'], mask: 'hide' }] });

// Or say the ranking is not a secret, and mean it:
policy<Person>({ rules, warnOnOpenDoors: false });

const grid = createDataGrid<Person>({
  columns: [
    { id: 'name', header: 'Name', editable: true },
    { id: 'email', header: 'Email', editable: true }
  ],
  data: staff,
  getRowId,
  features: [
    editing<Person>(),
    policy<Person>({ rules: [{ columns: ['email'], mask: 'email' }] })
  ]
});

// name opens an editor. email is editable and masked, so it does not open:
// an editor on a substitute would commit the substitute over the real data.

// Scoping a rule away from 'edit' re-opens the column, with the real value
// in the editor. That is a decision, so make it look like one.
policy<Person>({
  rules: [
    { columns: ['email'], mask: 'email', purposes: ['render', 'export', 'clipboard'] }
  ]
});

// The same grid, twice, against the same endpoint.

// 1. Everything is sent, and the browser hides one field.
const masked = createDataGrid<Person>({
  columns, data: [], getRowId,
  rowModel: 'server',
  features: [
    sorting(),
    policy({ rules: [{ columns: ['salary'], mask: 'hide' }] }),
    serverRowModel(peopleOver(undefined), { mode: 'infinite', placeholder })
  ]
});
// The response body still reads:
// { "id": 1, "name": "Hoang Kowalski", "salary": 127691, ... }

// 2. The field is never sent, so there is nothing to hide.
const withheld = createDataGrid<Person>({
  columns, data: [], getRowId,
  rowModel: 'server',
  features: [
    sorting(),
    serverRowModel(peopleOver(['name', 'team', 'role']), { mode: 'infinite', placeholder })
  ]
});
// { "id": 1, "name": "Hoang Kowalski", "team": "Design", "role": "Manager" }

// And on the server, where the decision belongs:
const allowed = new Set([...fields, 'id']);

// A caller who may not read a field may not order or filter by it either.
// An ordering hands back the ranking, which is most of what the number was
// protecting; a filter answers "> 120000" one bit at a time until the number
// falls out. Both are dropped, and the response says which.
const keptSort = sort.filter((entry) => allowed.has(entry.field));

return json({ rows: project(page, fields), rowCount, refused });