Angular to react conversion Reconfigure form

[akhilkr128]

Before

After

reconfigure-form.mov

Links

Issue - #7603

Steps for Testing/QA

Compute -> Infrastructure -> Virtual Machines -> Configuration -> Reconfigure VM

@miq-bot add_label enhancement

[akhilkr128]

All form snapshots were updated because of the <MiqFormRenderer /> component changes.

[jeffibm]

few minor suggestions

1. could you add a margin-bottom:10px to both buttons - Add Disk and Add Network
2. could you remove extra spaces for switches inside the data tables? eg - Delete Backing.
3. could you add some additional style for the Edit and Delete buttons for the network adapters list to align right? The same applies for Resize and Delete for the disk list
4. should we remove the buttons in the list and use links instead? looks like there are too many buttons on the page..

[jeffibm]

For the edit, resize and action headers styling

1. in app/stylesheet/miq-data-table.scss, put this under .miq-data-table {

.header-button {
      width: 100px;
    }

2. in app/javascript/components/miq-data-table/index.jsx, add className to <TableHeader in const renderHeaders
className={classNames('miq-data-table-header', (header.isButton ? 'header-button' : ''))}

3. add isButton:true to headers with buttons for the 3 tables, like
   { key: 'edit', header: __('Edit'), isButton: true }

[jeffibm]

Looks good to me. Great work @akhilkr128 .
However, would like to have an extra pair of eyes to have a quick test on this..
cc @DavidResende0

[DavidResende0]

From a functional standpoint everything looks good, however I think there's a couple of items we should address before merging:

• The main reconfigure form is missing a reset button
• Both the memory size and type inputs can be moved to the same line as the toggle
  
• Same thing here
  
• I think the buttons in the data tables could be smaller. This is more of a project wide enhancement that could be done in a separate pr.
• The way the delete buttons in the table are hidden off screen is going to confuse people. I'm not 100% what the best way to address this is but something should be done before we merge.
  
  

[akhilkr128]

@DavidResende0

The main reconfigure form is missing a reset button

• added

Both the memory size and type inputs can be moved to the same line as the toggle

• I will address this layout change in a different PR.

I think the buttons in the data tables could be smaller. This is more of a project wide enhancement that could be done in a separate pr.

• Changed the button styles to link.

The way the delete buttons in the table are hidden off screen is going to confuse people. I'm not 100% what the best way to address this is but something should be done before we merge.

• Fixed the issue.

cc: @jeffibm

[DavidResende0]

LGTM, only thing I'll mention is that right now in the disks table, the toggle is not lined up with the rest of the row. This is fine to address in the followup pr you mentioned though.

[DavidResende0]

@Fryguy is the failing security check a concern?

[jeffibm]

@akhilkr128 , could you rebase this once again.

[miq-bot]

Checked commit akhilkr128@9268a85 with ruby 2.6.10, rubocop 1.28.2, haml-lint 0.35.0, and yamllint
4 files checked, 0 offenses detected
Everything looks fine. 🏆

[Fryguy]

is the failing security check a concern?

This PR doesn't seem to have introduced this change, so I wouldn't worry about it. It would be different if this PR introduced the bad package.