Replace custom CopyClipboardComponent with the InputGroup of Primer

This commit is contained in:
Henriette Darge
2023-11-29 14:14:36 +01:00
parent 65b22297d6
commit 6eb68adc42
8 changed files with 60 additions and 129 deletions
+1 -1
View File
@@ -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'
+2 -2
View File
@@ -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!
@@ -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
%>
@@ -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
+14 -14
View File
@@ -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",
+2 -2
View File
@@ -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"
}
}
@@ -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
@@ -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