Merge branch 'eclipse-xpanse:main' into main

src/components/content/catalog/services/details/ServiceDetail.tsx

@@ -15,6 +15,7 @@ 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';
 
 function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
     return (
@@ -73,6 +74,9 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
                         showFor={ContactDetailsShowType.Catalog}
                     />
                 </Descriptions.Item>
+                <Descriptions.Item label='EULA'>
+                    {serviceDetails.eula ? <AgreementText eula={serviceDetails.eula} /> : <span>Not Provided</span>}
+                </Descriptions.Item>
             </Descriptions>
         </>
     );

src/components/content/catalog/services/details/ShowIcon.tsx

@@ -5,13 +5,19 @@
 
 import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
 import React from 'react';
+import { Tooltip, Typography } from 'antd';
 
 export function ShowIcon({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
+    const { Paragraph } = Typography;
     return (
         <div className={'catalog-service-icon'}>
-            <img width={25} height={25} src={serviceDetails.icon} alt='Service Icon' referrerPolicy='no-referrer' />
+            <img width={20} height={20} src={serviceDetails.icon} alt='Service Icon' referrerPolicy='no-referrer' />
             &nbsp;
-            {serviceDetails.name}
+            <Tooltip placement='topLeft' title={serviceDetails.name}>
+                <Paragraph ellipsis={true} className={'catalog-service-name'}>
+                    {serviceDetails.name}
+                </Paragraph>
+            </Tooltip>
         </div>
     );
 }

src/components/content/catalog/services/tree/CategoryCatalog.tsx

@@ -8,7 +8,7 @@ import '../../../../../styles/catalog.css';
 import { DataNode } from 'antd/es/tree';
 import { TagOutlined } from '@ant-design/icons';
 import { ApiError, DeployedService, Response, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
-import { Alert, Empty, Skeleton } from 'antd';
+import { Alert, Empty, Skeleton, Tooltip, Typography } from 'antd';
 import { convertStringArrayToUnorderedList } from '../../../../utils/generateUnorderedList';
 import {
     groupServiceTemplatesByName,
@@ -19,6 +19,7 @@ import { CatalogFullView } from './CatalogFullView';
 
 function CategoryCatalog({ category }: { category: DeployedService.category }): React.JSX.Element {
     const treeData: DataNode[] = [];
+    const { Paragraph } = Typography;
     let categoryOclData: Map<string, ServiceTemplateDetailVo[]> = new Map<string, ServiceTemplateDetailVo[]>();
 
     const availableServiceTemplatesQuery = useAvailableServiceTemplatesQuery(category);
@@ -28,7 +29,13 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
         categoryOclData = groupServiceTemplatesByName(userAvailableServiceList);
         categoryOclData.forEach((_value: ServiceTemplateDetailVo[], serviceName: string) => {
             const dataNode: DataNode = {
-                title: serviceName,
+                title: (
+                    <Tooltip placement='topLeft' title={serviceName}>
+                        <Paragraph ellipsis={true} className={'catalog-tree-node'}>
+                            {serviceName}
+                        </Paragraph>
+                    </Tooltip>
+                ),
                 key: serviceName || '',
                 children: [],
             };

src/components/content/common/ocl/AgreementText.tsx

@@ -0,0 +1,17 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import React from 'react';
+import { Button, Popover } from 'antd';
+
+export function AgreementText({ eula }: { eula: string }): React.JSX.Element {
+    return (
+        <Popover content={<pre className={'agreement-text'}>{eula}</pre>} title={'Eula'} trigger='hover'>
+            <Button className={'ocl-data-hover'} type={'link'}>
+                {'terms and conditions'}
+            </Button>
+        </Popover>
+    );
+}

src/components/content/common/ocl/BillingText.tsx

@@ -18,7 +18,8 @@ export function BillingText({ billing }: { billing: Billing }): React.JSX.Elemen
         return (
             <Popover content={<pre>{yamlDocument.toString()}</pre>} title={'Billing'} trigger='hover'>
                 <Button className={'ocl-data-hover'} type={'link'}>
-                    {billing.billingModel}
+                    {/* TODO Will be fixed in #1591 or #1592 */}
+                    {billing.billingModes[0]}
                 </Button>
             </Popover>
         );

src/components/content/common/ocl/DisplayOclData.tsx

@@ -5,17 +5,18 @@
 
 import React from 'react';
 import { Ocl } from '../../../../xpanse-api/generated';
-import { Descriptions, Image, Tag } from 'antd';
+import { Descriptions, Image, Tag, Tooltip, Typography } from 'antd';
 import { DeploymentText } from './DeploymentText';
 import { BillingText } from './BillingText';
 import { cspMap } from '../csp/CspLogo';
 import { ContactDetailsText } from './ContactDetailsText';
 import { ContactDetailsShowType } from './ContactDetailsShowType';
 import { FlavorsText } from './FlavorsText';
+import { AgreementText } from './AgreementText';
 
 function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
     const PLACE_HOLDER_UNKNOWN_VALUE: string = 'NOT PROVIDED';
-
+    const { Paragraph } = Typography;
     try {
         return (
             <>
@@ -39,9 +40,11 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
                                 <br />
                                 <b>Service Name</b>
                                 <br />
-                                <Tag className={'ocl-display-tag'} color='blue'>
-                                    {ocl.name}
-                                </Tag>
+                                <Tooltip placement='topLeft' title={ocl.name}>
+                                    <Paragraph ellipsis={true} className={'ocl-data-display-service-register-name'}>
+                                        {ocl.name}
+                                    </Paragraph>
+                                </Tooltip>
                                 <br />
                                 <br />
                             </div>
@@ -108,6 +111,9 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
                                 />
                             </Descriptions.Item>
                             <Descriptions.Item label='Description'>{ocl.description}</Descriptions.Item>
+                            <Descriptions.Item label='EULA'>
+                                {ocl.eula ? <AgreementText eula={ocl.eula} /> : <span>Not Provided</span>}
+                            </Descriptions.Item>
                         </Descriptions>
                     </div>
                 </div>

src/components/content/order/common/BillingInfo.tsx

@@ -18,7 +18,8 @@ export const BillingInfo = ({ priceValue, billing }: { priceValue: string; billi
                 </Tag>
                 <span className={'order-billing-model-title-class'}>Model:&nbsp;</span>
                 <Tag color={'blue'} className={'order-billing-model-value-class'}>
-                    {billing.billingModel}
+                    {/* TODO Will be fixed in #1591 or #1592 */}
+                    {billing.billingModes[0]}
                 </Tag>
             </div>
         </>

src/components/content/order/common/EulaInfo.tsx

@@ -0,0 +1,44 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import React, { Dispatch, SetStateAction } from 'react';
+import { Checkbox, Form, Space } from 'antd';
+import '../../../../styles/service_order.css';
+import { AgreementText } from '../../common/ocl/AgreementText';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+
+export const EulaInfo = ({
+    eula,
+    isEulaAccepted,
+    setIsEulaAccepted,
+}: {
+    eula: string | undefined;
+    isEulaAccepted: boolean;
+    setIsEulaAccepted: Dispatch<SetStateAction<boolean>>;
+}): React.JSX.Element => {
+    const onChange = (e: CheckboxChangeEvent) => {
+        setIsEulaAccepted(e.target.checked);
+    };
+
+    return (
+        <>
+            {eula && eula.length > 0 ? (
+                <div className={'cloud-provider-tab-class region-flavor-content'}>
+                    <Form.Item
+                        name='Terms and Conditions'
+                        label='Terms and Conditions'
+                        rules={[{ required: true, message: 'Eula needs to be accepted' }]}
+                    >
+                        <Space wrap>
+                            <Checkbox checked={isEulaAccepted} name='isEulaAccepted' onChange={onChange}>
+                                I have read and agreed to the <AgreementText eula={eula} /> of the service.
+                            </Checkbox>
+                        </Space>
+                    </Form.Item>
+                </div>
+            ) : null}
+        </>
+    );
+};

src/components/content/order/common/utils/OrderSubmitProps.ts

@@ -14,4 +14,5 @@ export interface OrderSubmitProps {
     serviceHostingType: DeployRequest.serviceHostingType;
     contactServiceDetails: ServiceProviderContactDetails | undefined;
     availabilityZones?: Record<string, string>;
+    eula: string | undefined;
 }

src/components/content/order/create/OrderSubmit.tsx

@@ -7,7 +7,7 @@ import NavigateOrderSubmission from './NavigateOrderSubmission';
 import '../../../../styles/service_order.css';
 import { Navigate, To, useLocation, useNavigate } from 'react-router-dom';
 import React, { useRef, useState } from 'react';
-import { Button, Form, Input, Tooltip } from 'antd';
+import { Button, Col, Form, Input, Row, Tooltip, Typography } from 'antd';
 import { DeployedServiceDetails, DeployRequest } from '../../../../xpanse-api/generated';
 import { createServicePageRoute, CUSTOMER_SERVICE_NAME_FIELD, homePageRoute } from '../../../utils/constants';
 import { InfoCircleOutlined } from '@ant-design/icons';
@@ -19,9 +19,12 @@ import { useServiceDetailsPollingQuery } from '../orderStatus/useServiceDetailsP
 import { v4 } from 'uuid';
 import { OrderSubmitProps } from '../common/utils/OrderSubmitProps';
 import { OrderItem } from '../common/utils/OrderItem';
+import { EulaInfo } from '../common/EulaInfo';
 
 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);
     const uniqueRequestId = useRef(v4());
     const submitDeploymentRequest = useDeployRequestSubmitQuery();
@@ -59,6 +62,7 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
             customerServiceName: useOrderFormStore.getState().deployParams.Name as string,
             serviceHostingType: state.serviceHostingType,
             availabilityZones: state.availabilityZones,
+            eulaAccepted: isEulaAccepted,
         };
         const serviceRequestProperties: Record<string, unknown> = {};
         for (const variable in useOrderFormStore.getState().deployParams) {
@@ -84,12 +88,18 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                 <NavigateOrderSubmission text={'<< Back'} to={createServicePageUrl as To} props={state} />
                 <div className={'Line'} />
                 <div className={'generic-table-container'}>
-                    <div className={'content-title'}>
-                        <div className={'content-title-order'}>
-                            Service: {state.name}@{state.version}
+                    <Row>
+                        <Col span={4}>
+                            <Tooltip placement='topLeft' title={state.name + '@' + state.version}>
+                                <Paragraph ellipsis={true} className={'content-title'}>
+                                    Service: {state.name + '@' + state.version}
+                                </Paragraph>
+                            </Tooltip>
+                        </Col>
+                        <Col span={4}>
                             <ApiDoc id={state.id} styleClass={'content-title-api'}></ApiDoc>
-                        </div>
-                    </div>
+                        </Col>
+                    </Row>
                 </div>
             </div>
             {isShowDeploymentResult ? (
@@ -149,6 +159,16 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                         ) : undefined
                     )}
                 </div>
+                <div className={'order-param-item-row'}>
+                    <div className={'order-param-item-left'} />
+                    <div className={'order-param-item-content'}>
+                        <EulaInfo
+                            eula={state.eula}
+                            isEulaAccepted={isEulaAccepted}
+                            setIsEulaAccepted={setIsEulaAccepted}
+                        />
+                    </div>
+                </div>
                 <div className={'Line'} />
                 <div className={'order-param-item-row'}>
                     <div className={'order-param-item-left'} />