[Office upload] Change upload page to be OneDrive specific

The Drive upload page will use a different layout, so change the current
setup page to be for OneDrive only. Also make the file name optional so
it can handle the case where only setup occurs (and no file uploading).

The file-name part is still incomplete (missing file type icon), so it
is untested.

Bug: 251046341
Change-Id: Ifadca53c701c55197ddd482005735ce7b9d2be0f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3996412
Reviewed-by: Jeremie Boulic <jboulic@chromium.org>
Commit-Queue: Austin Tankiang <austinct@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1067414}

chrome/browser/resources/chromeos/cloud_upload/BUILD.gn

@@ -11,7 +11,7 @@ build_webui("build") {
   web_component_files = [
     "base_setup_page.ts",
     "welcome_page.ts",
-    "upload_page.ts",
+    "one_drive_upload_page.ts",
   ]
   non_web_component_files = [
     "cloud_upload_browser_proxy.ts",

chrome/browser/resources/chromeos/cloud_upload/cloud_upload_dialog.ts

@@ -2,12 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {assert} from 'chrome://resources/js/assert_ts.js';
+
 import {CANCEL_SETUP_EVENT, NEXT_PAGE_EVENT} from './base_setup_page.js';
 import {UserAction} from './cloud_upload.mojom-webui.js';
 import {CloudUploadBrowserProxy} from './cloud_upload_browser_proxy.js';
-import {UploadPageElement} from './upload_page.js';
+import {OneDriveUploadPageElement} from './one_drive_upload_page.js';
 import {WelcomePageElement} from './welcome_page.js';
 
+export enum UploadType {
+  ONE_DRIVE = 0,
+  DRIVE = 1,
+}
+
 /**
  * The CloudUploadElement is the main dialog controller that aggregates all the
  * individual setup pages and determines which one to show.
@@ -17,15 +24,19 @@ export class CloudUploadElement extends HTMLElement {
   pages: HTMLElement[];
   /** The current page index into `pages`. */
   private currentPageIdx: number = 0;
+  private fileName: string|null = null;
 
   constructor() {
     super();
+    this.processDialogArgs();
     this.attachShadow({mode: 'open'});
 
     // TODO(b/251046341): Adjust this once the rest of the pages are in place.
+    const oneDriveUploadPage = new OneDriveUploadPageElement();
+    oneDriveUploadPage.setFileName(this.fileName);
     this.pages = [
       new WelcomePageElement(),
-      new UploadPageElement(),
+      oneDriveUploadPage,
     ];
     for (let i = 0; i < this.pages.length; i++) {
       this.pages[i]?.setAttribute(
@@ -63,6 +74,24 @@ export class CloudUploadElement extends HTMLElement {
     this.shadowRoot?.appendChild(this.currentPage!);
   }
 
+  /**
+   * Initialises the class members based off the given dialog arguments.
+   */
+  private processDialogArgs(): void {
+    try {
+      const dialogArgs = this.proxy.getDialogArguments();
+      assert(dialogArgs);
+      const args = JSON.parse(dialogArgs);
+      assert(args);
+      if (args.fileName != null) {
+        this.fileName = args.fileName;
+      }
+    } catch (e) {
+      // TODO(b/243095484) Define expected behavior.
+      console.error(`Unable to get dialog arguments . Error: ${e}.`);
+    }
+  }
+
   /**
    * Invoked when a page fires a `CANCEL_SETUP_EVENT` event.
    */

chrome/browser/resources/chromeos/cloud_upload/one_drive_upload_page.html

@@ -0,0 +1,18 @@
+<!-- TODO: Use localized strings -->
+<div slot="title">
+  Microsoft Office setup complete
+</div>
+<div slot="body">
+  <div id="file-container" hidden>
+    You can now open your file in the Office app:
+    <div id="file-name" style="margin-top: 1rem"></div>
+  </div>
+  <p>
+    Other Word, Powerpoint, and Excel files will move to OneDrive and open in
+    Office by default. You can change this later in Settings.
+  </p>
+</div>
+<div slot="button-container">
+  <cr-button class="cancel-button">Close</cr-button>
+  <cr-button class="action-button">Open file</cr-button>
+</div>

chrome/browser/resources/chromeos/cloud_upload/one_drive_upload_page.ts

@@ -0,0 +1,70 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://resources/cr_elements/cr_button/cr_button.js';
+
+import {BaseSetupPageElement, CANCEL_SETUP_EVENT} from './base_setup_page.js';
+import {UserAction} from './cloud_upload.mojom-webui.js';
+import {CloudUploadBrowserProxy} from './cloud_upload_browser_proxy.js';
+import {getTemplate} from './one_drive_upload_page.html.js';
+
+/**
+ * The OneDriveUploadPageElement represents the setup page that prompts the user
+ * to upload the file to OneDrive.
+ */
+export class OneDriveUploadPageElement extends BaseSetupPageElement {
+  /** The name of the file to upload. */
+  private fileName: string|null = null;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Sets the file name to be displayed by this dialog. Can be null if there is
+   * no file to upload.
+   * @param fileName Name of the file to be displayed.
+   */
+  setFileName(fileName: string|null) {
+    this.fileName = fileName;
+    if (this.isConnected) {
+      this.connectedCallback();
+    }
+  }
+
+  private get proxy(): CloudUploadBrowserProxy {
+    return CloudUploadBrowserProxy.getInstance();
+  }
+
+  /**
+   * Initialises the page specific content inside the page.
+   */
+  connectedCallback(): void {
+    this.innerHTML = getTemplate() as string;
+    const fileContainerElement =
+        this.querySelector('#file-container')! as HTMLElement;
+    const fileNameElement = this.querySelector('#file-name')! as HTMLElement;
+    const uploadButton = this.querySelector('.action-button')! as HTMLElement;
+    const cancelButton = this.querySelector('.cancel-button') as HTMLElement;
+
+    if (this.fileName != null) {
+      fileContainerElement.hidden = false;
+      fileNameElement.innerText = `File name: ${this.fileName}`;
+    }
+
+    uploadButton.addEventListener('click', () => this.onUploadButtonClick());
+    cancelButton.addEventListener('click', () => this.onCancelButtonClick());
+  }
+
+  private onUploadButtonClick(): void {
+    this.proxy.handler.respondAndClose(UserAction.kUpload);
+  }
+
+  private onCancelButtonClick(): void {
+    this.dispatchEvent(
+        new CustomEvent(CANCEL_SETUP_EVENT, {bubbles: true, composed: true}));
+  }
+}
+
+customElements.define('upload-page', OneDriveUploadPageElement);

chrome/browser/ui/webui/ash/cloud_upload/cloud_upload_dialog.cc

@@ -16,6 +16,7 @@
 #include "chrome/browser/ui/webui/ash/cloud_upload/drive_upload_handler.h"
 #include "chrome/browser/ui/webui/ash/cloud_upload/one_drive_upload_handler.h"
 #include "chrome/common/webui_url_constants.h"
+#include "third_party/abseil-cpp/absl/types/optional.h"
 #include "ui/gfx/geometry/size.h"
 
 namespace ash::cloud_upload {
@@ -62,20 +63,22 @@ void OpenODFSUrl(const storage::FileSystemURL& uploaded_file_url) {
       }));
 }
 
-void OnUploadActionReceived(Profile* profile,
-                            const storage::FileSystemURL& file_url,
-                            const UploadType upload_type,
-                            const std::string& action) {
+void OnCloudSetupComplete(Profile* profile,
+                          absl::optional<storage::FileSystemURL> file_url,
+                          const UploadType upload_type,
+                          const std::string& action) {
   if (action == kUserActionUpload) {
-    switch (upload_type) {
-      case UploadType::kOneDrive:
-        OneDriveUploadHandler::Upload(profile, file_url,
-                                      base::BindOnce(&OpenODFSUrl));
-        break;
-      case UploadType::kDrive:
-        DriveUploadHandler::Upload(profile, file_url,
-                                   base::BindOnce(&OpenDriveUrl));
-        break;
+    if (file_url.has_value()) {
+      switch (upload_type) {
+        case UploadType::kOneDrive:
+          OneDriveUploadHandler::Upload(profile, *file_url,
+                                        base::BindOnce(&OpenODFSUrl));
+          break;
+        case UploadType::kDrive:
+          DriveUploadHandler::Upload(profile, *file_url,
+                                     base::BindOnce(&OpenDriveUrl));
+          break;
+      }
     }
   } else if (action == kUserActionCancel) {
     UMA_HISTOGRAM_ENUMERATION(kDriveTaskResultMetricName,
@@ -99,7 +102,7 @@ bool UploadAndOpen(Profile* profile,
     return false;
   }
   // TODO(crbug.com/1336924) Add support for multi-file selection.
-  OnUploadActionReceived(profile, file_urls[0], upload_type, kUserActionUpload);
+  OnCloudSetupComplete(profile, file_urls[0], upload_type, kUserActionUpload);
   return true;
 }
 
@@ -115,15 +118,17 @@ bool CloudUploadDialog::Show(
     return false;
   }
 
-  DCHECK(!file_urls.empty());
-  // TODO(crbug.com/1336924) Add support for multi-file selection.
-  const storage::FileSystemURL file_url = file_urls[0];
+  absl::optional<storage::FileSystemURL> file_url;
+  if (!file_urls.empty()) {
+    // TODO(crbug.com/1336924) Add support for multi-file selection.
+    file_url = file_urls[0];
+  }
 
   // The pointer is managed by an instance of `views::WebDialogView` and removed
   // in `SystemWebDialogDelegate::OnDialogClosed`.
   CloudUploadDialog* dialog = new CloudUploadDialog(
       file_url, upload_type,
-      base::BindOnce(&OnUploadActionReceived, profile, file_url, upload_type));
+      base::BindOnce(&OnCloudSetupComplete, profile, file_url, upload_type));
 
   dialog->ShowSystemDialog();
   return true;
@@ -136,20 +141,23 @@ void CloudUploadDialog::OnDialogClosed(const std::string& json_retval) {
   SystemWebDialogDelegate::OnDialogClosed(json_retval);
 }
 
-CloudUploadDialog::CloudUploadDialog(const storage::FileSystemURL& file_url,
-                                     const UploadType upload_type,
-                                     UploadRequestCallback callback)
+CloudUploadDialog::CloudUploadDialog(
+    absl::optional<storage::FileSystemURL> file_url,
+    const UploadType upload_type,
+    UploadRequestCallback callback)
     : SystemWebDialogDelegate(GURL(chrome::kChromeUICloudUploadURL),
                               std::u16string() /* title */),
-      file_url_(file_url),
+      file_url_(std::move(file_url)),
       upload_type_(upload_type),
       callback_(std::move(callback)) {}
 
 CloudUploadDialog::~CloudUploadDialog() = default;
 
 std::string CloudUploadDialog::GetDialogArgs() const {
   base::DictionaryValue args;
-  args.SetKey("fileName", base::Value(file_url_.path().BaseName().value()));
+  if (file_url_.has_value()) {
+    args.SetKey("fileName", base::Value(file_url_->path().BaseName().value()));
+  }
   switch (upload_type_) {
     case UploadType::kOneDrive:
       args.SetKey("uploadType", base::Value("OneDrive"));