A bunch of fixes for TCR (#2250)

* fix add links by drag and drop

* fix dialog component logging errors

* fix search component errors

* fix sort

* remove unused entrydnd file

* remove unnecessary console logs

* fix preview action in embed dropdown, which was throwing a type error

* invoke PreviewAction once in NotebookController and pass into git add -a

* add navigation capability to embeds, and a bunch of cleanup

* code cleanup and avoid calling dismiss twice on overlay destroy, which was throwing a DOM error. Calling code should dismiss the overlay

* only show elements pool if domainObject has composition

* fix error in inspector when no selection is present

* wire up object view expand button

* listen to composition#remove in TabsView

* make reviewer requested changes

* make reviewer requested changes, and fix for an edge case where removed tab is at the end of the array and currentTab is not set properly

* remove array wrapping dynamic classes in embed.html

* add title='View Large' to expand button

* change model variable to domainObject in tabs.vue

* dismiss top level overlay when esc is pressed (only if overlay is dismissable)

* fix link navigation from embeds

* use positive flag dismissable instead of negative notDismissable for overlays

* make overlays dismissable by default, unless set to false

src/api/overlays/Dialog.js

@@ -22,7 +22,7 @@ class Dialog extends Overlay {
         super({
             element: component.$el,
             size: 'fit',
-            notDismissable: true,
+            dismissable: false,
             ...options
         });
 

src/api/overlays/Overlay.js

@@ -12,6 +12,7 @@ class Overlay extends EventEmitter {
     constructor(options) {
         super();
 
+        this.dismissable = options.dismissable !== false ? true : false;
         this.container = document.createElement('div');
         this.container.classList.add('l-overlay-wrapper', cssClasses[options.size]);
 
@@ -20,7 +21,7 @@ class Overlay extends EventEmitter {
                 dismiss: this.dismiss.bind(this),
                 element: options.element,
                 buttons: options.buttons,
-                notDismissable: options.notDismissable ? true : false
+                dismissable: this.dismissable
             },
             components: {
                 OverlayComponent: OverlayComponent
@@ -35,8 +36,8 @@ class Overlay extends EventEmitter {
 
     dismiss() {
         this.emit('destroy');
-        this.component.$destroy();
         document.body.removeChild(this.container);
+        this.component.$destroy();
     }
 
     /**

src/api/overlays/OverlayAPI.js

@@ -14,6 +14,14 @@ import ProgressDialog from './ProgressDialog';
 class OverlayAPI {
     constructor() {
         this.activeOverlays = [];
+
+        this.dismissLastOverlay = this.dismissLastOverlay.bind(this);
+
+        document.addEventListener('keyup', (event) => {
+            if (event.key === 'Escape') {
+                this.dismissLastOverlay();
+            }
+        });
     }
 
     /**
@@ -38,14 +46,24 @@ class OverlayAPI {
     }
 
     /**
-]   * A description of option properties that can be passed into the overlay
-    * @typedef options
+     * private
+     */
+    dismissLastOverlay() {
+        let lastOverlay = this.activeOverlays[this.activeOverlays.length - 1];
+        if (lastOverlay && lastOverlay.dismissable) {
+            lastOverlay.dismiss();
+        }
+    }
+
+    /**
+     * A description of option properties that can be passed into the overlay
+     * @typedef options
         * @property {object} element DOMElement that is to be inserted/shown on the overlay
         * @property {string} size prefered size of the overlay (large, small, fit)
         * @property {array} buttons optional button objects with label and callback properties
         * @property {function} onDestroy callback to be called when overlay is destroyed
-        * @property {boolean} notDismissable to prevent user from dismissing the overlay, calling code
-        * will need to explicitly dismiss the overlay.
+        * @property {boolean} dismissable allow user to dismiss overlay by using esc, and clicking away
+        * from overlay. Unless set to false, all overlays will be dismissable by default.
     */
     overlay(options) {
         let overlay = new Overlay(options);

src/api/overlays/ProgressDialog.js

@@ -25,7 +25,7 @@ class ProgressDialog extends Overlay {
         super({
             element: component.$el,
             size: 'fit',
-            notDismissable: true,
+            dismissable: false,
             ...options
         });
 

src/api/overlays/components/OverlayComponent.vue

@@ -5,7 +5,7 @@
         </div>
         <div class="c-overlay__outer">
             <button class="c-click-icon c-overlay__close-button icon-x-in-circle"
-                v-if="!notDismissable"
+                v-if="dismissable"
                 @click="destroy">
             </button>
             <div class="c-overlay__contents" ref="element"></div>
@@ -129,19 +129,19 @@
 
 <script>
     export default {
-        inject: ['dismiss', 'element', 'buttons', 'notDismissable'],
+        inject: ['dismiss', 'element', 'buttons', 'dismissable'],
         mounted() {
             this.$refs.element.appendChild(this.element);
         },
         methods: {
             destroy: function () {
-                if (!this.notDismissable) {
+                if (this.dismissable) {
                     this.dismiss();
                 }
             },
             buttonClickHandler: function (method) {
                 method();
-                this.destroy();
+                this.$emit('destroy');
             }
         }
     }