Update Jira connect app UI with initial flow

When users are not signed in and first setup the app,
we should show them the sign in page.

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -20,6 +20,70 @@ $atlaskit-border-color: #dfe1e6;
   }
 }
 
+$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;
+  right: 0;
+}
+
+.jira-connect-user {
+  float: right;
+  position: relative;
+  top: -30px;
+}
+
+.jira-connect-app {
+  margin-top: $header-height;
+  max-width: 600px;
+  padding-top: 48px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.gl-mt-5 {
+  margin-top: 16px;
+}
+
+.heading-with-border {
+  border-bottom: 1px solid $gray-100;
+  display: inline-block;
+  padding-bottom: 16px;
+}
+
+svg {
+  fill: currentColor;
+}
+
+.s16 {
+  height: 16px;
+  width: 16px;
+}
+
+.ak-button__appearance-primary {
+  &:hover {
+    color: $white;
+    text-decoration: none;
+  }
+
+  svg {
+    align-self: center;
+    margin-left: 4px;
+  }
+}
+
 .subscriptions {
   tbody {
     tr {

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

-%h1
-  GitLab for Jira Configuration
-
-- if current_user
-  - user_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: user_path(current_user) }
-  = _('Signed in to GitLab as %{user_link_start}%{username}%{user_link_end}').html_safe % { user_link_start: user_link_start, username: current_user.to_reference, user_link_end: '</a>'.html_safe }
-- else
-  = link_to _('Sign in to GitLab'), new_user_session_path, target: '_blank', rel: 'noopener noreferrer'
-
-%form#add-subscription-form.subscription-form{ action: jira_connect_subscriptions_path }
-  .ak-field-group
-    %label
-      Namespace
-
-  .ak-field-group.field-group-input
-    %input#namespace-input.ak-field-text{ type: 'text', required: true }
-    %button.ak-button.ak-button__appearance-primary{ type: 'submit' }
-      Link namespace to Jira
-
-%table.subscriptions
-  %thead
-    %tr
-      %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: 'remove-subscription'
+%header.jira-connect-header
+  = brand_header_logo
+
+.jira-connect-user
+  - if current_user
+    - user_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: user_path(current_user) }
+    = _('Signed in to GitLab as %{user_link_start}%{username}%{user_link_end}').html_safe % { user_link_start: user_link_start, username: current_user.to_reference, user_link_end: '</a>'.html_safe }
+  - elsif @subscriptions.present?
+    = link_to _('Sign in to GitLab'), jira_connect_users_path, target: '_blank', rel: 'noopener noreferrer'
+
+.jira-connect-app
+  %h1
+    GitLab for Jira Configuration
+
+  - if current_user.blank? && @subscriptions.empty?
+    %h2.heading-with-border Sign in to GitLab.com to get started.
+
+    .gl-mt-5
+      = external_link _('Sign in to GitLab'), jira_connect_users_path, class: 'ak-button ak-button__appearance-primary'
+
+    .gl-mt-5
+      %p Note: this integration only works with accounts on GitLab.com (SaaS).
+  - else
+    %form#add-subscription-form.subscription-form{ action: jira_connect_subscriptions_path }
+      .ak-field-group
+        %label
+          Namespace
+
+      .ak-field-group.field-group-input
+        %input#namespace-input.ak-field-text{ type: 'text', required: true }
+        %button.ak-button.ak-button__appearance-primary{ type: 'submit' }
+          Link namespace to Jira
+
+    %table.subscriptions
+      %thead
+        %tr
+          %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: 'remove-subscription'
 
 %p
   %strong Browser limitations:

app/views/jira_connect/users/show.html.haml

 .jira-connect-users-container.gl-text-center
-  %h2= _('You are signed into GitLab.')
+  - user_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: user_path(current_user) }
+  %h2= _('You are signed into GitLab as %{user_link_start}%{username}%{user_link_end}.').html_safe % { user_link_start: user_link_start, username: current_user.to_reference, user_link_end: '</a>'.html_safe }
 
   %p= _('You can now close this window and return to the GitLab for Jira application.')
 
   %p= external_link _('Return to GitLab for Jira'), '#', class: 'btn btn-success'
 
-  %p= link_to _('Sign out'), '#'
+  %p= link_to _('Sign out'), destroy_user_session_path, method: :post
 
 - add_page_specific_style 'page_bundles/jira_connect_users'