Skip to content

Commit f898ada

Browse files
tomusdrwtomusdrw
authored
Update to latest shared ui (#126)
* Shared UI bump. * Update shared ui. * Change tabs * Fix build. * Fix tests.
1 parent d9a9a3a commit f898ada

File tree

14 files changed

+394
-1051
lines changed

14 files changed

+394
-1051
lines changed

‎package-lock.json‎

Lines changed: 336 additions & 1021 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"license": "MPL-2.0",
66
"type": "module",
77
"scripts": {
8+
"qa-fix": "npm run lint && npm run test",
89
"dev": "vite --host",
910
"build": "tsc -b && vite build",
1011
"lint": "eslint .",
@@ -18,7 +19,7 @@
1819
"@codemirror/state": "^6.5.2",
1920
"@codemirror/theme-one-dark": "^6.1.3",
2021
"@codemirror/view": "^6.38.6",
21-
"@fluffylabs/shared-ui": "^0.1.3",
22+
"@fluffylabs/shared-ui": "^0.4.2",
2223
"@radix-ui/react-checkbox": "^1.3.3",
2324
"@radix-ui/react-dialog": "^1.1.15",
2425
"@tailwindcss/vite": "^4.1.16",

‎src/App.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,13 @@ const AppHeader = ({ onOpenSettings }: { onOpenSettings: () => void }) => {
2727
ghRepoName="state-view"
2828
keepNameWhenSmall
2929
endSlot={
30-
<div className="flex items-center">
30+
<div className="flex items-center pr-4">
3131
<VersionDisplay />
3232
<Button
3333
onClick={onOpenSettings}
3434
size="sm"
3535
aria-label="Settings"
3636
title="Settings"
37-
forcedColorScheme="dark"
3837
>
3938
<Settings className="h-4 w-4" />
4039
</Button>

‎src/components/JsonEditorDialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -171,20 +171,20 @@ const JsonEditorDialog = ({
171171
{onReset && (
172172
<Button
173173
onClick={handleReset}
174-
variant="outline"
174+
variant="secondary"
175175
>
176176
Reset
177177
</Button>
178178
)}
179179
<Button
180180
onClick={handleCancel}
181-
variant="outline"
181+
variant="secondary"
182182
>
183183
Cancel
184184
</Button>
185185
<Button
186186
onClick={handleSave}
187-
variant="default"
187+
variant="primary"
188188
disabled={!isJsonValid}
189189
className={!isJsonValid ? 'opacity-50 cursor-not-allowed' : ''}
190190
>

‎src/components/RawStateViewer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -324,15 +324,15 @@ const RawStateViewer = ({
324324
: dialogState.value;
325325
handleCopy(textToCopy, 'dialog');
326326
}}
327-
variant="outline"
327+
variant="secondary"
328328
className="flex items-center gap-2"
329329
>
330330
<Copy className="h-4 w-4" />
331331
{copiedKey === 'dialog' ? 'Copied!' : 'Copy'}
332332
</Button>
333333
<Button
334334
onClick={() => setDialogState(prev => ({ ...prev, isOpen: false }))}
335-
variant="default"
335+
variant="primary"
336336
>
337337
Close
338338
</Button>

‎src/components/StateKindSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function StateKindSelector({ availableStates, selectedState, changeStateT
1919
<Button
2020
key={stateType}
2121
onClick={() => changeStateType(stateType)}
22-
variant={selectedState === stateType ? "default" : "outline"}
22+
variant={selectedState === stateType ? "primary" : "secondary"}
2323
size="sm"
2424
>
2525
{stateType === 'pre_state' ? 'Pre-State' :

‎src/components/UploadScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ export const UploadScreen = ({
271271
{/* Browse Button (if no file uploaded) */}
272272
<Button
273273
onClick={open}
274-
variant="default"
274+
variant="primary"
275275
size="lg"
276276
>
277277
<FolderOpen className="h-4 w-4" />
@@ -280,7 +280,7 @@ export const UploadScreen = ({
280280

281281
<Button
282282
onClick={handleManualEdit}
283-
variant="outline"
283+
variant="secondary"
284284
size="lg"
285285
>
286286
<Edit className="h-4 w-4" />

‎src/components/service/ServiceCard.test.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ describe('ServiceCard', () => {
8181
expect(screen.getByTestId('service-info')).toBeInTheDocument();
8282
});
8383

84-
it('shows storage tab as active by default', () => {
84+
it('shows info tab as active by default', () => {
8585
const serviceData = createMockServiceData();
8686

8787
render(
@@ -92,10 +92,9 @@ describe('ServiceCard', () => {
9292
/>
9393
);
9494

95-
const storageTab = screen.getByRole('tab', { name: /aₛ Storage/ });
95+
const storageTab = screen.getByRole('tab', { name: /a Info/ });
9696
expect(storageTab).toHaveAttribute('aria-selected', 'true');
97-
expect(screen.getByTestId('storage-input')).toBeInTheDocument();
98-
expect(screen.getByTestId('storage-results')).toBeInTheDocument();
97+
expect(screen.getByTestId('service-info')).toBeInTheDocument();
9998
});
10099

101100
it('switches to preimages tab when clicked', () => {
@@ -236,7 +235,8 @@ describe('ServiceCard', () => {
236235
/>
237236
);
238237

239-
// Initially storage input should be visible
238+
// Switch to storage
239+
fireEvent.click(screen.getByRole('tab', { name: /aₛ Storage/ }));
240240
expect(screen.getByTestId('storage-input')).toBeInTheDocument();
241241
expect(screen.queryByTestId('preimage-input')).not.toBeInTheDocument();
242242
expect(screen.queryByTestId('lookup-input')).not.toBeInTheDocument();
@@ -266,7 +266,11 @@ describe('ServiceCard', () => {
266266
/>
267267
);
268268

269-
// Check that storage tab is active initially
269+
// Check that info tab is active initially
270+
expect(screen.getByTestId('service-info')).toBeInTheDocument();
271+
272+
// Switch tabs to storage and verify content changes
273+
fireEvent.click(screen.getByRole('tab', { name: /aₛ Storage/ }));
270274
expect(screen.getByTestId('storage-input')).toBeInTheDocument();
271275
expect(screen.getByTestId('storage-results')).toBeInTheDocument();
272276

‎src/components/service/ServiceCard.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface ServiceCardProps {
1717
}
1818

1919
const ServiceCard = ({ serviceData, isDiffMode, preState, state }: ServiceCardProps) => {
20-
const [activeTab, setActiveTab] = useState('storage');
20+
const [activeTab, setActiveTab] = useState('info');
2121
const { serviceId, preService, postService, preError, postError } = serviceData;
2222
const activeService = postService || preService;
2323
const formattedId = formatServiceIdUnsigned(serviceId);
@@ -87,10 +87,19 @@ const ServiceCard = ({ serviceData, isDiffMode, preState, state }: ServiceCardPr
8787
)}
8888

8989
<div className="space-y-4">
90-
<ServiceInfo serviceData={serviceData} preState={preState} state={state} isDiffMode={isDiffMode} />
91-
9290
<Tabs value={activeTab} onValueChange={setActiveTab}>
93-
<TabsList className="grid w-full sm:grid-cols-3 grid-cols-1">
91+
<TabsList className="grid w-full sm:grid-cols-4 grid-cols-1">
92+
<TabsTrigger
93+
value="info"
94+
className={`flex justify-start items-center gap-2`}
95+
>
96+
<code className="px-1 py-0.5 rounded text-xs font-mono bg-blue-100 dark:bg-blue-900/60 text-blue-800 dark:text-blue-200">
97+
a
98+
</code>
99+
<span className="flex items-center gap-1">
100+
<span>Info <span className="text-xs text-muted-foreground">{isDiffMode && changeInfo && changeInfo.hasServiceInfoChanges ? '*': ''}</span></span>
101+
</span>
102+
</TabsTrigger>
94103
<TabsTrigger
95104
value="storage"
96105
className={`flex justify-start items-center gap-2 ${
@@ -208,6 +217,9 @@ const ServiceCard = ({ serviceData, isDiffMode, preState, state }: ServiceCardPr
208217
{activeTab === 'lookup-history' && lookupHistoryQuery.renderQueryInput()}
209218
</div>
210219

220+
<TabsContent value="info" className="mt-0">
221+
<ServiceInfo serviceData={serviceData} preState={preState} state={state} isDiffMode={isDiffMode} />
222+
</TabsContent>
211223
<TabsContent value="storage" className="mt-0">
212224
{storageQuery.renderResults()}
213225
</TabsContent>

‎src/components/service/serviceUtils.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,17 @@ function detectServiceEntryType(serviceId: number, key: string, value: string):
190190
};
191191
}
192192

193-
export const discoverServiceEntries = (state: RawState, serviceId: number) => {
193+
export const cache = new Map<RawState, Map<number, ServiceEntryType[]>>();
194+
195+
export const discoverServiceEntries = (state: RawState, serviceId: number): ServiceEntryType[] => {
196+
// check cached entries
197+
const cachedState = cache.get(state) ?? new Map();
198+
cache.set(state, cachedState);
199+
const serviceEntities = cachedState.get(serviceId);
200+
if (serviceEntities !== undefined) {
201+
return serviceEntities;
202+
}
203+
194204
// detect service info & preimages
195205
const initialEntries = Object.entries(state)
196206
.map(([key, value]) => detectServiceEntryType(serviceId, key, value))
@@ -221,12 +231,14 @@ export const discoverServiceEntries = (state: RawState, serviceId: number) => {
221231
}
222232

223233
// filter out storage-or-lookups that are now duplicated
224-
return allEntries.filter(v => {
234+
const foundEntries = allEntries.filter(v => {
225235
if (v.kind === 'storage-or-lookup' && detectedLookups.has(v.key)) {
226236
return false;
227237
}
228238
return true;
229239
});
240+
cachedState.set(serviceId, foundEntries);
241+
return foundEntries;
230242
}
231243

232244
export const getServiceChangeType = (serviceData: ServiceData): 'added' | 'removed' | 'changed' | 'normal' => {

0 commit comments

Comments
 (0)