feat: improve navigation of adr plugin

Signed-off-by: David Weber <david.weber@w3tec.ch>

plugins/adr/README.md

@@ -4,6 +4,8 @@ Welcome to the ADR plugin!
 
 This plugin allows you to browse ADRs associated with your entities as well as a way to discover ADRs across others entities via Backstage Search. Use this to learn from the past experience of other projects to guide your own architecture decisions.
 
+![ADR tab](./docs/adr-tab.png)
+
 ## Setup
 
 1. Install this plugin:

plugins/adr/api-report.md

@@ -51,6 +51,9 @@ export type AdrFileInfo = {
   type: string;
   path: string;
   name: string;
+  title?: string;
+  status?: string;
+  date?: string;
 };
 
 // @public

plugins/adr/src/api/types.ts

@@ -30,6 +30,15 @@ export type AdrFileInfo = {
 
   /** The name of the ADR file. */
   name: string;
+
+  /** The title of the ADR. */
+  title?: string;
+
+  /** The status of the ADR. */
+  status?: string;
+
+  /** The date of the ADR. */
+  date?: string;
 };
 
 /**

plugins/adr/src/components/EntityAdrContent/EntityAdrContent.tsx

@@ -35,6 +35,7 @@ import {
 } from '@backstage/plugin-adr-common';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import {
+  Chip,
   Grid,
   List,
   ListItem,
@@ -67,7 +68,9 @@ export const EntityAdrContent = (props: {
   const classes = useStyles();
   const { entity } = useEntity();
   const rootLink = useRouteRef(rootRouteRef);
-  const [adrList, setAdrList] = useState<string[]>([]);
+  const [adrList, setAdrList] = useState<
+    { name: string; title?: string; status?: string; date?: string }[]
+  >([]);
   const [searchParams, setSearchParams] = useSearchParams();
   const scmIntegrations = useApi(scmIntegrationsApiRef);
   const adrApi = useApi(adrApiRef);
@@ -79,10 +82,10 @@ export const EntityAdrContent = (props: {
   }, [entity, scmIntegrations]);
 
   const selectedAdr =
-    adrList.find(adr => adr === searchParams.get('record')) ?? '';
+    adrList.find(adr => adr.name === searchParams.get('record'))?.name ?? '';
   useEffect(() => {
     if (adrList.length && !selectedAdr) {
-      searchParams.set('record', adrList[0]);
+      searchParams.set('record', adrList[0].name);
       setSearchParams(searchParams, { replace: true });
     }
   });
@@ -100,11 +103,22 @@ export const EntityAdrContent = (props: {
             ? filePathFilterFn(item.name)
             : madrFilePathFilter(item.name)),
       )
-      .map(({ name }: { name: string }) => name);
+      .map(({ name, title, status, date }) => ({ name, title, status, date }));
 
     setAdrList(adrs);
   }, [filePathFilterFn, value]);
 
+  const getChipColor = (status: string) => {
+    switch (status) {
+      case 'accepted':
+        return 'primary';
+      case 'rejected' || 'deprecated':
+        return 'secondary';
+      default:
+        return 'default';
+    }
+  };
+
   return (
     <Content>
       <ContentHeader title="Architecture Decision Records">
@@ -133,13 +147,24 @@ export const EntityAdrContent = (props: {
                     key={idx}
                     button
                     component={Link}
-                    to={`${rootLink()}?record=${adr}`}
-                    selected={selectedAdr === adr}
+                    to={`${rootLink()}?record=${adr.name}`}
+                    selected={selectedAdr === adr.name}
                   >
                     <ListItemText
-                      secondaryTypographyProps={{ noWrap: true }}
-                      secondary={adr.replace(/\.md$/, '')}
+                      primaryTypographyProps={{
+                        style: { whiteSpace: 'normal' },
+                      }}
+                      primary={adr.title ?? adr?.name.replace(/\.md$/, '')}
+                      secondary={adr.date}
                     />
+                    {adr.status && (
+                      <Chip
+                        label={adr.status}
+                        size="small"
+                        variant="outlined"
+                        color={getChipColor(adr.status)}
+                      />
+                    )}
                   </ListItem>
                 ))}
               </List>