diff --git a/CHANGELOG.md b/CHANGELOG.md index 05fe18192..7a9fc1fae 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index 60c1e3632..a778107ec 100644 --- a/src/assets/locales/de/main.json +++ b/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.
Bitte befolgen Sie die nachstehenden Anweisungen, um die erforderlichen Konfigurationswerte festzulegen.
Stellen Sie sicher, dass Sie für jede Konfigurationseinstellung die richtigen Werte eingeben.
Sobald Sie diese Werte festgelegt haben, ist Ihr Connector ordnungsgemäß konfiguriert und einsatzbereit.", "learnMore": "Lern mehr", "clientId": "Client-ID Ihres technischen Benutzers", "secret": "Geheimnis", diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index 0aa9a72ab..c208a8ec2 100644 --- a/src/assets/locales/en/main.json +++ b/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.
Please follow the instructions below to set the necessary configuration values.
Ensure that you enter the correct values for each configuration setting.
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", diff --git a/src/components/pages/AboutPage/index.tsx b/src/components/pages/AboutPage/index.tsx index 857adc2fa..6b31c196e 100644 --- a/src/components/pages/AboutPage/index.tsx +++ b/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 (
- - - +
- - - +
{app?.[0]?.title} diff --git a/src/components/pages/AppOverview/ChangeDescription.tsx b/src/components/pages/AppOverview/ChangeDescription.tsx index 45b0ab084..b762c828f 100644 --- a/src/components/pages/AppOverview/ChangeDescription.tsx +++ b/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 (
- - - +
{app?.[0]?.title} diff --git a/src/components/pages/AppOverview/ChangeDocuments.tsx b/src/components/pages/AppOverview/ChangeDocuments.tsx index b761200ad..2b869e5d6 100644 --- a/src/components/pages/AppOverview/ChangeDocuments.tsx +++ b/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 (
- - - +
diff --git a/src/components/pages/AppOverview/ChangeImage.tsx b/src/components/pages/AppOverview/ChangeImage.tsx index f8dc2537e..456d75ae3 100644 --- a/src/components/pages/AppOverview/ChangeImage.tsx +++ b/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 (
- - - +
{app?.[0]?.title} diff --git a/src/components/pages/AppOverview/Deactivate.tsx b/src/components/pages/AppOverview/Deactivate.tsx index 2876f8cb3..8500a474e 100644 --- a/src/components/pages/AppOverview/Deactivate.tsx +++ b/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 (
- - - +
{app?.[0]?.title} diff --git a/src/components/pages/AppOverview/index.tsx b/src/components/pages/AppOverview/index.tsx index 9096908ae..da4fa5c67 100644 --- a/src/components/pages/AppOverview/index.tsx +++ b/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} - > - - + /> {recentlyChangedApps && recentlyChangedApps.length > 0 ? (
diff --git a/src/components/pages/AppOverviewNew/index.tsx b/src/components/pages/AppOverviewNew/index.tsx index 0f321b851..83a71cbb8 100644 --- a/src/components/pages/AppOverviewNew/index.tsx +++ b/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} - > - - + />
{data && data.content?.length > 0 ? ( - - + headerHeight={200} + /> - - + />
diff --git a/src/components/pages/CookiePolicy/index.tsx b/src/components/pages/CookiePolicy/index.tsx index fcb131c16..e621e776a 100644 --- a/src/components/pages/CookiePolicy/index.tsx +++ b/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 (
- {t('title')} -
- {t('what')} -
- {t('purposes.why')} -
    - {[0, 1, 2, 3, 4].map((n) => ( -
  • {t(`purposes.reason.${n}`)}
    • - ))} -
-
- {t('types.message')} -
    - {['strict', 'function', 'target'].map((type) => ( -
  • - {t(`types.${type}`)} - - - - - - - - -
    XXXXXXXXX
    -
    • - ))} -
-
+ +
+
+ {t('what')} +
+ {t('purposes.why')} +
    + {[0, 1, 2, 3, 4].map((n) => ( +
  • {t(`purposes.reason.${n}`)}
    • + ))} +
+
+ {t('types.message')} +
    + {['strict', 'function', 'target'].map((type) => ( +
  • + {t(`types.${type}`)} + + + + + + + + +
    XXXXXXXXX
    +
    • + ))} +
+
+
) } diff --git a/src/components/pages/EdcConnector/ConfigurationDetailsOverlay.tsx b/src/components/pages/EdcConnector/ConfigurationDetailsOverlay.tsx index 949668d71..5d089c898 100644 --- a/src/components/pages/EdcConnector/ConfigurationDetailsOverlay.tsx +++ b/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 = ({ - - {t('content.edcconnector.configurationDetails.description1')} - - - {t('content.edcconnector.configurationDetails.description2')} - - - {t('content.edcconnector.configurationDetails.description3')} - - - {t('content.edcconnector.configurationDetails.description4')} - + + + {t('content.edcconnector.configurationDetails.description')} + + } closeWithIcon={true} diff --git a/src/components/pages/EdcConnector/ConnectorDetailsOverlay.tsx b/src/components/pages/EdcConnector/ConnectorDetailsOverlay.tsx index 034e28d6f..7a22919f7 100644 --- a/src/components/pages/EdcConnector/ConnectorDetailsOverlay.tsx +++ b/src/components/pages/EdcConnector/ConnectorDetailsOverlay.tsx @@ -118,7 +118,7 @@ const ConnectorDetailsOverlay = ({ value: fetchConnectorDetails?.technicalUser === null ? t('content.edcconnector.details.noTechnicalUserAvailable') - : fetchConnectorDetails?.technicalUser, + : fetchConnectorDetails?.technicalUser?.name, }, { key: t('content.edcconnector.details.SdRegistration'), diff --git a/src/components/pages/Imprint/index.tsx b/src/components/pages/Imprint/index.tsx index 980a8b019..bff0f175f 100644 --- a/src/components/pages/Imprint/index.tsx +++ b/src/components/pages/Imprint/index.tsx @@ -18,15 +18,14 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import StageHeader from 'components/shared/frame/StageHeader' -import { Typography } from '@catena-x/portal-shared-components' +import { PageHeader, Typography } from '@catena-x/portal-shared-components' import { useTranslation } from 'react-i18next' export default function Imprint() { const { t } = useTranslation('footer', { keyPrefix: 'imprint' }) return (
- +
{t('directors')} Oliver Ganser ({t('ceo')}) diff --git a/src/components/pages/InviteBusinessPartner/index.tsx b/src/components/pages/InviteBusinessPartner/index.tsx index 29165c598..97fb97e86 100644 --- a/src/components/pages/InviteBusinessPartner/index.tsx +++ b/src/components/pages/InviteBusinessPartner/index.tsx @@ -31,7 +31,6 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline' import CloseIcon from '@mui/icons-material/Close' import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline' import type { InviteData } from 'features/admin/registration/types' -import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { InviteForm } from 'components/overlays/InviteForm' @@ -164,9 +163,7 @@ export default function InviteBusinessPartner() { title={t('content.invite.headerTitle')} topPage={true} headerHeight={200} - > - - + />
{t('content.invite.subHeaderTitle')} diff --git a/src/components/pages/PartnerNetwork/index.tsx b/src/components/pages/PartnerNetwork/index.tsx index a9c61a6ce..3bc0ff62b 100644 --- a/src/components/pages/PartnerNetwork/index.tsx +++ b/src/components/pages/PartnerNetwork/index.tsx @@ -88,7 +88,7 @@ const PartnerNetwork = () => { title={t('content.partnernetwork.headertitle')} topPage={false} headerHeight={200} - > + />
diff --git a/src/components/pages/SemanticHub/index.tsx b/src/components/pages/SemanticHub/index.tsx index 11abfe258..c7ac20138 100644 --- a/src/components/pages/SemanticHub/index.tsx +++ b/src/components/pages/SemanticHub/index.tsx @@ -18,15 +18,15 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import StageHeader from 'components/shared/frame/StageHeader' import { Button, + PageHeader, PageSnackbar, Typography, } from '@catena-x/portal-shared-components' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' -import { Grid } from '@mui/material' +import { Box, Grid } from '@mui/material' import ModelDetailDialog from './ModelDetailDialog' import ModelTable from './ModelTable' import { useDispatch, useSelector } from 'react-redux' @@ -120,7 +120,13 @@ export default function SemanticHub() { return ( <> - + + +
@@ -144,7 +150,12 @@ export default function SemanticHub() { {'alt - - - +
{service?.[0]?.title} diff --git a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx index 7ec45c44b..ce082a542 100644 --- a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx +++ b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx @@ -33,7 +33,6 @@ import { } from 'features/serviceManagement/apiSlice' import { useCallback } from 'react' import { useTranslation } from 'react-i18next' -import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb' import { Divider } from '@mui/material' import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined' import { useParams } from 'react-router-dom' @@ -85,9 +84,7 @@ export default function ServiceDetails() { title={t('servicedetails.headerTitle')} topPage={true} headerHeight={200} - > - - + />
{fetchServiceStatus && ( <> diff --git a/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx b/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx index bc539b05a..96f392969 100644 --- a/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx +++ b/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx @@ -20,7 +20,6 @@ import { useState, useEffect, useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' -import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb' import { PageHeader, ViewSelector, @@ -202,9 +201,7 @@ export default function ServiceListOverview() { title={t('serviceoverview.headerTitle')} topPage={true} headerHeight={200} - > - - + />
diff --git a/src/components/pages/UsecaseParticipation/index.tsx b/src/components/pages/UsecaseParticipation/index.tsx index b8e89b3a4..eccd6e3d3 100644 --- a/src/components/pages/UsecaseParticipation/index.tsx +++ b/src/components/pages/UsecaseParticipation/index.tsx @@ -37,7 +37,6 @@ import LaunchIcon from '@mui/icons-material/Launch' import uniqueId from 'lodash/uniqueId' import { show } from 'features/control/overlay' import { OVERLAYS } from 'types/Constants' -import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb' import { useFetchUsecaseQuery, type UsecaseResponse, @@ -146,9 +145,7 @@ export default function UsecaseParticipation() { title={t('content.usecaseParticipation.headerTitle')} topPage={true} headerHeight={200} - > - - + />
diff --git a/src/components/pages/UserDetail/index.tsx b/src/components/pages/UserDetail/index.tsx index 31314cbc1..e11ad8745 100644 --- a/src/components/pages/UserDetail/index.tsx +++ b/src/components/pages/UserDetail/index.tsx @@ -33,7 +33,6 @@ import { useTranslation } from 'react-i18next' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' import { UserDetailInfo } from 'components/shared/basic/UserDetailInfo' -import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb' import { useFetchUserDetailsQuery } from 'features/admin/userApiSlice' import { OVERLAYS } from 'types/Constants' import { show } from 'features/control/overlay' @@ -68,9 +67,7 @@ export default function UserDetail() { title={t('content.account.userAccount')} topPage={false} headerHeight={200} - > - - + />
{ return (
- - - +
diff --git a/src/components/shared/frame/StageHeader/index.tsx b/src/components/shared/frame/StageHeader/index.tsx deleted file mode 100644 index 5c1637a34..000000000 --- a/src/components/shared/frame/StageHeader/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2023 BMW Group AG - * Copyright (c) 2023 Contributors to the Eclipse Foundation - * - * See the NOTICE file(s) distributed with this work for additional - * information regarding copyright ownership. - * - * This program and the accompanying materials are made available under the - * terms of the Apache License, Version 2.0 which is available at - * https://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * SPDX-License-Identifier: Apache-2.0 - ********************************************************************************/ - -import { getAssetBase } from 'services/EnvironmentService' -import SubHeaderTitle from '../SubHeaderTitle' - -export default function StageHeader({ title }: { title: string }) { - return ( -
-
- -
- Header Background -
- ) -} diff --git a/src/components/shared/templates/AdminBoard/index.tsx b/src/components/shared/templates/AdminBoard/index.tsx index 72f6c697e..cddb13d8f 100644 --- a/src/components/shared/templates/AdminBoard/index.tsx +++ b/src/components/shared/templates/AdminBoard/index.tsx @@ -31,7 +31,6 @@ import { CircleProgress, } from '@catena-x/portal-shared-components' import './AdminBoard.scss' -import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb' import AdminBoardElements from './AdminBoardElements' import { currentSuccessType } from 'features/adminBoard/slice' import type { @@ -399,9 +398,7 @@ export default function CommonAdminBoard({ return (
- - - +