Merge pull request #16429 from opf/implementation/56922-trigger-a-log…

…in-dialog-when-the-user-has-no-oauth-access-grant

Implementation/56922 trigger a login dialog when the user has no oauth access grant

frontend/src/stimulus/controllers/dynamic/auto-show-dialog.controller.ts

@@ -0,0 +1,37 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) 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.
+ * ++
+ */
+
+import { Controller } from '@hotwired/stimulus';
+
+export default class AutoShowDialogController extends Controller<HTMLDialogElement> {
+  connect() {
+    this.element.showModal();
+  }
+}

frontend/src/stimulus/controllers/dynamic/project-storage-form.controller.ts

@@ -213,7 +213,7 @@ export default class ProjectStorageFormController extends Controller {
     window.history.replaceState(window.history.state, '', url);
   }
 
-  private toggleFolderDisplay(value:string):void {
+  protected toggleFolderDisplay(value:string):void {
     // If the manual radio button is selected, show the manual folder selection section
     if (this.hasProjectFolderSectionTarget && value === 'manual') {
       this.projectFolderSectionTarget.classList.remove('d-none');

frontend/src/stimulus/controllers/dynamic/storages/project-folder-mode-form.controller.ts

@@ -28,22 +28,16 @@
  * ++
  */
 
-import { IStorageFile } from 'core-app/core/state/storage-files/storage-file.model';
 import { PortalOutletTarget } from 'core-app/shared/components/modal/portal-outlet-target.enum';
 import ProjectStorageFormController from '../project-storage-form.controller';
 
 export default class ProjectFolderModeFormController extends ProjectStorageFormController {
-  protected get OutletTarget():PortalOutletTarget {
-    return PortalOutletTarget.Custom;
+  connect():void {
+    this.toggleFolderDisplay(this.folderModeValue);
+    this.setProjectFolderModeQueryParam(this.folderModeValue);
   }
 
-  protected displayFolderSelectionOrLoginButton(isConnected:boolean, projectFolder:IStorageFile|null):void {
-    if (isConnected) {
-      this.selectedFolderTextTarget.innerText = projectFolder === null
-        ? this.placeholderFolderNameValue
-        : projectFolder.name;
-    } else {
-      this.selectedFolderTextTarget.innerText = this.notLoggedInValidationValue;
-    }
+  protected get OutletTarget():PortalOutletTarget {
+    return PortalOutletTarget.Custom;
   }
 }

lookbook/previews/open_project/storages/admin/oauth_access_grant_nudge_modal_component_preview.rb

@@ -2,11 +2,10 @@ module OpenProject::Storages
   module Admin
     # @hidden
     class OAuthAccessGrantNudgeModalComponentPreview < Lookbook::Preview
-      # Renders a oauth access grant nudge modal component
-      # @param authorized toggle Denotes whether access has been granted and renders a success state
-      def default(authorized: false)
-        project_storage = FactoryBot.build_stubbed(:project_storage)
-        render_with_template(locals: { project_storage:, authorized:, confirm_button_url: "#" })
+      # Renders an oauth access grant nudge modal component
+      def default
+        storage = FactoryBot.build_stubbed(:nextcloud_storage)
+        render_with_template(locals: { storage:, confirm_button_url: "#" })
       end
     end
   end

lookbook/previews/open_project/storages/admin/oauth_access_grant_nudge_modal_component_preview/default.html.erb

@@ -1,4 +1,4 @@
 <p>
   <strong>Default</strong><br/>
-  <%= render(Storages::Admin::OAuthAccessGrantNudgeModalComponent.new(project_storage:, authorized:, confirm_button_url:)) %>
+  <%= render(Storages::Admin::Storages::OAuthAccessGrantNudgeModalComponent.new(storage:, confirm_button_url:)) %>
 </p>

modules/storages/app/components/storages/admin/storages/oauth_access_grant_nudge_modal_component.html.erb

@@ -0,0 +1,99 @@
+<%=
+  component_wrapper do
+    render(
+      Primer::Alpha::Dialog.new(
+        id: dialog_id,
+        title: heading_text,
+        data: {
+          'application-target': 'dynamic',
+          controller: 'storages--oauth-access-grant-nudge-modal',
+          'storages--oauth-access-grant-nudge-modal-close-button-label-value': I18n.t('button_close'),
+          'storages--oauth-access-grant-nudge-modal-loading-screen-reader-message-value': waiting_title,
+        },
+        test_selector: 'oauth-access-grant-nudge-modal',
+        size: :large
+      )
+    ) do |dialog|
+      dialog.with_header(
+        show_divider: false,
+        role: :alert,
+        aria: { live: :assertive },
+        data: {
+          'storages--oauth-access-grant-nudge-modal-target': 'header'
+        },
+        visually_hide_title: true
+      )
+
+      dialog.with_body(
+        id: dialog_body_id,
+        test_selector: 'oauth-access-grant-nudge-modal-body'
+      ) do
+        concat(
+          render(
+            Primer::Beta::Text.new(
+              display: :none,
+              data: {
+                'storages--oauth-access-grant-nudge-modal-target': 'loadingIndicator'
+              }
+            )
+          ) { 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)
+
+            component.with_description(color: :subtle) { body_text }
+          end
+        )
+      end
+
+      dialog.with_footer(show_divider: false) do
+        concat(
+          render(
+            Primer::Beta::Button.new(
+              scheme: :default,
+              size: :medium,
+              data: {
+                'close-dialog-id': dialog_id,
+                'storages--oauth-access-grant-nudge-modal-target': 'closeButton'
+              }
+            )
+          ) { cancel_button_text }
+        )
+
+        concat(
+          primer_form_with(
+            model:,
+            url: confirm_button_url,
+            method: :get,
+            data: {
+              'storages--oauth-access-grant-nudge-modal-target': 'requestAccessForm'
+            }
+          ) do |_form|
+            render(
+              Primer::Beta::Button.new(
+                scheme: :primary,
+                size: :medium,
+                type: :submit,
+                aria: { label: login_button_aria_label },
+                data: {
+                  'storages--oauth-access-grant-nudge-modal-target': 'requestAccessButton',
+                  action: 'storages--oauth-access-grant-nudge-modal#requestAccess'
+                }
+              )
+            ) do |button|
+              button.with_trailing_action_icon(icon: :"link-external")
+              login_button_label
+            end
+          end
+        )
+      end
+    end
+  end
+%>