From 5772ad5cd35b90eee99fc6546d88957447de6cf8 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 28 Jan 2025 21:54:01 -0700 Subject: [PATCH 1/3] Add "Copy file path" button to the diff file header --- .../diff_file_header_component.html.haml | 5 ++--- .../rapid_diffs/diff_file_header_component.rb | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/app/components/rapid_diffs/diff_file_header_component.html.haml b/app/components/rapid_diffs/diff_file_header_component.html.haml index 3d328292654c1d..15d2c5bffd40d0 100644 --- a/app/components/rapid_diffs/diff_file_header_component.html.haml +++ b/app/components/rapid_diffs/diff_file_header_component.html.haml @@ -1,5 +1,4 @@ -# TODO: add file size --# TODO: add file toggle -# TODO: add comment button -# TODO: add viewed toggle -# TODO: add raw\rendered toggle @@ -22,7 +21,7 @@ = helpers.sprite_icon('folder-git', file_icon: true) %strong = helpers.submodule_link(@diff_file.blob, @diff_file.content_sha, @diff_file.repository) - -# TODO: add copy button + = copy_path_button - else -# TODO: add icons for file types - if @diff_file.renamed_file? @@ -37,7 +36,7 @@ = @diff_file.file_path - if @diff_file.deleted_file? = _("deleted") - -# TODO: add copy button + = copy_path_button - if @diff_file.mode_changed? %small #{@diff_file.a_mode} → #{@diff_file.b_mode} - if @diff_file.stored_externally? && @diff_file.external_storage == :lfs diff --git a/app/components/rapid_diffs/diff_file_header_component.rb b/app/components/rapid_diffs/diff_file_header_component.rb index b60f56f4f55534..19ae2f8229777e 100644 --- a/app/components/rapid_diffs/diff_file_header_component.rb +++ b/app/components/rapid_diffs/diff_file_header_component.rb @@ -2,8 +2,23 @@ module RapidDiffs class DiffFileHeaderComponent < ViewComponent::Base + include ButtonHelper + def initialize(diff_file:) @diff_file = diff_file end + + def copy_path_button + clipboard_button( + text: @diff_file.file_path, + gfm: "`#{@diff_file.file_path}`", + title: _("Copy file path"), + variant: :default, + category: :tertiary, + size: :small, + placement: "top", + boundary: "viewport" + ) + end end end -- GitLab From 6d49c594c70cfb591fe90651b658079a5097e5dd Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Wed, 29 Jan 2025 09:57:26 -0700 Subject: [PATCH 2/3] Remove explicitly-set button defaults (per MR review suggestion) --- app/components/rapid_diffs/diff_file_header_component.rb | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/components/rapid_diffs/diff_file_header_component.rb b/app/components/rapid_diffs/diff_file_header_component.rb index 19ae2f8229777e..7b31694a8dec9a 100644 --- a/app/components/rapid_diffs/diff_file_header_component.rb +++ b/app/components/rapid_diffs/diff_file_header_component.rb @@ -13,9 +13,6 @@ def copy_path_button text: @diff_file.file_path, gfm: "`#{@diff_file.file_path}`", title: _("Copy file path"), - variant: :default, - category: :tertiary, - size: :small, placement: "top", boundary: "viewport" ) -- GitLab From 41af2fc1450083dc915d56e12c3cc2dbff562370 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Wed, 29 Jan 2025 11:25:51 -0700 Subject: [PATCH 3/3] Add tests for the copy-to-clipboard button --- .../diff_file_header_component.html.haml | 2 +- .../rapid_diffs/diff_file_header_component.rb | 3 ++- .../rapid_diffs/diff_file_header_component_spec.rb | 14 +++++++++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/app/components/rapid_diffs/diff_file_header_component.html.haml b/app/components/rapid_diffs/diff_file_header_component.html.haml index 15d2c5bffd40d0..22e81aa36aa073 100644 --- a/app/components/rapid_diffs/diff_file_header_component.html.haml +++ b/app/components/rapid_diffs/diff_file_header_component.html.haml @@ -17,7 +17,7 @@ = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, icon: 'chevron-right', button_options: { data: { closed: '', click: 'toggleFile' }, aria: { label: _('Show file contents') } }) .rd-diff-file-title - if @diff_file.submodule? - %span + %span{ data: { testid: 'rd-diff-file-header-submodule' } } = helpers.sprite_icon('folder-git', file_icon: true) %strong = helpers.submodule_link(@diff_file.blob, @diff_file.content_sha, @diff_file.repository) diff --git a/app/components/rapid_diffs/diff_file_header_component.rb b/app/components/rapid_diffs/diff_file_header_component.rb index 7b31694a8dec9a..5b0a88002c2d88 100644 --- a/app/components/rapid_diffs/diff_file_header_component.rb +++ b/app/components/rapid_diffs/diff_file_header_component.rb @@ -14,7 +14,8 @@ def copy_path_button gfm: "`#{@diff_file.file_path}`", title: _("Copy file path"), placement: "top", - boundary: "viewport" + boundary: "viewport", + testid: "rd-diff-file-copy-clipboard" ) end end diff --git a/spec/components/rapid_diffs/diff_file_header_component_spec.rb b/spec/components/rapid_diffs/diff_file_header_component_spec.rb index 9d4bff596e99f8..42c8ca34ec714a 100644 --- a/spec/components/rapid_diffs/diff_file_header_component_spec.rb +++ b/spec/components/rapid_diffs/diff_file_header_component_spec.rb @@ -11,13 +11,25 @@ expect(header).to have_text(diff_file.file_path) end + it "renders copy path button" do + clipboard_text = '{"text":"files/ruby/popen.rb","gfm":"`files/ruby/popen.rb`"}' + button_selector = '[data-testid="rd-diff-file-header"] [data-testid="rd-diff-file-copy-clipboard"]' + icon_selector = "#{button_selector} svg use" + + render_component + + expect(page.find(button_selector)['data-clipboard-text']).to eq(clipboard_text) + expect(page.find(button_selector)['title']).to eq(_('Copy file path')) + expect(page.find(icon_selector)['href']).to include('copy-to-clipboard') + end + it "renders submodule info", quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/489868' do allow(diff_file).to receive(:submodule?).and_return(true) allow_next_instance_of(SubmoduleHelper) do |instance| allow(instance).to receive(:submodule_links).and_return(nil) end render_component - expect(page.find('svg use')['href']).to include('folder-git') + expect(page.find('[data-testid="rd-diff-file-header-submodule"] svg use')['href']).to include('folder-git') expect(page).to have_text(diff_file.blob.name) expect(page).to have_text(diff_file.blob.id[0..7]) end -- GitLab