Skip to content

Commit 478af87

Browse files
aidanm3341aidanm3341
authored
Merge pull request finos#1328 from niamhg-ms/ISSUE-1222-Display-ADR
Issue finos#1222 Displaying ADR Details
2 parents 80cf5d1 + 547bfbb commit 478af87

File tree

20 files changed

+929
-30
lines changed

20 files changed

+929
-30
lines changed

‎calm-hub-ui/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@
3333
"typescript": "^4.9.5",
3434
"vite-plugin-svgr": "^4.3.0",
3535
"vite-tsconfig-paths": "^5.1.4",
36-
"web-vitals": "^5.0.1"
36+
"web-vitals": "^5.0.1",
37+
"react-markdown": "^10.1.0",
38+
"axios": "^1.9.0",
39+
"axios-mock-adapter": "^2.1.0"
3740
},
3841
"devDependencies": {
3942
"@eslint/js": "^9.25.0",

‎calm-hub-ui/src/fixtures/adr.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"adr": {
3+
"consideredOptions": [
4+
{
5+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
6+
"name": "Making a table",
7+
"negativeConsequences": [
8+
"Very little reusable code",
9+
"Have to set the border of each cell"
10+
],
11+
"positiveConsequences": ["Looks better than current design"]
12+
},
13+
{
14+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
15+
"name": "Using a collabsible list",
16+
"negativeConsequences": ["Harder to code", "Daisy UI will not play ball"],
17+
"positiveConsequences": ["Looks much better than current design"]
18+
}
19+
],
20+
"contextAndProblemStatement": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \n \n*Lorem ipsum dolor sit amet*, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
21+
"creationDateTime": "2025-04-29T12:44:25.465265627",
22+
"decisionDrivers": [
23+
"Example of a decision driver (one)",
24+
"Example of a decision driver (two)"
25+
],
26+
"decisionOutcome": {
27+
"chosenOption": {
28+
"description": "Lorem ipsum dolor sit amet, **consectetur adipiscing elit, sed do eiusmod tempor incididunt** ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
29+
"name": "Using a collabsible list",
30+
"negativeConsequences": ["Harder to code", "Daisy UI will not play ball"],
31+
"positiveConsequences": [
32+
"Looks much better than current design",
33+
"More compact view"
34+
]
35+
},
36+
"rationale": "It looks much nicer than the current design and allows users to collapse and exand options at will"
37+
},
38+
"links": [
39+
{
40+
"href": "http://my-link.com",
41+
"rel": "My Link"
42+
},
43+
{
44+
"href": "http://my-link.com",
45+
"rel": "My Link Two"
46+
}
47+
],
48+
"status": "draft",
49+
"title": "ADR - 1",
50+
"updateDateTime": "2025-04-29T12:44:25.465338085"
51+
},
52+
"id": 1,
53+
"namespace": "finos",
54+
"revision": 1
55+
}

‎calm-hub-ui/src/hub/Hub.tsx‎

Lines changed: 83 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import {
77
FlowID,
88
ArchitectureID,
99
Version,
10-
Data
10+
Data,
11+
Revision,
12+
AdrID,
13+
Adr,
1114
} from '../model/calm.js';
1215
import {
1316
fetchNamespaces,
@@ -22,6 +25,8 @@ import {
2225
fetchArchitecture,
2326
} from '../service/calm-service.js';
2427
import { Navbar } from '../components/navbar/Navbar.js';
28+
import { AdrRenderer } from './components/adr-renderer/AdrRenderer.js';
29+
import { AdrService } from '../service/adr-service/adr-service.js';
2530
import { useNavigate } from 'react-router-dom';
2631

2732
function Hub() {
@@ -32,12 +37,17 @@ function Hub() {
3237
const [patternIDs, setPatternIDs] = useState<PatternID[]>([]);
3338
const [flowIDs, setFlowIDs] = useState<FlowID[]>([]);
3439
const [architectureIDs, setArchitectureIDs] = useState<ArchitectureID[]>([]);
40+
const [adrIDs, setAdrIDs] = useState<AdrID[]>([]);
3541
const [currentPatternOrFlowID, setCurrentPatternOrFlowID] = useState<string | undefined>();
3642
const [currentVersion, setCurrentVersion] = useState<Version | undefined>();
43+
const [currentRevision, setCurrentRevision] = useState<Revision | undefined>();
3744
const [currentCalmType, setCurrentCalmType] = useState<string | undefined>();
3845

3946
const [data, setData] = useState<Data | undefined>();
47+
const [adrData, setAdrData] = useState<Adr | undefined>();
4048
const [versions, setVersions] = useState<Version[]>([]);
49+
const [revisions, setRevisions] = useState<Revision[]>([]);
50+
const adrService = new AdrService();
4151

4252
useEffect(() => {
4353
fetchNamespaces(setNamespaces);
@@ -50,6 +60,7 @@ function Hub() {
5060
setVersions([]);
5161
setCurrentCalmType(undefined);
5262
setData(undefined);
63+
setAdrData(undefined);
5364
setCurrentNamespace(namespace);
5465
fetchPatternIDs(namespace, setPatternIDs);
5566
};
@@ -58,27 +69,37 @@ function Hub() {
5869
navigate('/visualizer', { state: data });
5970
}
6071

61-
const handleCalmTypeSelection = (calmType: string) => {
72+
const handleCalmTypeSelection = async (calmType: string) => {
6273
setCurrentCalmType(calmType);
6374

6475
if (calmType === 'Patterns') {
6576
fetchPatternIDs(currentNamespace!, setPatternIDs);
6677
setFlowIDs([]);
6778
setArchitectureIDs([]);
79+
setAdrIDs([]);
6880
} else if (calmType === 'Flows') {
6981
fetchFlowIDs(currentNamespace!, setFlowIDs);
7082
setPatternIDs([]);
7183
setArchitectureIDs([]);
84+
setAdrIDs([]);
7285
} else if (calmType === 'Architectures') {
7386
fetchArchitectureIDs(currentNamespace!, setArchitectureIDs);
7487
setPatternIDs([]);
7588
setFlowIDs([]);
89+
setAdrIDs([]);
90+
} else if (calmType === 'ADRs') {
91+
adrService.fetchAdrIDs(currentNamespace!).then((res) => setAdrIDs(res));
92+
setRevisions([]);
93+
setArchitectureIDs([]);
94+
setPatternIDs([]);
95+
setFlowIDs([]);
7696
}
7797
setVersions([]);
7898
setData(undefined);
99+
setAdrData(undefined);
79100
};
80101

81-
const handlePatternOrFlowSelection = (selectedID: string) => {
102+
const handlePatternOrFlowSelection = async (selectedID: string) => {
82103
setCurrentPatternOrFlowID(selectedID);
83104

84105
if (currentCalmType === 'Patterns') {
@@ -87,6 +108,10 @@ function Hub() {
87108
fetchFlowVersions(currentNamespace!, selectedID, setVersions);
88109
} else if (currentCalmType === 'Architectures') {
89110
fetchArchitectureVersions(currentNamespace!, selectedID, setVersions);
111+
} else if (currentCalmType === 'ADRs') {
112+
adrService
113+
.fetchAdrRevisions(currentNamespace!, selectedID)
114+
.then((res) => setRevisions(res));
90115
}
91116
};
92117

@@ -105,6 +130,18 @@ function Hub() {
105130
setData
106131
);
107132
}
133+
setAdrData(undefined);
134+
};
135+
136+
const handleRevisionSelection = async (revision: Revision) => {
137+
setCurrentRevision(revision);
138+
139+
if (currentCalmType === 'ADRs') {
140+
adrService
141+
.fetchAdr(currentNamespace || '', currentPatternOrFlowID || '', revision)
142+
.then((res) => setAdrData(res));
143+
setData(undefined);
144+
}
108145
};
109146

110147
return (
@@ -121,7 +158,7 @@ function Hub() {
121158
{currentNamespace && (
122159
<ValueTable
123160
header="Calm Type"
124-
values= {['Architectures', 'Patterns', 'Flows']}
161+
values={['Architectures', 'Patterns', 'Flows', 'ADRs']}
125162
callback={handleCalmTypeSelection}
126163
currentValue={currentCalmType}
127164
/>
@@ -134,40 +171,61 @@ function Hub() {
134171
? 'Patterns'
135172
: currentCalmType === 'Flows'
136173
? 'Flows'
137-
: 'Architectures'
174+
: currentCalmType === 'Architectures'
175+
? 'Architectures'
176+
: 'ADRs'
138177
}
139178
values={
140179
currentCalmType === 'Patterns'
141180
? patternIDs
142181
: currentCalmType === 'Flows'
143182
? flowIDs
144-
: architectureIDs
183+
: currentCalmType === 'Architectures'
184+
? architectureIDs
185+
: adrIDs
145186
}
146187
callback={handlePatternOrFlowSelection}
147188
currentValue={currentPatternOrFlowID}
148189
/>
149190
)}
150191

151-
{currentNamespace && currentCalmType && (
152-
<ValueTable
153-
header="Versions"
154-
values={versions}
155-
callback={handleVersionSelection}
156-
currentValue={currentVersion}
157-
/>
158-
)}
159-
</div>
160-
<div className="p-5 flex-1 overflow-auto bg-[#eee]">
161-
{data && (
162-
<button
163-
className="bg-primary hover:bg-blue-500 text-white font-bold py-2 px-4 rounded float-right"
164-
onClick={() => handleClick(data)}
165-
>
166-
Visualize
167-
</button>
168-
)}
169-
<JsonRenderer json={data} />
192+
{currentNamespace &&
193+
currentCalmType &&
194+
(currentCalmType !== 'ADRs' ? (
195+
<ValueTable
196+
header="Versions"
197+
values={versions}
198+
callback={handleVersionSelection}
199+
currentValue={currentVersion}
200+
/>
201+
) : (
202+
<ValueTable
203+
header="Revisions"
204+
values={revisions}
205+
callback={handleRevisionSelection}
206+
currentValue={currentRevision}
207+
/>
208+
))}
170209
</div>
210+
{currentCalmType !== 'ADRs' ? (
211+
<div className="p-5 flex-1 overflow-auto bg-[#eee]">
212+
{data && (
213+
<button
214+
className="bg-primary hover:bg-blue-500 text-white font-bold py-2 px-4 rounded float-right"
215+
onClick={() => handleClick(data)}
216+
>
217+
Visualize
218+
</button>
219+
)}
220+
<JsonRenderer json={data} />
221+
</div>
222+
) : adrData ? (
223+
<AdrRenderer adrDetails={adrData} />
224+
) : (
225+
<div className="p-5 flex-1 overflow-auto border-l-2 border-black bg-[#eee] text-center">
226+
Please select an ADR to load
227+
</div>
228+
)}
171229
</div>
172230
</>
173231
);

‎calm-hub-ui/src/hub/components/adr-renderer/AdrRenderer.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.markdownParagraphSpacing p {
2+
margin-bottom: 1.5% !important;
3+
}
4+
5+
.adr-title {
6+
min-height: auto;
7+
}

0 commit comments

Comments
 (0)