Fixes #38992 - Update host vmware form to PF5

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/StorageContainer.scss

@@ -1,28 +1,17 @@
-@import '../../../../common/colors';
-
 .vmware-storage-container {
-  display: flex;
-  flex-direction: column;
-
-  .storage-header {
-    padding: 10px 0;
-    margin-bottom: 10px;
-    border-bottom: 1px solid $pf-black-200;
-
-    .storage-title {
-      font-size: 18px;
-    }
-
-    .storage-controller-buttons {
-      text-align: right;
+  .pf-v5-c-expandable-section__toggle-text {
+    font-size: var(--pf-v5-global--FontSize--md);
+  }
 
-      > button {
-        margin-left: 20px;
-      }
-    }
+  .pf-v5-c-menu-toggle {
+    width: 80%;
+    max-width: 880px;
   }
 
-  .controller-container {
-    margin-bottom: 20px;
+  .disks-container {
+    padding-top: var(--pf-v5-global--spacer--md);
+    .disk-form-status-container {
+      align-self: center;
+    }
   }
 }

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/__tests__/StorageContainer.fixtures.js

@@ -45,7 +45,7 @@ export const vmwareData = {
   volumes: [
     {
       thin: true,
-      name: 'Hard disk',
+      name: 'Hard disk 1',
       mode: 'persistent',
       controllerKey: 1000,
       sizeGb: 10,
@@ -61,7 +61,7 @@ export const hiddenFieldValue = {
     {
       controllerKey: 1000,
       mode: 'persistent',
-      name: 'Hard disk',
+      name: 'Hard disk 1',
       sizeGb: 10,
       thin: true,
     },

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/__tests__/integration.test.js

@@ -1,50 +1,121 @@
 import React from 'react';
+import { screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 
-import IntegrationTestHelper from '../../../../../common/IntegrationTestHelper';
+import { rtlHelpers } from '../../../../../common/rtlTestHelpers';
 import { vmwareData, hiddenFieldValue } from './StorageContainer.fixtures';
-import hostReducers from '../../../../../redux/reducers/hosts';
 import StorageContainer from '../';
 
-jest.unmock('jquery');
-
-let helper;
-let component = null;
-
 describe('StorageContainer integration test', () => {
+  let store;
+  let container;
+  jest.useFakeTimers();
   beforeEach(() => {
-    helper = new IntegrationTestHelper({ hosts: hostReducers });
-    component = helper.mount(<StorageContainer data={vmwareData} />);
+    const initialState = {
+      hosts: {
+        storage: {
+          vmware: {
+            controllers: [],
+            config: {},
+            cluster: '',
+            volumes: [],
+            datastores: [],
+            datastoresLoading: false,
+            datastoresError: undefined,
+            storagePods: [],
+            storagePodsLoading: false,
+            storagePodsError: undefined,
+          },
+        },
+      },
+    };
+
+    const renderResult = rtlHelpers.renderWithStore(
+      <StorageContainer data={vmwareData} />,
+      initialState
+    );
+    store = renderResult.store;
+    container = renderResult.container;
   });
 
   it('render hidden field correctly', () => {
-    expect(
-      JSON.parse(component.find('#controller_hidden').props().value)
-    ).toEqual(hiddenFieldValue);
+    const hiddenField = container.querySelector('#controller_hidden');
+    expect(hiddenField).toBeInTheDocument();
+    expect(JSON.parse(hiddenField.value)).toEqual(hiddenFieldValue);
+  });
+
+  it('adds a disk when button is clicked', async () => {
+    const diskContainers = container.querySelectorAll('.disk-container');
+    expect(diskContainers).toHaveLength(1);
+
+    const addButton = screen.getByRole('button', {
+      name: /add another volume/i,
+    });
+
+    await act(async () => {
+      await userEvent.click(addButton);
+    });
+
+    const updatedContainers = container.querySelectorAll('.disk-container');
+    expect(updatedContainers).toHaveLength(2);
   });
 
-  it.each([['disk'], ['controller']])(
-    'adds a %s when button is clicked',
-    device => {
-      expect(component.render().find(`.${device}-container`)).toHaveLength(1);
-      component.find(`button.btn-add-${device}`).simulate('click');
-      expect(component.render().find(`.${device}-container`)).toHaveLength(2);
-    }
-  );
-
-  it('removes controller when one is selected', () => {
-    expect(component.render().find('.controller-container')).toHaveLength(1);
-    component.find('button.btn-remove-controller').simulate('click');
-    expect(component.render().find('.controller-container')).toHaveLength(0);
+  it('adds a controller when button is clicked', async () => {
+    const controllerContainers = container.querySelectorAll(
+      '.controller-container'
+    );
+    expect(controllerContainers).toHaveLength(1);
+
+    const addButton = screen.getByRole('button', {
+      name: /create another controller/i,
+    });
+
+    await act(async () => {
+      await userEvent.click(addButton);
+    });
+
+    const updatedContainers = container.querySelectorAll(
+      '.controller-container'
+    );
+    expect(updatedContainers).toHaveLength(2);
+  });
+
+  it('removes controller when one is selected', async () => {
+    const controllerContainers = container.querySelectorAll(
+      '.controller-container'
+    );
+    expect(controllerContainers).toHaveLength(1);
+
+    const removeButton = screen.getByRole('button', {
+      name: /remove controller/i,
+    });
+    await userEvent.click(removeButton);
+
+    const updatedContainers = container.querySelectorAll(
+      '.controller-container'
+    );
+    expect(updatedContainers).toHaveLength(0);
   });
 
-  it('changes controller type when one is selected', () => {
-    const cntrlType = () =>
-      helper.getState().hosts.storage.vmware.controllers[0].type;
+  it('changes controller type when one is selected', async () => {
+    const getControllerType = () =>
+      store.getState().hosts.storage.vmware.controllers[0].type;
 
-    expect(cntrlType()).toEqual('VirtualLsiLogicController');
-    component
-      .find('.controller-type-container select')
-      .simulate('change', { target: { value: 'ParaVirtualSCSIController' } });
-    expect(cntrlType()).toEqual('ParaVirtualSCSIController');
+    expect(getControllerType()).toEqual('VirtualLsiLogicController');
+    const controllerTypeButton = screen.getByRole('button', {
+      name: 'LSI Logic Parallel',
+    });
+    expect(controllerTypeButton).toBeInTheDocument();
+    await act(async () => {
+      await userEvent.click(controllerTypeButton);
+    });
+    await act(async () => {
+      await userEvent.click(
+        screen.getByRole('option', { name: 'VMware Paravirtual' })
+      );
+    });
+    act(() => jest.advanceTimersByTime(1000));
+    expect(getControllerType()).toEqual('ParaVirtualSCSIController');
   });
 });

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/controller.fixtures.js

@@ -5,7 +5,7 @@ export const props = {
   controllerVolumes: [
     {
       thin: true,
-      name: 'Hard disk',
+      name: 'Hard disk 1',
       mode: 'persistent',
       controllerKey: 1000,
       sizeGb: 10,