Improving dependency proxy ui

Added 'Enable proxy' heading to toggle

Changed toggle to perform submit on change

Removed 'save changes' submit button

Added clipboard_button to textfield row

Added full proxy url to hover text

ee/app/assets/javascripts/pages/groups/dependency_proxies/index.js

+import $ from 'jquery';
 import DependencyProxy from 'ee/dependency_proxy';
 
 document.addEventListener('DOMContentLoaded', () => new DependencyProxy());
+
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.querySelector('form.edit_dependency_proxy_group_setting');
+  const toggleInput = $('input.js-project-feature-toggle-input');
+
+  if (form && toggleInput) {
+    toggleInput.on('trigger-change', () => {
+      form.submit();
+    });
+  }
+});

ee/app/views/groups/dependency_proxies/_url.html.haml

+- proxy_url = "#{group_url(@group)}/dependency_proxy/containers"
+
 %h5.prepend-top-20= _('Dependency proxy URL')
 
-%div
-  = text_field_tag :url, "#{group_url(@group)}/dependency_proxy/containers", class: 'js-dependency-proxy-url form-control', readonly: true
+.row
+  .col-lg-8.col-md-12.input-group
+    = text_field_tag :url, "#{proxy_url}", class: 'js-dependency-proxy-url form-control', readonly: true
+    = clipboard_button(text: "#{proxy_url}", title: _("Copy %{proxy_url} to clipboard") % { proxy_url: proxy_url })
 
-.help-block.prepend-top-5
-  = s_('Contains %{count} blobs of images (%{size})') % { count: @blobs_count, size: number_to_human_size(@blobs_total_size) }
+.row
+  .col-12.help-block.prepend-top-10
+    = _('Contains %{count} blobs of images (%{size})') % { count: @blobs_count, size: number_to_human_size(@blobs_total_size) }

ee/app/views/groups/dependency_proxies/show.html.haml

@@ -5,12 +5,13 @@
 
   %p
     - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('PLACEHOLDER') }
-    = s_('Create a local proxy for storing frequently used upstream images. %{link_start}Learn more%{link_end} about dependency proxies.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    = _('Create a local proxy for storing frequently used upstream images. %{link_start}Learn more%{link_end} about dependency proxies.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
 - if @group.public?
   - if can?(current_user, :admin_dependency_proxy, @group)
     = form_for(@dependency_proxy, method: :put, url: group_dependency_proxy_path(@group)) do |f|
       .form-group
+        %h5.prepend-top-20= _('Enable proxy')
         .js-dependency-proxy-toggle-area
           %button{ type: 'button',
             class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if @dependency_proxy.enabled?}",
@@ -23,9 +24,6 @@
       - if @dependency_proxy.enabled
         = render 'groups/dependency_proxies/url'
 
-      .prepend-top-20
-        = f.submit 'Save changes', class: 'btn btn-success'
-
   - else
     - if @dependency_proxy.enabled
       = render 'groups/dependency_proxies/url'

ee/changelogs/unreleased/12180-improve-dependency-proxy-user-interface.yml

+---
+title: Improved dependency proxy page with some small UI enhancements
+merge_request: 14448
+author:
+type: other

ee/spec/features/groups/dependency_proxy_spec.rb

@@ -50,10 +50,10 @@ describe 'Group Dependency Proxy' do
         it 'hides the proxy URL when feature is disabled' do
           page.within('.edit_dependency_proxy_group_setting') do
             find('.js-project-feature-toggle').click
-            click_button 'Save changes'
           end
 
           expect(page).not_to have_css('.js-dependency-proxy-url')
+          expect(find('.js-project-feature-toggle-input', visible: false).value).to eq('false')
         end
       end
 

locale/gitlab.pot

@@ -3781,6 +3781,9 @@ msgstr ""
 msgid "Copy %{protocol} clone URL"
 msgstr ""
 
+msgid "Copy %{proxy_url} to clipboard"
+msgstr ""
+
 msgid "Copy ID to clipboard"
 msgstr ""
 
@@ -4944,6 +4947,9 @@ msgstr ""
 msgid "Enable or disable version check and usage ping."
 msgstr ""
 
+msgid "Enable proxy"
+msgstr ""
+
 msgid "Enable reCAPTCHA or Akismet and set IP limits."
 msgstr ""