Skip to content

Clean up Slack Application installation page

Justin Ho Tuan Duong requested to merge 345203-polish-slack-application-installation-page into master

What does this MR do and why?

  • Update the Slack Application installation page Vue app to follow newest code conventions and style (this was a pretty old Vue app that still used Vue.extend).
  • Move all the code to be under the integrations folder for better management.
  • Update UI to include a projects dropdown instead of a simple select field. This provides more context for the user with project avatar, namespace and name.
  • Update backend code and specs to allow for all new functionality.

Changelog: changed EE: true

Screenshots or screen recordings

Scenario Before After
With projects GitLab_Slack_application_with_projects_-_before GitLab_Slack_application_with_projects_-_after
With projects (open dropdown) GitLab_Slack_application_with_projects__open_dropdown__-_before GitLab_Slack_application_with_projects__open_dropdown__-_after
With projects (selected) GitLab_Slack_application_with_projects__selected__-_before GitLab_Slack_application_with_projects__selected__-_after
Without projects GitLab_Slack_application_without_projects_-_before GitLab_Slack_application_without_projects_-_after
Not logged in GitLab_Slack_application_not_logged_in_-_before GitLab_Slack_application_not_logged_in_-_after

How to set up and validate locally

Go to http://127.0.0.1:3000/-/profile/slack/edit either as logged in user or not logged in.

To view state with no projects, edit ee/app/views/profiles/slacks/edit.html.haml to pass in an empty array instead of @projects:

.js-gitlab-slack-application{ data: gitlab_slack_application_data([]) }

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #345203 (closed)

Merge request reports