Skip to content

Migrate the GitLab for Slack app installation button to pajamas

Sam Beckham requested to merge 417846-slack-integration-button-migration into master

What does this MR do and why?

This MR migrates the "Install GitLab for Slack app" button on the GitLab for slack app integration page. The original button had the slack logo in the button which violates the design system rules for buttons. I have replaced it with a generic button.

Screenshots or screen recordings

Before After
Screenshot_2023-07-14_at_10.25.16 Screenshot_2023-07-14_at_11.44.30
Screenshot_2023-07-14_at_10.50.48 Screenshot_2023-07-14_at_11.57.28

How to set up and validate locally

  1. Go to the GitLab for Slack App integration page Project > Settings > Integrations > GitLab for Slack App
  2. That's it. It's the only button on the page. See screenshot

If you need to see the other button for reinstalling Slack, you can edit the /app/views/shared/integrations/gitlab_slack_application/_slack_integration_form.html.haml file to fake the data using the below:

`slack_integration_form.html.haml`

- slack_integration = integration.slack_integration
- if !slack_integration
  %table.gl-table.gl-w-full
    %colgroup
      %col{ width: "25%" }
      %col{ width: "35%" }
      %col{ width: "20%" }
      %col
    %thead
      %tr
        %th= s_('SlackIntegration|Team name')
        %th= s_('SlackIntegration|Project alias')
        %th= _('Created')
        %th
    %tr
      %td{ class: 'gl-py-3!' }
        slack_integration.team_name
      %td{ class: 'gl-py-3!' }
        slack_integration.alias
      %td{ class: 'gl-py-3!' }
        = time_ago_with_tooltip(Date.new(1990,01,05))
      %td{ class: 'gl-py-3!' }
        .controls
          - project = integration.project
          = render Pajamas::ButtonComponent.new(href: edit_project_settings_slack_path(project)) do
            = _('Edit')
          = render Pajamas::ButtonComponent.new(method: :delete, category: 'secondary', variant: "danger", href: project_settings_slack_path(project), icon: 'remove', button_options: { aria: { label: s_('SlackIntegration|Remove project') }, data: { confirm_btn_variant: "danger", confirm: s_('SlackIntegration|Are you sure you want to remove this project from the GitLab for Slack app?') }})
  .gl-my-5
    = render 'shared/integrations/gitlab_slack_application/slack_button', project: @project, label: s_('SlackIntegration|Reinstall GitLab for Slack app…')
  %p
    = html_escape(s_('SlackIntegration|You may need to reinstall the GitLab for Slack app when we %{linkStart}make updates or change permissions%{linkEnd}.')) % { linkStart: %(<a href="#{help_page_path('user/project/integrations/gitlab_slack_application.md', anchor: 'update-the-gitlab-for-slack-app')}">).html_safe, linkEnd: '</a>'.html_safe}
- else
  = render 'shared/integrations/gitlab_slack_application/slack_button', project: @project, label: s_('SlackIntegration|Install GitLab for Slack app…')

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 #417846 (closed)

Edited by Sam Beckham

Merge request reports