Replace angular code

[himdel]

We do have a lot of angular.js 1.x code that should eventually be rewritten to react or DDF, as per version-support-status, it ends LTS in Dec 2021.

We don't use angular router, or ng-app, so any angular code needs miq_bootstrap to render (which uses angular.bootstrap to run angular).

This happens from:

• error modal - a self contained component that pops up a modal on unexpected 4** or 5** HTTP responses, shoud be trivial to rewrite

Views - forms (find issues)

• miq_ae_class/:

  • _angular_method_form.html.haml -(Automation/Automate/Explorer/Datastore -> Select a Domain -> Select a Namespace -> Select a Class -> Add a New Method) NOTE: Only the Playbook, Ansible Job Template and Ansible Workflow Template method forms are in Angular and should be handled in one React conversion. The other method forms can be converted later since they are not written in Angular.

• ops/:

  • _settings_replication_tab.html.haml - (Settings -> Application Settings -> Settings -> Select Region -> Replication) Settings > Application Settings > Replication tab enhancements #9388

Views - dialog user/editor:

• miq_ae_customization/:
  • editor.html.haml - dialog editor (Automation/Automate/Customization/Service Dialogs -> Add a new Dialog) Conversion of Service Dialogs Form from Angular to React #9592
• shared/dialogs/:
  • _reconfigure_dialog.html.haml - dialog user in reconfigure mode [WIP] Convert Service Reconfigure Form Page to React #8951 React conversion of Service reconfigure form and Order service form #9634
  • _dialog_user.html.haml - dialog user proper Order Service Form conversion from Angular to React #8911

Views - unsorted:

• layouts/listnav/:
  • _explorer.html.haml
    • - every navigation/explorer tree in the ui except the one in generic_objects (listed in Convert explorers to non-explorer style screens #6819)
  • _generic_object_definition_show_list_with_treeview.html.haml - generic objects show_list navigation tree (Automation/Automate/Generic Objects)

We also have multiple angular plugins - see #6452 (comment)
And components in ui-components - issue already exists: #6716

Previous Releases:

• [Pre Najdorf] Replace angular code #8297
• [Najdorf] Replace angular code  #8299
• [Oparin] Replace angular code #8417
• [Petrosian] Replace angular code #9031
• [Quinteros] Replace angular code #9032
• [Radjabov] Replace angular code #9854

[Fryguy]

Updated to checkboxes 😄

[Fryguy]

@himdel Can you reorganize the list so that provider dashboards are grouped together? I'm wondering if we focused on a provider dashboard react component if that would knock off a huge chunk of the list.

[himdel]

Resorted and split into forms, dashboards, topologies, a few trivial uses ..and the rest :).

[himdel]

Another nontrivial part that stands out is generic object + generic object definition - those screens are fully angular (and have additional issues) - might be another candidate for dropping?

[himdel]

Hopefully we have 0 class-based directives, as those are impossible to distinguish from css classes.

And as for attribute directives, I'm seeing..

• pf-form-group with pf-label - can be replaced by a class and a label element
• pf-select - can be replaced by our miq-select fork (from ui-components)

[Fryguy]

Another nontrivial part that stands out is generic object + generic object definition - those screens are fully angular (and have additional issues) - might be another candidate for dropping?

I don't think we can drop that...looks like we'll have to covert to react.