Merge branch '345202-slack-edit-ui-polish' into 'master'

Polish Slack application edit page UI

See merge request gitlab-org/gitlab!78252

ee/app/views/projects/services/gitlab_slack_application/_help.html.haml

-.card
-  .card-body
+.info-well
+  .well-segment
     %p
       = _("This service allows users to perform common operations on this project by entering slash commands in Slack.")
-      = external_link _('View documentation'), help_page_path('user/project/integrations/gitlab_slack_application.md')
-    %p.inline
+      = link_to _('Learn more'), help_page_path('user/project/integrations/gitlab_slack_application.md')
+    %p
       = _("See the list of available commands in Slack after setting up this service by entering")
-  %kbd.inline /gitlab help
-  - if integration.project_level?
-    = render "projects/services/#{integration.to_param}/slack_integration_form", integration: integration
+      %kbd.inline /gitlab help
+- if integration.project_level?
+  = render "projects/services/#{integration.to_param}/slack_integration_form", integration: integration

ee/app/views/projects/services/gitlab_slack_application/_slack_integration_form.html.haml

 - slack_integration = integration.slack_integration
 - if slack_integration
-  %table.table
+  %table.gl-table.gl-w-full
     %colgroup
-      %col
-      %col
-      %col
+      %col{ width: "25%" }
+      %col{ width: "35%" }
+      %col{ width: "20%" }
       %col
     %thead
       %tr
-        %th Team name
-        %th Project alias
-        %th Created at
-        %th Actions
+        %th= s_('SlackIntegration|Team name')
+        %th= s_('SlackIntegration|Project alias')
+        %th= _('Created')
+        %th
     %tr
-      %td
+      %td{ class: 'gl-py-3!' }
         = slack_integration.team_name
-      %td
+      %td{ class: 'gl-py-3!' }
         = slack_integration.alias
-      %td
-        = time_ago_in_words slack_integration.created_at
-        ago
-      %td
+      %td{ class: 'gl-py-3!' }
+        = time_ago_with_tooltip(slack_integration.created_at)
+      %td{ class: 'gl-py-3!' }
         .controls
           - project = integration.project
-          = link_to 'Edit', edit_project_settings_slack_path(project), class: 'btn gl-button btn-default btn-sm'
-          = link_to 'Remove', project_settings_slack_path(project), method: :delete, class: 'btn gl-button btn-danger btn-sm', data: { confirm: 'Are you sure?' }
+          = link_to _('Edit'), edit_project_settings_slack_path(project), class: 'btn gl-button btn-default'
+          = link_to sprite_icon('remove', css_class: 'gl-icon'), project_settings_slack_path(project), method: :delete, class: 'btn gl-button btn-danger btn-danger-secondary', data: { confirm: 'Are you sure?' }
 - else
-  %p To set up this service press "Add to Slack"
+  %p= s_('SlackIntegration|To set up this integration press "Add to Slack"')
   = render "projects/services/#{integration.to_param}/slack_button", project: @project

locale/gitlab.pot

@@ -33187,12 +33187,21 @@ msgstr ""
 msgid "SlackIntegration|GitLab for Slack"
 msgstr ""
 
+msgid "SlackIntegration|Project alias"
+msgstr ""
+
 msgid "SlackIntegration|Select a GitLab project to link with your Slack workspace."
 msgstr ""
 
 msgid "SlackIntegration|Sends notifications about project events to Slack channels."
 msgstr ""
 
+msgid "SlackIntegration|Team name"
+msgstr ""
+
+msgid "SlackIntegration|To set up this integration press \"Add to Slack\""
+msgstr ""
+
 msgid "SlackService|1. %{slash_command_link_start}Add a slash command%{slash_command_link_end} in your Slack team using this information:"
 msgstr ""