Merge branch 'jira-connect-app-style-cleanup' into 'master'

Improve Jira Connect app styling and translations

See merge request gitlab-org/gitlab!53441

app/assets/javascripts/jira_connect/components/app.vue

@@ -60,15 +60,15 @@ export default {
 
 <template>
   <div>
-    <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" :dismissible="false">
+    <gl-alert v-if="errorMessage" class="gl-mb-7" variant="danger" :dismissible="false">
       {{ errorMessage }}
     </gl-alert>
 
-    <h2>{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
+    <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
 
     <div
       v-if="showNewUI"
-      class="gl-display-flex gl-justify-content-space-between gl-my-7 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
+      class="jira-connect-app-body gl-display-flex gl-justify-content-space-between gl-my-7 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
     >
       <h5 class="gl-align-self-center gl-mb-0" data-testid="new-jira-connect-ui-heading">
         {{ s__('Integrations|Linked namespaces') }}

app/assets/javascripts/jira_connect/index.js

@@ -77,6 +77,7 @@ export async function initJiraConnect() {
   Vue.use(GlFeatureFlagsPlugin);
 
   const { groupsPath, subscriptionsPath, usersPath } = el.dataset;
+  AP.sizeToParent();
 
   return new Vue({
     el,

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -20,36 +20,23 @@
 @import '@gitlab/ui/src/components/base/tooltip/tooltip';
 
 $atlaskit-border-color: #dfe1e6;
+$header-height: 40px;
 
-.ac-content {
-  margin: 20px;
-
-  .subscription-form {
-    margin-bottom: 20px;
-
-    .field-group-input {
-      display: flex;
-      padding-top: $gl-padding-4;
+.subscription-form {
+  .field-group-input {
+    display: flex;
+    padding-top: $gl-padding-4;
 
-      .ak-button {
-        align-items: center;
-        height: auto;
-        margin-left: $btn-margin-5;
-      }
+    .ak-button {
+      align-items: center;
+      height: auto;
+      margin-left: $btn-margin-5;
     }
   }
 }
 
-$header-height: 40px;
-
 .jira-connect-header {
-  border-bottom: 1px solid $gray-100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   min-height: $header-height;
-  padding-left: 16px;
-  padding-right: 16px;
   position: fixed;
   top: 0;
   left: 0;
@@ -57,7 +44,6 @@ $header-height: 40px;
 }
 
 .jira-connect-user {
-  font-size: $gl-font-size;
   position: fixed;
   top: 10px;
   right: 20px;
@@ -65,20 +51,17 @@ $header-height: 40px;
 
 .jira-connect-app {
   margin-top: $header-height;
+  height: calc(100% - #{$header-height});
+  max-width: 1000px;
+}
+
+.jira-connect-app-body {
   max-width: 600px;
-  min-height: 95vh;
-  padding-top: 48px;
-  padding-left: 16px;
-  padding-right: 16px;
   margin-left: auto;
   margin-right: auto;
-  text-align: center;
-}
-
-.gl-mt-5 {
-  margin-top: 16px;
 }
 
+// for external_link buttons
 svg {
   fill: currentColor;
 
@@ -115,12 +98,3 @@ svg {
     }
   }
 }
-
-.empty-subscriptions {
-  color: $gray-900;
-}
-
-.browser-limitations-notice {
-  font-size: $gl-font-size;
-  margin-top: 32px;
-}

app/views/jira_connect/subscriptions/index.html.haml

-%header.jira-connect-header
-  = brand_header_logo
+%header.jira-connect-header.gl-display-flex.gl-align-items-center.gl-justify-content-center.gl-px-5.gl-border-b-solid.gl-border-b-gray-100.gl-border-b-1.gl-bg-white
+  = link_to brand_header_logo, Gitlab.config.gitlab.url, target: '_blank', rel: 'noopener noreferrer'
 
-.jira-connect-user
+.jira-connect-user.gl-font-base
   - if current_user
     - user_link = link_to(current_user.to_reference, jira_connect_users_path, target: '_blank', rel: 'noopener noreferrer', class: 'js-jira-connect-sign-in')
     = _('Signed in to GitLab as %{user_link}').html_safe % { user_link: user_link }
   - elsif @subscriptions.present?
     = link_to _('Sign in to GitLab'), jira_connect_users_path, target: '_blank', rel: 'noopener noreferrer', class: 'js-jira-connect-sign-in'
 
-.jira-connect-app
+%main.jira-connect-app.gl-px-5.gl-pt-7.gl-mx-auto
   - if current_user.blank? && @subscriptions.empty?
-    %h2= s_('JiraService|GitLab for Jira Configuration')
-    %p= s_('JiraService|Sign in to GitLab.com to get started.')
+    .jira-connect-app-body.gl-text-center
+      %h2= s_('JiraService|GitLab for Jira Configuration')
+      %p= s_('JiraService|Sign in to GitLab.com to get started.')
 
-    .gl-mt-7
-      - sign_in_button_class = new_jira_connect_ui? ? 'btn gl-button btn-confirm' : 'ak-button ak-button__appearance-primary'
-      = external_link _('Sign in to GitLab'), jira_connect_users_path, class: "#{sign_in_button_class} js-jira-connect-sign-in"
+      .gl-mt-7
+        - sign_in_button_class = new_jira_connect_ui? ? 'btn gl-button btn-confirm' : 'ak-button ak-button__appearance-primary'
+        = external_link _('Sign in to GitLab'), jira_connect_users_path, class: "#{sign_in_button_class} js-jira-connect-sign-in"
 
-    .gl-mt-7
-      %p Note: this integration only works with accounts on GitLab.com (SaaS).
+      .gl-mt-7
+        %p= s_('Integrations|Note: this integration only works with accounts on GitLab.com (SaaS).')
   - else
     .js-jira-connect-app{ data: jira_connect_app_data(@subscriptions) }
 
-    - unless new_jira_connect_ui?
-      %form#add-subscription-form.subscription-form{ action: jira_connect_subscriptions_path }
-        .ak-field-group
-          %label
-            GitLab namespace
+    .jira-connect-app-body
+      - unless new_jira_connect_ui?
+        %form#add-subscription-form.subscription-form.gl-mb-5{ action: jira_connect_subscriptions_path }
+          .ak-field-group
+            %label= _('GitLab namespace')
 
-        .ak-field-group.field-group-input
-          %input#namespace-input.ak-field-text{ type: 'text', required: true, placeholder: 'e.g. "MyCompany" or "MyCompany/GroupName"' }
-          %button.ak-button.ak-button__appearance-primary{ type: 'submit' }
-            Link namespace to Jira
+          .ak-field-group.field-group-input
+            %input#namespace-input.ak-field-text{ type: 'text', required: true, placeholder: 'e.g. "MyCompany" or "MyCompany/GroupName"' }
+            %button.ak-button.ak-button__appearance-primary{ type: 'submit' }
+              = s_('Integrations|Link namespace to Jira')
 
-    - if @subscriptions.present?
-      %table.subscriptions.gl-w-full
-        %thead
-          %tr
-            %th Namespace
-            %th Added
-            %th
-        %tbody
-          - @subscriptions.each do |subscription|
+      - if @subscriptions.present?
+        %table.subscriptions.gl-w-full
+          %thead
             %tr
-              %td= subscription.namespace.full_path
-              %td= subscription.created_at
-              %td= link_to 'Remove', jira_connect_subscription_path(subscription), class: 'js-jira-connect-remove-subscription'
-    - else
-      %h4.empty-subscriptions
-        No linked namespaces
-      %p= s_('Integrations|Namespaces are your GitLab groups and subgroups that will be linked to this Jira instance.')
+              %th= _('Namespace')
+              %th= _('Added')
+              %th
+          %tbody
+            - @subscriptions.each do |subscription|
+              %tr
+                %td= subscription.namespace.full_path
+                %td= subscription.created_at
+                %td= link_to _('Remove'), jira_connect_subscription_path(subscription), class: 'js-jira-connect-remove-subscription'
+      - else
+        .gl-text-center
+          %h4= s_('Integrations|No linked namespaces')
+          %p= s_('Integrations|Namespaces are your GitLab groups and subgroups that will be linked to this Jira instance.')
 
-  %p.browser-limitations-notice
-    %strong Browser limitations:
-    Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use
-    %a{ href: 'https://www.mozilla.org/en-US/firefox/', target: '_blank', rel: 'noopener noreferrer' } Firefox
-    or enable cross‑site cookies in your browser when adding a namespace.
+  %p.jira-connect-app-body.gl-mt-7.gl-font-base.gl-text-center
+    %strong= s_('Integrations|Browser limitations')
+    - firefox_link_url = 'https://www.mozilla.org/en-US/firefox/'
+    - firefox_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: firefox_link_url }
+    = s_('Integrations|Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use %{firefox_link_start}Firefox%{firefox_link_end} or enable cross‑site cookies in your browser when adding a namespace.').html_safe % { firefox_link_start: firefox_link_start, firefox_link_end: '</a>'.html_safe }
     = link_to _('Learn more'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/284211', target: '_blank', rel: 'noopener noreferrer'
 
 = webpack_bundle_tag 'performance_bar' if performance_bar_enabled?

app/views/layouts/jira_connect.html.haml

@@ -12,5 +12,4 @@
     = Gon::Base.render_data(nonce: content_security_policy_nonce)
     = yield :head
   %body
-    .ac-content
-      = yield
+    = yield

changelogs/unreleased/jira-connect-app-style-cleanup.yml

+---
+title: Improve Jira connect app styling and i18n
+merge_request: 53441
+author:
+type: changed

locale/gitlab.pot

@@ -13756,6 +13756,9 @@ msgstr ""
 msgid "GitLab metadata URL"
 msgstr ""
 
+msgid "GitLab namespace"
+msgstr ""
+
 msgid "GitLab project export"
 msgstr ""
 
@@ -16051,12 +16054,18 @@ msgstr ""
 msgid "Integrations|Add namespace"
 msgstr ""
 
+msgid "Integrations|Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use %{firefox_link_start}Firefox%{firefox_link_end} or enable cross‑site cookies in your browser when adding a namespace."
+msgstr ""
+
 msgid "Integrations|All details"
 msgstr ""
 
 msgid "Integrations|All projects inheriting these settings will also be reset."
 msgstr ""
 
+msgid "Integrations|Browser limitations"
+msgstr ""
+
 msgid "Integrations|Comment detail:"
 msgstr ""
 
@@ -16096,6 +16105,9 @@ msgstr ""
 msgid "Integrations|Issues created in Jira are shown here once you have created the issues in project setup in Jira."
 msgstr ""
 
+msgid "Integrations|Link namespace to Jira"
+msgstr ""
+
 msgid "Integrations|Link namespaces"
 msgstr ""
 
@@ -16108,6 +16120,12 @@ msgstr ""
 msgid "Integrations|No available namespaces."
 msgstr ""
 
+msgid "Integrations|No linked namespaces"
+msgstr ""
+
+msgid "Integrations|Note: this integration only works with accounts on GitLab.com (SaaS)."
+msgstr ""
+
 msgid "Integrations|Projects using custom settings will not be affected."
 msgstr ""