[WIP]Expression editor conversion from HAML to React

[amalvijayan03]

Part of angular conversion task - Replace angular code #7603 > /miq_ae_class/:

Automation/Automate/Explorer/Datastore -> Select a Domain -> Select a Namespace -> Select a Class -> Add a New Method / Expression Editor

Sections in Pages and its file path - #8944 (comment)

[jeffibm]

Hey @amalvijayan03 , could you please update the PR description on your findings about how the expression editor works?

[jeffibm]

Sections in the page and files

[amalvijayan03]

UI Flow: Expression Type Selection and Editing

- Selection of Expression Type:

1. Upon selecting the "Type" as "Expression," the user interface dynamically updates to reveal additional editing options.

2. Edit Expression and Selected Element Display:

3. The "Edit Expression" and "Edit Selected Element" components become visible.

• Edit Selecting Element:

1. Within the "Edit Selected Element" section, there are around four dropdown menus.(The dropdown values are determined based on the condition we are selecting in the Expression Object dropdown in main info)
2. The visibility of each dropdown is conditional and depends on the values selected in the previous dropdowns.

• Expression Condition Selection:

1.Users can select expression conditions from the dropdown menus.
2.A user input text field is also available to receive values for the expression.

• Committing the Selection:

  1. After the user commits the selected expression from the dropdowns, it is sent to the "Edit Expression" component.
  2. The object is updated with the newly selected expression.

• Selectable Expressions:

1. The newly added expression becomes selectable, enabling users to make further modifications.
2. Conditional buttons (AND, OR, NOT) become enabled upon selecting the expression.
   Conditional Logic (AND, OR, NOT):
3. If the user selects "AND" as the condition:
4. The selected expression is converted into plain text.
5. The "AND" condition is added.
6. A new field is enabled to receive the next expression values.
7. "AND" and "OR" conditions are added as suffixes to the initially selected expression.
8. "NOT" is added as a prefix to an expression.

1. _exp_editor.html.haml:
This file setting JavaScript variables if a saved expression already exists when first showing the editor.
These variables are used to initialize the editor with the correct type and title.It sets up the UI components.
If there is a selected expression atom, it renders the editor for that atom.

2. _editor.html.haml:
This file handles the editing of individual expression elements
It determines the model for the expression element and offers options for selecting the type of element(AND, OR, NOT)
then renders the appropriate editor based on the selected element type.
Data is passed between these views through instance variables like @edit, which seems to contain information about the current state of the expression editor, including the selected expression atom, type, and title. This information is used to prefill values and manage the expression editing process.
filter.rb defines various methods related to filtering, searching, and handling expressions.

[miq-bot]

Checked commit amalvijayan03@94ca76d with ruby 2.6.10, rubocop 1.28.2, haml-lint 0.35.0, and yamllint
0 files checked, 0 offenses detected
Everything looks fine. 👍

[miq-bot]

This pull request is not mergeable. Please rebase and repush.

[amalvijayan03]

maybe we can reuse this - app/helpers/view_helper.rb