fix(calm-hub-ui): fix deployment retrieval (#2359)

* fix(calm-hub-ui): fix deployment retrieval

Update deployment service to use the numerical ID

Refs #2232

* feat(calm-hub): fix deployment retrieval

Update deployment service to use the numerical ID

Refs #2232

* fix(calm-hub-ui): fix duplicate

refs #2232

---------

Co-authored-by: jpgough-ms <152306432+jpgough-ms@users.noreply.github.com>

Author: harveymmaunders

calm-hub-ui/src/hub/components/diagram-section/DiagramSection.test.tsx

@@ -2,9 +2,13 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import { DiagramSection } from './DiagramSection.js';
-import { describe, it, expect, vi } from 'vitest';
+import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { Data } from '../../../model/calm.js';
 
+const calmServiceMock = {
+    fetchDecoratorValues: vi.fn().mockResolvedValue([]),
+};
+
 vi.mock('react-router-dom', async () => {
     const actual = await vi.importActual('react-router-dom');
     return {
@@ -23,7 +27,7 @@ vi.mock('../../../visualizer/components/drawer/Drawer.js', () => ({
 
 vi.mock('../../../service/calm-service.js', () => ({
     CalmService: vi.fn().mockImplementation(() => ({
-        fetchDecoratorValues: vi.fn().mockResolvedValue([]),
+        fetchDecoratorValues: calmServiceMock.fetchDecoratorValues,
     })),
 }));
 
@@ -44,6 +48,11 @@ const patternData: Data & { calmType: 'Patterns' } = {
 };
 
 describe('DiagramSection', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        calmServiceMock.fetchDecoratorValues.mockResolvedValue([]);
+    });
+
     describe('with architecture data', () => {
         it('renders title with namespace, id, and version', () => {
             render(
@@ -68,6 +77,23 @@ describe('DiagramSection', () => {
             expect(screen.getByTestId('drawer')).toBeInTheDocument();
             expect(screen.getByTestId('drawer')).toHaveTextContent('Drawer for test-arch');
         });
+
+        it('uses selected architecture id in deployment decorator target', async () => {
+            render(
+                <MemoryRouter>
+                    <DiagramSection data={architectureData} />
+                </MemoryRouter>
+            );
+
+            await screen.findByTestId('drawer');
+
+            expect(calmServiceMock.fetchDecoratorValues).toHaveBeenCalledWith(
+                'arch-namespace',
+                '/calm/namespaces/arch-namespace/architectures/test-arch/versions/1-0-0',
+                'deployment'
+            );
+        });
+
     });
 
     describe('with pattern data', () => {

calm-hub-ui/src/hub/components/diagram-section/DiagramSection.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { IoConstructOutline, IoGridOutline, IoEyeOutline, IoCodeOutline, IoRocketOutline } from 'react-icons/io5';
-import { Data, isSlug } from '../../../model/calm.js';
+import { Data } from '../../../model/calm.js';
 import { JsonRenderer } from '../json-renderer/JsonRenderer.js';
 import { Drawer } from '../../../visualizer/components/drawer/Drawer.js';
 import { SectionHeader } from '../section-header/SectionHeader.js';
@@ -41,9 +41,7 @@ export function DiagramSection({ data, onItemSelect, hasDetailsPanel }: DiagramS
             return;
         }
         const versionPath = data.version.replace(/\./g, '-');
-        const target = isSlug(data.id)
-            ? `/calm/namespaces/${data.name}/${data.id}/versions/${versionPath}`
-            : `/calm/namespaces/${data.name}/architectures/${data.id}/versions/${versionPath}`;
+        const target = `/calm/namespaces/${data.name}/architectures/${data.id}/versions/${versionPath}`;
         calmService.fetchDecoratorValues(data.name, target, 'deployment').then((values) => setDecorators(values as DeploymentDecorator[]));
     }, [data, isArchitecture, calmService]);
 

calm-hub-ui/src/hub/components/tree-navigation/TreeNavigation.tsx

@@ -816,8 +816,15 @@ export function TreeNavigation({ onDataLoad, onAdrLoad, onControlLoad, onInterfa
     }, [selectedNamespace, calmService, adrService]);
 
     const handleVersionClick = useCallback((version: string, type: string) => {
-        navigate(`${basePath}/${selectedNamespace}/${mapTypeInUIToTypeInUrl(type as TypeInUI)}/${selectedResourceID}/${version}`);
-    }, [navigate, selectedNamespace, selectedResourceID]);
+        const resourceIDForRoute = type === 'Architectures'
+            ? architectureSummaries
+                .find((summary) => (summary.customId ?? summary.id.toString()) === selectedResourceID || summary.name === selectedResourceID)
+                ?.id
+                ?.toString() ?? selectedResourceID
+            : selectedResourceID;
+
+        navigate(`${basePath}/${selectedNamespace}/${mapTypeInUIToTypeInUrl(type as TypeInUI)}/${resourceIDForRoute}/${version}`);
+    }, [navigate, selectedNamespace, selectedResourceID, architectureSummaries]);
 
     const getResourceIDs = (type: string): string[] => {
         const toId = (s: ResourceSummary) => s.customId ?? s.id.toString();