feat(page headers): standardize page headers

CHANGELOG.md

@@ -28,6 +28,8 @@
   - Create and Edit address/site feature introduced
 - App marketplace
   - Add more and collapse button to category view
+- Page headers
+  - harmonization and standardization of page headers
 
 ## 2.0.0
 

src/assets/locales/de/main.json

@@ -612,10 +612,7 @@
       },
       "configurationDetails": {
         "title": "So konfigurieren Sie Ihren Connector",
-        "description1": "Diese Beschreibung enthält Schritt-für-Schritt-Anleitungen zur Konfiguration Ihres Connectors.",
-        "description2": "Bitte befolgen Sie die nachstehenden Anweisungen, um die erforderlichen Konfigurationswerte festzulegen.",
-        "description3": "Stellen Sie sicher, dass Sie für jede Konfigurationseinstellung die richtigen Werte eingeben.",
-        "description4": "Sobald Sie diese Werte festgelegt haben, ist Ihr Connector ordnungsgemäß konfiguriert und einsatzbereit.",
+        "description": "Diese Beschreibung enthält Schritt-für-Schritt-Anleitungen zur Konfiguration Ihres Connectors.<br/> Bitte befolgen Sie die nachstehenden Anweisungen, um die erforderlichen Konfigurationswerte festzulegen.<br/>Stellen Sie sicher, dass Sie für jede Konfigurationseinstellung die richtigen Werte eingeben.<br/> Sobald Sie diese Werte festgelegt haben, ist Ihr Connector ordnungsgemäß konfiguriert und einsatzbereit.",
         "learnMore": "Lern mehr",
         "clientId": "Client-ID Ihres technischen Benutzers",
         "secret": "Geheimnis",

src/assets/locales/en/main.json

@@ -611,10 +611,7 @@
       },
       "configurationDetails": {
         "title": "How to Configure Your Connector",
-        "description1": "This description provides step-by-step instructions on how to configure your connector.",
-        "description2": "Please follow the instructions below to set the necessary configuration values.",
-        "description3": "Ensure that you enter the correct values for each configuration setting.",
-        "description4": "Once you have set these values, your connector will be properly configured and ready to use.",
+        "description": "This description provides step-by-step instructions on how to configure your connector.<br/>Please follow the instructions below to set the necessary configuration values.<br/>Ensure that you enter the correct values for each configuration setting.<br/>Once you have set these values, your connector will be properly configured and ready to use.",
         "learnMore": "learn more",
         "clientId": "Client ID of your technical user",
         "secret": "Secret",

src/components/pages/AboutPage/index.tsx

@@ -19,16 +19,13 @@
 
 import { AboutCard, PageHeader } from '@catena-x/portal-shared-components'
 import legalJson from '../../../assets/notice/legal-notice.json'
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import { useTranslation } from 'react-i18next'
 
 export default function AboutPage() {
   const { t } = useTranslation()
   return (
     <main>
-      <PageHeader title={t('pages.about')} topPage={true} headerHeight={200}>
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      <PageHeader title={t('pages.about')} topPage={true} headerHeight={200} />
       <section
         style={{
           maxWidth: '800px',

src/components/pages/AppOverview/AddRoles.tsx

@@ -17,7 +17,6 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   Typography,
   PageHeader,
@@ -146,9 +145,7 @@ export default function AddRoles() {
 
   return (
     <main className="add-app-roles-main">
-      <PageHeader headerHeight={200} topPage={true} title={app?.[0]?.title}>
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      <PageHeader headerHeight={200} topPage={true} title={app?.[0]?.title} />
       <section>
         <Typography mb={3} variant="body2" align="center">
           {app?.[0]?.title}

src/components/pages/AppOverview/ChangeDescription.tsx

@@ -17,7 +17,6 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   Typography,
   PageHeader,
@@ -144,9 +143,7 @@ export default function ChangeDescription() {
 
   return (
     <main className="change-image-main">
-      <PageHeader title={app?.[0]?.title} headerHeight={200} topPage={true}>
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      <PageHeader title={app?.[0]?.title} headerHeight={200} topPage={true} />
       <section>
         <Typography variant="body2" align="center" mb={3}>
           {app?.[0]?.title}

src/components/pages/AppOverview/ChangeDocuments.tsx

@@ -17,7 +17,6 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   Typography,
   PageHeader,
@@ -231,9 +230,7 @@ export default function ChangeDocuments() {
 
   return (
     <main className="deactivate-main">
-      <PageHeader title={app?.[0]?.title} topPage={true} headerHeight={200}>
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      <PageHeader title={app?.[0]?.title} topPage={true} headerHeight={200} />
 
       <section>
         <Typography mb={3} align="center" variant="body2">

src/components/pages/AppOverview/ChangeImage.tsx

@@ -18,7 +18,6 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   Typography,
   PageHeader,
@@ -137,9 +136,7 @@ export default function ChangeImage() {
 
   return (
     <main className="change-image-main">
-      <PageHeader title={app?.[0]?.title} headerHeight={200} topPage={true}>
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      <PageHeader title={app?.[0]?.title} headerHeight={200} topPage={true} />
       <section>
         <Typography mb={3} variant="body2" align="center">
           {app?.[0]?.title}

src/components/pages/AppOverview/Deactivate.tsx

@@ -18,7 +18,6 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   Typography,
   PageHeader,
@@ -67,9 +66,7 @@ export default function Deactivate() {
 
   return (
     <main className="deactivate-main">
-      <PageHeader title={app?.[0]?.title} topPage={true} headerHeight={200}>
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      <PageHeader title={app?.[0]?.title} topPage={true} headerHeight={200} />
       <section>
         <Typography variant="body2" mb={3} align="center">
           {app?.[0]?.title}

src/components/pages/AppOverview/index.tsx

@@ -20,7 +20,6 @@
 
 import { useCallback, useMemo, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   PageHeader,
   Typography,
@@ -210,9 +209,7 @@ export default function AppOverview() {
         title={t('content.appoverview.headerTitle')}
         topPage={true}
         headerHeight={200}
-      >
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      />
       {recentlyChangedApps && recentlyChangedApps.length > 0 ? (
         <div className="desc-recently">
           <div className="container">

src/components/pages/AppOverviewNew/index.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import { useTranslation } from 'react-i18next'
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import { ErrorBar, PageHeader } from '@catena-x/portal-shared-components'
 import { type AppMarketplaceApp } from 'features/apps/types'
 import { useFetchProvidedAppsQuery } from 'features/apps/apiSlice'
@@ -37,9 +36,7 @@ export default function AppOverviewNew() {
         title={t('content.appoverview.headerTitle')}
         topPage={true}
         headerHeight={200}
-      >
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      />
       <section>
         {data && data.content?.length > 0 ? (
           <AppOverviewList

src/components/pages/AppUserManagement/index.tsx

@@ -27,7 +27,6 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 import AppUserDetailsHeader from './components/AppUserDetailsHeader'
 import { AppUserDetailsTable } from './components/AppUserDetailsTable'
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   Dialog,
   DialogContent,
@@ -78,10 +77,8 @@ export default function AppUserManagement() {
           app: appDetails?.title,
         })}
         topPage={true}
-        headerHeight={314}
-      >
-        <PageBreadcrumb />
-      </PageHeader>
+        headerHeight={200}
+      />
       <AppUserDetailsHeader
         roles={data}
         error={isError ? JSON.stringify(data) : ''}

src/components/pages/CompanyRoleUpdate/index.tsx

@@ -35,7 +35,6 @@ import {
 } from '@catena-x/portal-shared-components'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import {
   type CompanyRolesResponse,
   useFetchRolesQuery,
@@ -111,9 +110,7 @@ export default function CompanyRoles() {
         title={t('content.companyRolesUpdate.headerTitle')}
         topPage={true}
         headerHeight={200}
-      >
-        <PageBreadcrumb backButtonVariant="contained" />
-      </PageHeader>
+      />
       <div className="companyRoles-main">
         <div className="container">
           <Typography variant="h2" className="heading">

src/components/pages/CookiePolicy/index.tsx

@@ -19,41 +19,43 @@
  ********************************************************************************/
 
 import { useTranslation } from 'react-i18next'
-import { Typography } from '@catena-x/portal-shared-components'
+import { PageHeader, Typography } from '@catena-x/portal-shared-components'
 
 export default function CookiePolicy() {
   const { t } = useTranslation('footer', { keyPrefix: 'cookies' })
   return (
     <main className="cookies-page">
-      <Typography variant="h3">{t('title')}</Typography>
-      <div className="cookie-description">
-        <Typography variant="body2">{t('what')}</Typography>
-        <br />
-        <Typography variant="body2">{t('purposes.why')}</Typography>
-        <ul>
-          {[0, 1, 2, 3, 4].map((n) => (
-            <li key={n}>{t(`purposes.reason.${n}`)}</li>
-          ))}
-        </ul>
-        <br />
-        <Typography variant="body2">{t('types.message')}</Typography>
-        <ul>
-          {['strict', 'function', 'target'].map((type) => (
-            <li key={type}>
-              {t(`types.${type}`)}
-              <table className="cookie-table">
-                <thead>
-                  <tr>
-                    <th>XXX</th>
-                    <th>XXX</th>
-                    <th>XXX</th>
-                  </tr>
-                </thead>
-              </table>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <PageHeader headerHeight={200} topPage={true} title={t('title')} />
+      <section>
+        <div>
+          <Typography variant="body2">{t('what')}</Typography>
+          <br />
+          <Typography variant="body2">{t('purposes.why')}</Typography>
+          <ul>
+            {[0, 1, 2, 3, 4].map((n) => (
+              <li key={n}>{t(`purposes.reason.${n}`)}</li>
+            ))}
+          </ul>
+          <br />
+          <Typography variant="body2">{t('types.message')}</Typography>
+          <ul>
+            {['strict', 'function', 'target'].map((type) => (
+              <li key={type}>
+                {t(`types.${type}`)}
+                <table className="cookie-table">
+                  <thead>
+                    <tr>
+                      <th>XXX</th>
+                      <th>XXX</th>
+                      <th>XXX</th>
+                    </tr>
+                  </thead>
+                </table>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
     </main>
   )
 }

src/components/pages/EdcConnector/ConfigurationDetailsOverlay.tsx

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import {
   Button,
   Dialog,
@@ -47,6 +47,11 @@ const ConfigurationDetailsOverlay = ({
   const { t } = useTranslation()
   const { data, isFetching } = useFetchDecentralIdentityUrlsQuery()
 
+  const handleIconDisplay = (value: string | undefined) => {
+    if (value) return true
+    else return false
+  }
+
   const tableData: TableType = {
     head: [
       'trusted_issuer:',
@@ -71,13 +76,13 @@ const ConfigurationDetailsOverlay = ({
     copy: [
       [
         {
-          icon: true,
+          icon: handleIconDisplay(data?.trusted_issuer),
           copyValue: data?.trusted_issuer ?? '',
         },
       ],
       [
         {
-          icon: true,
+          icon: handleIconDisplay(data?.decentralIdentityManagementAuthUrl),
           copyValue: data?.decentralIdentityManagementAuthUrl ?? '',
         },
       ],
@@ -93,25 +98,25 @@ const ConfigurationDetailsOverlay = ({
       ],
       [
         {
-          icon: true,
+          icon: handleIconDisplay(data?.decentralIdentityManagementServiceUrl),
           copyValue: data?.decentralIdentityManagementServiceUrl ?? '',
         },
       ],
       [
         {
-          icon: true,
+          icon: handleIconDisplay(data?.participant_id),
           copyValue: data?.participant_id ?? '',
         },
       ],
       [
         {
-          icon: true,
+          icon: handleIconDisplay(data?.iatp_id),
           copyValue: data?.iatp_id ?? '',
         },
       ],
       [
         {
-          icon: true,
+          icon: handleIconDisplay(data?.did_resolver),
           copyValue: data?.did_resolver ?? '',
         },
       ],
@@ -132,22 +137,15 @@ const ConfigurationDetailsOverlay = ({
             <Box
               sx={{
                 textAlign: 'center',
-                margin: '50px auto 0px',
+                margin: '50px auto 20px',
                 display: 'grid',
               }}
             >
-              <Typography variant="label3">
-                {t('content.edcconnector.configurationDetails.description1')}
-              </Typography>
-              <Typography variant="label3">
-                {t('content.edcconnector.configurationDetails.description2')}
-              </Typography>
-              <Typography variant="label3">
-                {t('content.edcconnector.configurationDetails.description3')}
-              </Typography>
-              <Typography variant="label3">
-                {t('content.edcconnector.configurationDetails.description4')}
-              </Typography>
+              <Trans>
+                <Typography variant="label3">
+                  {t('content.edcconnector.configurationDetails.description')}
+                </Typography>
+              </Trans>
             </Box>
           }
           closeWithIcon={true}