diff --git a/CHANGELOG.md b/CHANGELOG.md index ae39dd4ad..746b9e1a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ - Enhance Sub Menu by adding 'Change Image' for active apps - Change Image(sub menu) functionality added for active apps - App overview 'in review' style fix + - Enhance Sub Menu by adding 'Change Description' for active apps - Bugfix - Service Release Process - Service Release process not working @@ -31,12 +32,14 @@ - Usecase Participation - Created New page under User profile - Add edit Overlay UI + - Fetech usecase via API - Service Release Process - Service Release process not working - Service details page crash issue - Notification - Show done state - Provide icon for marking a notification as read/unread + - New Header and Filter UI - App Release Process - App lead image load issue fix - Service Marketplace @@ -51,6 +54,7 @@ - Certificates - Created New page under User profile - Fetch Certificates and connected to UI +- Data Space ## 1.5.0 diff --git a/DEPENDENCIES b/DEPENDENCIES index aaac3b227..f11019df2 100644 --- a/DEPENDENCIES +++ b/DEPENDENCIES @@ -55,9 +55,9 @@ npm/npmjs/-/babel-plugin-istanbul/6.1.1, BSD-3-Clause, approved, clearlydefined npm/npmjs/-/babel-plugin-jest-hoist/27.5.1, MIT, approved, clearlydefined npm/npmjs/-/babel-plugin-macros/3.1.0, MIT, approved, clearlydefined npm/npmjs/-/babel-plugin-named-asset-import/0.3.8, MIT, approved, clearlydefined -npm/npmjs/-/babel-plugin-polyfill-corejs2/0.4.3, MIT, approved, clearlydefined -npm/npmjs/-/babel-plugin-polyfill-corejs3/0.8.1, MIT, approved, clearlydefined -npm/npmjs/-/babel-plugin-polyfill-regenerator/0.5.0, MIT, approved, clearlydefined +npm/npmjs/-/babel-plugin-polyfill-corejs2/0.4.3, MIT, approved, #9309 +npm/npmjs/-/babel-plugin-polyfill-corejs3/0.8.1, MIT, approved, #9316 +npm/npmjs/-/babel-plugin-polyfill-regenerator/0.5.0, MIT, approved, #9310 npm/npmjs/-/babel-plugin-transform-react-remove-prop-types/0.4.24, MIT, approved, clearlydefined npm/npmjs/-/babel-preset-current-node-syntax/1.0.1, MIT, approved, clearlydefined npm/npmjs/-/babel-preset-jest/27.5.1, MIT, approved, clearlydefined @@ -502,7 +502,7 @@ npm/npmjs/-/json5/1.0.2, MIT, approved, CQ22351 npm/npmjs/-/json5/2.2.3, MIT, approved, #2126 npm/npmjs/-/jsonfile/6.1.0, MIT, approved, clearlydefined npm/npmjs/-/jsonpointer/5.0.1, MIT, approved, clearlydefined -npm/npmjs/-/jsx-ast-utils/3.3.3, MIT, approved, clearlydefined +npm/npmjs/-/jsx-ast-utils/3.3.3, MIT, approved, #9209 npm/npmjs/-/keycloak-js/21.1.1, Apache-2.0 AND MIT, approved, #9145 npm/npmjs/-/kind-of/6.0.3, MIT, approved, clearlydefined npm/npmjs/-/kleur/3.0.3, MIT, approved, clearlydefined @@ -597,7 +597,7 @@ npm/npmjs/-/once/1.4.0, ISC, approved, clearlydefined npm/npmjs/-/onetime/5.1.2, MIT, approved, clearlydefined npm/npmjs/-/open/8.4.2, MIT, approved, #7102 npm/npmjs/-/optionator/0.8.3, MIT, approved, clearlydefined -npm/npmjs/-/optionator/0.9.1, MIT, approved, clearlydefined +npm/npmjs/-/optionator/0.9.1, MIT, approved, #9208 npm/npmjs/-/p-limit/2.3.0, MIT, approved, clearlydefined npm/npmjs/-/p-limit/3.1.0, MIT, approved, clearlydefined npm/npmjs/-/p-locate/3.0.0, MIT, approved, clearlydefined @@ -1003,7 +1003,7 @@ npm/npmjs/@babel/helper-builder-binary-assignment-operator-visitor/7.22.5, MIT A npm/npmjs/@babel/helper-compilation-targets/7.22.5, MIT, approved, #9037 npm/npmjs/@babel/helper-create-class-features-plugin/7.22.5, MIT, approved, #8985 npm/npmjs/@babel/helper-create-regexp-features-plugin/7.22.5, MIT, approved, #8950 -npm/npmjs/@babel/helper-define-polyfill-provider/0.4.0, MIT, approved, clearlydefined +npm/npmjs/@babel/helper-define-polyfill-provider/0.4.0, MIT, approved, #9314 npm/npmjs/@babel/helper-environment-visitor/7.22.5, MIT, approved, #8934 npm/npmjs/@babel/helper-function-name/7.22.5, MIT, approved, #9071 npm/npmjs/@babel/helper-hoist-variables/7.22.5, MIT, approved, #8957 @@ -1124,7 +1124,7 @@ npm/npmjs/@babel/template/7.22.5, MIT, approved, #9017 npm/npmjs/@babel/traverse/7.22.5, MIT, approved, #8954 npm/npmjs/@babel/types/7.22.5, MIT, approved, #8967 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined -npm/npmjs/@catena-x/portal-shared-components/2.0.2, Apache-2.0 AND (BSD-3-Clause AND JSON AND MIT), restricted, #9187 +npm/npmjs/@catena-x/portal-shared-components/2.0.5, Apache-2.0 AND (BSD-3-Clause AND MIT), approved, #9187 npm/npmjs/@csstools/normalize.css/12.0.0, CC0-1.0, approved, clearlydefined npm/npmjs/@csstools/postcss-cascade-layers/1.1.1, CC0-1.0, approved, clearlydefined npm/npmjs/@csstools/postcss-color-function/1.1.1, CC0-1.0 AND (MIT AND W3C-20150513) AND W3C-20150513 AND MIT, approved, #3022 @@ -1191,7 +1191,7 @@ npm/npmjs/@jest/types/29.5.0, MIT, approved, clearlydefined npm/npmjs/@jridgewell/gen-mapping/0.3.3, MIT, approved, clearlydefined npm/npmjs/@jridgewell/resolve-uri/3.1.0, MIT, approved, clearlydefined npm/npmjs/@jridgewell/set-array/1.1.2, MIT, approved, clearlydefined -npm/npmjs/@jridgewell/source-map/0.3.3, MIT, approved, clearlydefined +npm/npmjs/@jridgewell/source-map/0.3.3, MIT, approved, #9304 npm/npmjs/@jridgewell/sourcemap-codec/1.4.14, MIT, approved, clearlydefined npm/npmjs/@jridgewell/sourcemap-codec/1.4.15, MIT, approved, clearlydefined npm/npmjs/@jridgewell/trace-mapping/0.3.18, MIT, approved, clearlydefined diff --git a/package.json b/package.json index 5b0fc7df9..4aa1019b5 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ ] }, "dependencies": { - "@catena-x/portal-shared-components": "2.0.4", + "@catena-x/portal-shared-components": "^2.0.5", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@hookform/error-message": "^2.0.1", diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index 6b72875d6..b1bc4c756 100644 --- a/src/assets/locales/de/main.json +++ b/src/assets/locales/de/main.json @@ -60,7 +60,8 @@ "company-role": "Config - Company Role", "usecase-participation": "Config - Use Case Participation", "certificate-credential": "Config - Certificates", - "about": "About" + "about": "About", + "dataspace": "Data Space" }, "overlays": { "invite": "Neuen Geschäftspartner einladen", @@ -184,22 +185,26 @@ "slider1": { "title": "Catena-X", "subtitle": "das Tor zum digitalen Automotive-Netzwerk", - "buttonName": "Meine Apps" + "buttonName": "Meine Apps", + "navigation": "/appmanagement" }, "slider2": { "title": "Use Case Introduction", "subtitle": "Lernen Sie die unterstützten Anwendungsfälle, zugehörigen semantischen Modelle und Apps kennen, um Ihre anwendungsfallgesteuerte Onboarding-Reise zu beginnen.", - "buttonName": "Use Case Introduction" + "buttonName": "Use Case Introduction", + "navigation": "/usecase" }, "slider3": { "title": "Marktplätze", "subtitle": "Transparenter und interoperabler Service- und Business-Applikations-Marktplatz, um neue Ideen umzusetzen und Daten optimal zu nutzen.", - "buttonName": "Marktplatz" + "buttonName": "Marktplatz", + "navigation": "/marketplace" }, "slider4": { "title": "Benutzermanagement", "subtitle": "Verwalten Sie Benutzerzugriffe zentral, um den Verwaltungsaufwand zu reduzieren und einen transparenten Überblick über alle Benutzerrechte zu gewährleisten.", - "buttonName": "Benutzermanagement" + "buttonName": "Benutzermanagement", + "navigation": "/usermanagement" } }, "searchSection": { @@ -379,7 +384,8 @@ }, "sortOptions": { "deactivate": "Deactivate", - "changeImage": "Change Image" + "changeImage": "Change Image", + "changeDescription": "Change Description" }, "addbtn": "Registrieren Sie Ihre App", "confirmModal": { @@ -1427,6 +1433,9 @@ "step2": "You can sign additional use cases by selecting the document download, signing the document and upload the same", "note": "Please note: ", "noteDetail": "Please note - use case participation revocation is currently not enabled. Please contact the platform owner for support.", + "version": "Version: {{version}}", + "framework": "Framework", + "expiry": "Expiry: {{expiry}}", "editUsecase": { "title": "Trigger the use case participation by signing and uploading the use case frame agreement for {use case name}", "description": "To be able to participate in the data exchange of the use case {use case name} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished", diff --git a/src/assets/locales/de/notification.json b/src/assets/locales/de/notification.json index f1e7cd930..16e6df352 100644 --- a/src/assets/locales/de/notification.json +++ b/src/assets/locales/de/notification.json @@ -120,15 +120,37 @@ "new": "Neuste", "oldest": "Älteste", "unread": "Ungelesen", - "all": "Alle", - "app": "Apps", - "info": "Information", - "withaction": "Action" + "all": { + "title": "All notifications", + "description": "Messaged for required action from your side", + "countTitle": "new" + }, + "info": { + "title": "Info notifications", + "description": "Changes of assigned roles or newly created tech users", + "countTitle": "new" + }, + "app": { + "title": "App notifications", + "description": "App publish notifications, request, activations, etc.", + "countTitle": "new" + }, + "withaction": { + "title": "Action Required", + "description": "Your action is needed", + "countTitle": "to do" + } }, "tooltip": { "email": { "read": "Mark it as unread", "unread": "Mark it as read" } + }, + "header": { + "title": "Notifications", + "subtitle": "Hier erhalten Sie relevante Neuigkeiten zu Catena-X, veröffentlichten Apps und Diensten sowie den von Ihnen genutzten Apps und Diensten. Darüber hinaus werden Änderungen an Ihrem Benutzerkonto, z. B. neu zugewiesene oder entzogene Rollen, geteilt.", + "linkText": "Help", + "link": "https://portal.dev.demo.catena-x.net/documentation/?path=docs%2F06.+Notifications" } } diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index f8d264ae0..8a41b9447 100644 --- a/src/assets/locales/en/main.json +++ b/src/assets/locales/en/main.json @@ -59,7 +59,8 @@ "company-role": "Config - Company Role", "usecase-participation": "Config - Use Case Participation", "certificate-credential": "Config - Certificates", - "about": "About" + "about": "About", + "dataspace": "Data Space" }, "overlays": { "invite": "Invite new Business Partner", @@ -183,22 +184,26 @@ "slider1": { "title": "Catena-X", "subtitle": "the gateway to the automotive digital network", - "buttonName": "My Apps" + "buttonName": "My Apps", + "navigation": "/appmanagement" }, "slider2": { "title": "Use Case Introduction", "subtitle": "Get to know the supported use cases, related semantic models and apps to start your use case driven onboarding journey.", - "buttonName": "Use Case Introduction" + "buttonName": "Use Case Introduction", + "navigation": "/usecase" }, "slider3": { "title": "Marketplaces", "subtitle": "Transparent and interobarble service and business application marketplace to realize new ideas and use data optimally", - "buttonName": "Marketplace" + "buttonName": "Marketplace", + "navigation": "/marketplace" }, "slider4": { "title": "User Management", "subtitle": "Manage user access centrally to reduce administrative work and ensure a transparent overview of all user rights.", - "buttonName": "User Management" + "buttonName": "User Management", + "navigation": "/usermanagement" } }, "searchSection": { @@ -378,7 +383,8 @@ }, "sortOptions": { "deactivate": "Deactivate", - "changeImage": "Change Image" + "changeImage": "Change Image", + "changeDescription": "Change Description" }, "addbtn": "Register your App", "confirmModal": { @@ -1389,6 +1395,9 @@ "step2": "You can sign additional use cases by selecting the document download, signing the document and upload the same", "note": "Please note: ", "noteDetail": "Please note - use case participation revocation is currently not enabled. Please contact the platform owner for support.", + "version": "Version: {{version}}", + "framework": "Framework", + "expiry": "Expiry: {{expiry}}", "editUsecase": { "title": "Trigger the use case participation by signing and uploading the use case frame agreement for {use case name}", "description": "To be able to participate in the data exchange of the use case {use case name} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished", diff --git a/src/assets/locales/en/notification.json b/src/assets/locales/en/notification.json index caf5219a6..6313e9791 100644 --- a/src/assets/locales/en/notification.json +++ b/src/assets/locales/en/notification.json @@ -116,15 +116,37 @@ "new": "Newest First", "oldest": "Oldest First", "unread": "Unread First", - "all": "all", - "app": "app only", - "info": "info only", - "withaction": "action required" + "all": { + "title": "All notifications", + "description": "Messaged for required action from your side", + "countTitle": "new" + }, + "info": { + "title": "Info notifications", + "description": "Changes of assigned roles or newly created tech users", + "countTitle": "new" + }, + "app": { + "title": "App notifications", + "description": "App publish notifications, request, activations, etc.", + "countTitle": "new" + }, + "withaction": { + "title": "Action Required", + "description": "Your action is needed", + "countTitle": "to do" + } }, "tooltip": { "email": { "read": "Mark it as unread", "unread": "Mark it as read" } + }, + "header": { + "title": "Notifications", + "subtitle": "Here you will receive relevant news about Catena-X, published apps and services and the apps and services you use. In addition, changes to your user account, e.g. B. newly assigned or revoked roles.", + "linkText": "Help", + "link": "https://portal.dev.demo.catena-x.net/documentation/?path=docs%2F06.+Notifications" } } diff --git a/src/components/pages/Admin/components/ProvisionIdentityProviderForm/ProvisionIdentityProviderForm.scss b/src/components/pages/Admin/components/ProvisionIdentityProviderForm/ProvisionIdentityProviderForm.scss deleted file mode 100644 index 9afee0ee8..000000000 --- a/src/components/pages/Admin/components/ProvisionIdentityProviderForm/ProvisionIdentityProviderForm.scss +++ /dev/null @@ -1,108 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2021, 2023 BMW Group AG - * Copyright (c) 2021, 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 - ********************************************************************************/ - -.ProvisionIdentityProviderForm, -.ProvisionIdentityProviderFormOverlay { - background-color: white; - width: 440px; - height: 540px; - padding: 40px; - font-size: 12px; - line-height: 26px; - text-align: center; - position: absolute; - left: 50%; - top: 46%; - transform: translate(-50%) translateY(-30%); - border: 0px solid gray; - box-shadow: 0 0 1em gray; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.ProvisionIdentityProviderForm { - z-index: 2; -} - -.ProvisionIdentityProviderForm > * { - margin: 8px 0; -} - -.ProvisionIdentityProviderForm > h4 { - margin-bottom: 12px; -} - -.ProvisionIdentityProviderForm > button { - margin-top: 12px; -} - -.ProvisionIdentityProviderFormOverlay { - opacity: 0.95; - font-size: 32px; - line-height: 42px; -} - -.ProvisionIdentityProviderForm > .input { - visibility: hidden; -} - -.busy, -.success, -.failure { - z-index: 3; -} - -.failure { - color: red; -} - -.success { - color: green; -} - -.loader { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%) translateY(-50%); - display: inline-block; - width: 120px; - height: 120px; - border: 24px solid #b3cb2d; -} -.loader:after { - content: ' '; - display: block; - width: 72px; - height: 72px; - margin: 0; - border-radius: 0; - border: 24px solid #ffa600; - animation: loader 3s linear infinite; -} -@keyframes loader { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/src/components/pages/Admin/components/ProvisionIdentityProviderForm/index.tsx b/src/components/pages/Admin/components/ProvisionIdentityProviderForm/index.tsx deleted file mode 100644 index d2746dba6..000000000 --- a/src/components/pages/Admin/components/ProvisionIdentityProviderForm/index.tsx +++ /dev/null @@ -1,120 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2021, 2023 BMW Group AG - * Copyright (c) 2021, 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 { Button, Input, Typography } from '@catena-x/portal-shared-components' -import debounce from 'lodash.debounce' -import { useCallback, useMemo, useState } from 'react' -import { useTranslation } from 'react-i18next' -import { ProvisionIdentityProviderData } from 'features/provisioning/types' -import './ProvisionIdentityProviderForm.scss' - -export const ProvisionIdentityProviderForm = ({ - state, - onSubmit, -}: { - state: string - onSubmit: (data: ProvisionIdentityProviderData) => void -}) => { - const { t } = useTranslation() - const [inpExpr, setInpExpr] = useState(['', '', '', '', '']) - const [inpValid, setInpValid] = useState([ - false, - false, - false, - false, - false, - true, - ]) - - const debouncedValidation = useMemo( - () => - debounce((expr: string[]) => { - const check = [ - /^.{2,60}$/, - /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/, - /^.{2,60}$/, - /^.{2,60}$/, - /^[a-z_]{4,20}$/, - ].map((p, i) => !p.test(expr[i])) - check.push( - check.reduce((all, valid) => all || valid), - false - ) - setInpValid(check) - }, 300), - [setInpValid] - ) - - const doValidate = useCallback( - (index: number, value: string) => { - const data = inpExpr - data[index] = value - setInpExpr(data.slice()) - debouncedValidation(data) - }, - [debouncedValidation, inpExpr] - ) - - const doSubmit = () => - onSubmit({ - organisationName: inpExpr[0].trim(), - metadataUrl: inpExpr[1].trim(), - clientId: inpExpr[2].trim(), - clientSecret: inpExpr[3].trim(), - clientAuthMethod: inpExpr[4].trim(), - }) - - return ( - <> -
- {t('content.provisionIdp.title')} - {[ - 'organization', - 'metadata', - 'clientId', - 'clientSecret', - 'clientAuthMethod', - ].map((value, i) => ( - doValidate(i, e.target.value)} - > - ))} - -
-
- {state === 'busy' ? ( -
- ) : ( - t(`content.provisionIdp.${state}`) - )} -
- - ) -} diff --git a/src/components/pages/Admin/index.tsx b/src/components/pages/Admin/index.tsx deleted file mode 100644 index b23e48140..000000000 --- a/src/components/pages/Admin/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2021, 2023 BMW Group AG - * Copyright (c) 2021, 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 { ProvisionIdentityProviderForm } from 'components/pages/Admin/components/ProvisionIdentityProviderForm' -import { useState } from 'react' -import { info } from 'services/LogService' -import { ProvisioningApi } from 'features/provisioning/api' -import { ProvisionIdentityProviderData } from 'features/provisioning/types' -import { SuccessErrorType } from 'features/admin/appuserApiSlice' - -export default function Admin() { - const [processing, setProcessing] = useState('input') - - const doSubmit = (data: ProvisionIdentityProviderData) => { - setProcessing('busy') - - new ProvisioningApi() - .provisionIdp(data) - .then(() => { - setProcessing(SuccessErrorType.SUCCESS) - info(`provisioning for company ${data.organisationName} started`) - }) - .catch((error: unknown) => { - setProcessing('failure') - info(`provisioning for company ${data.organisationName} failed`) - info(JSON.stringify(error)) - }) - .finally(() => { - setTimeout(() => { - setProcessing('input') - }, 5000) - }) - } - - return ( -
- -
- ) -} diff --git a/src/components/pages/AppOverview/AppOverviewList.tsx b/src/components/pages/AppOverview/AppOverviewList.tsx index 701f73ebc..70700ea31 100644 --- a/src/components/pages/AppOverview/AppOverviewList.tsx +++ b/src/components/pages/AppOverview/AppOverviewList.tsx @@ -29,6 +29,7 @@ import { fetchImageWithToken } from 'services/ImageService' enum AppSubMenuItems { DEACTIVATE = 'deactivate', CHANGE_IMAGE = 'changeImage', + CHANGE_DESCRIPTION = 'changeDescription', } export const AppOverviewList = ({ @@ -56,6 +57,11 @@ export const AppOverviewList = ({ value: AppSubMenuItems.CHANGE_IMAGE, url: '', }, + { + label: t('content.appoverview.sortOptions.changeDescription'), + value: AppSubMenuItems.CHANGE_DESCRIPTION, + url: '', + }, ] return ( @@ -85,6 +91,10 @@ export const AppOverviewList = ({ navigate(`/changeimage/${id}`, { state: filterItem, }) + sortMenu === AppSubMenuItems.CHANGE_DESCRIPTION && + navigate(`/changedescription/${id}`, { + state: filterItem, + }) return undefined }} tooltipText={t('content.appoverview.submenuNotAvail')} diff --git a/src/components/pages/AppOverview/ChangeDescription.tsx b/src/components/pages/AppOverview/ChangeDescription.tsx new file mode 100644 index 000000000..bcd23253f --- /dev/null +++ b/src/components/pages/AppOverview/ChangeDescription.tsx @@ -0,0 +1,22 @@ +/******************************************************************************** + * Copyright (c) 2021, 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 + ********************************************************************************/ + +export default function ChangeDescription() { + return <>In Progress +} diff --git a/src/components/pages/CompanyRoles/index.tsx b/src/components/pages/CompanyRoles/index.tsx index d2d72f5f6..663d4f6e3 100644 --- a/src/components/pages/CompanyRoles/index.tsx +++ b/src/components/pages/CompanyRoles/index.tsx @@ -37,23 +37,7 @@ export default function CompanyRoles() { useEffect(() => { CommonService.getCompanyRoles((data: any) => { - setLinkArray([ - { - index: 1, - title: data.subNavigation.link1Label, - navigation: 'intro-id', - }, - { - index: 2, - title: data.subNavigation.link2Label, - navigation: 'data-id', - }, - { - index: 3, - title: data.subNavigation.link3Label, - navigation: 'business-id', - }, - ]) + setLinkArray(data.subNavigation) if (url.indexOf('companyrolesappprovider') > 1) { setCompanyRoles(data.appProvider) } else if (url.indexOf('companyrolesserviceprovider') > 1) { diff --git a/src/components/pages/Admin/components/ProvisionIdentityProviderForm/ProvisionIdentityProviderForm.stories.tsx b/src/components/pages/DataSpace/UseCase.scss similarity index 55% rename from src/components/pages/Admin/components/ProvisionIdentityProviderForm/ProvisionIdentityProviderForm.stories.tsx rename to src/components/pages/DataSpace/UseCase.scss index 91bbec2a2..b6f9ca1af 100644 --- a/src/components/pages/Admin/components/ProvisionIdentityProviderForm/ProvisionIdentityProviderForm.stories.tsx +++ b/src/components/pages/DataSpace/UseCase.scss @@ -1,5 +1,4 @@ /******************************************************************************** - * Copyright (c) 2021, 2023 BMW Group AG * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation * * See the NOTICE file(s) distributed with this work for additional @@ -18,28 +17,9 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import { ComponentStory, ComponentMeta } from '@storybook/react' -import { ProvisionIdentityProviderForm } from '.' -import { MemoryRouter } from 'react-router-dom' +@import 'src/components/styles/_colors'; -export default { - title: 'frame/ProvisionIdentityProviderForm', - component: ProvisionIdentityProviderForm, - parameters: { - layout: 'fullscreen', - }, - decorators: [ - (Story) => ( - - - - ), - ], - styles: ['./components/App.css'], -} as ComponentMeta - -const Template: ComponentStory = ( - args -) => - -export const Standard = Template.bind({}) +.dataSpace { + width: 100%; + padding: 0px; +} diff --git a/src/components/pages/DataSpace/index.tsx b/src/components/pages/DataSpace/index.tsx new file mode 100644 index 000000000..c97b21dc7 --- /dev/null +++ b/src/components/pages/DataSpace/index.tsx @@ -0,0 +1,66 @@ +/******************************************************************************** + * Copyright (c) 2021, 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 './UseCase.scss' +import StageSection from 'components/shared/templates/StageSection' +import { StageSubNavigation } from 'components/shared/templates/StageSubNavigation' +import { useEffect, useState } from 'react' +import CommonService from 'services/CommonService' +import { getAssetBase } from 'services/EnvironmentService' +import { StaticTemplateResponsive } from 'components/shared/templates/StaticTemplateResponsive' +import { useSelector } from 'react-redux' +import { languageSelector } from 'features/language/slice' + +export default function DataSpace() { + const [dataSpace, setDataSpace] = useState() + const [linkArray, setLinkArray] = useState() + const [isTop, setIsTop] = useState(false) + const language = useSelector(languageSelector) + + useEffect(() => { + CommonService.getDataSpace((data: any) => { + setDataSpace(data) + setLinkArray(data.subNavigation) + }) + }, [language]) + + const onScroll = () => { + setIsTop(window.scrollY > 500) + } + + window.addEventListener('scroll', onScroll) + + return ( +
+ {dataSpace && linkArray && ( + <> + + + + + )} +
+ ) +} diff --git a/src/components/pages/Home/components/StageSection/index.tsx b/src/components/pages/Home/components/StageSection/index.tsx index 367b0358a..4af9cc933 100644 --- a/src/components/pages/Home/components/StageSection/index.tsx +++ b/src/components/pages/Home/components/StageSection/index.tsx @@ -19,13 +19,13 @@ ********************************************************************************/ import { useTranslation } from 'react-i18next' -import PageService from 'services/PageService' -import { label as BusinessApplications } from '../BusinessApplicationsSection' import { getAssetBase } from 'services/EnvironmentService' import { SlidingMainHeader } from 'components/shared/frame/SlidingMainHeader/SlidingMainHeader' +import { useNavigate } from 'react-router-dom' export default function StageSection() { const { t } = useTranslation() + const navigate = useNavigate() return (
@@ -36,28 +36,32 @@ export default function StageSection() { subTitle: t('content.home.stage.slider1.subtitle'), imagePath: `${getAssetBase()}/images/frame/home-stage-desktop.png`, buttonText: t('content.home.stage.slider1.buttonName'), - handleClick: () => PageService.scrollTo(BusinessApplications), + handleClick: () => + navigate(t('content.home.stage.slider1.navigation')), }, { title: t('content.home.stage.slider2.title'), subTitle: t('content.home.stage.slider2.subtitle'), imagePath: `${getAssetBase()}/images/frame/desktop-bg-frame.png`, buttonText: t('content.home.stage.slider2.buttonName'), - handleClick: () => PageService.scrollTo(BusinessApplications), + handleClick: () => + navigate(t('content.home.stage.slider2.navigation')), }, { title: t('content.home.stage.slider3.title'), subTitle: t('content.home.stage.slider3.subtitle'), imagePath: `${getAssetBase()}/images/frame/home-stage-desktop.png`, buttonText: t('content.home.stage.slider3.buttonName'), - handleClick: () => PageService.scrollTo(BusinessApplications), + handleClick: () => + navigate(t('content.home.stage.slider3.navigation')), }, { title: t('content.home.stage.slider4.title'), subTitle: t('content.home.stage.slider4.subtitle'), imagePath: `${getAssetBase()}/images/frame/desktop-bg-frame.png`, buttonText: t('content.home.stage.slider4.buttonName'), - handleClick: () => PageService.scrollTo(BusinessApplications), + handleClick: () => + navigate(t('content.home.stage.slider4.navigation')), }, ]} stageHeaderInfo={[ diff --git a/src/components/pages/NotificationCenter/index.tsx b/src/components/pages/NotificationCenter/index.tsx index ca731390e..cbabff982 100644 --- a/src/components/pages/NotificationCenter/index.tsx +++ b/src/components/pages/NotificationCenter/index.tsx @@ -19,7 +19,6 @@ ********************************************************************************/ import { useEffect, useRef, useState } from 'react' -import StageHeader from 'components/shared/frame/StageHeader' import { useGetNotificationsQuery, useGetNotificationMetaQuery, @@ -43,7 +42,6 @@ import relativeTime from 'dayjs/plugin/relativeTime' import './Notifications.scss' import { SearchInput, - ViewSelector, SortOption, CircleProgress, } from '@catena-x/portal-shared-components' @@ -51,6 +49,8 @@ import { Box } from '@mui/material' import { useSelector } from 'react-redux' import { initialNotificationState } from 'features/notification/slice' import SortImage from 'components/shared/frame/SortImage' +import { SeactionHeader } from 'components/shared/frame/SectionHeader' +import { FramedSelector } from 'components/shared/frame/FramedSelector' dayjs.extend(isToday) dayjs.extend(isYesterday) @@ -107,10 +107,10 @@ export default function NotificationCenter() { >([]) const [paginationData, setPaginationData] = useState() - const setView = (e: React.MouseEvent) => { + const setView = (val: string) => { setLoaded(true) setPage(0) - setFilterOption(e.currentTarget.value) + setFilterOption(val) } useEffect(() => { @@ -158,26 +158,36 @@ export default function NotificationCenter() { const filterButtons = [ { - buttonText: `${t('sortOptions.all')} (${getTotalCount(pages?.unread)})`, + buttonText: t('sortOptions.all.title'), buttonValue: NOTIFICATION_TOPIC.ALL, + buttonDescription: t('sortOptions.all.description'), onButtonClick: setView, + count: getTotalCount(pages?.unread), + countTitle: t('sortOptions.all.countTitle'), }, { - buttonText: `${t('sortOptions.app')} (${pages?.offerUnread || 0})`, + buttonText: t('sortOptions.app.title'), buttonValue: NOTIFICATION_TOPIC.OFFER, + buttonDescription: t('sortOptions.app.description'), onButtonClick: setView, + count: pages?.offerUnread || 0, + countTitle: t('sortOptions.app.countTitle'), }, { - buttonText: `${t('sortOptions.info')} (${pages?.infoUnread || 0})`, + buttonText: t('sortOptions.info.title'), buttonValue: NOTIFICATION_TOPIC.INFO, + buttonDescription: t('sortOptions.info.description'), onButtonClick: setView, + count: pages?.infoUnread || 0, + countTitle: t('sortOptions.info.countTitle'), }, { - buttonText: `${t('sortOptions.withaction')} (${ - pages?.actionRequired || 0 - })`, + buttonText: t('sortOptions.withaction.title'), buttonValue: NOTIFICATION_TOPIC.ACTION, + buttonDescription: t('sortOptions.withaction.description'), onButtonClick: setView, + count: pages?.actionRequired || 0, + countTitle: t('sortOptions.withaction.countTitle'), }, ] @@ -197,7 +207,12 @@ export default function NotificationCenter() { return (
- +
- +
{isFetching && ( { CommonService.getUseCases((data: any) => { setUseCase(data) - setLinkArray([ - { - index: 1, - title: data.subNavigation.link1Label, - navigation: 'intro-id', - }, - { - index: 2, - title: data.subNavigation.link2Label, - navigation: 'core-id', - }, - { - index: 3, - title: data.subNavigation.link3Label, - navigation: 'details-id', - }, - { - index: 4, - title: data.subNavigation.link4Label, - navigation: 'business-id', - }, - ]) + setLinkArray(data.subNavigation) }) }, [language]) diff --git a/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss b/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss index 054ba4e56..e3f02172b 100644 --- a/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss +++ b/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss @@ -67,8 +67,8 @@ border-bottom: 1px solid #dcdcdc; padding: 30px; } - .usecase-list { - max-width: 720px; + .usecase-list-main { + max-width: 850px; width: 100%; margin: 0 auto 50px; ul { @@ -77,13 +77,50 @@ border: 0; border-top: 1px solid #dcdcdc; } - li { - margin-bottom: 20px; - display: flex; - .usecase-detail { - width: 80%; + .usecase-list { + margin-bottom: 30px; + .usecase-list-item { + margin-bottom: 20px; + display: flex; + .usecase-detail { + display: flex; + width: 80%; + svg { + margin: 4px 10px 0 0; + font-size: 22px; + color: #888888; + } + } + } + .credential-list { + list-style: none; + .credential-list-item { + margin-bottom: 10px; + display: flex; + .firstSection { + width: 60%; + } + .secondSection { + width: 30%; + } + .thirdSection { + width: 30%; + } + .forthSection { + width: 35%; + } + .fifthSection { + width: 30%; + } + } } } } + .grey { + color: #888888; + } + .green { + color: #95b087; + } } } diff --git a/src/components/pages/UsecaseParticipation/index.tsx b/src/components/pages/UsecaseParticipation/index.tsx index c70d3c422..cbdbd5693 100644 --- a/src/components/pages/UsecaseParticipation/index.tsx +++ b/src/components/pages/UsecaseParticipation/index.tsx @@ -19,20 +19,52 @@ import { useDispatch } from 'react-redux' import { useTranslation, Trans } from 'react-i18next' -import { show } from 'features/control/overlay' -import { OVERLAYS } from 'types/Constants' import { Chip, PageHeader, Typography, } from '@catena-x/portal-shared-components' +import PixIcon from '@mui/icons-material/Pix' +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 } from 'features/usecase/usecaseApiSlice' import './UsecaseParticipation.scss' +import { SubscriptionStatus } from 'features/apps/apiSlice' export default function UsecaseParticipation() { const { t } = useTranslation() const dispatch = useDispatch() + const { data } = useFetchUsecaseQuery() + + const renderStatus = (status: string) => { + if ( + status === SubscriptionStatus.PENDING || + status === SubscriptionStatus.ACTIVE + ) { + return ( + + {status} + + ) + } else { + return ( + dispatch(show(OVERLAYS.EDIT_USECASE, 'userId'))} + withIcon={false} + type="plain" + /> + ) + } + } + return (
-
+
    -
  • -
    - 'Ise Case Title' - - 'Use case desctption' - -
    - 'Status' -
    • -
    -
  • -
    - 'Ise Case Title' - - 'Use case desctption' - -
    - - dispatch(show(OVERLAYS.EDIT_USECASE, 'userId')) - } - withIcon={false} - type="plain" - /> -
    • + {data?.map((item) => { + return ( +
    +
  • +
    + +
    + + {item.useCase} + + + {item.description} + +
    +
    +
    • +
      + {item.verifiedCredentials.map((credential) => { + return ( + <> +
      +
    • + + { + credential.externalDetailData + .verifiedCredentialExternalTypeId + } + + + + {t('content.usecaseParticipation.version')} + + + + {t('content.usecaseParticipation.framework')} + + + + {credential.externalDetailData.expiry + ? t('content.usecaseParticipation.expiry') + : 'N/A'} + + + + {renderStatus( + credential.ssiDetailData?.participationStatus + )} + +
      • + + ) + })} +
    +
    +
    + ) + })}
diff --git a/src/components/shared/frame/FramedSelector/FramedSelector.scss b/src/components/shared/frame/FramedSelector/FramedSelector.scss new file mode 100644 index 000000000..ae3740a7e --- /dev/null +++ b/src/components/shared/frame/FramedSelector/FramedSelector.scss @@ -0,0 +1,52 @@ +/******************************************************************************** + * Copyright (c) 2021, 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 + ********************************************************************************/ + +.frameContainer { + display: flex; + justify-content: center; + margin-top: 20px; + cursor: pointer; + .frameButton { + margin: 0px 10px; + width: 25%; + padding: 20px; + border-radius: 16px; + .title { + margin-bottom: 10px; + } + .textNumber { + display: flex; + } + .value { + padding-left: 15px; + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + h2, + h4 { + color: #0f71cb; + text-transform: lowercase; + } + h2 { + font-size: 32px; + } + } + } +} diff --git a/src/components/shared/frame/FramedSelector/index.tsx b/src/components/shared/frame/FramedSelector/index.tsx new file mode 100644 index 000000000..b01b2fd22 --- /dev/null +++ b/src/components/shared/frame/FramedSelector/index.tsx @@ -0,0 +1,79 @@ +/******************************************************************************** + * Copyright (c) 2021, 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 { Typography } from '@catena-x/portal-shared-components' +import { Box } from '@mui/material' +import React from 'react' +import './FramedSelector.scss' + +export interface Buttons { + buttonText: string + buttonValue: string + buttonDescription: string + count: string | number + onButtonClick: (val: string) => void + countTitle: string +} + +export interface FramedSelectorProps { + views: Buttons[] + activeView: string +} + +export const FramedSelector = ({ views, activeView }: FramedSelectorProps) => { + return ( + + {views?.map( + ({ + buttonText, + buttonValue, + buttonDescription, + onButtonClick, + count, + countTitle, + }) => ( + onButtonClick(buttonValue)} + > + + {buttonText}: + + + {buttonDescription} + + {countTitle} + {count} + + + + ) + )} + + ) +} diff --git a/src/components/shared/frame/SectionHeader/SectionHeader.scss b/src/components/shared/frame/SectionHeader/SectionHeader.scss new file mode 100644 index 000000000..8b8bf387a --- /dev/null +++ b/src/components/shared/frame/SectionHeader/SectionHeader.scss @@ -0,0 +1,47 @@ +/******************************************************************************** + * Copyright (c) 2021, 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 + ********************************************************************************/ + +.mainWrapper { + margin-top: 50px; + text-align: center; + width: 40%; + margin-left: auto; + margin-right: auto; + h2 { + margin-bottom: 20px; + } + .sub { + margin-bottom: 20px; + font-weight: 500; + border: none; + padding: 0px; + font-size: 18px; + } + .linkText { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + p { + padding-left: 5px; + color: #0f71cb; + text-decoration: underline; + } + } +} diff --git a/src/components/shared/frame/SectionHeader/index.tsx b/src/components/shared/frame/SectionHeader/index.tsx new file mode 100644 index 000000000..2a2af8df8 --- /dev/null +++ b/src/components/shared/frame/SectionHeader/index.tsx @@ -0,0 +1,64 @@ +/******************************************************************************** + * Copyright (c) 2021, 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 { Box } from '@mui/material' +import './SectionHeader.scss' +import { Typography } from '@catena-x/portal-shared-components' +import HelpOutlineIcon from '@mui/icons-material/HelpOutline' + +export interface SeactionHeaderProps { + title?: string + subTitle?: string + description?: string + linkText?: string + link?: string +} + +export const SeactionHeader = ({ + title, + subTitle, + description, + linkText, + link, +}: SeactionHeaderProps) => { + return ( + + + {title && {title}} + {subTitle && ( + + {subTitle} + + )} + {description && {description}} + {linkText && ( + + + window.open(link, '_blank', 'noopener')} + variant="body1" + > + {linkText} + + + )} + + + ) +} diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx index d40a5fb64..79723e32f 100644 --- a/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx +++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx @@ -36,6 +36,19 @@ export default function ImageVideoWrapper({ scrollTop: () => void showScroll: boolean }) { + const navigate = (link: { internal: boolean; id: string }) => { + if (link.internal) { + const element = document.getElementById(link.id) + const top = element?.offsetTop + window.scrollTo({ + top: top, + behavior: 'smooth', + }) + } else { + window.open(link.id, '_blank') + } + } + return (
@@ -47,11 +60,29 @@ export default function ImageVideoWrapper({ )}
- - - {provider.description} - - + + , +
, + ]} + > + + {provider.sectionLink && ( + <> + {provider.sectionLink.data.map((link) => ( + navigate(link)} + key={link.title} + > + {link.title} + + ))} + + )}
{children}
diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/LinkButtonGrid.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/LinkButtonGrid.tsx index 7a65b4e68..71b7066ef 100644 --- a/src/components/shared/templates/StaticTemplateResponsive/Cards/LinkButtonGrid.tsx +++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/LinkButtonGrid.tsx @@ -47,6 +47,9 @@ export default function LinkButtonGrid({ backgroundColor: link.background, width: `${100 / grid}%`, }} + onClick={() => { + window.open(link.navigate, '_blank') + }} > {link.title} @@ -69,6 +72,9 @@ export default function LinkButtonGrid({ backgroundColor: link.background, width: `${100 / grid}%`, }} + onClick={() => { + window.open(link.navigate, '_blank') + }} > {link.title} diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx index 61cedd9dd..e9eccc18d 100644 --- a/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx +++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx @@ -26,10 +26,12 @@ export default function RenderImage({ url, height, additionalStyles, + width, }: { url: string additionalStyles?: any height?: string + width?: string }) { const web = useMediaQuery('(min-width:1025px)') @@ -41,7 +43,7 @@ export default function RenderImage({ text={''} size="custom" height={height ? height : '331px'} - width="auto" + width={width ? width : 'auto'} hover={true} borderRadius={true} shadow={false} diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySide.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySide.tsx index e6ccaa2d1..6c79e8617 100644 --- a/src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySide.tsx +++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySide.tsx @@ -45,6 +45,7 @@ export default function TextImageSideBySide({ additionalStyles={{ textAlign: 'center', }} + width="490px" /> } /> diff --git a/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss b/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss index 94974ee1d..46103b822 100644 --- a/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss +++ b/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss @@ -69,13 +69,6 @@ padding-top: 34px; } - .linkGridContainer { - display: flex; - gap: 30px; - place-content: center; - margin-top: 60px; - } - .linkBox { padding: 10px 0px; height: 40px; @@ -203,13 +196,6 @@ padding-top: 30px; } - .linkGridContainer { - display: flex; - gap: 30px; - place-content: center; - margin-top: 60px; - } - .linkBox { padding: 10px 0px; height: 40px; @@ -325,13 +311,6 @@ padding-top: 20px; } - .linkGridContainer { - display: flex; - gap: 30px; - place-content: center; - margin-top: 60px; - } - .linkBox { padding: 10px 0px; height: 40px; @@ -493,3 +472,19 @@ iframe { strong:hover .tooltiptext { visibility: visible !important; } + +.highlightText { + cursor: pointer; +} + +.highlightText:hover { + color: #0f71cb; +} + +.linkGridContainer { + display: flex; + gap: 30px; + place-content: center; + margin-top: 60px; + cursor: pointer; +} diff --git a/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts b/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts index be366c367..5dda74762 100644 --- a/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts +++ b/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts @@ -47,6 +47,13 @@ export type ProviderProps = { subTitles?: string[] align?: 'left' | 'center' | 'right' images?: string[] + sectionLink?: { + data: { + title: string + id: string + internal: boolean + }[] + } } export type linkProps = { @@ -69,4 +76,5 @@ export enum TemplateNames { TextCenterAlignedWithLinkButtonGrid = 'TextCenterAlignedWithLinkButtonGrid', TextCenterAlignedWithImagesInFlex = 'TextCenterAlignedWithImagesInFlex', TextCenterAlignedWithImagesInGrid = 'TextCenterAlignedWithImagesInGrid', + LinkButtonGrid = 'LinkButtonGrid', } diff --git a/src/components/shared/templates/StaticTemplateResponsive/index.tsx b/src/components/shared/templates/StaticTemplateResponsive/index.tsx index 1bdf51330..0005f188a 100644 --- a/src/components/shared/templates/StaticTemplateResponsive/index.tsx +++ b/src/components/shared/templates/StaticTemplateResponsive/index.tsx @@ -194,6 +194,13 @@ const TemplateConfig = ({ /> ) + //Grid layout link component + case TemplateNames.LinkButtonGrid: + return ( + <> + + + ) default: //Text in the left and image in the right side return ( diff --git a/src/features/notification/apiSlice.ts b/src/features/notification/apiSlice.ts index ecfeb288c..e755c493a 100644 --- a/src/features/notification/apiSlice.ts +++ b/src/features/notification/apiSlice.ts @@ -58,12 +58,6 @@ export const apiSlice = createApi({ ) { base += `¬ificationTopicId=${fetchArgs.args.notificationTopic}` } - if ( - fetchArgs.args.notificationTopic && - fetchArgs.args.notificationTopic === NOTIFICATION_TOPIC.ACTION - ) { - base += '&onlyDueDate=true' - } return base }, // configuration for an individual endpoint, overriding the api setting diff --git a/src/features/store.ts b/src/features/store.ts index b6798c88f..34a82b604 100644 --- a/src/features/store.ts +++ b/src/features/store.ts @@ -65,6 +65,7 @@ import { apiSlice as companyRoleApiSlice } from './companyRoles/companyRoleApiSl import { apiSlice as certificationApiSlice } from './certification/certificationApiSlice' import languageSlice from './language/slice' +import { apiSlice as usecaseApiSlice } from './usecase/usecaseApiSlice' export const reducers = { admin, @@ -113,6 +114,7 @@ export const reducers = { [serviceAdminBoardApiSlice.reducerPath]: serviceAdminBoardApiSlice.reducer, [companyRoleApiSlice.reducerPath]: companyRoleApiSlice.reducer, [certificationApiSlice.reducerPath]: certificationApiSlice.reducer, + [usecaseApiSlice.reducerPath]: usecaseApiSlice.reducer, } export const store = configureStore({ @@ -140,7 +142,8 @@ export const store = configureStore({ .concat(serviceSubscriptionApiSlice.middleware) .concat(serviceAdminBoardApiSlice.middleware) .concat(companyRoleApiSlice.middleware) - .concat(certificationApiSlice.middleware), + .concat(certificationApiSlice.middleware) + .concat(usecaseApiSlice.middleware), }) type RootState = ReturnType diff --git a/src/features/usecase/usecaseApiSlice.ts b/src/features/usecase/usecaseApiSlice.ts new file mode 100644 index 000000000..8bb357735 --- /dev/null +++ b/src/features/usecase/usecaseApiSlice.ts @@ -0,0 +1,60 @@ +/******************************************************************************** + * Copyright (c) 2021, 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 { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' +import { apiBaseQuery } from 'utils/rtkUtil' + +export type VerifiedCredentialsData = { + externalDetailData: { + id: string + verifiedCredentialExternalTypeId: string + version: string + template: string + validFrom: string + expiry: string + } + ssiDetailData: { + credentialId: string + participationStatus: string + expiryDate: string + document: { + documentId: string + documentName: string + } + } +} + +export type UsecaseResponse = { + useCase: string + description: string + credentialType: string + verifiedCredentials: VerifiedCredentialsData[] +} + +export const apiSlice = createApi({ + reducerPath: 'rtk/administration/usecase', + baseQuery: fetchBaseQuery(apiBaseQuery()), + endpoints: (builder) => ({ + fetchUsecase: builder.query({ + query: () => '/api/administration/companydata/useCaseParticipation', + }), + }), +}) + +export const { useFetchUsecaseQuery } = apiSlice diff --git a/src/services/CommonService.ts b/src/services/CommonService.ts index 932f51bb6..f518c4670 100644 --- a/src/services/CommonService.ts +++ b/src/services/CommonService.ts @@ -137,11 +137,22 @@ const getCompanyRoleUpdateData = (callback: any) => { .catch((error) => console.log('Fetching Company Roles Data Failed')) } +const getDataSpace = (callback: any) => { + let url = `${getAssetBase()}/content/${i18next.language}/dataspace.json` + fetch(url) + .then((response) => response.json()) + .then((data) => callback(data)) + .catch((err) => { + console.log(err) + }) +} + const CommonService = { appToCard, isValidPictureId, getCompanyRoles, getUseCases, + getDataSpace, fetchLeadPictures, getRoleDescription, getCompanyRoleUpdateData, diff --git a/src/types/Config.tsx b/src/types/Config.tsx index a08af0913..05b4ea1c8 100644 --- a/src/types/Config.tsx +++ b/src/types/Config.tsx @@ -21,7 +21,6 @@ import Redirect from 'components/actions/Redirect' import SetLang from 'components/actions/SetLang' import SignOut from 'components/actions/SignOut' -import Admin from 'components/pages/Admin' import RegistrationRequests from 'components/pages/Admin/components/RegistrationRequests' import AppDetail from 'components/pages/AppDetail' import AppMarketplace from 'components/pages/AppMarketplace' @@ -77,6 +76,8 @@ import UsecaseParticipation from 'components/pages/UsecaseParticipation' import AboutPage from 'components/pages/AboutPage' import ChangeImage from 'components/pages/AppOverview/ChangeImage' import CertificateCredentials from 'components/pages/CertificateCredentials' +import ChangeDescription from 'components/pages/AppOverview/ChangeDescription' +import DataSpace from 'components/pages/DataSpace' /** * ALL_PAGES @@ -384,7 +385,6 @@ export const ALL_PAGES: IPage[] = [ role: ROLES.INVITE_NEW_PARTNER, element: , }, - { name: PAGES.ADMINISTRATION, role: ROLES.CX_ADMIN, element: }, { name: PAGES.APPLICATION_REQUESTS, role: ROLES.SUBMITTED_APPLICATION, @@ -424,18 +424,31 @@ export const ALL_PAGES: IPage[] = [ ), }, { - name: PAGES.CHANGEIMAGE, + name: PAGES.CHANGE_IMAGE, isRoute: true, element: ( } > } /> ), }, + { + name: PAGES.CHANGE_DESCRIPTION, + isRoute: true, + element: ( + } + > + } /> + + ), + }, { name: PAGES.ROLE_DETAILS, element: , @@ -469,6 +482,7 @@ export const ALL_PAGES: IPage[] = [ role: ROLES.MANAGE_COMPANY_CREDENTIALS, element: , }, + { name: PAGES.DATA_SPACE, element: }, ] export const ALL_OVERLAYS: IOverlay[] = [ @@ -637,6 +651,9 @@ export const mainMenuFullTree = [ name: PAGES.USE_CASE, children: [{ name: PAGES.USE_CASE_TRACABILITY, hint: HINTS.NEW }], }, + { + name: PAGES.DATA_SPACE, + }, { name: PAGES.MARKETPLACE, children: [ diff --git a/src/types/Constants.ts b/src/types/Constants.ts index 22a4f5e88..2ae68745a 100644 --- a/src/types/Constants.ts +++ b/src/types/Constants.ts @@ -71,7 +71,8 @@ export enum PAGES { APPOVERVIEW = 'appoverview', APPOVERVIEW_NEW = 'appoverview-new', DEACTIVATE = 'deactivate', - CHANGEIMAGE = 'changeimage', + CHANGE_IMAGE = 'changeimage', + CHANGE_DESCRIPTION = 'changedescription', APPRELEASEPROCESS = 'appreleaseprocess', APP_RELEASE_PROCESS_FORM = 'appreleaseprocess_form', INTRODUCTION = 'companyroles', @@ -94,6 +95,7 @@ export enum PAGES { USECASE_PARTICIPATION = 'usecase-participation', ABOUTPAGE = 'about', CERTIFICATE_CREDENTIAL = 'certificate-credential', + DATA_SPACE = 'dataspace', } export enum OVERLAYS { diff --git a/yarn.lock b/yarn.lock index ead54d3c2..0e435d4ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1175,10 +1175,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@catena-x/portal-shared-components@^2.0.3": - version "2.0.3" - resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-2.0.3.tgz#97d5e2a96388f79324138be0bacd2adb0b4b53af" - integrity sha512-XN7FODjbKp2k4tHQIY7L05BWhohawalr6jMqYxtCFcmwKXBrPlo8IJKBnX/FFzaaZfVqmVeYotm3iTMeM8lc/g== +"@catena-x/portal-shared-components@^2.0.5": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-2.0.5.tgz#398efbc02e1ff9bf802b16f6c7acb78ce054256a" + integrity sha512-TDd0QcGXzEBFhOELpPQpbcapOiwZIR8aJcLkvSg618vU347gjoL6W2BZK7PCGLcVOXihn9deGtxLJwXcRpVjbQ== dependencies: "@mui/base" "^5.0.0-beta.3" "@mui/system" "^5.13.2"