Autocomplete as replacement of branch textfield

[ivanlori]

Current situation

we have a text field where the user can write the branch name.

The goal It could be helpful if that textfield was replaced by an autocomplete with all the branches published.

Why To improve the user experience.

[svedova]

This can also be extended to the Deplow now modal. When user clicks on Deploy now, we show a text input. Instead of copy pasting the branch name, one could pick it directly from the list. Since there are multiple places where the selector can be used, I'm going to suggest to create this is as a standalone reusable component (like the src/components/EnvironmentSelector).

It'll probably need to have a wrapper component which accepts a provider property (one of github, gitlab, or bitbucket) and then internally it loads the relevant component based on the given provider. An example can be found here: src/pages/Apps/New/:provider/Provider.js.

Also as an idea, we can get inspired by GitLab's branch selector:

[svedova]

It'll be useful to create this as a standalone component as now we also have a branch selector in the Deployments page to filter the deployments:

[filippofinke]

It'll be useful to create this as a standalone component as now we also have a branch selector in the Deployments page to filter the deployments:

For the deployments page I don't think that we need an autocomplete text input because we know all the possibile branches available.

Something along the line of this:

Waiting for some feedback before working on this.

[svedova]

@filippofinke I'm guessing you took those branches from the environment object's branch field. If that's the case, I guess we still need the branch selector here because you could deploy a completely different branch with an environment's configuration.

For instance, your deploy config could look like this:

{
  "branch": "my-feature-branch",
  "env": "staging"
}

And the staging env could have release/staging as the default branch.

I would work iteratively on this anyways. Maybe something like:

• [ ] Investigate if ~backend work is required
• [ ] Create a generic AutoComplete component (maybe we can check if material ui already has one)
• [ ] (Optional) Wrap the AutoComplete component with a higher level BranchAutoComplete component that fetches branch names from the provider and feeds the data to the AutoComplete component
• [ ] Replace Branch inputs with the BranchAutoComplete components

Does this make sense?