From 6eb68adc424bb81aeb0b2fe8d535ff646ca2f562 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Wed, 29 Nov 2023 14:14:36 +0100 Subject: [PATCH] Replace custom CopyClipboardComponent with the InputGroup of Primer --- Gemfile | 2 +- Gemfile.lock | 4 +- .../common/clipboard_copy_component.html.erb | 6 -- .../common/clipboard_copy_component.rb | 73 ------------------- frontend/package-lock.json | 28 +++---- frontend/package.json | 4 +- .../oauth_client_form_component.html.erb | 30 ++++---- ...h_application_info_copy_component.html.erb | 42 ++++++----- 8 files changed, 60 insertions(+), 129 deletions(-) delete mode 100644 app/components/open_project/common/clipboard_copy_component.html.erb delete mode 100644 app/components/open_project/common/clipboard_copy_component.rb diff --git a/Gemfile b/Gemfile index 63f35c6b2c2..689adee9a03 100644 --- a/Gemfile +++ b/Gemfile @@ -370,4 +370,4 @@ end gem "openproject-octicons", '~>19.8.0' gem "openproject-octicons_helper", '~>19.8.0' -gem "openproject-primer_view_components", '~>0.17.1' +gem "openproject-primer_view_components", '~>0.18.1' diff --git a/Gemfile.lock b/Gemfile.lock index a6301e8b7e5..b2ff14921f8 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -698,7 +698,7 @@ GEM actionview openproject-octicons (= 19.8.0) railties - openproject-primer_view_components (0.17.1) + openproject-primer_view_components (0.18.1) actionview (>= 5.0.0) activesupport (>= 5.0.0) openproject-octicons (>= 19.8.0) @@ -1146,7 +1146,7 @@ DEPENDENCIES openproject-octicons (~> 19.8.0) openproject-octicons_helper (~> 19.8.0) openproject-openid_connect! - openproject-primer_view_components (~> 0.17.1) + openproject-primer_view_components (~> 0.18.1) openproject-recaptcha! openproject-reporting! openproject-storages! diff --git a/app/components/open_project/common/clipboard_copy_component.html.erb b/app/components/open_project/common/clipboard_copy_component.html.erb deleted file mode 100644 index 75eb37c576a..00000000000 --- a/app/components/open_project/common/clipboard_copy_component.html.erb +++ /dev/null @@ -1,6 +0,0 @@ -<%= - render(Primer::Beta::Text.new(tag: :div, flex_items: :center, display: :flex)) do - concat(render(Primer::Alpha::TextField.new(**text_field_options))) - concat(render(Primer::Beta::ClipboardCopy.new(**clipboard_copy_options))) - end -%> diff --git a/app/components/open_project/common/clipboard_copy_component.rb b/app/components/open_project/common/clipboard_copy_component.rb deleted file mode 100644 index c186345acf9..00000000000 --- a/app/components/open_project/common/clipboard_copy_component.rb +++ /dev/null @@ -1,73 +0,0 @@ -# frozen_string_literal: true - -#-- copyright -# OpenProject is an open source project management software. -# Copyright (C) 2012-2023 the OpenProject GmbH -# -# This program is free software; you can redistribute it and/or -# modify it under the terms of the GNU General Public License version 3. -# -# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: -# Copyright (C) 2006-2013 Jean-Philippe Lang -# Copyright (C) 2010-2013 the ChiliProject Team -# -# This program is free software; you can redistribute it and/or -# modify it under the terms of the GNU General Public License -# as published by the Free Software Foundation; either version 2 -# of the License, or (at your option) any later version. -# -# This program is distributed in the hope that it will be useful, -# but WITHOUT ANY WARRANTY; without even the implied warranty of -# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -# GNU General Public License for more details. -# -# You should have received a copy of the GNU General Public License -# along with this program; if not, write to the Free Software -# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. -# -# See COPYRIGHT and LICENSE files for more details. -#++ -# -module OpenProject::Common - class ClipboardCopyComponent < ApplicationComponent - include OpPrimer::ComponentHelpers - - options visually_hide_label: true, - readonly: true, - required: false, - input_group_options: {} - - def text_field_options - { name: options[:name], - label: options[:label], - classes: "rounded-right-0", - visually_hide_label:, - value: value_to_copy, - inset: true, - readonly:, - required: }.merge(input_group_options) - end - - def clipboard_copy_options - { value: value_to_copy, - aria: { label: clipboard_copy_aria_label }, - classes: clipboard_copy_classes }.merge(input_group_options) - end - - private - - def clipboard_copy_classes - %w[Button Button--iconOnly Button--secondary Button--medium rounded-left-0 border-left-0].tap do |classes| - classes << "mt-4" unless visually_hide_label - end - end - - def clipboard_copy_aria_label - options[:clipboard_copy_aria_label] || I18n.t('button_copy_to_clipboard') - end - - def value_to_copy - options[:value_to_copy] - end - end -end diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 48536542f04..f46d49ebb10 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -46,7 +46,7 @@ "@ngneat/content-loader": "^7.0.0", "@ngx-formly/core": "^6.1.4", "@openproject/octicons-angular": "^19.8.0", - "@openproject/primer-view-components": "^0.17.1", + "@openproject/primer-view-components": "^0.18.1", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.0.2", "@uirouter/angular": "^12.0.0", @@ -4512,9 +4512,9 @@ } }, "node_modules/@openproject/primer-view-components": { - "version": "0.17.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.17.1.tgz", - "integrity": "sha512-+qaV96ASXoauoFO68dhavJB3Q8ESMNIUhGhGcgqcvc6NLFirzCxpFiK0ZWUg4WtcaF9ZXVeWkzRecAX67bw4yQ==", + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.18.1.tgz", + "integrity": "sha512-XQxV4mezOX7WZTO/AR+ZUto3fZmtp6itsKWCa/6Xf/bVDsl23jwMuE2wdKIw70sVhC3JCmhzWT5jQFwBSz1pIQ==", "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.3.4", @@ -4597,9 +4597,9 @@ }, "node_modules/@primer/view-components": { "name": "@openproject/primer-view-components", - "version": "0.17.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.17.1.tgz", - "integrity": "sha512-+qaV96ASXoauoFO68dhavJB3Q8ESMNIUhGhGcgqcvc6NLFirzCxpFiK0ZWUg4WtcaF9ZXVeWkzRecAX67bw4yQ==", + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.18.1.tgz", + "integrity": "sha512-XQxV4mezOX7WZTO/AR+ZUto3fZmtp6itsKWCa/6Xf/bVDsl23jwMuE2wdKIw70sVhC3JCmhzWT5jQFwBSz1pIQ==", "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.3.4", @@ -23686,9 +23686,9 @@ } }, "@openproject/primer-view-components": { - "version": "0.17.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.17.1.tgz", - "integrity": "sha512-+qaV96ASXoauoFO68dhavJB3Q8ESMNIUhGhGcgqcvc6NLFirzCxpFiK0ZWUg4WtcaF9ZXVeWkzRecAX67bw4yQ==", + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.18.1.tgz", + "integrity": "sha512-XQxV4mezOX7WZTO/AR+ZUto3fZmtp6itsKWCa/6Xf/bVDsl23jwMuE2wdKIw70sVhC3JCmhzWT5jQFwBSz1pIQ==", "requires": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.3.4", @@ -23744,7 +23744,7 @@ "integrity": "sha512-kk0TfLqtGwGYJ/qXGLMXDIL4d3qWPjlEB12Hvk08krulbsQRWEsnXjejBIvJG69GyOOuYxXNoHvP2NGenxQ8Jw==", "requires": { "@primer/primitives": "^7.12.0", - "@primer/view-components": "npm:@openproject/primer-view-components@^0.17.1" + "@primer/view-components": "npm:@openproject/primer-view-components@^0.18.1" } }, "@primer/primitives": { @@ -23753,9 +23753,9 @@ "integrity": "sha512-QKNxfWm7Ik1Ulswyp3KeUL2xnQj8i0E7DdB6lOrh29o7LgyuutwcOHi4CGapBIOR1fYURu+yROSTHQ2C2aDK7A==" }, "@primer/view-components": { - "version": "npm:@openproject/primer-view-components@0.17.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.17.1.tgz", - "integrity": "sha512-+qaV96ASXoauoFO68dhavJB3Q8ESMNIUhGhGcgqcvc6NLFirzCxpFiK0ZWUg4WtcaF9ZXVeWkzRecAX67bw4yQ==", + "version": "npm:@openproject/primer-view-components@0.18.1", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.18.1.tgz", + "integrity": "sha512-XQxV4mezOX7WZTO/AR+ZUto3fZmtp6itsKWCa/6Xf/bVDsl23jwMuE2wdKIw70sVhC3JCmhzWT5jQFwBSz1pIQ==", "requires": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.3.4", diff --git a/frontend/package.json b/frontend/package.json index 7f2c6748479..dc06897720a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -97,7 +97,7 @@ "@ngneat/content-loader": "^7.0.0", "@ngx-formly/core": "^6.1.4", "@openproject/octicons-angular": "^19.8.0", - "@openproject/primer-view-components": "^0.17.1", + "@openproject/primer-view-components": "^0.18.1", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.0.2", "@uirouter/angular": "^12.0.0", @@ -175,6 +175,6 @@ "generate-typings": "tsc -d -p src/tsconfig.app.json" }, "overrides": { - "@primer/view-components": "npm:@openproject/primer-view-components@^0.17.1" + "@primer/view-components": "npm:@openproject/primer-view-components@^0.18.1" } } diff --git a/modules/storages/app/components/storages/admin/forms/oauth_client_form_component.html.erb b/modules/storages/app/components/storages/admin/forms/oauth_client_form_component.html.erb index 3423ebf17e9..602b9d0b42a 100644 --- a/modules/storages/app/components/storages/admin/forms/oauth_client_form_component.html.erb +++ b/modules/storages/app/components/storages/admin/forms/oauth_client_form_component.html.erb @@ -43,20 +43,24 @@ if storage.provider_type_one_drive? oauth_client_row.with_row(mb: 3) do - render( - OpenProject::Common::ClipboardCopyComponent.new( - name: :oauth_client_redirect_uri, - visually_hide_label: false, - value_to_copy: redirect_uri_or_instructions, - label: I18n.t('storages.label_redirect_uri'), - required: true, - input_group_options: { - data: { - 'storages--oauth-client-form-target': 'redirectUri' - } + render(Primer::OpenProject::InputGroup.new(input_width: :large)) do |input_group| + input_group.with_text_input(name: :oauth_client_redirect_uri, + label: I18n.t('storages.label_redirect_uri'), + visually_hide_label: false, + value: redirect_uri_or_instructions, + required: true, + data: { + 'storages--oauth-client-form-target': 'redirectUri' + }) + input_group.with_trailing_action_clipboard_copy_button( + value: redirect_uri_or_instructions, + aria: { + label: I18n.t('button_copy_to_clipboard') }, - ) - ) + data: { + 'storages--oauth-client-form-target': 'redirectUri' + }) + end end end diff --git a/modules/storages/app/components/storages/admin/oauth_application_info_copy_component.html.erb b/modules/storages/app/components/storages/admin/oauth_application_info_copy_component.html.erb index 0358cbe2df6..03f3bffe2dc 100644 --- a/modules/storages/app/components/storages/admin/oauth_application_info_copy_component.html.erb +++ b/modules/storages/app/components/storages/admin/oauth_application_info_copy_component.html.erb @@ -8,27 +8,33 @@ end credentials_row.with_row(mb: 3) do - render( - OpenProject::Common::ClipboardCopyComponent.new( - name: :openproject_oauth_application_uid, - visually_hide_label: false, - value_to_copy: oauth_application.uid, - label: I18n.t('storages.label_openproject_oauth_application_id'), - required: true - ) - ) + render(Primer::OpenProject::InputGroup.new(input_width: :large)) do |input_group| + input_group.with_text_input(name: :openproject_oauth_application_uid, + label: I18n.t('storages.label_openproject_oauth_application_id'), + visually_hide_label: false, + value: oauth_application.uid, + required: true) + input_group.with_trailing_action_clipboard_copy_button( + value: oauth_application.uid, + aria: { + label: I18n.t('button_copy_to_clipboard') + }) + end end credentials_row.with_row(mb: 3) do - render( - OpenProject::Common::ClipboardCopyComponent.new( - name: :openproject_oauth_application_secret, - visually_hide_label: false, - value_to_copy: oauth_application.plaintext_secret, - label: I18n.t('storages.label_openproject_oauth_application_secret'), - required: true - ) - ) + render(Primer::OpenProject::InputGroup.new(input_width: :large)) do |input_group| + input_group.with_text_input(name: :openproject_oauth_application_secret, + label: I18n.t('storages.label_openproject_oauth_application_secret'), + visually_hide_label: false, + value: oauth_application.plaintext_secret, + required: true) + input_group.with_trailing_action_clipboard_copy_button( + value: oauth_application.plaintext_secret, + aria: { + label: I18n.t('button_copy_to_clipboard') + }) + end end credentials_row.with_row do