@redsift/ds-mcp-server 12.3.1-muiv6-alpha.2

package/data/demos/patterns/server-datagrid-page/example.tsx

@@ -0,0 +1,757 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Button, Flexbox, Icon, IconButtonLink, Pill } from '@redsift/design-system';
+import { mdiArrowRight, mdiCheck, mdiClose, mdiShieldCheck, mdiLinkVariant, mdiLeaf } from '@redsift/icons';
+import {
+  GridColDef,
+  GridFilterModel,
+  GridRenderCellParams,
+  GridRowSelectionModel,
+  GridSortModel,
+} from '@mui/x-data-grid-pro';
+import {
+  GridToolbarContainer,
+  GridToolbarColumnsButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
+  GridToolbarExport,
+  GridToolbarQuickFilter,
+} from '@mui/x-data-grid-pro';
+
+// -- Toolbar ----------------------------------------------------------------
+
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <Flexbox gap="0">
+      <GridToolbarFilterButton />
+      <GridToolbarColumnsButton />
+      <GridToolbarDensitySelector />
+      <GridToolbarExport />
+      <Flexbox marginLeft="8px">
+        <GridToolbarQuickFilter />
+      </Flexbox>
+    </Flexbox>
+  </GridToolbarContainer>
+);
+
+// -- Tag options for the rsMultipleSelect column ----------------------------
+
+const TAG_OPTIONS = [
+  { value: 'production', label: 'Production' },
+  { value: 'staging', label: 'Staging' },
+  { value: 'legacy', label: 'Legacy' },
+  { value: 'infrastructure', label: 'Infrastructure' },
+  { value: 'cdn', label: 'CDN' },
+  { value: 'api', label: 'API' },
+  { value: 'auth', label: 'Auth' },
+  { value: 'ca', label: 'CA' },
+  { value: 'email', label: 'Email' },
+  { value: 'ecommerce', label: 'Ecommerce' },
+  { value: 'wildcard', label: 'Wildcard' },
+  { value: 'monitoring', label: 'Monitoring' },
+  { value: 'vpn', label: 'VPN' },
+  { value: 'billing', label: 'Billing' },
+  { value: 'ci', label: 'CI' },
+  { value: 'cms', label: 'CMS' },
+];
+
+// -- Full dataset (lives "on the server") -----------------------------------
+
+type Row = {
+  id: string;
+  label: string;
+  active: boolean;
+  status: string;
+  category: string;
+  score: number;
+  expiry: string;
+  tags: string[];
+};
+
+const DATABASE: Row[] = [
+  {
+    id: 'a3f8c1d2',
+    label: 'cdn.acme.com',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 92,
+    expiry: '2027-06-15T00:00:00Z',
+    tags: ['production', 'cdn'],
+  },
+  {
+    id: 'b7e2d4f6',
+    label: 'api.globex.io',
+    active: true,
+    status: 'warning',
+    category: 'primary',
+    score: 74,
+    expiry: '2026-05-01T12:00:00Z',
+    tags: ['production', 'api'],
+  },
+  {
+    id: 'c1a9b5e3',
+    label: '*.staging.acme.com',
+    active: true,
+    status: 'critical',
+    category: 'secondary',
+    score: 45,
+    expiry: '2026-03-28T23:59:59Z',
+    tags: ['staging'],
+  },
+  {
+    id: 'd4f0c8a7',
+    label: 'mail.initech.dev',
+    active: false,
+    status: 'expired',
+    category: 'tertiary',
+    score: 12,
+    expiry: '2025-11-30T08:45:00Z',
+    tags: ['legacy', 'email'],
+  },
+  {
+    id: 'e6b3d1f9',
+    label: 'Acme Root CA',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 100,
+    expiry: '2035-06-01T00:00:00Z',
+    tags: ['infrastructure'],
+  },
+  {
+    id: 'f2c7a5e8',
+    label: 'Issuing CA G2',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 98,
+    expiry: '2031-12-31T23:59:59Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'a8d4f6b1',
+    label: 'auth.globex.io',
+    active: false,
+    status: 'revoked',
+    category: 'primary',
+    score: 0,
+    expiry: '2026-09-10T17:30:00Z',
+    tags: ['production', 'auth'],
+  },
+  {
+    id: 'b5e9c3a2',
+    label: 'shop.initech.dev',
+    active: true,
+    status: 'warning',
+    category: 'tertiary',
+    score: 63,
+    expiry: '2026-04-20T00:00:00Z',
+    tags: ['ecommerce'],
+  },
+  {
+    id: 'c0f7d2b4',
+    label: 'Sectigo DV CA',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 95,
+    expiry: '2030-01-01T00:00:00Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'd9a1e5c6',
+    label: 'vault.initech.dev',
+    active: false,
+    status: 'expired',
+    category: 'primary',
+    score: 8,
+    expiry: '2024-07-22T14:00:00Z',
+    tags: ['legacy'],
+  },
+  {
+    id: 'e3b8f0d7',
+    label: '*.acme.com',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 88,
+    expiry: '2027-08-05T12:00:00Z',
+    tags: ['production', 'wildcard'],
+  },
+  {
+    id: 'f6c2a4e1',
+    label: 'portal.globex.io',
+    active: true,
+    status: 'critical',
+    category: 'tertiary',
+    score: 51,
+    expiry: '2026-03-26T10:00:00Z',
+    tags: [],
+  },
+  {
+    id: 'a1d7f3b9',
+    label: 'logs.initech.dev',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 81,
+    expiry: '2028-02-14T00:00:00Z',
+    tags: ['production', 'monitoring'],
+  },
+  {
+    id: 'b4e8c6a3',
+    label: 'cms.acme.com',
+    active: false,
+    status: 'expired',
+    category: 'tertiary',
+    score: 5,
+    expiry: '2025-06-10T00:00:00Z',
+    tags: ['legacy', 'cms'],
+  },
+  {
+    id: 'c7f2d0b5',
+    label: 'DigiCert EV CA',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 99,
+    expiry: '2033-09-15T00:00:00Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'd0a3e9f1',
+    label: 'vpn.globex.io',
+    active: true,
+    status: 'warning',
+    category: 'primary',
+    score: 68,
+    expiry: '2026-04-12T00:00:00Z',
+    tags: ['production', 'vpn'],
+  },
+  {
+    id: 'e5b1c4d8',
+    label: '*.initech.dev',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 85,
+    expiry: '2027-11-20T00:00:00Z',
+    tags: ['production', 'wildcard'],
+  },
+  {
+    id: 'f8c6a2e7',
+    label: 'docs.acme.com',
+    active: true,
+    status: 'active',
+    category: 'tertiary',
+    score: 90,
+    expiry: '2028-07-01T00:00:00Z',
+    tags: ['production'],
+  },
+  {
+    id: 'a2d5f9b0',
+    label: 'billing.globex.io',
+    active: false,
+    status: 'revoked',
+    category: 'primary',
+    score: 0,
+    expiry: '2026-01-15T00:00:00Z',
+    tags: ['production', 'billing'],
+  },
+  {
+    id: 'b6e0c3a1',
+    label: 'staging.initech.dev',
+    active: true,
+    status: 'critical',
+    category: 'secondary',
+    score: 42,
+    expiry: '2026-03-27T00:00:00Z',
+    tags: ['staging', 'ci'],
+  },
+  {
+    id: 'c9f4d7b2',
+    label: "Let's Encrypt R3",
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 97,
+    expiry: '2030-09-30T00:00:00Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'd3a8e1f5',
+    label: 'analytics.acme.com',
+    active: true,
+    status: 'warning',
+    category: 'tertiary',
+    score: 59,
+    expiry: '2026-04-05T00:00:00Z',
+    tags: ['production', 'monitoring'],
+  },
+  {
+    id: 'e7b2c5d9',
+    label: 'sso.globex.io',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 91,
+    expiry: '2027-12-01T00:00:00Z',
+    tags: ['production', 'auth'],
+  },
+  {
+    id: 'f0c9a6e4',
+    label: 'wiki.initech.dev',
+    active: false,
+    status: 'expired',
+    category: 'tertiary',
+    score: 3,
+    expiry: '2024-12-31T00:00:00Z',
+    tags: ['legacy'],
+  },
+  {
+    id: 'a4d1f8b6',
+    label: 'proxy.acme.com',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 83,
+    expiry: '2028-03-22T00:00:00Z',
+    tags: ['production', 'cdn'],
+  },
+  {
+    id: 'b9e5c0a8',
+    label: 'dev.globex.io',
+    active: true,
+    status: 'critical',
+    category: 'secondary',
+    score: 38,
+    expiry: '2026-03-25T00:00:00Z',
+    tags: ['staging'],
+  },
+  {
+    id: 'c2f6d3b7',
+    label: 'GTS Root R1',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 100,
+    expiry: '2036-06-22T00:00:00Z',
+    tags: ['infrastructure'],
+  },
+];
+
+// -- Server-side filter logic -----------------------------------------------
+
+const matchesFilter = (row: Row, item: GridFilterModel['items'][number]): boolean => {
+  const { field, operator, value } = item;
+  if (!operator) return true;
+
+  const raw = row[field as keyof Row];
+
+  // -- String operators --
+  if (typeof raw === 'string') {
+    const s = raw.toLowerCase();
+    const v = ((value as string) || '').toLowerCase();
+    switch (operator) {
+      case 'contains':
+        return s.includes(v);
+      case 'equals':
+        return s === v;
+      case 'startsWith':
+        return s.startsWith(v);
+      case 'endsWith':
+        return s.endsWith(v);
+      case 'isEmpty':
+        return s === '';
+      case 'isNotEmpty':
+        return s !== '';
+      case 'is':
+        return s === v;
+      case 'not':
+        return s !== v;
+      case 'isAnyOf':
+        return Array.isArray(value) && value.some((o: string) => o.toLowerCase() === s);
+      default:
+        return true;
+    }
+  }
+
+  // -- Number operators --
+  if (typeof raw === 'number') {
+    const n = Number(value);
+    switch (operator) {
+      case '=':
+        return raw === n;
+      case '!=':
+        return raw !== n;
+      case '>':
+        return raw > n;
+      case '>=':
+        return raw >= n;
+      case '<':
+        return raw < n;
+      case '<=':
+        return raw <= n;
+      case 'isEmpty':
+        return false;
+      case 'isNotEmpty':
+        return true;
+      default:
+        return true;
+    }
+  }
+
+  // -- Boolean operators --
+  if (typeof raw === 'boolean') {
+    if (operator === 'is') return String(raw) === value;
+    return true;
+  }
+
+  // -- Array (tags) operators --
+  if (Array.isArray(raw)) {
+    switch (operator) {
+      case 'isAnyOf':
+        return Array.isArray(value) && value.some((v: string) => raw.includes(v));
+      case 'is':
+        return raw.includes(value as string);
+      case 'not':
+        return !raw.includes(value as string);
+      case 'isEmpty':
+        return raw.length === 0;
+      case 'isNotEmpty':
+        return raw.length > 0;
+      default:
+        return true;
+    }
+  }
+
+  return true;
+};
+
+// -- Server-side sort logic -------------------------------------------------
+
+const compareRows = (a: Row, b: Row, field: string, direction: 'asc' | 'desc'): number => {
+  let av = a[field as keyof Row];
+  let bv = b[field as keyof Row];
+
+  // Date fields — compare as timestamps
+  if (field === 'expiry') {
+    av = new Date(av as string).getTime() as unknown as string;
+    bv = new Date(bv as string).getTime() as unknown as string;
+  }
+
+  let cmp = 0;
+  if (av == null && bv == null) cmp = 0;
+  else if (av == null) cmp = -1;
+  else if (bv == null) cmp = 1;
+  else if (typeof av === 'string' && typeof bv === 'string') cmp = av.localeCompare(bv);
+  else if (typeof av === 'number' && typeof bv === 'number') cmp = av - bv;
+  else if (typeof av === 'boolean' && typeof bv === 'boolean') cmp = Number(av) - Number(bv);
+  else cmp = String(av).localeCompare(String(bv));
+
+  return direction === 'desc' ? -cmp : cmp;
+};
+
+// -- Fake fetch: applies filter → sort → paginate on the "server" -----------
+
+type FetchParams = {
+  page: number;
+  pageSize: number;
+  sortModel: GridSortModel;
+  filterModel: GridFilterModel;
+  quickFilterText?: string;
+};
+
+type FetchResult = { rows: Row[]; totalRows: number };
+
+const fakeFetch = ({ page, pageSize, sortModel, filterModel, quickFilterText }: FetchParams): Promise<FetchResult> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      let filtered = [...DATABASE];
+
+      // Apply column filters
+      if (filterModel.items.length > 0) {
+        const logicOperator = filterModel.logicOperator || 'and';
+        filtered = filtered.filter((row) => {
+          const results = filterModel.items
+            .filter((it) => it.value !== undefined || ['isEmpty', 'isNotEmpty'].includes(it.operator || ''))
+            .map((it) => matchesFilter(row, it));
+          if (results.length === 0) return true;
+          return logicOperator === 'and' ? results.every(Boolean) : results.some(Boolean);
+        });
+      }
+
+      // Apply quick filter (search across all string fields)
+      if (quickFilterText) {
+        const q = quickFilterText.toLowerCase();
+        filtered = filtered.filter((row) =>
+          [row.id, row.label, row.status, row.category, ...row.tags].some((v) => v.toLowerCase().includes(q))
+        );
+      }
+
+      // Apply sorting
+      if (sortModel.length > 0) {
+        filtered.sort((a, b) => {
+          for (const { field, sort } of sortModel) {
+            const cmp = compareRows(a, b, field, sort || 'asc');
+            if (cmp !== 0) return cmp;
+          }
+          return 0;
+        });
+      }
+
+      const totalRows = filtered.length;
+      const start = page * pageSize;
+      const rows = filtered.slice(start, start + pageSize);
+
+      resolve({ rows, totalRows });
+    }, 400);
+  });
+
+// -- Helpers ----------------------------------------------------------------
+
+const statusColor = (v: string) => {
+  switch (v) {
+    case 'active':
+      return 'success';
+    case 'warning':
+      return 'warning';
+    case 'critical':
+      return 'error';
+    case 'expired':
+      return 'grey';
+    case 'revoked':
+      return 'error-dark';
+    default:
+      return 'grey';
+  }
+};
+
+const categoryIcon = (v: string) => {
+  switch (v) {
+    case 'primary':
+      return { icon: mdiShieldCheck, color: 'success' };
+    case 'secondary':
+      return { icon: mdiLinkVariant, color: 'info' };
+    case 'tertiary':
+      return { icon: mdiLeaf, color: 'grey' };
+    default:
+      return { icon: mdiLeaf, color: 'grey' };
+  }
+};
+
+const formatDate = (d: Date) => (isNaN(d.getTime()) ? '—' : d.toISOString().replace('T', ' ').slice(0, 19));
+
+// -- Columns ----------------------------------------------------------------
+
+const columns: GridColDef[] = [
+  {
+    field: 'id',
+    headerName: 'ID',
+    width: 100,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell style={{ fontFamily: 'monospace' }}>{value}</TextCell>,
+  },
+  {
+    field: 'label',
+    headerName: 'Label',
+    flex: 2,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
+  },
+  {
+    field: 'active',
+    headerName: 'Active',
+    width: 80,
+    type: 'boolean',
+    renderCell: ({ value }: GridRenderCellParams) =>
+      value ? (
+        <Icon icon={mdiCheck} color="success" size="small" />
+      ) : (
+        <Icon icon={mdiClose} color="grey" size="small" />
+      ),
+  },
+  {
+    field: 'status',
+    headerName: 'Status',
+    flex: 1,
+    type: 'rsSingleSelect' as string,
+    valueOptions: [
+      { value: 'active', label: 'Active' },
+      { value: 'warning', label: 'Warning' },
+      { value: 'critical', label: 'Critical' },
+      { value: 'expired', label: 'Expired' },
+      { value: 'revoked', label: 'Revoked' },
+    ],
+    renderCell: ({ value }: GridRenderCellParams) => <Pill color={statusColor(value)}>{value}</Pill>,
+  } as GridColDef,
+  {
+    field: 'category',
+    headerName: 'Category',
+    width: 110,
+    type: 'rsSingleSelect' as string,
+    valueOptions: [
+      { value: 'primary', label: 'Primary' },
+      { value: 'secondary', label: 'Secondary' },
+      { value: 'tertiary', label: 'Tertiary' },
+    ],
+    renderCell: ({ value }: GridRenderCellParams) => {
+      const cfg = categoryIcon(value);
+      return <Icon icon={cfg.icon} color={cfg.color} size="small" />;
+    },
+  } as GridColDef,
+  {
+    field: 'score',
+    headerName: 'Score',
+    width: 80,
+    type: 'rsNumber' as string,
+  },
+  {
+    field: 'expiry',
+    headerName: 'Expiry',
+    width: 180,
+    type: 'date',
+    valueGetter: (value: unknown) => new Date(value as string),
+    renderCell: ({ value }: GridRenderCellParams) => {
+      if (!value) return <TextCell>—</TextCell>;
+      const d = value as Date;
+      const isPast = d < new Date();
+      return <TextCell style={isPast ? { color: 'var(--redsift-color-red-n)' } : undefined}>{formatDate(d)}</TextCell>;
+    },
+  },
+  {
+    field: 'tags',
+    headerName: 'Tags',
+    flex: 2,
+    type: 'rsMultipleSelect' as string,
+    valueOptions: TAG_OPTIONS,
+    sortable: false,
+    renderCell: ({ value }: GridRenderCellParams) => {
+      const arr = value as string[];
+      if (!arr || arr.length === 0) return <TextCell>—</TextCell>;
+      return (
+        <Flexbox gap="4px" flexWrap="wrap" alignItems="center">
+          {arr.map((tag: string) => (
+            <Pill key={tag} color="blue">
+              {tag}
+            </Pill>
+          ))}
+        </Flexbox>
+      );
+    },
+  } as GridColDef,
+  {
+    field: 'actions',
+    headerName: '',
+    type: 'actions',
+    width: 56,
+    hideable: false,
+    sortable: false,
+    filterable: false,
+    renderCell: ({ row }: GridRenderCellParams) => (
+      <IconButtonLink
+        href="/patterns/server-datagrid-page"
+        icon={mdiArrowRight}
+        color="info"
+        aria-label={`View ${row.label}`}
+      />
+    ),
+  },
+];
+
+// -- Component --------------------------------------------------------------
+
+export default () => {
+  const [rows, setRows] = useState<Row[]>([]);
+  const [totalRows, setTotalRows] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [sortModel, setSortModel] = useState<GridSortModel>([]);
+  const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+
+  // Track the quick filter text extracted from filterModel
+  const quickFilterText = (filterModel as { quickFilterValues?: string[] }).quickFilterValues?.join(' ') || '';
+
+  // Debounce ref for filter changes
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const fetchData = useCallback(() => {
+    setLoading(true);
+    fakeFetch({ page, pageSize, sortModel, filterModel, quickFilterText }).then(({ rows: r, totalRows: t }) => {
+      setRows(r);
+      setTotalRows(t);
+      setLoading(false);
+    });
+  }, [page, pageSize, sortModel, filterModel, quickFilterText]);
+
+  // Fetch on mount and whenever params change
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Debounced filter handler
+  const handleFilterModelChange = useCallback((model: GridFilterModel) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      setFilterModel(model);
+      setPage(0); // Reset to first page on filter change
+    }, 300);
+  }, []);
+
+  const handleSortModelChange = useCallback((model: GridSortModel) => {
+    setSortModel(model);
+    setPage(0);
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Flexbox flexDirection="column" gap="0px">
+        {/* Bulk actions bar — visible when rows are selected */}
+        {selectionModel.length > 0 && (
+          <Flexbox gap="8px" alignItems="center" style={{ padding: '8px 0' }}>
+            <Pill color="info">{selectionModel.length} selected</Pill>
+            <Button variant="secondary" onClick={() => console.log('Selected:', selectionModel)}>
+              Log Selection
+            </Button>
+            <Button variant="secondary" color="error" onClick={() => console.log('Delete:', selectionModel)}>
+              Delete
+            </Button>
+          </Flexbox>
+        )}
+
+        <DataGrid
+          autoHeight
+          pagination
+          paginationMode="server"
+          sortingMode="server"
+          filterMode="server"
+          loading={loading}
+          rows={rows}
+          columns={columns}
+          rowCount={totalRows}
+          paginationModel={{ page, pageSize }}
+          pageSizeOptions={[10, 25, 50]}
+          onPaginationModelChange={(model) => {
+            if (model.pageSize !== pageSize) {
+              setPageSize(model.pageSize);
+              setPage(0);
+            } else {
+              setPage(model.page);
+            }
+          }}
+          sortModel={sortModel}
+          onSortModelChange={handleSortModelChange}
+          filterModel={filterModel}
+          onFilterModelChange={handleFilterModelChange}
+          checkboxSelection
+          rowSelectionModel={selectionModel}
+          onRowSelectionModelChange={setSelectionModel}
+          slots={{ toolbar: CustomToolbar }}
+        />
+      </Flexbox>
+    </div>
+  );
+};