From 183a9db6de11f4aeb98c7325f8df54a55984d4cc Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Wed, 4 Sep 2024 10:53:53 +0200 Subject: [PATCH] Bump primer to 0.44.3 and introduce FeedbackDialog and FeedbackMessage in the core --- Gemfile | 2 +- Gemfile.lock | 4 +- ...ss_token_created_dialog_component.html.erb | 25 +++--------- .../project_queries/upsale_component.html.erb | 3 +- .../modal_upsale_component.html.erb | 3 +- .../project_mappings.html.erb | 3 +- config/initializers/assets.rb | 8 ++++ frontend/package-lock.json | 28 ++++++------- frontend/package.json | 4 +- .../job_status/dialog/body_component.html.erb | 12 +----- .../job_status/dialog/body_component.rb | 4 +- .../dialog/dialog_component.html.erb | 6 +++ ...ccess_grant_nudge_modal_component.html.erb | 15 +++---- .../body.html.erb | 36 +++++------------ ...roy_confirmation_dialog_component.html.erb | 40 +++++-------------- .../storages/project_storages/index.html.erb | 13 +----- .../requests/project_storages_open_spec.rb | 2 +- 17 files changed, 77 insertions(+), 131 deletions(-) diff --git a/Gemfile b/Gemfile index 1803a99150aa..bc952104fb9a 100644 --- a/Gemfile +++ b/Gemfile @@ -398,4 +398,4 @@ end gem "openproject-octicons", "~>19.18.0" gem "openproject-octicons_helper", "~>19.18.0" -gem "openproject-primer_view_components", "~>0.43.1" +gem "openproject-primer_view_components", "~>0.44.3" diff --git a/Gemfile.lock b/Gemfile.lock index 160ef0fd89c9..7fbc25d6357c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -803,7 +803,7 @@ GEM actionview openproject-octicons (= 19.18.0) railties - openproject-primer_view_components (0.43.1) + openproject-primer_view_components (0.44.3) actionview (>= 5.0.0) activesupport (>= 5.0.0) openproject-octicons (>= 19.17.0) @@ -1303,7 +1303,7 @@ DEPENDENCIES openproject-octicons (~> 19.18.0) openproject-octicons_helper (~> 19.18.0) openproject-openid_connect! - openproject-primer_view_components (~> 0.43.1) + openproject-primer_view_components (~> 0.44.3) openproject-recaptcha! openproject-reporting! openproject-storages! diff --git a/app/components/my/access_token/access_token_created_dialog_component.html.erb b/app/components/my/access_token/access_token_created_dialog_component.html.erb index bdc7c01fa5d0..cd773f77eda9 100644 --- a/app/components/my/access_token/access_token_created_dialog_component.html.erb +++ b/app/components/my/access_token/access_token_created_dialog_component.html.erb @@ -28,23 +28,17 @@ See COPYRIGHT and LICENSE files for more details. ++#%> <%= - render(Primer::Alpha::Dialog.new( + render(Primer::OpenProject::FeedbackDialog.new( id:, title: nil, size: :large )) do |dialog| - dialog.with_body do + dialog.with_feedback_message do |message| + message.with_heading(tag: :h2) { I18n.t("my.access_token.create_dialog.header", type: "API") } + end + + dialog.with_additional_content do flex_layout do |flex| - flex.with_row(mb: 3) do - render(Primer::Beta::Heading.new(tag: :h1, text_align: :center)) do - render(Primer::Beta::Octicon.new(icon: :"check-circle", color: :success, size: :medium)) - end - end - flex.with_row(mb: 1) do - render(Primer::Beta::Heading.new(tag: :h2, color: :default, text_align: :center)) do - I18n.t("my.access_token.create_dialog.header", type: "API") - end - end flex.with_row(mb: 2) do render(Primer::OpenProject::InputGroup.new) do |input_group| input_group.with_text_input(name: :openproject_api_access_token, @@ -65,12 +59,5 @@ See COPYRIGHT and LICENSE files for more details. end end end - dialog.with_footer do - component_collection do |footer| - footer.with_component(Primer::ButtonComponent.new(data: { 'close-dialog-id': id })) do - I18n.t("button_close") - end - end - end end %> diff --git a/app/components/shares/project_queries/upsale_component.html.erb b/app/components/shares/project_queries/upsale_component.html.erb index fe555d91b290..0568cec7557f 100644 --- a/app/components/shares/project_queries/upsale_component.html.erb +++ b/app/components/shares/project_queries/upsale_component.html.erb @@ -1,7 +1,6 @@ <%= modal_content.with_row(data: { 'test-selector': 'op-share-dialog-upsale-block' }) do - render Primer::Beta::Blankslate.new(border: true) do |component| - component.with_visual_icon(icon: :'op-enterprise-addons', classes: 'upsale-colored') + render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :"op-enterprise-addons", classes: "upsale-colored" }, border: true) do |component| component.with_heading(tag: :h2, classes: 'upsale-colored').with_content(I18n.t(:label_enterprise_addon)) component.with_description { I18n.t('sharing.project_queries.upsale.message') } diff --git a/app/components/shares/work_packages/modal_upsale_component.html.erb b/app/components/shares/work_packages/modal_upsale_component.html.erb index 2d5f3269a0d7..d1c89c491a12 100644 --- a/app/components/shares/work_packages/modal_upsale_component.html.erb +++ b/app/components/shares/work_packages/modal_upsale_component.html.erb @@ -1,7 +1,6 @@ <%= component_wrapper(tag: 'turbo-frame') do - render Primer::Beta::Blankslate.new(border: true) do |component| - component.with_visual_icon(icon: :'op-enterprise-addons', classes: 'upsale-colored') + render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :"op-enterprise-addons", classes: "upsale-colored" }, border: true) do |component| component.with_heading(tag: :h2, classes: 'upsale-colored').with_content(I18n.t(:label_enterprise_addon)) component.with_description { I18n.t('mail.sharing.work_packages.enterprise_text') } diff --git a/app/views/admin/settings/project_custom_fields/project_mappings.html.erb b/app/views/admin/settings/project_custom_fields/project_mappings.html.erb index 1f9cc9a070ff..515b30d36e28 100644 --- a/app/views/admin/settings/project_custom_fields/project_mappings.html.erb +++ b/app/views/admin/settings/project_custom_fields/project_mappings.html.erb @@ -52,8 +52,7 @@ See COPYRIGHT and LICENSE files for more details. <%= if @custom_field.required? - render Primer::Beta::Blankslate.new(border: true) do |component| - component.with_visual_icon(icon: :checklist) + render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :checklist}, border: true) do |component| component.with_heading(tag: :h2).with_content(I18n.t("projects.settings.project_custom_fields.is_required_blank_slate.heading")) component.with_description { I18n.t("projects.settings.project_custom_fields.is_required_blank_slate.description") } end diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index c0c37cdd056b..d6bb582a183a 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -6,6 +6,9 @@ # Add additional assets to the asset load path. # config.assets.paths << Emoji.images_path + config.assets.paths << File.join(Gem + .loaded_specs["openproject-primer_view_components"] + .full_gem_path, "app", "assets", "images") # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in the app/assets @@ -15,4 +18,9 @@ locales/*.js openapi-explorer.min.js ) + + # Special place to load assets of Primer + config.assets.precompile += %w( + loading_indicator.svg + ) end diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 66310de130a9..22c1f50d58b9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -47,7 +47,7 @@ "@ngneat/content-loader": "^7.0.0", "@ngx-formly/core": "^6.1.4", "@openproject/octicons-angular": "^19.18.0", - "@openproject/primer-view-components": "^0.43.1", + "@openproject/primer-view-components": "^0.44.3", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.3.3", "@types/hotwired__turbo": "^8.0.1", @@ -4823,9 +4823,9 @@ } }, "node_modules/@openproject/primer-view-components": { - "version": "0.43.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.43.1.tgz", - "integrity": "sha512-bWAko3ZkPXHmNLFRA96aZC3sr84sMnZf6hwSLHa5P1H6q6eARU9WBMggyMAjaKKQEfOSSxQpa8EB0Ul7/pcJ9Q==", + "version": "0.44.3", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.44.3.tgz", + "integrity": "sha512-Mb8tAiIxZPVn44i9Eb5+pMK6yoYsEN7GqRax8scct2wJ5uTc0M/50gBrI6uuR++PZu9w9ZCLtJUoTRmaGTFJlw==", "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.2", @@ -4891,9 +4891,9 @@ }, "node_modules/@primer/view-components": { "name": "@openproject/primer-view-components", - "version": "0.43.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.43.1.tgz", - "integrity": "sha512-bWAko3ZkPXHmNLFRA96aZC3sr84sMnZf6hwSLHa5P1H6q6eARU9WBMggyMAjaKKQEfOSSxQpa8EB0Ul7/pcJ9Q==", + "version": "0.44.3", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.44.3.tgz", + "integrity": "sha512-Mb8tAiIxZPVn44i9Eb5+pMK6yoYsEN7GqRax8scct2wJ5uTc0M/50gBrI6uuR++PZu9w9ZCLtJUoTRmaGTFJlw==", "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.2", @@ -25362,9 +25362,9 @@ } }, "@openproject/primer-view-components": { - "version": "0.43.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.43.1.tgz", - "integrity": "sha512-bWAko3ZkPXHmNLFRA96aZC3sr84sMnZf6hwSLHa5P1H6q6eARU9WBMggyMAjaKKQEfOSSxQpa8EB0Ul7/pcJ9Q==", + "version": "0.44.3", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.44.3.tgz", + "integrity": "sha512-Mb8tAiIxZPVn44i9Eb5+pMK6yoYsEN7GqRax8scct2wJ5uTc0M/50gBrI6uuR++PZu9w9ZCLtJUoTRmaGTFJlw==", "requires": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.2", @@ -25411,7 +25411,7 @@ "integrity": "sha512-h2ITbCj415T1JpWQDeQd1xYL6TrzkehfUOXxnV0FpblYyMsVBAks6LL7HGJ+ZrydG+Ds0i1rvvi8Q61jErieNA==", "requires": { "@primer/primitives": "^8.2.0", - "@primer/view-components": "npm:@openproject/primer-view-components@^0.43.1" + "@primer/view-components": "npm:@openproject/primer-view-components@^0.44.3" } }, "@primer/primitives": { @@ -25420,9 +25420,9 @@ "integrity": "sha512-K8A/DA6xv8P/kD/9DupFn+KYlo06OpcrwfwJf+sKp+KnX7ZRwLLDg1AaEGAoRoaykXRY/gfrXlgDfK7laOTWyA==" }, "@primer/view-components": { - "version": "npm:@openproject/primer-view-components@0.43.1", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.43.1.tgz", - "integrity": "sha512-bWAko3ZkPXHmNLFRA96aZC3sr84sMnZf6hwSLHa5P1H6q6eARU9WBMggyMAjaKKQEfOSSxQpa8EB0Ul7/pcJ9Q==", + "version": "npm:@openproject/primer-view-components@0.44.3", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.44.3.tgz", + "integrity": "sha512-Mb8tAiIxZPVn44i9Eb5+pMK6yoYsEN7GqRax8scct2wJ5uTc0M/50gBrI6uuR++PZu9w9ZCLtJUoTRmaGTFJlw==", "requires": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.2", diff --git a/frontend/package.json b/frontend/package.json index e05262b32769..677acd1558dd 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -99,7 +99,7 @@ "@ngneat/content-loader": "^7.0.0", "@ngx-formly/core": "^6.1.4", "@openproject/octicons-angular": "^19.18.0", - "@openproject/primer-view-components": "^0.43.1", + "@openproject/primer-view-components": "^0.44.3", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.3.3", "@types/hotwired__turbo": "^8.0.1", @@ -176,6 +176,6 @@ "generate-typings": "tsc -d -p src/tsconfig.app.json" }, "overrides": { - "@primer/view-components": "npm:@openproject/primer-view-components@^0.43.1" + "@primer/view-components": "npm:@openproject/primer-view-components@^0.44.3" } } diff --git a/modules/job_status/app/components/job_status/dialog/body_component.html.erb b/modules/job_status/app/components/job_status/dialog/body_component.html.erb index 9fd33a19a808..9649342c5df7 100644 --- a/modules/job_status/app/components/job_status/dialog/body_component.html.erb +++ b/modules/job_status/app/components/job_status/dialog/body_component.html.erb @@ -2,8 +2,7 @@ <% unless pending? %> <%= content_tag :div, "", data: { "job-status-polling-target": "finished" } %> <% end %> - <%= render Primer::Beta::Blankslate.new do |component| - component.with_visual_icon(icon: icon[:icon], color: icon[:color], size: :medium) unless icon.nil? + <%= render Primer::OpenProject::FeedbackMessage.new(icon_arguments: icon) do |component| component.with_heading(tag: :h2).with_content(title) component.with_description do flex_layout do |flex| @@ -47,13 +46,4 @@ end end end %> - <% unless pending? %> - <%= flex_layout(justify_content: :flex_end) do |flex| %> - <% flex.with_column do %> - <%= render(Primer::Beta::Button.new(data: { - "close-dialog-id": JobStatus::Dialog::DialogComponent::MODAL_ID - })) { I18n.t(:button_close) } %> - <% end %> - <% end %> - <% end %> <% end %> diff --git a/modules/job_status/app/components/job_status/dialog/body_component.rb b/modules/job_status/app/components/job_status/dialog/body_component.rb index bd03fb83d102..be22802cf931 100644 --- a/modules/job_status/app/components/job_status/dialog/body_component.rb +++ b/modules/job_status/app/components/job_status/dialog/body_component.rb @@ -98,7 +98,9 @@ def mime_type_pdf? def icon return { icon: :"x-circle", color: :danger } if job.nil? || has_error? - { icon: :"issue-closed", color: :success } if success_statuses.include?(job.status) + return { icon: :"issue-closed", color: :success } if success_statuses.include?(job.status) + + { icon: :none } end def title diff --git a/modules/job_status/app/components/job_status/dialog/dialog_component.html.erb b/modules/job_status/app/components/job_status/dialog/dialog_component.html.erb index 422784a64b19..d8f7d3632bf5 100644 --- a/modules/job_status/app/components/job_status/dialog/dialog_component.html.erb +++ b/modules/job_status/app/components/job_status/dialog/dialog_component.html.erb @@ -20,4 +20,10 @@ "job-status-polling-target": "frame" }) %> <% end %> + + <% dialog.with_footer do %> + <%= render(Primer::Beta::Button.new(data: { + "close-dialog-id": MODAL_ID + })) { I18n.t(:button_close) } %> + <% end %> <% end %> diff --git a/modules/storages/app/components/storages/admin/storages/oauth_access_grant_nudge_modal_component.html.erb b/modules/storages/app/components/storages/admin/storages/oauth_access_grant_nudge_modal_component.html.erb index 98dae582f9b6..8c7b84e90fb2 100644 --- a/modules/storages/app/components/storages/admin/storages/oauth_access_grant_nudge_modal_component.html.erb +++ b/modules/storages/app/components/storages/admin/storages/oauth_access_grant_nudge_modal_component.html.erb @@ -39,16 +39,13 @@ ) { render(Storages::OpenProjectStorageModalComponent::Body.new(:waiting, waiting_title:)) } ) concat( - render(Primer::Beta::Blankslate.new( - border: false, - data: { "storages--oauth-access-grant-nudge-modal-target": "requestAccessBody" } - )) do |component| - component.with_visual_icon(icon: :"sign-in", size: :medium) - - component.with_heading(tag: :h2, aria: { hidden: true }) - .with_content(heading_text) + render( + Primer::OpenProject::FeedbackMessage.new(icon_arguments: {icon: :"sign-in", color: :muted}, + data: { "storages--oauth-access-grant-nudge-modal-target": "requestAccessBody" }) + ) do |component| + component.with_heading(tag: :h2, aria: { hidden: true }) { heading_text } - component.with_description(color: :subtle) { body_text } + component.with_description { body_text } end ) end diff --git a/modules/storages/app/components/storages/open_project_storage_modal_component/body.html.erb b/modules/storages/app/components/storages/open_project_storage_modal_component/body.html.erb index 22bd5b3729c6..09b56900c577 100644 --- a/modules/storages/app/components/storages/open_project_storage_modal_component/body.html.erb +++ b/modules/storages/app/components/storages/open_project_storage_modal_component/body.html.erb @@ -1,26 +1,12 @@ -<%= render(Primer::OpenProject::FlexLayout.new(align_items: :center, p: 4)) do |flex| %> - <% case @state %> - <% when :waiting %> - <% flex.with_row(id: 'waiting_logo') do %> -
-
-
- <% end %> - <% flex.with_row do %> - <%= render(Primer::Beta::Heading.new(tag: :h2, text_align: :center, id: 'waiting_title')) { waiting_title } %> - <% end %> - <% flex.with_row do %> - <%= render(Primer::Beta::Text.new(text_align: :center, color: :muted, id: 'waiting_subtitle')) { waiting_subtitle } %> - <% end %> - <% when :success %> - <% flex.with_row do %> - <%= render(Primer::Beta::Octicon.new(:"check-circle", size: :medium, color: :success)) %> - <% end %> - <% flex.with_row do %> - <%= render(Primer::Beta::Heading.new(tag: :h2, text_align: :center)) { success_title } %> - <% end %> - <% flex.with_row do %> - <%= render(Primer::Beta::Text.new(text_align: :center, color: :muted)) { success_subtitle } %> - <% end %> - <% end %> +<% case @state %> +<% when :waiting %> + <%= render(Primer::OpenProject::FeedbackMessage.new(loading: true)) do |component| + component.with_heading(tag: :h2, id: 'waiting_title') { waiting_title } + component.with_description(id: 'waiting_subtitle') { waiting_subtitle } + end %> +<% when :success %> + <%= render(Primer::OpenProject::FeedbackMessage.new) do |component| + component.with_heading(tag: :h2) { success_title } + component.with_description(id: 'waiting_subtitle') { success_subtitle } + end %> <% end %> diff --git a/modules/storages/app/components/storages/project_storages/destroy_confirmation_dialog_component.html.erb b/modules/storages/app/components/storages/project_storages/destroy_confirmation_dialog_component.html.erb index 77d211d7b6ec..956475512f2a 100644 --- a/modules/storages/app/components/storages/project_storages/destroy_confirmation_dialog_component.html.erb +++ b/modules/storages/app/components/storages/project_storages/destroy_confirmation_dialog_component.html.erb @@ -39,40 +39,23 @@ See COPYRIGHT and LICENSE files for more details. }, method: :delete ) do |form| - render(Primer::Alpha::Dialog.new( + render(Primer::OpenProject::FeedbackDialog.new( id: id, title: nil, test_selector: id, size: :large )) do |dialog| - dialog.with_body do - flex_layout do |layout| - layout.with_row(mb: 3) do - render(Primer::Beta::Heading.new(tag: :h1, text_align: :center)) do - render(Primer::Beta::Octicon.new(icon: :alert, color: :danger, size: :medium)) - end - end - - layout.with_row(mb: 1) do - render(Primer::Beta::Heading.new(tag: :h2, color: :default, text_align: :center)) do - heading - end - end - - layout.with_row(mb: 2) do - render(Primer::Beta::Text.new(tag: :p, color: :subtle, text_align: :center)) do - text - end - end + dialog.with_feedback_message(icon_arguments: { icon: :alert, color: :danger }) do |message| + message.with_heading(tag: :h2) { heading } + message.with_description { text } + end - layout.with_row do - render(Primer::Alpha::CheckBox.new( - name: "confirm_delete", - label: confirmation_text, - data: { 'disable-when-checked-target': 'cause' } - )) - end - end + dialog.with_additional_content do + render(Primer::Alpha::CheckBox.new( + name: "confirm_delete", + label: confirmation_text, + data: { 'disable-when-checked-target': 'cause' } + )) end dialog.with_footer do @@ -96,4 +79,3 @@ See COPYRIGHT and LICENSE files for more details. end end %> - diff --git a/modules/storages/app/views/storages/admin/storages/project_storages/index.html.erb b/modules/storages/app/views/storages/admin/storages/project_storages/index.html.erb index c5fc86296051..39b9d3199617 100644 --- a/modules/storages/app/views/storages/admin/storages/project_storages/index.html.erb +++ b/modules/storages/app/views/storages/admin/storages/project_storages/index.html.erb @@ -59,20 +59,11 @@ See COPYRIGHT and LICENSE files for more details. ) ) else - render(Primer::Beta::Blankslate.new(spacious: false, border: true)) do |component| - component.with_visual_icon(icon: "cloud-offline", size: :medium) + render(Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :"cloud-offline", color: :muted }, spacious: false, border: true)) do |component| component .with_heading(tag: :h2) .with_content(I18n.t("storages.enabled_in_projects.setup_incomplete_header")) - component.with_description do - render(Primer::OpenProject::FlexLayout.new(align_items: :center)) do |flex| - flex.with_row(mb: 2) do - render(Primer::Beta::Text.new(color: :subtle)) do - I18n.t("storages.enabled_in_projects.setup_incomplete_description") - end - end - end - end + component.with_description { I18n.t("storages.enabled_in_projects.setup_incomplete_description") } end end %> diff --git a/modules/storages/spec/requests/project_storages_open_spec.rb b/modules/storages/spec/requests/project_storages_open_spec.rb index b7d3f7b082d3..e3b6c2cd37e8 100644 --- a/modules/storages/spec/requests/project_storages_open_spec.rb +++ b/modules/storages/spec/requests/project_storages_open_spec.rb @@ -75,7 +75,7 @@ get route, {}, { "HTTP_ACCEPT" => "text/vnd.turbo-stream.html" } expect(last_response).to have_http_status(:ok) - expect(last_response.body).to eq ("\n \n\n\n") + expect(last_response.body).to eq("\n \n\n\n") # rubocop:disable Layout/LineLength end end end