rule creation ux is poor and ui is inconsistent with other parts of automate

[rishichawda]

Describe the bug

The dropdowns would look like they already have an option selected but it doesn't actually work. So the user has to then open the dropdown, select a different option and then select the originally "selected" option if they wanted that one. For example, if user wants to create a rule that targets node attributes, they would see that the resource type is set to node but there's no place to add condition. They have to now open the dropdown, select events and then select node again to get there. Ideally, if we're conditionally waiting on something like this or rendering conditionally without showing anything initially, we should have a "Select an option" shown as placeholder and nothing selected. Then the user can select one and we can render appropriate parts of the form for it.

In places where we are selecting a default, like the attribute or operator dropdowns, then the validations should be aware of it. Currently it seems like I have to do the same thing like the resource type dropdown. To use equals operator, user will have to open the dropdown, select member of and then select equals again.

Along with this, the dropdowns are different from the other places in the interface. These should be updated to match them.

To Reproduce

Steps to reproduce the behavior:

• Open any project and select "create rule".
• Try to create a rule with resource type node and equals operation.

Expected behavior

UI should be consistent, what's visible to the user should reflect the inner validation. unnecessary interactions with the form can be taken care of.

dropdowns should look like this

Screenshots

Versions (please complete the following information):

• OS: [e.g. rhel6] N/A
• Browser [e.g. chrome, safari] N/A
• Automate Build Number [e.g. 20190701222009] - Version: 2, Build: 3.0.49