Bump primer to 0.44.3 and introduce FeedbackDialog and FeedbackMessag…

…e in the core

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"

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!

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
 %>

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') }
 

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') }
 

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

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

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"
   }
 }

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 %>

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

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 %>

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

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 %>
-      <div class='op-loading-indicator'>
-        <div></div><div></div>
-      </div>
-    <% 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 %>

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
 %>
-

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
 %>

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 ("<turbo-stream action=\"update\" target=\"open-project-storage-modal-body-component\">\n    <template>\n        <div data-view-component=\"true\" class=\"flex-items-center p-4 d-flex flex-column\">\n      <div data-view-component=\"true\">      <svg aria-hidden=\"true\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" width=\"24\" data-view-component=\"true\" class=\"octicon octicon-check-circle color-fg-success\">\n    <path d=\"M17.28 9.28a.75.75 0 0 0-1.06-1.06l-5.97 5.97-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6.5-6.5Z\"></path><path d=\"M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z\"></path>\n</svg>\n</div>\n      <div data-view-component=\"true\">      <h2 data-view-component=\"true\" class=\"text-center\">Integration setup completed</h2>\n</div>\n      <div data-view-component=\"true\">      <span data-view-component=\"true\" class=\"text-center color-fg-muted\">You are being redirected</span>\n</div>\n</div>\n\n\n    </template>\n</turbo-stream>\n\n")
+                expect(last_response.body).to eq("<turbo-stream action=\"update\" target=\"open-project-storage-modal-body-component\">\n    <template>\n        \n  <div class=\"blankslate-container\">\n    <div data-view-component=\"true\" class=\"FeedbackMessage blankslate\">\n      <svg aria-hidden=\"true\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" width=\"24\" data-view-component=\"true\" class=\"octicon octicon-check-circle blankslate-icon color-fg-success\">\n    <path d=\"M17.28 9.28a.75.75 0 0 0-1.06-1.06l-5.97 5.97-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6.5-6.5Z\"></path><path d=\"M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z\"></path>\n</svg>\n\n      <h2 data-view-component=\"true\" class=\"blankslate-heading\">Integration setup completed</h2>\n      <p id=\"waiting_subtitle\" data-view-component=\"true\">You are being redirected</p>\n\n</div>  </div>\n\n\n\n    </template>\n</turbo-stream>\n\n") # rubocop:disable Layout/LineLength
               end
             end
           end