[WIP]Automate Method Form Conversion from Angular to REACT

[amalvijayan03]

Tasks to be completed

• Convert the initial type selector page.
• Create a single schema for all forms.
• Include input parameter component.
• Add input parameter modal popup.
• Integrate code mirror component for built in method.
• Add embedded method popup modal
• Pass input parameters from modal form to data table
• Pass the actual values to the form.
• Add styling by introducing accordion

• input-parameters
• code-mirror
• expression-editor

• Integrate Expression editor component PR.
• Integrate TreeView component - Filtering and selecting embedded methods used in the inline-methods form pages #9059
• prepare data before form submit

• 1. Anisble Job Job Template
• 2. Ansible Tower Workflow Template
• 3. Built-in
• 4.Inline
• 5.Expression
• 6.Playbook

• New Record form submit action
• Populate values in Edit page

• 1. Anisble Job Job Template
• 2. Ansible Tower Workflow Template
• 3. Built-in
• 4.Inline
• 5.Expression
• 6.Playbook

• Edit Record form submit action

[amalvijayan03]

Integrated the coder mirror for the inline field.
Added the input parameters modal and input parameters table.
Finalised the schema by combining schema into a single file.

[jeffibm]

Updates as of 22 feb 2024

conversion-progress-new.mov

[jeffibm]

hey @amalvijayan03 - #9059 (comment)

[amalvijayan03]

Before

Add new method

POST:  miq_ae_class/add_update_method/new?button=add,
{
  class_id: 20170, // hidden
  language: 'ruby', // hidden
  scope: 'instance', // hidden
  location: 'ansible_job_template', // hidden
  name: 'name001', // Name
  display_name: 'name00011', // Display Name
  manager_id: 53, // Provider
  ansible_template_id: 347, // Job Template
  repository_id: null, 
  playbook_id: null,
  credential_id: null,
  vault_credential_id: null,
  verbosity: null,
  become_enabled: false,
  execution_ttl: 3, // Max TTL (mins)
  log_output: 'on_error',
  hosts: 'localhost', // Hosts
  extra_vars: [['aaa', 1, 'string'], ['bbb', 'bbbb', 'string']]
};

[amalvijayan03]

Edit Page

GET: /miq_ae_class/x_button/20170?pressed=miq_ae_method_edit,
{
miq_grid_checks: aem-60053
select-row-60053: on
}

GET: /miq_ae_class/method_form_fields/60053?location=ansible_job_template,
{
location: ansible_job_template
}

[jeffibm]

update as of March 4, 2024

conver-progress-4.mov

[miq-bot]

Checked commit amalvijayan03@174d0b3 with ruby 2.7.8, rubocop 1.56.3, haml-lint 0.51.0, and yamllint
3 files checked, 6 offenses detected

app/controllers/miq_ae_class_controller.rb

• ❗ - Line 818, Col 16 - Layout/HashAlignment - Align the keys and values of a hash literal if they span more than one line.
• ❗ - Line 819, Col 11 - Layout/HashAlignment - Align the keys and values of a hash literal if they span more than one line.
• ❗ - Line 820, Col 11 - Layout/HashAlignment - Align the keys and values of a hash literal if they span more than one line.

app/views/miq_ae_class/_method_form.html.haml

• 💣 💥 🔥 🚒 - Line 0 - Couldn't process the file for linting. RuntimeError: Line 1 should be followed by indentation. This might actually work in Haml, but it's almost a bug that it does. haml-lint cannot process.
• ⚠️ - Line 5 - Line is too long. [97/80]
• ⚠️ - Line 6 - Line is too long. [98/80]