Show Geo specific instructions on clone panel with Vue

app/assets/javascripts/geo_clone_dialog.js.es6

+//= require vue
+
+(() => {
+    Vue.component('geo-clone-dialog', {
+        name: 'geo-clone-dialog',
+        props: ['title'],
+        data: function() {
+            return this.$parent.$data
+        },
+        filters: {
+            emptyRepo: function (value) {
+                if (!value) return '<clone url for primary repository>'
+                return value
+            }
+        },
+        template: `
+            <div class="modal" tabindex="99">
+                <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">
+                            <slot name="body"></slot>
+                            <pre class="dark" id="geo-info">
+git clone {{cloneUrlSecondary}}
+git remote set-url --push origin {{cloneUrlPrimary | emptyRepo}}
+                            </pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+    });
+})(window.gl || (window.gl = {}));

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: (project.geo_primary_http_url_to_repo 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
+    data = { toggle: 'tooltip', placement: 'bottom', container: 'body' }
+    content_tag :button,
+                icon('globe'),
+                class: 'btn btn-geo',
+                data: data,
+                type: :button,
+                title: 'See Geo-specific instructions'
+  end
 end

app/helpers/projects_helper.rb

@@ -265,6 +265,13 @@ module ProjectsHelper
     "#{number_to_human_size(size_in_bytes, delimiter: ',', precision: 2)}#{limit_text}"
   end
 
+  def geo_primary_default_url_to_repo(project = @project)
+    case default_clone_protocol
+    when 'http'
+      project.geo_primary_http_url_to_repo
+    end
+  end
+
   def default_url_to_repo(project = @project)
     case default_clone_protocol
     when 'krb5'

app/models/ee/project.rb

+module EE
+  # Project EE mixin
+  #
+  # This module is intended to encapsulate EE-specific model logic
+  # and be included in the `Project` model
+  module Project
+    extend ActiveSupport::Concern
+
+    included do
+      def geo_primary_web_url
+        File.join(::Gitlab::Geo.primary_node.url, ::Gitlab::Routing.url_helpers.namespace_project_path(self.namespace, self))
+      end
+
+      def geo_primary_http_url_to_repo
+        "#{geo_primary_web_url}.git"
+      end
+    end
+  end
+end

app/models/project.rb

@@ -16,6 +16,7 @@ class Project < ActiveRecord::Base
   include ProjectFeaturesCompatibility
   include SelectForProjectAuthorization
   prepend EE::GeoAwareAvatar
+  include EE::Project
 
   extend Gitlab::ConfigHelper
 

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 if Gitlab::Geo.secondary?
 
 :javascript
   $('ul.clone-options-dropdown a').on('click',function(e){
@@ -30,4 +31,10 @@
     var $this = $(this);
     $('a.clone-dropdown-btn span').text($this.text());
     $('#project_clone').val($this.attr('href'));
+    if (gl.GeoCloneDialog) {
+      gl.GeoCloneDialog.cloneUrlSecondary = $this.attr('href');
+      gl.GeoCloneDialog.cloneUrlPrimary = $this.attr('data-primary-url');
+    }
   });
+
+= render partial: 'shared/geo_info_modal', locals: {project: project} if Gitlab::Geo.secondary?

app/views/shared/_geo_info_modal.html.haml

+#geo_info
+  %geo-clone-dialog{id: 'modal_geo_info', title: 'How to optimize with Geo'}
+    %p{slot: 'body'}
+      %strong
+        Clone the repository and define a different remote to push code
+        = clipboard_button(clipboard_target: 'pre#geo-info')
+
+:javascript
+  gl.GeoCloneDialog = new Vue({
+    el: '#geo_info',
+    data: {
+      cloneUrlSecondary: "#{h default_url_to_repo(project)}",
+      cloneUrlPrimary: "#{h geo_primary_default_url_to_repo(project)}",
+    }
+    });
+
+  $(function(){
+    var modal = $('#modal_geo_info').modal({modal: true, show:false});
+    $('.btn-geo').bind("click", function(){
+      modal.show();
+    });
+    $('.modal-header .close').bind("click", function(){
+      modal.hide();
+    })
+  })