Merge branch 'eclipse-xpanse:main' into main

WangLiNaruto · May 27, 2024 · 449ef81 · 449ef81
2 parents fd49405 + 9cda860
commit 449ef81
Show file tree

Hide file tree

Showing 228 changed files with 3,255 additions and 3,088 deletions.
diff --git a/.github/workflows/ui-release.yml b/.github/workflows/ui-release.yml
@@ -63,6 +63,7 @@ jobs:
               working-directory: ./
               run: tsc
 
+            # This step also builds the application. Please check package.json for more details.
             - name: Release application
               working-directory: ./
               run: npx release-it ${{github.event.inputs.ReleaseType}} --ci

diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,6 @@
     "tabWidth": 4,
     "jsxSingleQuote": true,
     "endOfLine": "auto",
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "plugins": ["prettier-plugin-organize-imports"]
 }
diff --git a/DEPENDENCIES b/DEPENDENCIES
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,18 +1,18 @@
 {
     "name": "xpanse-ui",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "private": true,
     "type": "module",
     "dependencies": {
         "@ant-design/icons": "^5.3.7",
-        "@axa-fr/react-oidc": "^7.22.4",
-        "@tanstack/react-query": "^5.36.2",
-        "antd": "^5.17.2",
+        "@axa-fr/react-oidc": "^7.22.6",
+        "@tanstack/react-query": "^5.37.1",
+        "antd": "^5.17.3",
         "echarts": "5.5.0",
         "echarts-for-react": "^3.0.2",
         "rc-field-form": "^2.2.0",
-        "rc-menu": "^9.12.2",
-        "rc-tabs": "^15.0.0",
+        "rc-menu": "^9.14.0",
+        "rc-tabs": "^15.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.23.1",
@@ -23,7 +23,7 @@
     "scripts": {
         "start": "vite --port 3000",
         "build": "vite build",
-        "serve": "vite preview",
+        "serve": "vite preview --port 3000",
         "start-with-zitadel-testbed": "env-cmd -f .env.zitadel-testbed vite --port 3000",
         "build-with-zitadel-testbed": "env-cmd -f .env.zitadel-testbed vite build",
         "test": "jest",
@@ -39,13 +39,15 @@
             "plugin:@typescript-eslint/strict-type-checked",
             "plugin:prettier/recommended",
             "plugin:deprecation/recommended",
-            "plugin:react/recommended"
+            "plugin:react/recommended",
+            "plugin:css-modules/recommended"
         ],
         "plugins": [
             "react",
             "@typescript-eslint",
             "@tanstack/query",
-            "require-explicit-generics"
+            "require-explicit-generics",
+            "css-modules"
         ],
         "rules": {
             "react/jsx-uses-react": "error",
@@ -55,7 +57,20 @@
             "@tanstack/query/exhaustive-deps": "error",
             "no-console": "error",
             "@typescript-eslint/no-dynamic-delete": "off",
-            "react/react-in-jsx-scope": "off"
+            "react/react-in-jsx-scope": "off",
+            "import/newline-after-import": [
+                "error",
+                {
+                    "count": 1
+                }
+            ],
+            "css-modules/no-undef-class": [
+                2,
+                {
+                    "camelCase": true
+                }
+            ],
+            "css-modules/no-unused-class": "off"
         },
         "ignorePatterns": [
             "src/xpanse-api/**",
@@ -84,23 +99,24 @@
         ]
     },
     "devDependencies": {
-        "@axa-fr/oidc-client": "^7.22.4",
+        "@axa-fr/oidc-client": "^7.22.5",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@tanstack/eslint-plugin-query": "^5.35.6",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
         "@types/jest": "^29.5.12",
         "@types/node": "^20.12.12",
-        "@types/react": "^18.3.2",
+        "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/uuid": "^9.0.8",
-        "@typescript-eslint/eslint-plugin": "^7.9.0",
-        "@typescript-eslint/parser": "^7.9.0",
-        "@vitejs/plugin-react": "^4.2.1",
+        "@typescript-eslint/eslint-plugin": "^7.10.0",
+        "@typescript-eslint/parser": "^7.10.0",
+        "@vitejs/plugin-react": "^4.3.0",
         "env-cmd": "^10.1.0",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-config-react-app": "7.0.1",
+        "eslint-plugin-css-modules": "^2.12.0",
         "eslint-plugin-deprecation": "^2.0.0",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-react": "^7.34.1",
@@ -111,8 +127,9 @@
         "knip": "^5.16.0",
         "openapi-typescript-codegen": "^0.29.0",
         "prettier": "3.2.5",
-        "release-it": "^17.2.1",
-        "ts-jest": "^29.1.2",
+        "prettier-plugin-organize-imports": "^3.2.4",
+        "release-it": "^17.3.0",
+        "ts-jest": "^29.1.3",
         "typescript": "5.4.5",
         "uuid": "^9.0.1",
         "vite": "^5.2.11"
@@ -159,8 +176,9 @@
                 "git update-index -q --refresh"
             ],
             "after:bump": [
+                "npm run update-service-worker-file",
                 "npm run build",
-                "zip -r -q xpanse-ui-${version}.zip build"
+                "zip -r -q xpanse-ui-${version}.zip dist"
             ]
         }
     }

diff --git a/public/OidcServiceWorker.js b/public/OidcServiceWorker.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,8 +3,13 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
+import { OidcProvider, OidcSecure } from '@axa-fr/react-oidc';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { Suspense, lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import './styles/app.css';
+import CatalogMainPage from './components/content/catalog/services/menu/CatalogMainMenu';
+import FallbackSkeleton from './components/content/common/lazy/FallBackSkeleton.tsx';
+import { OidcConfig } from './components/oidc/OidcConfig';
 import Protected from './components/protectedRoutes/ProtectedRoute';
 import {
     catalogPageRoute,
@@ -25,12 +30,7 @@ import {
     servicesPageRoute,
     workflowsPageRoute,
 } from './components/utils/constants';
-import { OidcConfig } from './components/oidc/OidcConfig';
-import { OidcProvider, OidcSecure } from '@axa-fr/react-oidc';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import CatalogMainPage from './components/content/catalog/services/menu/CatalogMainMenu';
-import React, { lazy, Suspense } from 'react';
-import FallbackSkeleton from './components/content/common/lazy/FallBackSkeleton.tsx';
+import './styles/app.module.css';
 
 const queryClient = new QueryClient();
 

diff --git a/src/components/content/catalog/services/details/ServiceDetail.tsx b/src/components/content/catalog/services/details/ServiceDetail.tsx
@@ -3,37 +3,40 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Descriptions, Space, Tag } from 'antd';
 import { CloudUploadOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { Descriptions, Space, Tag } from 'antd';
+import React from 'react';
+import appStyles from '../../../../../styles/app.module.css';
+import catalogStyles from '../../../../../styles/catalog.module.css';
+import oclDisplayStyles from '../../../../../styles/ocl-display.module.css';
 import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
 import { ApiDoc } from '../../../common/doc/ApiDoc';
-import { ShowIcon } from './ShowIcon';
-import React from 'react';
+import { AgreementText } from '../../../common/ocl/AgreementText';
+import { BillingText } from '../../../common/ocl/BillingText';
+import { ContactDetailsShowType } from '../../../common/ocl/ContactDetailsShowType';
+import { ContactDetailsText } from '../../../common/ocl/ContactDetailsText';
 import { DeploymentText } from '../../../common/ocl/DeploymentText';
 import { FlavorsText } from '../../../common/ocl/FlavorsText';
-import { BillingText } from '../../../common/ocl/BillingText';
 import { ServiceRegistrationStatus } from './ServiceRegistrationStatus';
-import { ContactDetailsText } from '../../../common/ocl/ContactDetailsText';
-import { ContactDetailsShowType } from '../../../common/ocl/ContactDetailsShowType';
-import { AgreementText } from '../../../common/ocl/AgreementText';
+import { ShowIcon } from './ShowIcon';
 
 function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
     return (
         <>
-            <div className={'catalog-detail-class'}>
-                <h3 className={'catalog-details-h3'}>
+            <div className={catalogStyles.catalogDetailClass}>
+                <h3 className={catalogStyles.catalogDetailsH3}>
                     <CloudUploadOutlined />
                     &nbsp;Available Regions
                 </h3>
                 <Space size={[0, 8]} wrap>
                     {serviceDetails.regions.map((region) => (
-                        <Tag key={region.name} className={'ocl-display-tag'} color='orange'>
+                        <Tag key={region.name} className={oclDisplayStyles.oclDisplayTag} color='orange'>
                             {region.area ? `${region.area}: ${region.name}` : region.name}
                         </Tag>
                     ))}
                 </Space>
             </div>
-            <h3 className={'catalog-details-h3'}>
+            <h3 className={catalogStyles.catalogDetailsH3}>
                 <InfoCircleOutlined />
                 &nbsp;Basic Information
             </h3>
@@ -66,7 +69,7 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
                     <BillingText billing={serviceDetails.billing} />
                 </Descriptions.Item>
                 <Descriptions.Item label={'Service API'}>
-                    <ApiDoc id={serviceDetails.id} styleClass={'service-api-doc-link'} />
+                    <ApiDoc id={serviceDetails.id} styleClass={appStyles.serviceApiDocLink} />
                 </Descriptions.Item>
                 <Descriptions.Item label='Contact Details'>
                     <ContactDetailsText

diff --git a/src/components/content/catalog/services/details/ServiceHostingOptions.tsx b/src/components/content/catalog/services/details/ServiceHostingOptions.tsx
@@ -3,9 +3,9 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
 import { Radio, RadioChangeEvent } from 'antd';
 import React from 'react';
+import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
 
 export function ServiceHostingOptions({
     serviceTemplateDetailVos,

diff --git a/src/components/content/catalog/services/details/ServiceProvider.tsx b/src/components/content/catalog/services/details/ServiceProvider.tsx
@@ -3,30 +3,31 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import React, { useMemo } from 'react';
-import { Divider, Empty, Image, Tabs } from 'antd';
-import ServiceDetail from './ServiceDetail';
-import { CloudServiceProvider, DeployedService, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
+import { EnvironmentOutlined } from '@ant-design/icons';
+import { Empty, Image, Tabs } from 'antd';
 import { Tab } from 'rc-tabs/lib/interface';
-import UpdateService from '../update/UpdateService';
-import UnregisterService from '../unregister/UnregisterService';
-import {
-    groupServicesByCspForSpecificServiceNameAndVersion,
-    groupServicesByVersionForSpecificServiceName,
-} from '../../../common/catalog/catalogProps';
-import { cspMap } from '../../../common/csp/CspLogo';
-import { ServiceHostingOptions } from './ServiceHostingOptions';
+import React, { useMemo } from 'react';
 import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
+import catalogStyles from '../../../../../styles/catalog.module.css';
+import { CloudServiceProvider, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
 import {
     catalogPageRoute,
     serviceCspQuery,
     serviceHostingTypeQuery,
     serviceNameKeyQuery,
     serviceVersionKeyQuery,
 } from '../../../../utils/constants';
+import {
+    groupServicesByCspForSpecificServiceNameAndVersion,
+    groupServicesByVersionForSpecificServiceName,
+} from '../../../common/catalog/catalogProps';
+import { cspMap } from '../../../common/csp/CspLogo';
 import { ServicePolicies } from '../policies/ServicePolicies';
-import { EnvironmentOutlined } from '@ant-design/icons';
 import { UnregisterResult } from '../unregister/UnregisterResult';
+import UnregisterService from '../unregister/UnregisterService';
+import UpdateService from '../update/UpdateService';
+import ServiceDetail from './ServiceDetail';
+import { ServiceHostingOptions } from './ServiceHostingOptions';
 import { ServiceProviderSkeleton } from './ServiceProviderSkeleton';
 
 function ServiceProvider({
@@ -40,7 +41,7 @@ function ServiceProvider({
     categoryOclData: Map<string, ServiceTemplateDetailVo[]>;
     selectedServiceNameInTree: string;
     selectedServiceVersionInTree: string;
-    category: DeployedService.category;
+    category: ServiceTemplateDetailVo.category;
     isViewDisabled: boolean;
     setIsViewDisabled: (isViewDisabled: boolean) => void;
 }): React.JSX.Element {
@@ -185,9 +186,9 @@ function ServiceProvider({
                                 items={items}
                                 onChange={onChangeCsp}
                                 activeKey={serviceCspInQuery}
-                                className={'ant-tabs-tab-btn'}
+                                className={catalogStyles.antTabsTabBtn}
                             />
-                            <div className={'update-unregister-btn-class'}>
+                            <div className={catalogStyles.updateUnregisterBtnClass}>
                                 <UpdateService
                                     id={activeServiceDetail.id}
                                     category={category}
@@ -199,7 +200,7 @@ function ServiceProvider({
                                     setIsViewDisabled={setIsViewDisabled}
                                 />
                             </div>
-                            <h3 className={'catalog-details-h3'}>
+                            <h3 className={catalogStyles.catalogDetailsH3}>
                                 <EnvironmentOutlined />
                                 &nbsp;Service Hosting Options
                             </h3>
@@ -210,8 +211,6 @@ function ServiceProvider({
                                 updateServiceHostingType={onChangeServiceHostingType}
                             />
                             <ServiceDetail serviceDetails={activeServiceDetail} />
-
-                            <Divider />
                             <ServicePolicies
                                 key={activeServiceDetail.id}
                                 serviceDetails={activeServiceDetail}