Merge pull request #835 from swaroopar/feature/updateOrderPage

refactor order and migrate forms
eclipse-xpanse · May 30, 2024 · c429ca3 · c429ca3
2 parents f11b4ed + 53f9365
commit c429ca3
Show file tree

Hide file tree

Showing 19 changed files with 550 additions and 434 deletions.
diff --git a/src/components/content/order/common/BillingModeSelection.tsx b/src/components/content/order/common/BillingModeSelection.tsx
@@ -5,6 +5,7 @@
 
 import { Alert, Flex, Form, Radio } from 'antd';
 import React, { Dispatch, SetStateAction } from 'react';
+import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { DeployRequest } from '../../../../xpanse-api/generated';
 
 export const BillingModeSelection = ({
@@ -22,43 +23,47 @@ export const BillingModeSelection = ({
 
     return (
         <>
-            <Form.Item
-                key={'BillingMode'}
-                label={<p style={{ fontWeight: 'bold' }}>{'Billing Mode'}</p>}
-                required={true}
-                rules={[
-                    {
-                        required: true,
-                        message: 'billingMode is required',
-                    },
-                    { type: 'string' },
-                ]}
+            <div
+                className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormSelectionFirstInGroup}`}
             >
-                {billingModes && billingModes.length > 0 ? (
-                    <Flex vertical gap='middle'>
-                        <Radio.Group
-                            buttonStyle='solid'
-                            onChange={(e) => {
-                                onChange(e.target.value as DeployRequest.billingMode);
-                            }}
-                            value={selectBillingMode}
-                        >
-                            {billingModes.map((mode: DeployRequest.billingMode) => (
-                                <Radio.Button key={mode} value={mode}>
-                                    {mode}
-                                </Radio.Button>
-                            ))}
-                        </Radio.Group>
-                    </Flex>
-                ) : (
-                    <Alert
-                        message={'No BillingMode found'}
-                        description={'Optional field. Can proceed.'}
-                        type={'success'}
-                        closable={false}
-                    />
-                )}
-            </Form.Item>
+                <Form.Item
+                    key={'BillingMode'}
+                    label={<p className={serviceOrderStyles.orderFormItemName}>{'Billing Mode'}</p>}
+                    required={true}
+                    rules={[
+                        {
+                            required: true,
+                            message: 'billingMode is required',
+                        },
+                        { type: 'string' },
+                    ]}
+                >
+                    {billingModes && billingModes.length > 0 ? (
+                        <Flex vertical gap='middle'>
+                            <Radio.Group
+                                buttonStyle='solid'
+                                onChange={(e) => {
+                                    onChange(e.target.value as DeployRequest.billingMode);
+                                }}
+                                value={selectBillingMode}
+                            >
+                                {billingModes.map((mode: DeployRequest.billingMode) => (
+                                    <Radio.Button key={mode} value={mode}>
+                                        {mode}
+                                    </Radio.Button>
+                                ))}
+                            </Radio.Group>
+                        </Flex>
+                    ) : (
+                        <Alert
+                            message={'No BillingMode found'}
+                            description={'Optional field. Can proceed.'}
+                            type={'success'}
+                            closable={false}
+                        />
+                    )}
+                </Form.Item>
+            </div>
         </>
     );
 };
diff --git a/src/components/content/order/common/FlavorFeatures.tsx b/src/components/content/order/common/FlavorFeatures.tsx
@@ -20,7 +20,7 @@ export const FlavorFeatures = (flavor: ServiceFlavor): React.JSX.Element => {
                 itemLayout={'horizontal'}
                 dataSource={flavor.features}
                 renderItem={(item, _) => (
-                    <List.Item>
+                    <List.Item className={flavorStyles.flavorFeatureItemName}>
                         <div>
                             <CheckOutlined className={serviceModifyStyles.flavorFeaturesItemIcon} />
                             &nbsp;{item}

diff --git a/...nents/content/order/common/FlavorInfo.tsx → .../content/order/common/FlavorSelection.tsx b/...nents/content/order/common/FlavorInfo.tsx → .../content/order/common/FlavorSelection.tsx
@@ -12,7 +12,7 @@ import { FlavorFeatures } from './FlavorFeatures';
 import { FlavorPrice } from './FlavorPrice';
 import { FlavorTitle } from './FlavorTitle';
 
-export const FlavorInfo = ({
+export const FlavorSelection = ({
     selectFlavor,
     flavorList,
     onChangeFlavor,
@@ -23,7 +23,9 @@ export const FlavorInfo = ({
 }): React.JSX.Element => {
     return (
         <>
-            <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${flavorStyles.regionFlavorContent}`}>
+            <div
+                className={`${serviceOrderStyles.orderFormSelectionStyle} ${flavorStyles.regionFlavorContent} ${serviceOrderStyles.orderFormItemName}`}
+            >
                 <Form.Item
                     name='selectFlavor'
                     label='Flavor'

diff --git a/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx b/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
@@ -6,6 +6,7 @@
 import { Flex, Form, Radio } from 'antd';
 import React from 'react';
 import '../../../../styles/service-order.module.css';
+import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { AvailabilityZoneConfig } from '../../../../xpanse-api/generated';
 
 export const MigrateServiceSubmitAvailabilityZoneInfo = ({
@@ -22,8 +23,8 @@ export const MigrateServiceSubmitAvailabilityZoneInfo = ({
                       <Form.Item
                           key={availabilityZone.varName}
                           name={availabilityZone.displayName}
-                          label={availabilityZone.displayName}
-                          style={{ width: 450 }}
+                          label={<p className={serviceOrderStyles.orderFormItemName}>{availabilityZone.displayName}</p>}
+                          className={serviceOrderStyles.selectCloudProviderClass}
                       >
                           <Flex vertical gap='middle'>
                               <Radio.Group buttonStyle='solid' disabled={true}>

diff --git a/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx b/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
@@ -5,23 +5,28 @@
 
 import { Flex, Form, Radio } from 'antd';
 import React from 'react';
+import serviceOrderStyles from '../../../../styles/service-order.module.css';
 
 export const MigrateServiceSubmitBillingMode = ({ selectBillMode }: { selectBillMode: string }): React.JSX.Element => {
     return (
         <>
-            <Form.Item
-                key={'BillingMode'}
-                label={<p style={{ fontWeight: 'bold' }}>{'Billing Mode'}</p>}
-                required={true}
+            <div
+                className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormSelectionFirstInGroup}`}
             >
-                <Flex vertical gap='middle'>
-                    <Radio.Group disabled={true} buttonStyle='solid' value={selectBillMode}>
-                        <Radio.Button key={selectBillMode} value={selectBillMode}>
-                            {selectBillMode}
-                        </Radio.Button>
-                    </Radio.Group>
-                </Flex>
-            </Form.Item>
+                <Form.Item
+                    key={'BillingMode'}
+                    label={<p className={serviceOrderStyles.orderFormItemName}>{'Billing Mode'}</p>}
+                    required={true}
+                >
+                    <Flex vertical gap='middle'>
+                        <Radio.Group disabled={true} buttonStyle='solid' value={selectBillMode}>
+                            <Radio.Button key={selectBillMode} value={selectBillMode}>
+                                {selectBillMode}
+                            </Radio.Button>
+                        </Radio.Group>
+                    </Flex>
+                </Form.Item>
+            </div>
         </>
     );
 };
diff --git a/...nents/content/order/common/RegionInfo.tsx → .../content/order/common/RegionSelection.tsx b/...nents/content/order/common/RegionInfo.tsx → .../content/order/common/RegionSelection.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { RegionDropDownInfo } from '../types/RegionDropDownInfo';
 
-export const RegionInfo = ({
+export const RegionSelection = ({
     selectRegion,
     onChangeRegion,
     regionList,
@@ -21,7 +21,7 @@ export const RegionInfo = ({
 }): React.JSX.Element => {
     return (
         <>
-            <div className={serviceOrderStyles.orderFormSelectionStyle}>
+            <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}>
                 <Form.Item
                     name='selectRegion'
                     label='Region'
@@ -32,7 +32,6 @@ export const RegionInfo = ({
                             className={serviceOrderStyles.selectBoxClass}
                             defaultValue={selectRegion}
                             value={selectRegion}
-                            style={{ width: 450 }}
                             onChange={(newRegion) => {
                                 if (onChangeRegion) {
                                     onChangeRegion(newRegion);

diff --git a/src/components/content/order/common/ServiceHostingSelection.tsx b/src/components/content/order/common/ServiceHostingSelection.tsx
@@ -33,15 +33,22 @@ export function ServiceHostingSelection({
 
     return (
         <>
-            <div className={serviceOrderStyles.orderFormSelectionStyle}>Service Hosted By:</div>
-            <Radio.Group
-                onChange={onChange}
-                disabled={disabledAlways || serviceHostingTypes.length === 1}
-                value={value}
-            >
-                <Radio value={UserOrderableServiceVo.serviceHostingType.SELF}>self</Radio>
-                <Radio value={UserOrderableServiceVo.serviceHostingType.SERVICE_VENDOR}>service-vendor</Radio>
-            </Radio.Group>
+            <div className={serviceOrderStyles.orderFormFlexElements}>
+                <div
+                    className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                >
+                    Service Hosted By:
+                </div>
+                <Radio.Group
+                    onChange={onChange}
+                    disabled={disabledAlways || serviceHostingTypes.length === 1}
+                    value={value}
+                    className={serviceOrderStyles.orderFormSelectionStyle}
+                >
+                    <Radio value={UserOrderableServiceVo.serviceHostingType.SELF}>self</Radio>
+                    <Radio value={UserOrderableServiceVo.serviceHostingType.SERVICE_VENDOR}>service-vendor</Radio>
+                </Radio.Group>
+            </div>
         </>
     );
 }
diff --git a/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx b/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx
@@ -5,6 +5,7 @@
 
 import { Form } from 'antd';
 import React from 'react';
+import serviceOrderStyles from '../../../../../styles/service-order.module.css';
 import { AvailabilityZoneConfig, UserOrderableServiceVo } from '../../../../../xpanse-api/generated';
 import useGetAvailabilityZonesForRegionQuery from '../utils/useGetAvailabilityZonesForRegionQuery';
 import { AvailabilityZoneButton } from './AvailabilityZoneButton';
@@ -35,13 +36,7 @@ export function AvailabilityZoneFormItem({
             return <AvailabilityZoneLoading key={availabilityZoneConfig.varName} />;
         }
         if (availabilityZonesVariableRequest.isError) {
-            return (
-                <AvailabilityZoneError
-                    retryRequest={retryRequest}
-                    error={availabilityZonesVariableRequest.error}
-                    key={availabilityZoneConfig.varName}
-                />
-            );
+            return <AvailabilityZoneError retryRequest={retryRequest} error={availabilityZonesVariableRequest.error} />;
         }
         if (availabilityZonesVariableRequest.data) {
             return (
@@ -59,7 +54,7 @@ export function AvailabilityZoneFormItem({
     return (
         <Form.Item
             key={availabilityZoneConfig.varName}
-            label={<p style={{ fontWeight: 'bold' }}>{availabilityZoneConfig.displayName}</p>}
+            label={<p className={serviceOrderStyles.orderFormItemName}>{availabilityZoneConfig.displayName}</p>}
             required={availabilityZoneConfig.mandatory}
             rules={[
                 {

diff --git a/src/components/content/order/create/NavigateOrderSubmission.tsx b/src/components/content/order/create/NavigateOrderSubmission.tsx
@@ -3,6 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
+import { Button } from 'antd';
 import React from 'react';
 import { To, useNavigate } from 'react-router-dom';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
@@ -21,6 +22,7 @@ function NavigateOrderSubmission({
 }): React.JSX.Element {
     const navigate = useNavigate();
     const [resetFormCache] = useOrderFormStore((state) => [state.clearFormVariables]);
+
     function goBack(props: OrderSubmitProps | undefined) {
         const toUrl: string = to as string;
         if (toUrl.includes(servicesSubPageRoute)) {
@@ -30,16 +32,15 @@ function NavigateOrderSubmission({
     }
 
     return (
-        <div>
-            <div
-                onClick={() => {
-                    goBack(props);
-                }}
-                className={serviceOrderStyles.orderNavigate}
-            >
-                {text}
-            </div>
-        </div>
+        <Button
+            type='primary'
+            onClick={() => {
+                goBack(props);
+            }}
+            className={serviceOrderStyles.orderNavigate}
+        >
+            {text}
+        </Button>
     );
 }