add service icon.

eclipse-xpanse · Jan 17, 2025 · 83edfd3 · 83edfd3
1 parent 869902f
commit 83edfd3
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 41 deletions.
diff --git a/src/components/content/deployedServices/myServices/MyServices.tsx b/src/components/content/deployedServices/myServices/MyServices.tsx
@@ -44,6 +44,7 @@ import {
 import { sortVersionNum } from '../../../utils/Sort';
 import { cspMap } from '../../common/csp/CspLogo';
 import { useLatestServiceOrderStatusQuery } from '../../common/queries/useLatestServiceOrderStatusQuery.ts';
+import { ServiceTitle } from '../../order/common/ServiceTitle.tsx';
 import { getExistingServiceParameters } from '../../order/common/utils/existingServiceParameters';
 import DestroyServiceStatusAlert from '../../order/destroy/DestroyServiceStatusAlert';
 import { useDestroyRequestSubmitQuery } from '../../order/destroy/useDestroyRequestSubmitQuery';
@@ -103,7 +104,6 @@ import {
 } from './myServiceProps.tsx';
 import useGetOrderableServiceDetailsByServiceIdQuery from './query/useGetOrderableServiceDetailsByServiceIdQuery.ts';
 import useListDeployedServicesDetailsQuery from './query/useListDeployedServicesDetailsQuery';
-import { ServicePortingTitle } from './ServicePortingTitle.tsx';
 import { TooltipWhenDetailsDisabled } from './TooltipWhenDetailsDisabled.tsx';
 
 function MyServices(): React.JSX.Element {
@@ -1339,7 +1339,13 @@ function MyServices(): React.JSX.Element {
                 <Modal
                     key={`${activeRecord.serviceId}-servicePorting`}
                     open={isServicePortingModalOpen}
-                    title={<ServicePortingTitle record={activeRecord} />}
+                    title={
+                        <ServiceTitle
+                            title={activeRecord.name}
+                            version={activeRecord.version}
+                            icon={getOrderableServiceDetails.data?.icon ?? ''}
+                        />
+                    }
                     closable={true}
                     maskClosable={false}
                     destroyOnClose={true}
@@ -1371,7 +1377,13 @@ function MyServices(): React.JSX.Element {
             {activeRecord ? (
                 <Modal
                     open={isScaleModalOpen}
-                    title={<ServicePortingTitle record={activeRecord} />}
+                    title={
+                        <ServiceTitle
+                            title={activeRecord.name}
+                            version={activeRecord.version}
+                            icon={getOrderableServiceDetails.data?.icon ?? ''}
+                        />
+                    }
                     closable={true}
                     maskClosable={false}
                     destroyOnClose={true}
@@ -1387,7 +1399,13 @@ function MyServices(): React.JSX.Element {
             {activeRecord ? (
                 <Modal
                     open={isModifyModalOpen}
-                    title={<ServicePortingTitle record={activeRecord} />}
+                    title={
+                        <ServiceTitle
+                            title={activeRecord.name}
+                            version={activeRecord.version}
+                            icon={getOrderableServiceDetails.data?.icon ?? ''}
+                        />
+                    }
                     closable={true}
                     maskClosable={false}
                     destroyOnClose={true}

diff --git a/src/components/content/deployedServices/myServices/ServicePortingTitle.tsx b/src/components/content/deployedServices/myServices/ServicePortingTitle.tsx
diff --git a/src/components/content/order/common/ServiceTitle.tsx b/src/components/content/order/common/ServiceTitle.tsx
@@ -0,0 +1,33 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { Tooltip, Typography } from 'antd';
+import React from 'react';
+import serviceOrderStyles from '../../../../styles/service-order.module.css';
+
+export const ServiceTitle = ({
+    title,
+    version,
+    icon,
+}: {
+    title: string;
+    version?: string;
+    icon: string;
+}): React.JSX.Element => {
+    const { Paragraph } = Typography;
+    return (
+        <>
+            <Tooltip placement='topLeft' title={title}>
+                <Paragraph ellipsis={true} className={serviceOrderStyles.serviceTitleClass}>
+                    {icon ? <img src={icon} className={serviceOrderStyles.serviceTitleIconClass} alt='icon' /> : ''}
+                    <div className={serviceOrderStyles.serviceTitleTextContainer}>
+                        <span className={serviceOrderStyles.serviceTitleText}>{title}</span>
+                        {version ? <span className={serviceOrderStyles.serviceTitleVersionClass}>{version}</span> : ''}
+                    </div>
+                </Paragraph>
+            </Tooltip>
+        </>
+    );
+};
diff --git a/src/components/content/order/create/CreateService.tsx b/src/components/content/order/create/CreateService.tsx
@@ -14,8 +14,7 @@ import { SelectServiceForm } from './SelectServiceForm';
 
 function CreateService(): React.JSX.Element {
     const [urlParams] = useSearchParams();
-    const categoryName = location.hash.split('#')[1];
-
+    const categoryName = decodeURI(urlParams.get('catalog') ?? '');
     const serviceName = decodeURI(urlParams.get('serviceName') ?? '');
     const orderableServicesQuery = userOrderableServicesQuery(categoryName as category, serviceName);
 

diff --git a/src/components/content/order/create/OrderSubmit.tsx b/src/components/content/order/create/OrderSubmit.tsx
@@ -4,11 +4,10 @@
  */
 
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Button, Col, Form, Input, Row, Tooltip, Typography } from 'antd';
+import { Button, Col, Form, Input, Row, Tooltip } from 'antd';
 import React, { useRef, useState } from 'react';
 import { Navigate, To, useLocation, useNavigate } from 'react-router-dom';
 import { v4 } from 'uuid';
-import appStyles from '../../../../styles/app.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import tableStyles from '../../../../styles/table.module.css';
 import { DeployRequest, taskStatus } from '../../../../xpanse-api/generated';
@@ -26,16 +25,17 @@ import { useLatestServiceOrderStatusQuery } from '../../common/queries/useLatest
 import { useServiceDetailsByServiceIdQuery } from '../../common/queries/useServiceDetailsByServiceIdQuery.ts';
 import { EulaInfo } from '../common/EulaInfo';
 import { IsvNameDisplay } from '../common/IsvNameDisplay.tsx';
+import { ServiceTitle } from '../common/ServiceTitle.tsx';
 import { OrderItem } from '../common/utils/OrderItem';
 import { OrderSubmitProps } from '../common/utils/OrderSubmitProps';
 import OrderSubmitStatusAlert from '../orderStatus/OrderSubmitStatusAlert';
+import userOrderableServicesQuery from '../query/userOrderableServicesQuery.ts';
 import useRedeployFailedDeploymentQuery from '../retryDeployment/useRedeployFailedDeploymentQuery';
 import { useOrderFormStore } from '../store/OrderFormStore';
 import NavigateOrderSubmission from './NavigateOrderSubmission';
 import { useDeployRequestSubmitQuery } from './useDeployRequestSubmitQuery';
 
 function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
-    const { Paragraph } = Typography;
     const [form] = Form.useForm();
     const [isEulaAccepted, setIsEulaAccepted] = useState<boolean>(false);
     const [isShowDeploymentResult, setIsShowDeploymentResult] = useState<boolean>(false);
@@ -56,6 +56,8 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
         getSubmitLatestServiceOrderStatusQuery.data?.taskStatus
     );
 
+    const orderableServicesQuery = userOrderableServicesQuery(state.category, state.name);
+
     const [cacheFormVariable] = useOrderFormStore((state) => [state.addDeployVariable]);
 
     const navigate = useNavigate();
@@ -194,11 +196,11 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                 <div className={tableStyles.genericTableContainer}>
                     <Row justify='space-between'>
                         <Col span={6}>
-                            <Tooltip placement='topLeft' title={state.name + '@' + state.version}>
-                                <Paragraph ellipsis={true} className={appStyles.contentTitle}>
-                                    Service: {state.name + '@' + state.version}
-                                </Paragraph>
-                            </Tooltip>
+                            <ServiceTitle
+                                title={state.name}
+                                version={state.version}
+                                icon={orderableServicesQuery.isSuccess ? orderableServicesQuery.data[0].icon : ''}
+                            />
                         </Col>
                         <Col span={8}>
                             <div className={serviceOrderStyles.serviceVendorContactClass}>

diff --git a/src/components/content/order/create/SelectServiceForm.tsx b/src/components/content/order/create/SelectServiceForm.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Button, Col, Form, Row, Tabs, Tooltip, Typography } from 'antd';
+import { Button, Col, Form, Row, Tabs } from 'antd';
 import { Tab } from 'rc-tabs/lib/interface';
 import React, { useEffect, useMemo, useState } from 'react';
 import { To, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
@@ -29,6 +29,7 @@ import { FlavorSelection } from '../common/FlavorSelection.tsx';
 import { IsvNameDisplay } from '../common/IsvNameDisplay.tsx';
 import { RegionSelection } from '../common/RegionSelection.tsx';
 import { ServiceHostingSelection } from '../common/ServiceHostingSelection';
+import { ServiceTitle } from '../common/ServiceTitle.tsx';
 import { AvailabilityZoneFormItem } from '../common/availabilityzone/AvailabilityZoneFormItem';
 import useGetServicePricesQuery from '../common/useGetServicePricesQuery';
 import { OrderSubmitProps } from '../common/utils/OrderSubmitProps';
@@ -51,14 +52,13 @@ import { RegionDropDownInfo } from '../types/RegionDropDownInfo';
 import NavigateOrderSubmission from './NavigateOrderSubmission';
 
 export function SelectServiceForm({ services }: { services: UserOrderableServiceVo[] }): React.JSX.Element {
-    const { Paragraph } = Typography;
     const [form] = Form.useForm();
     const [urlParams] = useSearchParams();
     const location = useLocation();
     const navigate = useNavigate();
     const latestVersion = decodeURI(urlParams.get('latestVersion') ?? '');
     const serviceName = decodeURI(urlParams.get('serviceName') ?? '');
-    const categoryName: string = location.hash.split('#')[1];
+    const categoryName = decodeURI(urlParams.get('catalog') ?? '');
     const servicePageUrl = servicesSubPageRoute + categoryName;
     let serviceInfo: OrderSubmitProps | undefined;
     const versionToServicesMap = useMemo<Map<string, UserOrderableServiceVo[]>>(() => {
@@ -358,11 +358,7 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
                 <div className={tableStyles.genericTableContainer}>
                     <Row justify='space-between'>
                         <Col span={6}>
-                            <Tooltip placement='topLeft' title={serviceName}>
-                                <Paragraph ellipsis={true} className={appStyles.contentTitle}>
-                                    Service: {serviceName}
-                                </Paragraph>
-                            </Tooltip>
+                            <ServiceTitle title={serviceName} icon={services[0].icon} />
                         </Col>
                         {currentServiceProviderContactDetails !== undefined ? (
                             <Col span={8}>

diff --git a/src/styles/service-order.module.css b/src/styles/service-order.module.css
@@ -521,3 +521,29 @@
     margin-right: 0;
     justify-content: flex-end;
 }
+
+.service-title-class {
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+}
+
+.service-title-icon-class {
+    width: 40px;
+    height: auto;
+}
+
+.serviceTitleTextContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.serviceTitleText {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.serviceTitleVersionClass {
+    font-size: 14px;
+}