Merge branch '789-geo-clone-ui' into 'master'

Geo: Improve project view UI to teach users how to clone from a secondary Geo node and push to a primary.

This Merge request adds a new button into the "repository clone widget" to guide Geo (#76) users how to define a different remote URL for pushing code.
We can infer the primary's node URL when using `HTTP` method, but not for `SSH` or `Kerberos` (as they can vary according to configuration defined into config files).

For the `HTTP` method the instruction will be "complete", while for the others there will be a placeholder instead of the primary's node URL for that repository.  (See screenshots below)

Checklist
- [x] Display a button after the clipboard icon only in secondary Geo nodes
- [x] Clicking in the Geo info button, shows up a dialog with instructions
- [x] Instructions use the selected clone mode to display correct text (HTTP/SSH/KERBEROS)

Closes #789

----

![http_clone](/uploads/4e0298faab6ea602aba158e61d7a3d2c/http_clone.png)

![ssh_clone](/uploads/2e9d421de842db0a938c181326522fd2/ssh_clone.png)

See merge request !905

app/assets/javascripts/application.js

@@ -52,6 +52,7 @@
 /*= require shortcuts_network */
 /*= require jquery.nicescroll */
 /*= require date.format */
+/*= require geo/geo_bundle */
 /*= require_directory ./behaviors */
 /*= require_directory ./blob */
 /*= require_directory ./templates */

app/assets/javascripts/geo/components/geo_clone_dialog.js.es6

+/* global modal Vue */
+(() => {
+  window.gl = window.gl || {};
+  window.gl.geo = window.gl.geo || {};
+
+  window.gl.geo.CloneDialog = Vue.extend({
+    props: ['title', 'id'],
+    data() {
+      return this.$parent.$data;
+    },
+    mounted() {
+      $(`#${this.id}`).appendTo('body').modal({ modal: true, show: false });
+    },
+    template: `
+      <div class="modal in" tabindex="-1" :id="id">
+          <div class="modal-dialog">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <a href="#" data-dismiss="modal" class="close">×</a>
+                      <h3>{{title}}</h3>
+                  </div>
+                  <div class="modal-body">
+                      <p><strong>Step 1.</strong> Clone the repository from your secondary node:</p> 
+                      <slot name="clipboard-1"></slot>
+                      <pre class="dark" id="geo-info-1">git clone {{cloneUrlSecondary}}</pre>
+                      
+                      <p><strong>Step 2.</strong> Go to the new directory and define <strong>primary node's</strong> repository URL as the <strong>push</strong> remote:</p>
+                      <slot name="clipboard-2"></slot>
+                      <pre class="dark" id="geo-info-2">git remote set-url --push origin {{cloneUrlPrimary || '&lt;clone url for primary repository&gt;'}}</pre> 
+                      <p><strong>Done.</strong> You can now commit and push code as you normally do, but with increased speed.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
+        `,
+  });
+})();

app/assets/javascripts/geo/geo_bundle.js.es6

+/* global modal Vue */
+//= require vue
+//= require ./components/geo_clone_dialog
+
+$(document).ready(() => {
+  window.gl = window.gl || {};
+  const $geoClone = document.getElementById('geo-clone');
+
+  if ($geoClone) {
+    gl.GeoClone = new Vue({
+      el: $geoClone,
+      components: {
+        'geo-clone-dialog': gl.geo.CloneDialog,
+      },
+      data: Object.assign({}, $geoClone.dataset),
+    });
+  }
+});

app/assets/stylesheets/pages/projects.scss

@@ -915,3 +915,19 @@ a.allowed-to-push {
     width: 30%;
   }
 }
+
+#modal-geo-info .modal-dialog {
+  max-width: 700px;
+
+  .btn-clipboard {
+    @extend .pull-right;
+    margin-right: 20px;
+    margin-top: 5px;
+    position: absolute;
+    right: 0;
+  }
+
+  .dark {
+    margin-right: 40px;
+  }
+}

app/helpers/button_helper.rb

@@ -39,7 +39,8 @@ module ButtonHelper
         html: true,
         placement: placement,
         container: 'body',
-        title: "Set a password on your account<br>to pull or push via #{protocol}"
+        title: "Set a password on your account<br>to pull or push via #{protocol}",
+        primary_url: (geo_primary_http_url_to_repo(project) if Gitlab::Geo.secondary?)
       }
   end
 
@@ -72,4 +73,14 @@ module ButtonHelper
         title: 'Get a Kerberos token for your<br>account with kinit.'
       }
   end
+
+  def geo_button(modal_target: nil)
+    data = { placement: 'bottom', container: 'body', toggle: 'modal', target: modal_target }
+    content_tag :button,
+                icon('globe'),
+                class: 'btn btn-geo has-tooltip',
+                data: data,
+                type: :button,
+                title: 'See Geo-specific instructions'
+  end
 end

app/helpers/ee/gitlab_routing_helper.rb

+module EE
+  module GitlabRoutingHelper
+    def geo_primary_web_url(project)
+      File.join(::Gitlab::Geo.primary_node.url, ::Gitlab::Routing.url_helpers.namespace_project_path(project.namespace, project))
+    end
+
+    def geo_primary_http_url_to_repo(project)
+      "#{geo_primary_web_url(project)}.git"
+    end
+
+    def geo_primary_default_url_to_repo(project)
+      case default_clone_protocol
+      when 'http'
+        geo_primary_http_url_to_repo(project)
+      end
+    end
+  end
+end

app/views/shared/_clone_panel.html.haml

@@ -23,6 +23,7 @@
   = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
   .input-group-btn
     = clipboard_button(clipboard_target: '#project_clone')
+    = geo_button(modal_target: '#modal-geo-info') if Gitlab::Geo.secondary?
 
 :javascript
   $('ul.clone-options-dropdown a').on('click',function(e){
@@ -31,3 +32,16 @@
     $('a.clone-dropdown-btn span').text($this.text());
     $('#project_clone').val($this.attr('href'));
   });
+
+  // Change URLs in Geo Clone Dialog information text
+  $('ul.clone-options-dropdown a').on('click',function(e){
+    e.preventDefault();
+    var $this = $(this);
+
+    if (gl.GeoClone) {
+      gl.GeoClone.cloneUrlSecondary = $this.attr('href');
+      gl.GeoClone.cloneUrlPrimary = $this.data('primaryUrl');
+    }
+  });
+
+= render 'shared/geo_info_modal', project: project if Gitlab::Geo.secondary?

app/views/shared/_geo_info_modal.html.haml

+#geo-clone{ data: { clone_url_secondary: h(default_url_to_repo(project)), clone_url_primary: h(geo_primary_default_url_to_repo(project)) } }
+  %geo-clone-dialog{ id: 'modal-geo-info', title: 'How to work faster with Geo' }
+    %span{ slot: 'clipboard-1' }
+      = clipboard_button(clipboard_target: 'pre#geo-info-1')
+    %span{ slot: 'clipboard-2' }
+      = clipboard_button(clipboard_target: 'pre#geo-info-2')

changelogs/unreleased-ee/905-geo-clone-ui.yml

+---
+title: 'Geo: Improve project view UI to teach users how to clone from a secondary Geo node and push to a primary.'
+merge_request: 905
+author: