Azure: Add support for selecting HyperV generation

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureHyperVSelect.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+import { FormGroup } from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
+
+import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
+import {
+  changeAzureHyperVGeneration,
+  selectAzureHyperVGeneration,
+} from '../../../../../store/wizardSlice';
+
+export const AzureHyperVSelect = () => {
+  const hyperVGeneration = useAppSelector(selectAzureHyperVGeneration);
+  const dispatch = useAppDispatch();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelect = (_event: React.MouseEvent, selection: 'V1' | 'V2') => {
+    dispatch(changeAzureHyperVGeneration(selection));
+    setIsOpen(false);
+  };
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const selectOptions = [
+    <SelectOption
+      key="V1"
+      value="V1"
+      description="Hyper V Generation 1 (BIOS)"
+      label="Hyper V Generation 1"
+    />,
+    <SelectOption
+      key="V2"
+      value="V2"
+      description="Hyper V Generation 2 (UEFI)"
+      label="Hyper V Generation 2"
+    />,
+  ];
+
+  return (
+    <>
+      <FormGroup
+        isRequired
+        label="HyperV Generation"
+        data-testid="azure-hyper-v-generation-select"
+      >
+        <Select
+          ouiaId="hyperv_gen_select"
+          variant={SelectVariant.single}
+          onToggle={handleToggle}
+          onSelect={handleSelect}
+          isOpen={isOpen}
+          selections={
+            hyperVGeneration === 'V1' ? 'Generation 1' : 'Generation 2'
+          }
+          value={hyperVGeneration}
+        >
+          {selectOptions}
+        </Select>
+      </FormGroup>
+    </>
+  );
+};

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/index.tsx

@@ -14,6 +14,7 @@ import {
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 import { AzureAuthButton } from './AzureAuthButton';
+import { AzureHyperVSelect } from './AzureHyperVSelect';
 import { AzureResourceGroups } from './AzureResourceGroups';
 import { AzureSourcesSelect } from './AzureSourcesSelect';
 
@@ -91,6 +92,7 @@ const Azure = () => {
           Learn more about OAuth 2.0
         </Button>
       </Text>
+      <AzureHyperVSelect />
       <FormGroup label="Share method:">
         <Radio
           id="radio-with-description"

src/Components/CreateImageWizard/utilities/requestMapper.ts

@@ -46,6 +46,7 @@ import {
   selectAzureSource,
   selectAzureSubscriptionId,
   selectAzureTenantId,
+  selectAzureHyperVGeneration,
   selectBaseUrl,
   selectBlueprintDescription,
   selectBlueprintName,
@@ -244,6 +245,7 @@ function commonRequestToState(
       tenantId: azureUploadOptions?.tenant_id || '',
       subscriptionId: azureUploadOptions?.subscription_id || '',
       resourceGroup: azureUploadOptions?.resource_group,
+      hyperVGeneration: azureUploadOptions?.hyper_v_generation || 'V1',
     },
     gcp: {
       shareMethod: (gcpUploadOptions?.share_with_accounts
@@ -423,12 +425,14 @@ const getImageOptions = (
         return {
           source_id: selectAzureSource(state),
           resource_group: selectAzureResourceGroup(state),
+          hyper_v_generation: selectAzureHyperVGeneration(state),
         };
       else
         return {
           tenant_id: selectAzureTenantId(state),
           subscription_id: selectAzureSubscriptionId(state),
           resource_group: selectAzureResourceGroup(state),
+          hyper_v_generation: selectAzureHyperVGeneration(state),
         };
     case 'gcp': {
       let googleAccount: string = '';

src/store/wizardSlice.ts

@@ -63,6 +63,7 @@ export type wizardState = {
     subscriptionId: string;
     source: string;
     resourceGroup: string;
+    hyperVGeneration: 'V1' | 'V2';
   };
   gcp: {
     shareMethod: GcpShareMethod;
@@ -136,6 +137,7 @@ export const initialState: wizardState = {
     subscriptionId: '',
     source: '',
     resourceGroup: '',
+    hyperVGeneration: 'V1',
   },
   gcp: {
     shareMethod: 'withGoogle',
@@ -242,6 +244,10 @@ export const selectAzureResourceGroup = (state: RootState) => {
   return state.wizard.azure.resourceGroup;
 };
 
+export const selectAzureHyperVGeneration = (state: RootState) => {
+  return state.wizard.azure.hyperVGeneration;
+};
+
 export const selectGcpShareMethod = (state: RootState) => {
   return state.wizard.gcp.shareMethod;
 };
@@ -406,6 +412,12 @@ export const wizardSlice = createSlice({
     changeAzureResourceGroup: (state, action: PayloadAction<string>) => {
       state.azure.resourceGroup = action.payload;
     },
+    changeAzureHyperVGeneration: (
+      state,
+      action: PayloadAction<'V1' | 'V2'>
+    ) => {
+      state.azure.hyperVGeneration = action.payload;
+    },
     reinitializeAzure: (state) => {
       state.azure.shareMethod = 'sources';
       state.azure.tenantId = '';
@@ -690,6 +702,7 @@ export const {
   changeAzureSubscriptionId,
   changeAzureSource,
   changeAzureResourceGroup,
+  changeAzureHyperVGeneration,
   reinitializeAzure,
   changeGcpShareMethod,
   changeGcpAccountType,

src/test/Components/CreateImageWizard/steps/TargetEnvironment/AzureTarget.test.tsx

@@ -152,6 +152,19 @@ const enterSubscriptionId = async () => {
   );
 };
 
+const selectV2 = async () => {
+  const user = userEvent.setup();
+  const hypervMenu = screen.getAllByRole('button', {
+    name: /options menu/i,
+  })[0];
+
+  await waitFor(() => user.click(hypervMenu));
+  const v2 = await screen.findByRole('option', {
+    name: /v2/i,
+  });
+  await waitFor(() => user.click(v2));
+};
+
 const getResourceGroupInput = async () => {
   const resourceGroupInput = await screen.findByRole('textbox', {
     name: /resource group/i,
@@ -326,6 +339,7 @@ describe('Azure image type request generated correctly', () => {
         options: {
           source_id: '666',
           resource_group: 'myResourceGroup1',
+          hyper_v_generation: 'V1',
         },
         type: 'azure',
       },
@@ -359,6 +373,41 @@ describe('Azure image type request generated correctly', () => {
           tenant_id: 'b8f86d22-4371-46ce-95e7-65c415f3b1e2',
           subscription_id: '60631143-a7dc-4d15-988b-ba83f3c99711',
           resource_group: 'testResourceGroup',
+          hyper_v_generation: 'V1',
+        },
+      },
+    };
+
+    const expectedRequest: CreateBlueprintRequest = {
+      ...blueprintRequest,
+      image_requests: [expectedImageRequest],
+    };
+
+    expect(receivedRequest).toEqual(expectedRequest);
+  });
+
+  test('manually entering info V2', async () => {
+    await renderCreateMode();
+    await selectAzureTarget();
+    await goToAzureStep();
+    await selectManuallyEnterInformation();
+    await enterTenantGuid();
+    await enterSubscriptionId();
+    await enterResourceGroup();
+    await selectV2();
+    await goToReview();
+    const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
+
+    const expectedImageRequest: ImageRequest = {
+      architecture: 'x86_64',
+      image_type: 'azure',
+      upload_request: {
+        type: 'azure',
+        options: {
+          tenant_id: 'b8f86d22-4371-46ce-95e7-65c415f3b1e2',
+          subscription_id: '60631143-a7dc-4d15-988b-ba83f3c99711',
+          resource_group: 'testResourceGroup',
+          hyper_v_generation: 'V2',
         },
       },
     };

src/test/fixtures/composes.ts

@@ -203,6 +203,7 @@ export const mockComposes: ComposesResponseItem[] = [
             type: 'azure',
             options: {
               resource_group: 'my_resource_group',
+              hyper_v_generation: 'V1',
             },
           },
         },
@@ -352,6 +353,7 @@ export const mockComposes: ComposesResponseItem[] = [
             type: 'azure',
             options: {
               resource_group: 'my_resource_group',
+              hyper_v_generation: 'V1',
             },
           },
         },
@@ -648,6 +650,7 @@ export const mockStatus = (composeId: string): ComposeStatus => {
               type: 'azure',
               options: {
                 resource_group: 'my_resource_group',
+                hyper_v_generation: 'V1',
               },
             },
           },

src/test/fixtures/editMode.ts

@@ -306,6 +306,7 @@ export const azureImageRequest: ImageRequest = {
     options: {
       source_id: '666',
       resource_group: 'myResourceGroup1',
+      hyper_v_generation: 'V1',
     },
     type: 'azure',
   },