Merge pull request finos#2549 from rocketstack-matt/fix/adr-detail-blank-without-decision

fix(calm-hub-ui): render ADR detail when decisionOutcome is absent

Author: LeighFinegold

calm-hub-ui/src/hub/components/adr-renderer/AdrRenderer.test.tsx

@@ -136,4 +136,38 @@ describe('ADR Renderer', () => {
         expect(screen.getByText('30 Apr, 2025', { exact: false })).toBeInTheDocument();
         expect(screen.getByText('12:50', { exact: false })).toBeInTheDocument();
     });
+
+    it('should render the ADR (not a blank page) when no decision outcome is recorded', () => {
+        // ADRs created via the API start in `draft` with no decisionOutcome — this
+        // must not crash the renderer (regression for the blank-page bug).
+        const draftAdr = {
+            namespace: 'finos',
+            id: 2,
+            revision: 1,
+            adr: { ...adrDetails, decisionOutcome: undefined },
+        } as Adr;
+        render(<AdrRenderer adrDetails={draftAdr} />);
+
+        expect(screen.getByText('adr title')).toBeInTheDocument();
+        expect(screen.getByText('Decision Outcome')).toBeInTheDocument();
+        expect(screen.getByText('No decision outcome recorded yet.')).toBeInTheDocument();
+        // The chosen-option content from a populated decision must be absent.
+        expect(screen.queryByText('Decision Rational:')).not.toBeInTheDocument();
+    });
+
+    it('should render safely when a decision outcome is present but has no chosen option', () => {
+        // Defensive: a malformed/partial decisionOutcome must not crash the renderer.
+        const partialAdr = {
+            namespace: 'finos',
+            id: 3,
+            revision: 1,
+            adr: { ...adrDetails, decisionOutcome: { rationale: 'tbd' } },
+        } as Adr;
+        render(<AdrRenderer adrDetails={partialAdr} />);
+
+        expect(screen.getByText('adr title')).toBeInTheDocument();
+        expect(screen.getByText('Decision Outcome')).toBeInTheDocument();
+        // DisplayChosenOption renders nothing when chosenOption is missing.
+        expect(screen.queryByText('Decision Rational:')).not.toBeInTheDocument();
+    });
 });

calm-hub-ui/src/hub/components/adr-renderer/AdrRenderer.tsx

@@ -58,7 +58,11 @@ export function AdrRenderer({ adrDetails }: AdrRendererProps) {
                 <StyleTitle title="Decision Outcome" />
 
                 <div className="collapse-content ps-0">
-                    <DisplayChosenOption decisionOutcome={adr!.decisionOutcome} />
+                    {adr!.decisionOutcome ? (
+                        <DisplayChosenOption decisionOutcome={adr!.decisionOutcome} />
+                    ) : (
+                        <p className="italic text-xs">No decision outcome recorded yet.</p>
+                    )}
                 </div>
             </div>
 

calm-hub-ui/src/hub/helper-functions/adr/adr-helper-function.tsx

@@ -94,19 +94,24 @@ export function DisplayConsideredOptions(props: { consideredOptions: Option[] })
 }
 
 export function DisplayChosenOption(props: { decisionOutcome: Decision }) {
+    const chosenOption = props.decisionOutcome?.chosenOption;
+    if (!chosenOption) {
+        return null;
+    }
+
     return (
         <div className="pt-2">
-            <p className="font-bold pb-1">{props.decisionOutcome.chosenOption.name}</p>
+            <p className="font-bold pb-1">{chosenOption.name}</p>
 
             <div className=" pt-1 pb-1 pe-2 markdownParagraphSpacing">
-                <Markdown>{props.decisionOutcome.chosenOption.description}</Markdown>
+                <Markdown>{chosenOption.description}</Markdown>
             </div>
 
             <p className="font-bold"> Positive Consequences:</p>
-            {getListOfConsequences(props.decisionOutcome.chosenOption.positiveConsequences, true)}
+            {getListOfConsequences(chosenOption.positiveConsequences, true)}
 
             <p className="font-bold mt-4"> Negative Consequences:</p>
-            {getListOfConsequences(props.decisionOutcome.chosenOption.negativeConsequences, false)}
+            {getListOfConsequences(chosenOption.negativeConsequences, false)}
 
             <p className="font-bold mt-4"> Decision Rational:</p>
             <div className="pe-1">