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

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

@@ -0,0 +1,715 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Button, Flexbox, Icon, IconButtonLink, Pill } from '@redsift/design-system';
+import { DataCard, DrilldownItem } from '@redsift/dashboard';
+import {
+  mdiArrowRight,
+  mdiCheck,
+  mdiClose,
+  mdiShieldCheck,
+  mdiLinkVariant,
+  mdiLeaf,
+  mdiCheckCircleOutline,
+  mdiShapeOutline,
+  mdiToggleSwitch,
+} from '@redsift/icons';
+import { GridColDef, GridFilterModel, GridRenderCellParams, GridRowSelectionModel } 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' },
+];
+
+// -- Row type ---------------------------------------------------------------
+
+type Row = {
+  id: string;
+  label: string;
+  active: boolean;
+  status: 'active' | 'warning' | 'critical' | 'expired' | 'revoked';
+  category: 'primary' | 'secondary' | 'tertiary';
+  score: number;
+  expiry: string;
+  tags: string[];
+};
+
+// -- 27 rows ----------------------------------------------------------------
+
+const rows: 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'],
+  },
+];
+
+// -- 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));
+
+const STATUS_VALUES = ['active', 'warning', 'critical', 'expired', 'revoked'] as const;
+const CATEGORY_VALUES = ['primary', 'secondary', 'tertiary'] as const;
+
+// -- Aggregate counts (always from the full dataset — one-way) ---------------
+
+function useAggregateCounts(allRows: Row[]) {
+  return useMemo(() => {
+    const status: Record<string, number> = {};
+    const category: Record<string, number> = {};
+    let activeCount = 0;
+    let inactiveCount = 0;
+
+    for (const row of allRows) {
+      status[row.status] = (status[row.status] || 0) + 1;
+      category[row.category] = (category[row.category] || 0) + 1;
+      if (row.active) activeCount++;
+      else inactiveCount++;
+    }
+
+    return { status, category, activeCount, inactiveCount };
+  }, [allRows]);
+}
+
+// -- Filter helpers ----------------------------------------------------------
+
+/**
+ * Read the selected values for a field from the filterModel.
+ * Returns [] for `is` / `isNot` operators — the DataCard clears in that case.
+ * Only `isAnyOf` is considered synced.
+ */
+function getSelectedFromFilterModel(filterModel: GridFilterModel, fieldName: string): string[] {
+  const item = filterModel.items.find((i) => i.field === fieldName);
+  if (!item || item.value === undefined) return [];
+  if (item.operator === 'isAnyOf') {
+    return Array.isArray(item.value) ? item.value : [item.value];
+  }
+  // For `is`, `isNot`, or any other operator → clear the card selection
+  return [];
+}
+
+/**
+ * Returns a handler that adds/removes an `isAnyOf` filter for `fieldName`.
+ * Always creates a fresh `isAnyOf` item — never preserves an incompatible operator.
+ * When `values` is empty, removes the filter item entirely.
+ */
+function updateFilterModel(filterModel: GridFilterModel, fieldName: string, values: string[]): GridFilterModel {
+  const items = filterModel.items.filter((i) => i.field !== fieldName);
+  if (values.length > 0) {
+    items.push({
+      field: fieldName,
+      id: Math.floor(Math.random() * 100000),
+      operator: 'isAnyOf',
+      value: values,
+    });
+  }
+  return { ...filterModel, items };
+}
+
+/**
+ * Returns whether the active boolean filter is set.
+ * Returns null when no compatible boolean filter exists (is/isNot with non-isAnyOf → null).
+ */
+function getActiveBooleanSelection(filterModel: GridFilterModel): boolean | null {
+  const item = filterModel.items.find((i) => i.field === 'active');
+  if (!item || item.value === undefined) return null;
+  if (item.operator === 'is') return item.value === 'true';
+  return null;
+}
+
+function updateBooleanFilter(filterModel: GridFilterModel, fieldName: string, value: boolean | null): GridFilterModel {
+  const items = filterModel.items.filter((i) => i.field !== fieldName);
+  if (value !== null) {
+    items.push({
+      field: fieldName,
+      id: Math.floor(Math.random() * 100000),
+      operator: 'is',
+      value: String(value),
+    });
+  }
+  return { ...filterModel, items };
+}
+
+// -- 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/drilldown-datagrid-page"
+        icon={mdiArrowRight}
+        color="info"
+        aria-label={`View ${row.label}`}
+      />
+    ),
+  },
+];
+
+// -- Main component ---------------------------------------------------------
+
+export default () => {
+  const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+
+  const counts = useAggregateCounts(rows);
+
+  // Derive DataCard selections from filterModel
+  const statusSelection = getSelectedFromFilterModel(filterModel, 'status');
+  const categorySelection = getSelectedFromFilterModel(filterModel, 'category');
+  // DataCard change handlers — update filterModel
+  const handleStatusChange = useCallback(
+    (values: string[]) => setFilterModel((prev) => updateFilterModel(prev, 'status', values)),
+    []
+  );
+
+  const handleCategoryChange = useCallback(
+    (values: string[]) => setFilterModel((prev) => updateFilterModel(prev, 'category', values)),
+    []
+  );
+
+  const handleActiveToggle = useCallback((value: boolean) => {
+    setFilterModel((prev) => {
+      const current = getActiveBooleanSelection(prev);
+      // Toggle: if already set to this value, clear; otherwise set
+      if (current === value) return updateBooleanFilter(prev, 'active', null);
+      return updateBooleanFilter(prev, 'active', value);
+    });
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Flexbox flexDirection="column" gap="16px">
+        {/* DataCard row — summary cards with drilldown filters */}
+        <Flexbox gap="12px" flexWrap="wrap">
+          {/* Status card */}
+          <DataCard color="info" isLoading={false}>
+            <DataCard.Header icon={mdiCheckCircleOutline} title="Status" />
+            <DataCard.Listbox
+              selectionMode="multiple"
+              values={statusSelection}
+              onChange={handleStatusChange}
+              aria-label="Filter by status"
+            >
+              {STATUS_VALUES.map((s) => (
+                <DrilldownItem
+                  key={s}
+                  value={counts.status[s] || 0}
+                  legend={s}
+                  hasFilterIcon
+                  labelDecorator={(l) => l.charAt(0).toUpperCase() + l.slice(1)}
+                />
+              ))}
+            </DataCard.Listbox>
+          </DataCard>
+
+          {/* Category card */}
+          <DataCard color="warning" isLoading={false}>
+            <DataCard.Header icon={mdiShapeOutline} title="Category" />
+            <DataCard.Listbox
+              selectionMode="multiple"
+              values={categorySelection}
+              onChange={handleCategoryChange}
+              aria-label="Filter by category"
+            >
+              {CATEGORY_VALUES.map((c) => (
+                <DrilldownItem
+                  key={c}
+                  value={counts.category[c] || 0}
+                  legend={c}
+                  hasFilterIcon
+                  labelDecorator={(l) => l.charAt(0).toUpperCase() + l.slice(1)}
+                />
+              ))}
+            </DataCard.Listbox>
+          </DataCard>
+
+          {/* Active card (boolean toggle) */}
+          <DataCard color="success" isLoading={false}>
+            <DataCard.Header icon={mdiToggleSwitch} title="Active" />
+            <DataCard.Body>
+              <DrilldownItem
+                value={counts.activeCount}
+                legend="Active"
+                hasFilterIcon
+                onClick={() => handleActiveToggle(true)}
+                size="medium"
+              />
+              <DrilldownItem
+                value={counts.inactiveCount}
+                legend="Inactive"
+                hasFilterIcon
+                onClick={() => handleActiveToggle(false)}
+                size="medium"
+              />
+            </DataCard.Body>
+          </DataCard>
+        </Flexbox>
+
+        {/* Bulk actions bar */}
+        {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 with controlled filterModel */}
+        <DataGrid
+          autoHeight
+          pagination
+          paginationModel={{ page: 0, pageSize: 10 }}
+          pageSizeOptions={[10, 25, 50]}
+          rows={rows}
+          columns={columns}
+          checkboxSelection
+          rowSelectionModel={selectionModel}
+          onRowSelectionModelChange={setSelectionModel}
+          filterModel={filterModel}
+          onFilterModelChange={setFilterModel}
+          slots={{ toolbar: CustomToolbar }}
+        />
+      </Flexbox>
+    </div>
+  );
+};