Merge pull request #24 from kentbull/fix-identifier-screen

fix identifier screen

Author: kentbull

docs/identifier-ui.md

@@ -73,15 +73,14 @@ The desktop table columns are:
 
 - Name
 - AID
-- Current Key
 - Type
 - KIDX
 - PIDX
 - Actions
 
 Mobile cards mirror the same core fields and rotate action.
 
-The AID and current-key display contract:
+The AID display contract:
 
 - use `truncateMiddle(aid)` as first eight characters, `...`, last eight
   characters for long values,
@@ -90,6 +89,10 @@ The AID and current-key display contract:
 - stop click propagation so copying does not open details,
 - use the shared `--app-mono-font` CSS variable.
 
+Do not add Current Key back to the table unless the list API can supply it
+without per-row `get(...)` hydration. Current key belongs in details so the
+identifier list does not grow an N+1 request pattern.
+
 The table rotate button:
 
 - uses the rotate icon,

src/features/identifiers/IdentifierTable.tsx

@@ -20,8 +20,6 @@ import RotateRightIcon from '@mui/icons-material/RotateRight';
 import type { IdentifierSummary } from './identifierTypes';
 import {
     formatIdentifierMetadata,
-    identifierCurrentKey,
-    identifierUnavailableValue,
     identifierIdentifierIndex,
     identifierKeyIndex,
     identifierType,
@@ -48,15 +46,13 @@ interface CopyableMonoValueProps {
     label: string;
     copied: boolean;
     onCopy: (value: string) => void;
-    color?: string;
 }
 
 const CopyableMonoValue = ({
     value,
     label,
     copied,
     onCopy,
-    color = 'primary.main',
 }: CopyableMonoValueProps) => (
     <Tooltip title={copied ? `Copied ${value}` : value}>
         <Box
@@ -71,7 +67,7 @@ const CopyableMonoValue = ({
                 m: 0,
                 border: 0,
                 bgcolor: 'transparent',
-                color: copied ? 'success.main' : color,
+                color: copied ? 'success.main' : 'primary.main',
                 cursor: 'copy',
                 fontSize: 'inherit',
                 lineHeight: 'inherit',
@@ -86,17 +82,6 @@ const CopyableMonoValue = ({
     </Tooltip>
 );
 
-const MonospaceUnavailable = () => (
-    <Typography
-        component="span"
-        variant="body2"
-        color="text.disabled"
-        sx={monoSx}
-    >
-        {identifierUnavailableValue}
-    </Typography>
-);
-
 /**
  * Pure identifier list table.
  *
@@ -157,32 +142,6 @@ export const IdentifierTable = ({
                                         onCopy={copyValue}
                                     />
                                 </Box>
-                                <Stack spacing={0.25}>
-                                    <Typography
-                                        variant="caption"
-                                        color="text.secondary"
-                                    >
-                                        Current Key
-                                    </Typography>
-                                    {identifierCurrentKey(identifier) === null ? (
-                                        <MonospaceUnavailable />
-                                    ) : (
-                                        <CopyableMonoValue
-                                            value={
-                                                identifierCurrentKey(
-                                                    identifier
-                                                ) ?? ''
-                                            }
-                                            label="current key"
-                                            copied={
-                                                copiedValue ===
-                                                identifierCurrentKey(identifier)
-                                            }
-                                            onCopy={copyValue}
-                                            color="success.dark"
-                                        />
-                                    )}
-                                </Stack>
                                 <Typography
                                     variant="caption"
                                     color="text.secondary"
@@ -233,12 +192,11 @@ export const IdentifierTable = ({
                 component={Paper}
                 sx={{ display: { xs: 'none', sm: 'block' } }}
             >
-                <Table sx={{ minWidth: 980 }} aria-label="identifier table">
+                <Table sx={{ minWidth: 800 }} aria-label="identifier table">
                     <TableHead>
                         <TableRow>
                             <TableCell>Name</TableCell>
                             <TableCell>AID</TableCell>
-                            <TableCell>Current Key</TableCell>
                             <TableCell>Type</TableCell>
                             <TableCell>KIDX</TableCell>
                             <TableCell>PIDX</TableCell>
@@ -270,26 +228,6 @@ export const IdentifierTable = ({
                                         onCopy={copyValue}
                                     />
                                 </TableCell>
-                                <TableCell>
-                                    {identifierCurrentKey(identifier) === null ? (
-                                        <MonospaceUnavailable />
-                                    ) : (
-                                        <CopyableMonoValue
-                                            value={
-                                                identifierCurrentKey(
-                                                    identifier
-                                                ) ?? ''
-                                            }
-                                            label="current key"
-                                            copied={
-                                                copiedValue ===
-                                                identifierCurrentKey(identifier)
-                                            }
-                                            onCopy={copyValue}
-                                            color="success.dark"
-                                        />
-                                    )}
-                                </TableCell>
                                 <TableCell>
                                     {identifierType(identifier)}
                                 </TableCell>

tests/browser-smoke.mjs

@@ -116,7 +116,7 @@ try {
     timeout: 10000,
   });
   const identifierTableText = await textContent(page, '[data-testid="identifier-table"]');
-  for (const expectedHeader of ['AID', 'Current Key', 'KIDX', 'PIDX', 'Actions']) {
+  for (const expectedHeader of ['AID', 'KIDX', 'PIDX', 'Actions']) {
     if (!identifierTableText.includes(expectedHeader)) {
       throw new Error(`Identifier table is missing ${expectedHeader} header`);
     }