#4217 project changse tab updates

Author: staysgt

src/frontend/src/components/ChangesList.tsx

@@ -3,10 +3,9 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { Box, Link } from '@mui/material';
-import Typography from '@mui/material/Typography';
+import { Box, Link, Stack, Typography } from '@mui/material';
 import { ImplementedChange } from 'shared';
-import { fullNamePipe, datePipe } from '../utils/pipes';
+import { datePipe, fullNamePipe } from '../utils/pipes';
 import { Link as RouterLink } from 'react-router-dom';
 import { routes } from '../utils/routes';
 import DynamicTooltip from './DynamicTooltip';
@@ -15,28 +14,60 @@ interface ChangesListProps {
   changes: ImplementedChange[];
 }
 
+const URL_REGEX = /(https?:\/\/\S+)/g;
+
+const renderDetailWithLinks = (detail: string) =>
+  detail.split(URL_REGEX).map((segment, idx) => {
+    if (!/^https?:\/\//.test(segment)) return segment;
+    const trailing = segment.match(/[.,;:!?)\]"'`]+$/)?.[0] ?? '';
+    const url = trailing ? segment.slice(0, -trailing.length) : segment;
+    return (
+      <span key={idx}>
+        <Link href={url} target="_blank" rel="noopener noreferrer" underline="hover">
+          {url}
+        </Link>
+        {trailing}
+      </span>
+    );
+  });
+
 const ChangesList: React.FC<ChangesListProps> = ({ changes }) => {
   return (
-    <Box>
-      <ul style={{ paddingLeft: '5px', marginBottom: '0em', listStyleType: 'none' }}>
-        {changes.map((ic, idx) => (
-          <li key={idx}>
-            <Box style={{ display: 'flex', flexDirection: 'row' }}>
-              <div style={{ marginRight: '4px' }}>
-                [
-                <Link component={RouterLink} to={`${routes.CHANGE_REQUESTS}/${ic.changeRequestId}`}>
-                  #{ic.changeRequestIdentifier}
-                </Link>
-                ]
-              </div>
-              <DynamicTooltip title={`${fullNamePipe(ic.implementer)} - ${datePipe(ic.dateImplemented)}`}>
-                <Typography component="span">{ic.detail}</Typography>
-              </DynamicTooltip>
-            </Box>
-          </li>
-        ))}
-      </ul>
-    </Box>
+    <Stack component="ul" spacing={0.75} sx={{ p: 0, m: 0, listStyleType: 'none' }}>
+      {changes.map((ic, idx) => (
+        <Box
+          component="li"
+          key={idx}
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            alignItems: { sm: 'baseline' },
+            gap: 1,
+            px: 1.25,
+            py: 0.75,
+            borderRadius: 1,
+            backgroundColor: (theme) => theme.palette.action.hover
+          }}
+        >
+          <Link
+            component={RouterLink}
+            to={`${routes.CHANGE_REQUESTS}/${ic.changeRequestId}`}
+            underline="hover"
+            sx={{ fontWeight: 600, flexShrink: 0 }}
+          >
+            #{ic.changeRequestIdentifier}
+          </Link>
+          <DynamicTooltip title={fullNamePipe(ic.implementer)}>
+            <Typography component="span" sx={{ flexGrow: 1, wordBreak: 'break-word' }}>
+              {renderDetailWithLinks(ic.detail)}
+            </Typography>
+          </DynamicTooltip>
+          <Typography variant="caption" sx={{ color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}>
+            {datePipe(ic.dateImplemented)}
+          </Typography>
+        </Box>
+      ))}
+    </Stack>
   );
 };