Credentials add field 'site'

src/components/content/credentials/AddCredential.tsx

@@ -18,6 +18,7 @@ import {
     CreateCredential,
     CredentialVariable,
     CredentialVariables,
+    GetSitesOfCspData,
     Response,
     addIsvCloudCredential,
     addUserCloudCredential,
@@ -26,6 +27,7 @@ import {
     getActiveCsps,
     getCredentialCapabilities,
     getCredentialTypes,
+    getSitesOfCsp,
     name,
     type,
     type GetCredentialCapabilitiesData,
@@ -39,11 +41,14 @@ import useCredentialsListQuery from './query/queryCredentialsList';
 function AddCredential({ role, onCancel }: { role: string | undefined; onCancel: () => void }): React.JSX.Element {
     const [form] = Form.useForm();
     const [currentCsp, setCurrentCsp] = useState<csp | undefined>(undefined);
+    const [siteDisabled, setSiteDisabled] = useState<boolean>(true);
     const [typeDisabled, setTypeDisabled] = useState<boolean>(true);
     const [nameDisable, setNameDisable] = useState<boolean>(true);
+    const [currentSite, setCurrentSite] = useState<string | undefined>(undefined);
     const [currentType, setCurrentType] = useState<credentialType | undefined>(undefined);
     const [currentName, setCurrentName] = useState<string | undefined>(undefined);
     const activeCspList = useRef<csp[]>([]);
+    const siteList = useRef<string[]>([]);
     const credentialTypeList = useRef<type[]>([]);
     const nameList = useRef<string[]>([]);
     const [credentialVariableList, setCredentialVariableList] = useState<CredentialVariable[]>([]);
@@ -64,6 +69,18 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
         setTipMessage(tipMessage);
     };
 
+    const sitesQuery = useQuery({
+        queryKey: ['sitesQuery', currentCsp],
+        queryFn: () => {
+            const data: GetSitesOfCspData = {
+                cspName: currentCsp ?? csp.OPENSTACK_TESTLAB,
+            };
+            return getSitesOfCsp(data);
+        },
+        staleTime: 60000,
+        enabled: currentCsp !== undefined,
+    });
+
     const credentialTypesQuery = useQuery({
         queryKey: ['credentialTypesQuery', currentCsp],
         queryFn: () => {
@@ -76,6 +93,10 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
         enabled: currentCsp !== undefined,
     });
 
+    if (sitesQuery.isSuccess) {
+        siteList.current = sitesQuery.data as string[];
+    }
+
     if (credentialTypesQuery.isSuccess) {
         credentialTypeList.current = credentialTypesQuery.data as type[];
     }
@@ -161,7 +182,7 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
 
     // useEffect to update Form DOM after the rendering for first 3 drop downs are completed.
     useEffect(() => {
-        if (currentType && currentName) {
+        if (currentSite && currentType && currentName) {
             const credentials = credentialCapabilitiesQuery.data;
             if (credentials !== undefined && credentials.length > 0) {
                 credentials.forEach((credential: CredentialVariables) => {
@@ -182,12 +203,16 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
                 });
             }
         }
-    }, [currentCsp, currentName, currentType, form, credentialCapabilitiesQuery.data]);
+    }, [currentCsp, currentSite, currentName, currentType, form, credentialCapabilitiesQuery.data]);
 
     const handleCspSelect = useCallback(
         (cspName: csp) => {
             setCurrentCsp(cspName);
 
+            setSiteDisabled(false);
+            setCurrentSite(undefined);
+            form.setFieldsValue({ site: undefined });
+
             setTypeDisabled(false);
             setCurrentType(undefined);
             form.setFieldsValue({ type: undefined });
@@ -205,6 +230,14 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
         [form]
     );
 
+    const handleSiteSelect = useCallback(
+        (site: string) => {
+            setCurrentSite(site);
+            form.setFieldsValue({ site: site });
+        },
+        [form]
+    );
+
     const handleCredentialTypeSelect = useCallback(
         (type: credentialType) => {
             setCurrentType(type);
@@ -331,6 +364,7 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
             // It must be only in the variables map.
             const createCredentialRequest: CreateCredential = {
                 csp: createCredential.csp,
+                site: createCredential.site,
                 description: createCredential.description,
                 name: createCredential.name,
                 type: createCredential.type,
@@ -345,6 +379,7 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
         setCurrentCsp(undefined);
         setCurrentType(undefined);
         setCurrentName(undefined);
+        siteList.current = [];
         nameList.current = [];
         credentialTypeList.current = [];
         setCredentialVariableList([]);
@@ -356,6 +391,7 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
         clear();
         form.resetFields();
         getTipInfo(undefined, '');
+        setSiteDisabled(true);
         setTypeDisabled(true);
         setNameDisable(true);
     };
@@ -402,6 +438,27 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
                             })}
                         </Select>
                     </Form.Item>
+                    <Form.Item
+                        label='Site'
+                        name='site'
+                        rules={[{ required: true, message: 'Please select the site of credential' }]}
+                    >
+                        <Select
+                            loading={
+                                (sitesQuery.isLoading || sitesQuery.isRefetching) && sitesQuery.fetchStatus !== 'idle'
+                            }
+                            disabled={siteDisabled}
+                            onSelect={handleSiteSelect}
+                        >
+                            {siteList.current.map((site: string) => {
+                                return (
+                                    <Select.Option key={site} value={site}>
+                                        {site}
+                                    </Select.Option>
+                                );
+                            })}
+                        </Select>
+                    </Form.Item>
                     <Form.Item
                         label='Type'
                         name='type'

src/components/content/credentials/Credentials.tsx

@@ -97,13 +97,15 @@ function Credentials(): React.JSX.Element {
         if (currentRole === 'user') {
             const data: DeleteUserCloudCredentialData = {
                 cspName: credentialVariables.csp,
+                siteName: credentialVariables.site,
                 type: credentialVariables.type,
                 name: credentialVariables.name,
             };
             return deleteUserCloudCredential(data);
         } else {
             const data: DeleteIsvCloudCredentialData = {
                 cspName: credentialVariables.csp,
+                siteName: credentialVariables.site,
                 type: credentialVariables.type,
                 name: credentialVariables.name,
             };
@@ -123,6 +125,10 @@ function Credentials(): React.JSX.Element {
                 );
             },
         },
+        {
+            title: 'Site',
+            dataIndex: 'site',
+        },
         {
             title: 'Name',
             dataIndex: 'name',
@@ -301,7 +307,7 @@ function Credentials(): React.JSX.Element {
                     columns={columns}
                     loading={credentialsQuery.isLoading || credentialsQuery.isRefetching}
                     dataSource={abstractCredentialInfoList}
-                    rowKey={'csp'}
+                    rowKey={(record) => `${record.csp}-${record.site}-${record.type}-${record.name}`}
                 />
             </div>
         </div>

src/components/content/credentials/UpdateCredential.tsx

@@ -55,6 +55,7 @@ function UpdateCredential({
     // Also, necessary to avoid changing state during render
     useEffect(() => {
         form.setFieldsValue({ name: credentialVariablesCopy.name });
+        form.setFieldsValue({ site: credentialVariablesCopy.site });
         form.setFieldsValue({ csp: credentialVariablesCopy.csp });
         form.setFieldsValue({ description: credentialVariablesCopy.description });
         form.setFieldsValue({ type: credentialVariablesCopy.type });
@@ -103,6 +104,7 @@ function UpdateCredential({
             // It must be only in the variables map.
             const createCredentialRequest: CreateCredential = {
                 csp: createCredential.csp,
+                site: createCredential.site,
                 description: createCredential.description,
                 name: createCredential.name,
                 type: createCredential.type,
@@ -253,6 +255,9 @@ function UpdateCredential({
                             src={cspMap.get(credentialVariables.csp.valueOf() as name)?.logo}
                         />
                     </Form.Item>
+                    <Form.Item label='Site' name='site'>
+                        <Input disabled={true} />
+                    </Form.Item>
                     <Form.Item label='Type' name='type'>
                         <Input disabled={true} />
                     </Form.Item>

src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx

@@ -25,7 +25,7 @@ export function AvailabilityZoneFormItem({
     selectAvailabilityZones: Record<string, string | undefined>;
     selectCsp: csp;
 }): React.JSX.Element {
-    const availabilityZonesVariableRequest = useGetAvailabilityZonesForRegionQuery(selectCsp, selectRegion.name);
+    const availabilityZonesVariableRequest = useGetAvailabilityZonesForRegionQuery(selectCsp, selectRegion);
     const retryRequest = () => {
         if (availabilityZonesVariableRequest.isError) {
             void availabilityZonesVariableRequest.refetch();

src/components/content/order/common/utils/OrderItem.tsx

@@ -4,13 +4,13 @@
  */
 
 import React from 'react';
-import { csp } from '../../../../../xpanse-api/generated';
+import { csp, Region } from '../../../../../xpanse-api/generated';
 import { BooleanInput } from '../../formElements/BooleanInput';
 import { NumberInput } from '../../formElements/NumberInput';
 import { TextInput } from '../../formElements/TextInput';
 import { DeployParam } from '../../types/DeployParam';
 
-export function OrderItem({ item, csp, region }: { item: DeployParam; csp: csp; region: string }): React.JSX.Element {
+export function OrderItem({ item, csp, region }: { item: DeployParam; csp: csp; region: Region }): React.JSX.Element {
     if (item.type === 'string') {
         return <TextInput item={item} csp={csp} region={region} />;
     }

src/components/content/order/common/utils/useGetAvailabilityZonesForRegionQuery.tsx

@@ -4,15 +4,16 @@
  */
 
 import { useQuery } from '@tanstack/react-query';
-import { csp, getAvailabilityZones, type GetAvailabilityZonesData } from '../../../../../xpanse-api/generated';
+import { csp, getAvailabilityZones, type GetAvailabilityZonesData, Region } from '../../../../../xpanse-api/generated';
 
-export default function useGetAvailabilityZonesForRegionQuery(csp: csp, region: string) {
+export default function useGetAvailabilityZonesForRegionQuery(csp: csp, region: Region) {
     return useQuery({
-        queryKey: ['getExistingResourceNamesWithKind', csp, region],
+        queryKey: ['availabilityZonesForRegionQuery', csp, region],
         queryFn: () => {
             const data: GetAvailabilityZonesData = {
                 cspName: csp,
-                regionName: region,
+                siteName: region.site,
+                regionName: region.name,
             };
             return getAvailabilityZones(data);
         },

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

@@ -265,12 +265,7 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                             >
                                 {state.params.map((item) =>
                                     item.kind === 'variable' || item.kind === 'env' ? (
-                                        <OrderItem
-                                            key={item.name}
-                                            item={item}
-                                            csp={state.csp}
-                                            region={state.region.name}
-                                        />
+                                        <OrderItem key={item.name} item={item} csp={state.csp} region={state.region} />
                                     ) : undefined
                                 )}
                             </div>

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

@@ -135,7 +135,7 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
         getContactServiceDetailsOfServiceByCsp(selectCsp, versionToServicesMap.get(selectVersion));
     const currentEula: string | undefined = getEulaByCsp(selectCsp, versionToServicesMap.get(selectVersion));
 
-    const getAvailabilityZonesForRegionQuery = useGetAvailabilityZonesForRegionQuery(selectCsp, selectRegion.name);
+    const getAvailabilityZonesForRegionQuery = useGetAvailabilityZonesForRegionQuery(selectCsp, selectRegion);
     const availabilityZoneConfigs: AvailabilityZoneConfig[] = getAvailabilityZoneRequirementsForAService(
         selectCsp,
         services
@@ -220,7 +220,7 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
         );
         setSelectArea(areaList[0].key);
         setSelectFlavor(flavorList[0].name);
-        setSelectRegion(regionList[0]?.region);
+        setSelectRegion(regionList[0].region);
         setSelectVersion(currentVersion);
         setSelectCsp(cspList[0]);
         setSelectServiceHostType(serviceHostTypes[0]);

src/components/content/order/create/useAutoFillDeployVariableQuery.ts

@@ -11,13 +11,19 @@ import {
     GetExistingResourceNamesWithKindData,
 } from '../../../../xpanse-api/generated';
 
-export default function useAutoFillDeployVariableQuery(csp: csp, region: string, kind: deployResourceKind) {
+export default function useAutoFillDeployVariableQuery(
+    csp: csp,
+    site: string,
+    region: string,
+    kind: deployResourceKind
+) {
     return useQuery({
-        queryKey: ['getExistingResourceNamesWithKind', csp, kind, region],
+        queryKey: ['getExistingResourceNamesWithKind', csp, site, kind, region],
         queryFn: () => {
             const data: GetExistingResourceNamesWithKindData = {
                 csp: csp,
-                region: region,
+                siteName: site,
+                regionName: region,
                 deployResourceKind: kind,
             };
             return getExistingResourceNamesWithKind(data);

src/components/content/order/formElements/TextInput.tsx

@@ -8,13 +8,13 @@ import { Button, Col, Form, Input, Row, Select, Tooltip } from 'antd';
 import { Rule } from 'rc-field-form/lib/interface';
 import React, { ChangeEvent, useState } from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
-import { csp, deployResourceKind, sensitiveScope } from '../../../../xpanse-api/generated';
+import { csp, deployResourceKind, Region, sensitiveScope } from '../../../../xpanse-api/generated';
 import useAutoFillDeployVariableQuery from '../create/useAutoFillDeployVariableQuery';
 import { useOrderFormStore } from '../store/OrderFormStore';
 import { DeployParam } from '../types/DeployParam';
 import { DeployVariableSchema } from '../types/DeployVariableSchema';
 
-export function TextInput({ item, csp, region }: { item: DeployParam; csp: csp; region: string }): React.JSX.Element {
+export function TextInput({ item, csp, region }: { item: DeployParam; csp: csp; region: Region }): React.JSX.Element {
     const [isExistingResourceDropDownDisabled, setIsExistingResourceDropDownDisabled] = useState<boolean>(false);
     const ruleItems: Rule[] = [{ required: item.mandatory }, { type: 'string' }];
     let regExp: RegExp;
@@ -25,7 +25,8 @@ export function TextInput({ item, csp, region }: { item: DeployParam; csp: csp;
 
     const autoFillDeployVariableRequest = useAutoFillDeployVariableQuery(
         csp,
-        region,
+        region.site,
+        region.name,
         item.autoFill ? (item.autoFill.deployResourceKind as deployResourceKind) : deployResourceKind.VM
     );
 

src/components/content/order/formElements/VersionSelect.tsx

@@ -20,7 +20,6 @@ export default function VersionSelect({
         <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
             <Col className={serviceOrderStyles.orderFormLabel}>
                 <Form.Item
-                    name='Version'
                     label={
                         <p
                             className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}

src/components/content/order/migrate/DeploymentForm.tsx

@@ -146,7 +146,7 @@ export const DeploymentForm = ({
                         <div>
                             {deployParams.params.map((item) =>
                                 item.kind === 'variable' || item.kind === 'env' ? (
-                                    <OrderItem key={item.name} item={item} csp={selectCsp} region={region.name} />
+                                    <OrderItem key={item.name} item={item} csp={selectCsp} region={region} />
                                 ) : undefined
                             )}
                         </div>

src/components/content/order/migrate/SelectDestination.tsx

@@ -19,11 +19,11 @@ import {
     serviceHostingType,
     UserOrderableServiceVo,
 } from '../../../../xpanse-api/generated';
+import { AvailabilityZoneFormItem } from '../common/availabilityzone/AvailabilityZoneFormItem.tsx';
 import { BillingModeSelection } from '../common/BillingModeSelection';
 import { FlavorSelection } from '../common/FlavorSelection.tsx';
 import { RegionSelection } from '../common/RegionSelection.tsx';
 import { ServiceHostingSelection } from '../common/ServiceHostingSelection';
-import { AvailabilityZoneFormItem } from '../common/availabilityzone/AvailabilityZoneFormItem';
 import useGetAvailabilityZonesForRegionQuery from '../common/utils/useGetAvailabilityZonesForRegionQuery';
 import { convertAreasToTabs } from '../formDataHelpers/areaHelper';
 import { getBillingModes, getDefaultBillingMode } from '../formDataHelpers/billingHelper';
@@ -95,7 +95,7 @@ export const SelectDestination = ({
     getServicePriceQuery: UseQueryResult<ServiceFlavorWithPriceResult[]>;
 }): React.JSX.Element => {
     const [form] = Form.useForm();
-    const getAvailabilityZonesForRegionQuery = useGetAvailabilityZonesForRegionQuery(selectCsp, selectRegion.name);
+    const getAvailabilityZonesForRegionQuery = useGetAvailabilityZonesForRegionQuery(selectCsp, selectRegion);
     const availabilityZoneConfigs: AvailabilityZoneConfig[] = getAvailabilityZoneRequirementsForAService(
         selectCsp,
         userOrderableServiceVoList

src/components/content/order/modify/Modify.tsx

@@ -235,7 +235,7 @@ export const Modify = ({
                                 key={item.name}
                                 item={item}
                                 csp={currentSelectedService.deployRequest.csp as csp}
-                                region={currentSelectedService.deployRequest.region.name}
+                                region={currentSelectedService.deployRequest.region}
                             />
                         ) : undefined
                     )}