Experimental(product view) add product view (#501)

* feat: Introduce experimental product view feature

- Updated environment variables to replace PRODUCT_VIEW_FEATURE_FLAG with EXPERIMENTAL_PRODUCT_VIEW_FEATURE_FLAG.
- Modified relevant components to utilize the new experimental feature flag.
- Enhanced navigation logic to support the new product view feature.
- Added KeyFactsBox component to display product classifications and markings.
- Updated tests to reflect changes in product overview and action menu components.
- Documented the new experimental feature in the configuration settings.

* fix(env): disable experimental feature flags for stability

* fix env variable and build

---------

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

Author: GailMelanie

.env.local

@@ -8,7 +8,6 @@ AAS_LIST_FEATURE_FLAG=              "true"
 TRANSFER_FEATURE_FLAG=              "false"
 BASYX_RBAC_ENABLED=                 "false"
 WHITELIST_FEATURE_FLAG=             "false"
-PRODUCT_VIEW_FEATURE_FLAG=          "false"
 MNESTIX_V2_ENABLED=                 "true"
 
 AAS_REPO_API_URL=                   "http://localhost:5065/repo"
@@ -35,3 +34,6 @@ BASYX_RBAC_SEC_SM_API_URL= "http://localhost:8089"
 
 IMPRINT_URL=        ""
 DATA_PRIVACY_URL=   "" 
+
+EXPERIMENTAL_PRODUCT_VIEW_FEATURE_FLAG=        "false"
+EXPERIMENTAL_HIGHLIGHT_DATA_FLAG=              "false"

Dockerfile

@@ -30,7 +30,7 @@ FROM base AS production
 WORKDIR /app
 
 ENV NODE_ENV=production
-RUN yarn add prisma
+RUN yarn add prisma@6.19.0
 
 RUN addgroup -g 1001 -S nodejs
 RUN adduser -S nextjs -u 1001

compose.yml

@@ -30,7 +30,7 @@ services:
       AAS_LIST_FEATURE_FLAG: 'true'
       TRANSFER_FEATURE_FLAG: 'false'
       COMPARISON_FEATURE_FLAG: 'true'
-      PRODUCT_VIEW_FEATURE_FLAG: 'false'
+      EXPERIMENTAL_PRODUCT_VIEW_FEATURE_FLAG: 'false'
       AUTHENTICATION_FEATURE_FLAG: 'false'
       LOCK_TIMESERIES_PERIOD_FEATURE_FLAG: 'true'
       NEXTAUTH_SECRET: ${NEXTAUTH_SECRET:-verySecureNextAuthSecret}

src/app/EnvProvider.tsx

@@ -10,7 +10,7 @@ export const initialEnvValues: EnvironmentalVariables = {
     AAS_LIST_FEATURE_FLAG: false,
     COMPARISON_FEATURE_FLAG: false,
     TRANSFER_FEATURE_FLAG: false,
-    PRODUCT_VIEW_FEATURE_FLAG: false,
+    EXPERIMENTAL_PRODUCT_VIEW_FEATURE_FLAG: false,
     KEYCLOAK_ENABLED: false,
     LOCK_TIMESERIES_PERIOD_FEATURE_FLAG: false,
     DISCOVERY_API_URL: undefined,

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

@@ -66,7 +66,7 @@ export const AasListTableRow = (props: AasTableRowProps) => {
 
     const navigateToAas = (listEntry: ListEntityDto) => {
         const baseUrl = window.location.origin;
-        const pageToGo = env.PRODUCT_VIEW_FEATURE_FLAG ? '/product' : '/viewer';
+        const pageToGo = env.EXPERIMENTAL_PRODUCT_VIEW_FEATURE_FLAG ? '/product' : '/viewer';
 
         // Only send repoUrl parameter if it's a repository, not a registry
         const repoUrlParam = connectionType === 'repository' && repository.url ? `?repoUrl=${repository.url}` : '';

src/app/[locale]/product/[base64AasId]/page.tsx

@@ -1,32 +1,42 @@
 'use client';
-import { CurrentAasContextProvider } from 'components/contexts/CurrentAasContext';
+
+import { Box } from '@mui/material';
 import { safeBase64Decode } from 'lib/util/Base64Util';
 import { useParams, useSearchParams } from 'next/navigation';
-import { ProductViewer } from '../_components/ProductViewer';
-import { useShowError } from 'lib/hooks/UseShowError';
-import { Box } from '@mui/material';
 import { NoSearchResult } from 'components/basics/detailViewBasics/NoSearchResult';
+import { CurrentAasContextProvider } from 'components/contexts/CurrentAasContext';
+import { useShowError } from 'lib/hooks/UseShowError';
+import { ProductViewer } from '../_components/ProductViewer';
 
-export default function () {
+export default function Page() {
     const { showError } = useShowError();
     const params = useParams<{ base64AasId: string }>();
-    const base64AasId = (params.base64AasId || '').replace(/=+$|[%3D]+$/, '');
-    const searchParams = useSearchParams();
-    const encodedRepoUrl = searchParams.get('repoUrl');
+    const base64AasId = decodeURIComponent(params.base64AasId).replace(/=+$|[%3D]+$/, '');
+    const encodedRepoUrl = useSearchParams().get('repoUrl');
     const repoUrl = encodedRepoUrl ? decodeURI(encodedRepoUrl) : undefined;
-
+    const infrastructureName = useSearchParams().get('infrastructure') || undefined;
     try {
         const aasIdDecoded = safeBase64Decode(base64AasId);
 
         return (
-            <CurrentAasContextProvider aasId={aasIdDecoded} repoUrl={repoUrl}>
+            <CurrentAasContextProvider aasId={aasIdDecoded} repoUrl={repoUrl} infrastructureName={infrastructureName}>
                 <ProductViewer />
             </CurrentAasContextProvider>
         );
     } catch (e) {
         showError(e);
         return (
-            <Box sx={{ padding: 2 }}>
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '30px',
+                    alignItems: 'center',
+                    width: '100vw',
+                    marginBottom: '50px',
+                    marginTop: '20px',
+                }}
+            >
                 <NoSearchResult base64AasId={base64AasId} />
             </Box>
         );

src/app/[locale]/product/_components/KeyFactsBox.tsx

@@ -0,0 +1,87 @@
+import { Box, Chip, Tooltip, Typography, styled } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import EClassIcon from 'assets/product/eclass.svg';
+import VecIcon from 'assets/product/vec_classification.svg';
+import LabelIcon from '@mui/icons-material/Label';
+/**
+ * Type definition for product classification
+ */
+export interface ProductClassification {
+    ProductClassificationSystem?: string;
+    ProductClassId?: string;
+}
+
+interface ProductClassificationInfoBoxProps {
+    productClassifications: ProductClassification[];
+    markings: string[];
+}
+
+const StyledBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing(2),
+    padding: theme.spacing(2, 3),
+    width: '100%',
+}));
+
+const LabelContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: theme.spacing(4),
+}));
+
+const ValueContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+}));
+
+export function KeyFactsBox({
+    productClassifications,
+    markings,
+}: ProductClassificationInfoBoxProps) {
+    const t = useTranslations('pages.productViewer');
+    const validClassifications = productClassifications ?? [];
+
+    // Return null if there are no valid classifications or markings to show
+    if (validClassifications.length === 0 && markings.length === 0) {
+        return null;
+    }
+
+    const vecIcon = <VecIcon color='primary'></VecIcon>;
+    const eClassIcon = <EClassIcon color='primary'></EClassIcon>;
+
+    return (
+        <Box>
+            <StyledBox bgcolor={'grey.100'}>
+                <LabelContainer>
+                    <Typography sx={{ borderBottom: '2px solid', borderColor: 'primary' }} color="primary" fontWeight="bold">
+                        {t('summary')}
+                    </Typography>
+                </LabelContainer>
+                {validClassifications && validClassifications.map((classification, index) => (
+                    <ValueContainer key={`classification-${index}`}>
+                        <Tooltip title={classification.ProductClassId}>
+                            <Chip
+                                sx={{ color: 'primary.main', backgroundColor: 'grey.200', borderRadius: 5, padding: 0.5 }}
+                                label={classification.ProductClassificationSystem || 'Classification'}
+                                icon={classification.ProductClassificationSystem === 'ECLASS' ? eClassIcon : vecIcon}>
+                            </Chip>
+                        </Tooltip>
+                    </ValueContainer>
+                ))}
+                {markings && markings.map((markingText, index) => (
+                    <ValueContainer key={`classification-${index}`} data-testid="markings-element">
+                            <Chip
+                                sx={{ color: 'primary.main', backgroundColor: 'grey.200', borderRadius: 5, padding: 0.5 }}
+                                label={markingText}
+                                icon={<LabelIcon color='primary' />}>
+                            </Chip>
+                    </ValueContainer>
+                ))}
+            </StyledBox>
+        </Box>
+    );
+}

src/app/[locale]/product/_components/ProductActionMenu.tsx

@@ -5,30 +5,27 @@ import { useState } from 'react';
 import { useTranslations } from 'use-intl';
 import { encodeBase64 } from 'lib/util/Base64Util';
 import { useEnv } from 'app/EnvProvider';
-import { SubmodelOrIdReference, useCurrentAasContext } from 'components/contexts/CurrentAasContext';
+import { SubmodelOrIdReference } from 'components/contexts/CurrentAasContext';
 import { useShowError } from 'lib/hooks/UseShowError';
 import { AssetAdministrationShell } from 'lib/api/aas/models';
-import {
-    checkIfInfrastructureHasSerializationEndpoints,
-    serializeAasFromInfrastructure,
-} from 'lib/services/serialization-service/serializationActions';
-import { useAsyncEffect } from 'lib/hooks/UseAsyncEffect';
+import { serializeAasFromInfrastructure } from 'lib/services/serialization-service/serializationActions';
+import { useNotificationSpawner } from 'lib/hooks/UseNotificationSpawner';
 
 type ActionMenuProps = {
     readonly aas: AssetAdministrationShell | null;
+    readonly repositoryUrl?: string;
+    readonly infrastructureName?: string;
     readonly submodels: SubmodelOrIdReference[] | null;
-    readonly repositoryURL?: string;
     readonly className?: string;
 };
 
-export function ActionMenu({ aas, submodels, repositoryURL, className }: ActionMenuProps) {
+export function ActionMenu({ aas, submodels, className, infrastructureName, repositoryUrl }: ActionMenuProps) {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const navigate = useRouter();
     const t = useTranslations('pages');
     const env = useEnv();
+    const { spawn } = useNotificationSpawner();
     const { showError } = useShowError();
-    const currentAASContext = useCurrentAasContext();
-    const [showDownloadButton, setShowDownloadButton] = useState(false);
 
     const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorEl(event.currentTarget);
@@ -47,55 +44,49 @@ export function ActionMenu({ aas, submodels, repositoryURL, className }: ActionM
 
     const goToAASView = () => {
         if (aas?.id) {
-            navigate.push(`/viewer/${encodeBase64(aas?.id)}`);
+            navigate.push(
+                `/viewer/${encodeBase64(aas?.id)}?repoUrl=${encodeURIComponent(repositoryUrl || '')}&infrastructure=${infrastructureName || ''}`,
+            );
         }
         handleMenuClose();
     };
 
     async function downloadAAS() {
-        if (!aas?.id || !currentAASContext.infrastructureName) {
-            handleMenuClose();
-            return;
-        }
-        if (!repositoryURL) {
-            showError(t('productViewer.actions.downloadErrorNoRepo'));
-            handleMenuClose();
+        if (!aas?.id || !infrastructureName) {
+            showError(t('aasViewer.errors.downloadError'));
             return;
         }
         const submodelIds = Array.isArray(submodels) ? submodels.map((s) => s.id) : [];
         try {
-            const response = await serializeAasFromInfrastructure(
-                aas?.id,
-                submodelIds,
-                currentAASContext.infrastructureName,
-            );
+            const response = await serializeAasFromInfrastructure(aas?.id, submodelIds, infrastructureName);
             if (response.isSuccess && response.result) {
-                const url = window.URL.createObjectURL(response.result.blob);
+                const { blob, endpointUrl, infrastructureName: infra } = response.result;
+                const url = window.URL.createObjectURL(blob);
                 const link = document.createElement('a');
                 link.href = url;
                 link.setAttribute('download', `${aas?.idShort}.aasx`);
                 document.body.appendChild(link);
                 link.click();
                 link.parentNode?.removeChild(link);
                 window.URL.revokeObjectURL(url);
+
+                // Show success message with endpoint information
+                spawn({
+                    title: t('aasViewer.actions.download'),
+                    message: t('aasViewer.messages.downloadSuccess', {
+                        endpoint: endpointUrl,
+                        infrastructure: infra,
+                    }),
+                    severity: 'success',
+                });
             } else if (!response.isSuccess) {
                 showError(response.message);
             }
         } catch {
-            showError(t('productViewer.actions.downloadError'));
+            showError(t('aasViewer.errors.downloadError'));
         }
-        handleMenuClose();
     }
 
-    useAsyncEffect(async () => {
-        if (currentAASContext && currentAASContext.infrastructureName) {
-            const serializationEndpointAvailable = await checkIfInfrastructureHasSerializationEndpoints(
-                currentAASContext.infrastructureName,
-            );
-            setShowDownloadButton(serializationEndpointAvailable.isSuccess);
-        }
-    }, []);
-
     return (
         <>
             <IconButton
@@ -114,16 +105,14 @@ export function ActionMenu({ aas, submodels, repositoryURL, className }: ActionM
                         {t('productViewer.actions.compareButton')}
                     </MenuItem>
                 )}
-                {env.PRODUCT_VIEW_FEATURE_FLAG && (
+                {env.EXPERIMENTAL_PRODUCT_VIEW_FEATURE_FLAG && (
                     <MenuItem onClick={goToAASView} data-testid="detail-aas-view-button">
                         {t('productViewer.actions.toAasView')}
                     </MenuItem>
                 )}
-                {showDownloadButton && (
-                    <MenuItem onClick={downloadAAS} data-testid="detail-download-button">
-                        {t('productViewer.actions.download')}
-                    </MenuItem>
-                )}
+                <MenuItem onClick={downloadAAS} data-testid="detail-download-button">
+                    {t('productViewer.actions.download')}
+                </MenuItem>
             </Menu>
         </>
     );