feat(aas-list): Show Registry Entries (#488)

* feat: add support for AAS registries in AasListDataWrapper and related components

* feat: enhance value extraction for manufacturer details in getNameplateValuesForAAS

* fix: add optional chaining to prevent potential runtime errors in getNameplateValuesForAAS

* feat: update repository dropdown labels to include AAS Registry for improved clarity

* feat: add connectionType prop to AasList and related components for improved data handling

* fix: refine value extraction logic in extractValue function for improved handling of API responses

* Fix wrong loading of Registry Descriptors

* linting

* Fix tests

* Add debug configuration for JEST Unit tests

* Add comment regarding the JSON handling in API Response Wrapper

* Rename SelectRepository in SelectListSource

---------

Co-authored-by: Nils Rothamel <nils.rothamel@xitaso.com>

Author: hofermo

.vscode/launch.json

@@ -45,6 +45,20 @@
       "sourceMapPathOverrides": {
         "/turbopack/[project]/*": "${webRoot}/*"
       }
+    },
+    {
+      "name": "Debug Jest file",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
+      "args": ["${fileBasenameNoExtension}", "--runInBand", "--watch", "--coverage=false", "--no-cache"],
+      "cwd": "${workspaceRoot}",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "sourceMaps": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
+      }
     }
   ]
 }

src/app/[locale]/list/_components/AasList.tsx

@@ -7,14 +7,16 @@ import { RepositoryWithInfrastructure } from 'lib/services/database/Infrastructu
 
 type AasListProps = {
     repositoryUrl: RepositoryWithInfrastructure;
+    connectionType?: 'repository' | 'registry';
     shells: AasListDto | undefined;
     comparisonFeatureFlag?: boolean;
     selectedAasList: string[] | undefined;
     updateSelectedAasList: (isChecked: boolean, aasId: string | undefined) => void;
 };
 
 export default function AasList(props: AasListProps) {
-    const { repositoryUrl, shells, selectedAasList, updateSelectedAasList, comparisonFeatureFlag } = props;
+    const { repositoryUrl, connectionType, shells, selectedAasList, updateSelectedAasList, comparisonFeatureFlag } =
+        props;
     const t = useTranslations('pages.aasList');
     const MAX_SELECTED_ITEMS = 3;
 
@@ -76,6 +78,7 @@ export default function AasList(props: AasListProps) {
                                 <TableRow key={aasListEntry.aasId} data-testid={`list-row-${aasListEntry.aasId}`}>
                                     <AasListTableRow
                                         repository={repositoryUrl}
+                                        connectionType={connectionType}
                                         aasListEntry={aasListEntry}
                                         comparisonFeatureFlag={comparisonFeatureFlag}
                                         checkBoxDisabled={checkBoxDisabled}

src/app/[locale]/list/_components/AasListDataWrapper.spec.tsx

@@ -9,6 +9,7 @@ import { ListEntityDto } from 'lib/services/list-service/ListService';
 import { Internationalization } from 'lib/i18n/Internationalization';
 import { AasStoreProvider } from 'stores/AasStore';
 import { RepositoryWithInfrastructure } from 'lib/services/database/InfrastructureMappedTypes';
+import { ConnectionWithType } from 'app/[locale]/list/_components/filter/SelectListSource';
 
 jest.mock('./../../../../lib/services/list-service/aasListApiActions');
 jest.mock('./../../../../lib/services/database/infrastructureDatabaseActions');
@@ -35,6 +36,12 @@ jest.mock('next-auth', jest.fn());
 const REPOSITORY_URL = 'https://test-repository.de';
 const FIRST_PAGE_CURSOR = '123123';
 const REPOSITORY = { url: REPOSITORY_URL, infrastructureName: 'Test Infrastructure', id: 'test-repo-id' };
+const REPOSITORY_CONNECTION_TYPE = {
+    url: REPOSITORY.url,
+    infrastructureName: REPOSITORY.infrastructureName,
+    id: REPOSITORY.id,
+    type: 'repository',
+};
 const mockDB = jest.fn(() => {
     return [REPOSITORY];
 });
@@ -56,7 +63,12 @@ const createTestListEntries = (from = 0, to = 10): ListEntityDto[] => {
 };
 
 const mockActionFirstPage = jest.fn(
-    (_repository: RepositoryWithInfrastructure, _count: number, _cursor: string | undefined) => {
+    (
+        _repository: RepositoryWithInfrastructure | ConnectionWithType,
+        _count: number,
+        _cursor: string | undefined,
+        _type: string | undefined,
+    ) => {
         return {
             success: true,
             entities: createTestListEntries(0, 10),
@@ -67,7 +79,12 @@ const mockActionFirstPage = jest.fn(
 );
 
 const mockActionSecondPage = jest.fn(
-    (_repository: RepositoryWithInfrastructure, _count: number, _cursor: string | undefined) => {
+    (
+        _repository: RepositoryWithInfrastructure,
+        _count: number,
+        _cursor: string | undefined,
+        _type: string | undefined,
+    ) => {
         return {
             success: true,
             entities: createTestListEntries(10, 12),
@@ -90,6 +107,11 @@ describe('AASListDataWrapper', () => {
         (serverActions.getAasListEntities as jest.Mock).mockImplementation(mockActionFirstPage);
 
         (connectionServerActions.getAasRepositoriesIncludingDefault as jest.Mock).mockImplementation(mockDB);
+        (connectionServerActions.getAasRegistriesIncludingDefault as jest.Mock).mockImplementation(
+            jest.fn(() => {
+                return [];
+            }),
+        );
         (nameplateDataActions.getNameplateValuesForAAS as jest.Mock).mockImplementation(mockNameplateData);
 
         CustomRender(
@@ -109,7 +131,8 @@ describe('AASListDataWrapper', () => {
             await waitFor(() => screen.getByTestId('repository-select'));
             const select = screen.getAllByRole('combobox')[0];
             fireEvent.mouseDown(select);
-            const firstElement = screen.getAllByRole('option')[0];
+            // const firstElement = screen.getAllByRole('option')[0];
+            const firstElement = screen.getByTestId('repository-select-item-0');
             fireEvent.click(firstElement);
 
             await waitFor(() => screen.getByTestId('list-next-button'));
@@ -130,7 +153,12 @@ describe('AASListDataWrapper', () => {
             expect(screen.getByText('assetId10', { exact: false })).toBeInTheDocument();
             expect(screen.getByText('Page 2', { exact: false })).toBeInTheDocument();
             expect(screen.getByTestId('list-next-button')).toBeDisabled();
-            expect(mockActionSecondPage).toHaveBeenCalledWith(REPOSITORY, 10, FIRST_PAGE_CURSOR);
+            expect(mockActionSecondPage).toHaveBeenCalledWith(
+                REPOSITORY_CONNECTION_TYPE,
+                10,
+                FIRST_PAGE_CURSOR,
+                'repository',
+            );
         });
 
         it('Navigates one page back when clicking on the back button', async () => {
@@ -146,7 +174,7 @@ describe('AASListDataWrapper', () => {
 
             expect(screen.getByText('assetId3', { exact: false })).toBeInTheDocument();
             expect(screen.getByText('Page 1', { exact: false })).toBeInTheDocument();
-            expect(mockActionFirstPage).toHaveBeenCalledWith(REPOSITORY, 10, undefined);
+            expect(mockActionFirstPage).toHaveBeenCalledWith(REPOSITORY_CONNECTION_TYPE, 10, undefined, 'repository');
         });
     });
 });

src/app/[locale]/list/_components/AasListDataWrapper.tsx

@@ -10,7 +10,7 @@ import { AasListComparisonHeader } from './AasListComparisonHeader';
 import { Box, Card, CardContent, IconButton, Typography } from '@mui/material';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import { SelectRepository } from './filter/SelectRepository';
+import { SelectListSource } from './filter/SelectListSource';
 import { useTranslations } from 'next-intl';
 import { ApiResponseWrapperError } from 'lib/util/apiResponseWrapper/apiResponseWrapper';
 import { AuthenticationPrompt } from 'components/authentication/AuthenticationPrompt';
@@ -28,6 +28,7 @@ export default function AasListDataWrapper({ hideRepoSelection }: AasListDataWra
     const [, setAasListFiltered] = useState<ListEntityDto[]>();
     const [selectedAasList, setSelectedAasList] = useState<string[]>();
     const [selectedRepository, setSelectedRepository] = useState<RepositoryWithInfrastructure | null | undefined>();
+    const [selectedType, setSelectedType] = useState<'repository' | 'registry' | undefined>();
     const env = useEnv();
     const t = useTranslations('pages.aasList');
     const { showError } = useShowError();
@@ -56,7 +57,7 @@ export default function AasListDataWrapper({ hideRepoSelection }: AasListDataWra
 
         setIsLoadingList(true);
         clearResults();
-        const response = await getAasListEntities(selectedRepository, 10, newCursor);
+        const response = await getAasListEntities(selectedRepository, 10, newCursor, selectedType);
 
         if (response.success) {
             setAasList(response);
@@ -136,7 +137,7 @@ export default function AasListDataWrapper({ hideRepoSelection }: AasListDataWra
         if (!selectedRepository) {
             return (
                 <Box>
-                    <Typography data-testid="select-repository-text">{t('selectRepository')}</Typography>
+                    <Typography data-testid="select-repository-text">{t('selectListSource')}</Typography>
                 </Box>
             );
         }
@@ -150,6 +151,7 @@ export default function AasListDataWrapper({ hideRepoSelection }: AasListDataWra
                 <AasList
                     data-testid="aas-list"
                     repositoryUrl={selectedRepository}
+                    connectionType={selectedType}
                     shells={aasList}
                     selectedAasList={selectedAasList}
                     updateSelectedAasList={updateSelectedAasList}
@@ -166,7 +168,10 @@ export default function AasListDataWrapper({ hideRepoSelection }: AasListDataWra
                 {!hideRepoSelection && (
                     <Box display="flex" justifyContent="space-between" marginBottom="1.625rem" paddingX="1rem">
                         <Box display="flex" gap={4}>
-                            <SelectRepository onSelectedRepositoryChanged={setSelectedRepository} />
+                            <SelectListSource
+                                onSelectedRepositoryChanged={setSelectedRepository}
+                                onSelectedTypeChanged={setSelectedType}
+                            />
                         </Box>
                         {env.COMPARISON_FEATURE_FLAG && (
                             <AasListComparisonHeader

src/app/[locale]/list/_components/AasListTableRow.tsx

@@ -21,6 +21,7 @@ import { RepositoryWithInfrastructure } from 'lib/services/database/Infrastructu
 
 type AasTableRowProps = {
     repository: RepositoryWithInfrastructure;
+    connectionType?: 'repository' | 'registry';
     aasListEntry: ListEntityDto;
     comparisonFeatureFlag: boolean | undefined;
     checkBoxDisabled: (aasId: string | undefined) => boolean | undefined;
@@ -37,6 +38,7 @@ const tableBodyText = {
 export const AasListTableRow = (props: AasTableRowProps) => {
     const {
         repository,
+        connectionType,
         aasListEntry,
         comparisonFeatureFlag,
         checkBoxDisabled,
@@ -66,9 +68,10 @@ export const AasListTableRow = (props: AasTableRowProps) => {
         const baseUrl = window.location.origin;
         const pageToGo = env.PRODUCT_VIEW_FEATURE_FLAG ? '/product' : '/viewer';
 
-        const repoUrlParam = repository.url ? `?repoUrl=${repository.url}` : '';
+        // Only send repoUrl parameter if it's a repository, not a registry
+        const repoUrlParam = connectionType === 'repository' && repository.url ? `?repoUrl=${repository.url}` : '';
         const infrastructureParam = repository.infrastructureName
-            ? `&infrastructure=${repository.infrastructureName}`
+            ? `${repoUrlParam ? '&' : '?'}infrastructure=${repository.infrastructureName}`
             : '';
         window.open(
             baseUrl + `${pageToGo}/${encodeBase64(listEntry.aasId)}${repoUrlParam}${infrastructureParam}`,
@@ -88,7 +91,7 @@ export const AasListTableRow = (props: AasTableRowProps) => {
             // this can happen if the property is not a MultiLanguageValueOnly type
             // e.g. if the property is a AAS Property type (incorrect by specification but possible) string or an error occurs
             if (typeof property === 'string') return property;
-            console.error('Error translating property:', e);
+            console.error('Error translating property:', e, 'Property:', property);
             return '';
         }
     };

…ponents/filter/SelectRepository.spec.tsx …ponents/filter/SelectListSource.spec.tsxsrc/app/[locale]/list/_components/filter/SelectRepository.spec.tsx renamed to src/app/[locale]/list/_components/filter/SelectListSource.spec.tsx src/app/[locale]/list/_components/filter/SelectRepository.spec.tsx renamed to src/app/[locale]/list/_components/filter/SelectListSource.spec.tsx

@@ -1,7 +1,7 @@
 import { expect } from '@jest/globals';
 import { CustomRender } from 'test-utils/CustomRender';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
-import { SelectRepository } from 'app/[locale]/list/_components/filter/SelectRepository';
+import { SelectListSource } from 'app/[locale]/list/_components/filter/SelectListSource';
 import * as connectionServerActions from 'lib/services/database/infrastructureDatabaseActions';
 
 jest.mock('./../../../../../lib/services/database/infrastructureDatabaseActions');
@@ -19,8 +19,13 @@ describe('SelectRepository', () => {
         });
         const repositoryChanged = jest.fn();
         (connectionServerActions.getAasRepositoriesIncludingDefault as jest.Mock).mockImplementation(mockDB);
+        (connectionServerActions.getAasRegistriesIncludingDefault as jest.Mock).mockImplementation(
+            jest.fn(() => {
+                return [];
+            }),
+        );
         CustomRender(
-            <SelectRepository
+            <SelectListSource
                 onSelectedRepositoryChanged={() => {
                     repositoryChanged();
                 }}
@@ -31,7 +36,8 @@ describe('SelectRepository', () => {
         const select = screen.getByRole('combobox');
         fireEvent.mouseDown(select);
 
-        const firstElement = screen.getAllByRole('option')[0];
+        // const firstElement = screen.getAllByRole('option')[0];
+        const firstElement = screen.getByTestId('repository-select-item-0');
         fireEvent.click(firstElement);
 
         expect(repositoryChanged).toHaveBeenCalled();