WEBUI-1916: Drive action buttons handle failure [LTS-2023]

addons/nuxeo-drive/elements/nuxeo-drive-desktop-packages.js

@@ -40,6 +40,7 @@ Polymer({
       .table {
         font-family: var(--nuxeo-app-font);
         line-height: 3.5;
+        text-align: left;
       }
 
       .row {
@@ -54,20 +55,26 @@ Polymer({
       .header {
         background-color: var(--nuxeo-table-header-background);
         color: var(--nuxeo-table-header-titles);
-        font-weight: 400;
+        font-weight: bold;
         height: 56px;
         display: flex;
         flex-direction: row;
       }
 
       .cell {
-        padding: 0 24px 0 24px;
+        padding: 0 16px;
         min-height: 46px;
         overflow: hidden;
+        display: flex;
+        align-items: center;
       }
 
       paper-button {
         line-height: normal;
+        margin: 0;
+        padding: 0;
+        min-width: 0;
+        text-transform: none;
       }
 
       .platform {
@@ -77,7 +84,7 @@ Polymer({
         font-size: 0.9em;
         letter-spacing: 0.04em;
         line-height: 130%;
-        margin: 0 0.2em 0.2em 0;
+        margin: 0;
         padding: 0.06em 0.3em;
         vertical-align: baseline;
         white-space: nowrap;
@@ -89,12 +96,12 @@ Polymer({
     <div class="table">
       <div class="header">
         <div class="cell flex">[[i18n('driveDesktopPackages.platform')]]</div>
-        <div class="cell flex-3">[[i18n('driveDesktopPackages.install')]]</div>
+        <div class="cell flex-2">[[i18n('driveDesktopPackages.install')]]</div>
       </div>
       <template is="dom-repeat" items="[[packages]]" as="pkg">
         <div class="row">
           <div class="cell flex"><span class="platform">[[pkg.platform]]</span></div>
-          <div class="cell flex-3">
+          <div class="cell flex-2">
             <a href$="[[pkg.url]]" tabindex="-1" target="_blank">
               <paper-button noink> [[pkg.name]] </paper-button>
             </a>

addons/nuxeo-drive/elements/nuxeo-drive-download-button.js

@@ -20,6 +20,7 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { I18nBehavior } from '@nuxeo/nuxeo-ui-elements/nuxeo-i18n-behavior.js';
 import { isPageProviderDisplayBehavior } from '../../../elements/select-all-helpers.js';
 import './nuxeo-drive-icons.js';
+import { base64UrlSafeEncode, navigateAndShowFallback } from './nuxeo-drive-utils.js';
 
 window.nuxeo = window.nuxeo || {};
 const baseUrl = window.nuxeo.baseUrl || window.location.origin + window.location.pathname;
@@ -44,17 +45,21 @@ class NuxeoDriveDownloadButton extends mixinBehaviors([I18nBehavior], PolymerEle
         reflectToAttribute: true,
         value: false,
       },
+
+      _installExpanded: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
   static get template() {
     return html`
       <style include="nuxeo-action-button-styles"></style>
 
-      <nuxeo-resource id="token" path="/token" params='{"application": "Nuxeo Drive"}'></nuxeo-resource>
       <div
         class="action"
-        on-tap="_download"
+        on-click="_download"
         hidden$="[[!_isAvailable(documents.splices, documents.items.splices, documents.items.length, documents.selectedItems.splices, documents.selectedItems.length)]]"
       >
         <paper-icon-button noink icon="nuxeo-drive:download" id="driveBtn" aria-labelledby="label"></paper-icon-button>
@@ -63,12 +68,59 @@ class NuxeoDriveDownloadButton extends mixinBehaviors([I18nBehavior], PolymerEle
       </div>
 
       <nuxeo-dialog id="dialog" with-backdrop>
-        <div class="vertical layout">
-          <h1>[[i18n('driveEditButton.dialog.heading')]]</h1>
-          <nuxeo-drive-desktop-packages></nuxeo-drive-desktop-packages>
+        <style>
+          #dialog {
+            margin-top: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            max-height: 80vh;
+          }
+
+          .dialog-content {
+            padding: 16px 24px;
+          }
+
+          .dialog-content h1 {
+            margin: 0 0 12px;
+            font-size: 1.6em;
+          }
+
+          .dialog-content p {
+            color: var(--primary-text-color, #333);
+            margin: 0 0 16px;
+          }
+
+          .close-btn {
+            border: 1px solid var(--nuxeo-primary-color, #0066ff);
+            color: var(--nuxeo-primary-color, #0066ff);
+            text-transform: uppercase;
+            font-size: 0.9em;
+            padding: 0.5em 1em;
+          }
+
+          .buttons {
+            justify-content: flex-end;
+          }
+
+          .install-link {
+            display: inline-block;
+            margin-top: 4px;
+            font-size: 0.9em;
+          }
+        </style>
+        <div class="dialog-content">
+          <h1>[[i18n('driveButton.dialog.heading')]]</h1>
+          <p>[[i18n('driveButton.dialog.description')]]</p>
+          <template is="dom-if" if="[[_installExpanded]]">
+            <p>[[i18n('driveButton.dialog.install.prompt')]]</p>
+            <nuxeo-drive-desktop-packages></nuxeo-drive-desktop-packages>
+          </template>
+          <template is="dom-if" if="[[!_installExpanded]]">
+            <a class="install-link" href="#" on-click="_toggleInstall">[[i18n('driveButton.install.dialog.hint')]]</a>
+          </template>
         </div>
         <div class="buttons">
-          <paper-button dialog-dismiss class="secondary">[[i18n('command.close')]]</paper-button>
+          <paper-button dialog-dismiss class="close-btn">[[i18n('command.close')]]</paper-button>
         </div>
       </nuxeo-dialog>
 
@@ -79,7 +131,7 @@ class NuxeoDriveDownloadButton extends mixinBehaviors([I18nBehavior], PolymerEle
   _isAvailable() {
     return isPageProviderDisplayBehavior(this.documents)
       ? (this.documents.selectedItems || this.documents.items || []).length > 0
-      : this.documents && this.documents.length > 0;
+      : this.documents?.length > 0;
   }
 
   _download() {
@@ -95,21 +147,17 @@ class NuxeoDriveDownloadButton extends mixinBehaviors([I18nBehavior], PolymerEle
       return;
     }
 
-    this.$.token
-      .get()
-      .then((response) => {
-        const tokens = response.entries.map((token) => token.id);
-
-        if (!tokens || !tokens.length) {
-          this.$.dialog.toggle();
-          return;
-        }
-
-        window.open(this.directDownloadUrl, '_top');
-      })
-      .catch((err) => {
-        this._showError(err && err.userMessage ? err.userMessage : this.i18n('driveDownload.directTransfer.failed'));
-      });
+    try {
+      this._installExpanded = false;
+      navigateAndShowFallback(this, this.directDownloadUrl);
+    } catch (e) {
+      this._showError(e.userMessage || e.message);
+    }
+  }
+
+  _toggleInstall(e) {
+    e.preventDefault();
+    this._installExpanded = true;
   }
 
   _showError(message) {
@@ -122,11 +170,11 @@ class NuxeoDriveDownloadButton extends mixinBehaviors([I18nBehavior], PolymerEle
       return (this.documents.selectedItems || this.documents.items || []).map((doc) => doc.uid);
     }
 
-    if (this.documents && this.documents.length > 0) {
+    if (this.documents?.length > 0) {
       return this.documents.map((doc) => doc.uid);
     }
 
-    if (this.document && this.document.uid) {
+    if (this.document?.uid) {
       return [this.document.uid];
     }
 
@@ -173,25 +221,15 @@ class NuxeoDriveDownloadButton extends mixinBehaviors([I18nBehavior], PolymerEle
     const serverBytes = new TextEncoder().encode(server);
     if (serverBytes.length > 255) {
       const userMessage = this.i18n('driveDownload.serverUrlTooLong');
-      const err = new Error(this.i18n('driveDownload.serverUrlTooLong'));
+      const err = new Error(userMessage);
       err.userMessage = userMessage;
       throw err;
     }
     const payload = new Uint8Array([scheme, serverBytes.length, ...serverBytes, allUuidHex.length, ...uuidBinary]);
 
-    const b64 = this._base64UrlSafeEncode(payload);
+    const b64 = base64UrlSafeEncode(payload);
     return `nxdrive://direct-download/${b64}`;
   }
-
-  _base64UrlSafeEncode(bytes) {
-    let binary = '';
-    bytes.forEach((byte) => {
-      binary += String.fromCharCode(byte);
-    });
-
-    let b64 = btoa(binary);
-    return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-  }
 }
 
 customElements.define(NuxeoDriveDownloadButton.is, NuxeoDriveDownloadButton);

addons/nuxeo-drive/elements/nuxeo-drive-edit-button.js

@@ -21,6 +21,7 @@ import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { I18nBehavior } from '@nuxeo/nuxeo-ui-elements/nuxeo-i18n-behavior.js';
 import { FiltersBehavior } from '@nuxeo/nuxeo-ui-elements/nuxeo-filters-behavior.js';
+import { navigateAndShowFallback } from './nuxeo-drive-utils.js';
 
 /**
 `nuxeo-drive-edit-button`
@@ -31,25 +32,72 @@ Polymer({
   _template: html`
     <style include="nuxeo-action-button-styles"></style>
 
-    <nuxeo-resource id="token" path="/token" params='{"application": "Nuxeo Drive"}'></nuxeo-resource>
-
     <template is="dom-if" if="[[_isAvailable(document,blob)]]">
-      <div class="action" on-tap="_go">
+      <div class="action" on-click="_go">
         <paper-icon-button noink icon="icons:open-in-new" id="driveBtn" aria-labelledby="label"></paper-icon-button>
         <span class="label" hidden$="[[!showLabel]]" id="label">[[i18n('driveEditButton.tooltip')]]</span>
         <nuxeo-tooltip>[[i18n('driveEditButton.tooltip')]]</nuxeo-tooltip>
       </div>
     </template>
 
     <nuxeo-dialog id="dialog" with-backdrop>
-      <div class="vertical layout">
-        <h1>[[i18n('driveEditButton.dialog.heading')]]</h1>
-        <nuxeo-drive-desktop-packages></nuxeo-drive-desktop-packages>
+      <style>
+        #dialog {
+          margin-top: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          max-height: 80vh;
+        }
+
+        .dialog-content {
+          padding: 16px 24px;
+        }
+
+        .dialog-content h1 {
+          margin: 0 0 12px;
+          font-size: 1.6em;
+        }
+
+        .dialog-content p {
+          color: var(--primary-text-color, #333);
+          margin: 0 0 16px;
+        }
+
+        .close-btn {
+          border: 1px solid var(--nuxeo-primary-color, #0066ff);
+          color: var(--nuxeo-primary-color, #0066ff);
+          text-transform: uppercase;
+          font-size: 0.9em;
+          padding: 0.5em 1em;
+        }
+
+        .buttons {
+          justify-content: flex-end;
+        }
+
+        .install-link {
+          display: inline-block;
+          margin-top: 4px;
+          font-size: 0.9em;
+        }
+      </style>
+      <div class="dialog-content">
+        <h1>[[i18n('driveButton.dialog.heading')]]</h1>
+        <p>[[i18n('driveButton.dialog.description')]]</p>
+        <template is="dom-if" if="[[_installExpanded]]">
+          <p>[[i18n('driveButton.dialog.install.prompt')]]</p>
+          <nuxeo-drive-desktop-packages></nuxeo-drive-desktop-packages>
+        </template>
+        <template is="dom-if" if="[[!_installExpanded]]">
+          <a class="install-link" href="#" on-click="_toggleInstall">[[i18n('driveButton.install.dialog.hint')]]</a>
+        </template>
       </div>
       <div class="buttons">
-        <paper-button dialog-dismiss class="secondary">[[i18n('command.close')]]</paper-button>
+        <paper-button dialog-dismiss class="close-btn">[[i18n('command.close')]]</paper-button>
       </div>
     </nuxeo-dialog>
+
+    <paper-toast id="toast"></paper-toast>
   `,
 
   is: 'nuxeo-drive-edit-button',
@@ -67,23 +115,32 @@ Polymer({
       reflectToAttribute: true,
       value: false,
     },
+
+    _installExpanded: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   _isAvailable(doc, blob) {
-    return (
-      this.hasPermission(doc, 'Write') && !this.isProxy(doc) && blob && (!blob.appLinks || blob.appLinks.length === 0)
-    );
+    return this.hasPermission(doc, 'Write') && !this.isProxy(doc) && blob && !blob.appLinks?.length;
   },
 
   _go() {
-    this.$.token.get().then((response) => {
-      const tokens = response.entries.map((token) => token.id);
-      if (!tokens || !tokens.length) {
-        this.$.dialog.toggle();
-        return;
-      }
-      window.open(this.driveEditURL, '_top');
-    });
+    const url = this.driveEditURL;
+    if (!url) return;
+    this._installExpanded = false;
+    navigateAndShowFallback(this, url);
+  },
+
+  _toggleInstall(e) {
+    e.preventDefault();
+    this._installExpanded = true;
+  },
+
+  _showError(message) {
+    this.$.toast.text = message;
+    this.$.toast.open();
   },
 
   get driveEditURL() {