🔄 Rebased from master

src/components/Configuration/JsonEditor.vue

@@ -156,7 +156,7 @@ export default {
         localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(data.pageInfo));
       }
       if (data.appConfig) {
-        data.appConfig.auth = this.config.appConfig.auth || [];
+        data.appConfig.auth = this.config.appConfig.auth || {};
         localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(data.appConfig));
       }
       if (data.appConfig.theme) {

src/components/LinkItems/Item.vue

@@ -3,8 +3,8 @@
     <a @click="itemOpened"
       @mouseup.right="openContextMenu"
       @contextmenu.prevent
-      :href="(target !== 'modal' && target !== 'workspace') ? url : '#'"
-      :target="target === 'newtab' ? '_blank' : ''"
+      :href="hyperLinkHref"
+      :target="anchorTarget"
       :class="`item ${!icon? 'short': ''} size-${itemSize}`"
       v-tooltip="getTooltipOptions()"
       rel="noopener noreferrer" tabindex="0"
@@ -21,7 +21,7 @@
         v-bind:style="customStyles" class="bounce" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon || itemSize === 'small'"
-        :openingMethod="target"  position="bottom right"
+        :openingMethod="accumulatedTarget"  position="bottom right"
         :hotkey="hotkey" />
       <!-- Status indicator dot (if enabled) showing weather srevice is availible -->
       <StatusIndicator
@@ -53,7 +53,13 @@ import StatusIndicator from '@/components/LinkItems/StatusIndicator';
 import EditItem from '@/components/InteractiveEditor/EditItem';
 import ContextMenu from '@/components/LinkItems/ContextMenu';
 import StoreKeys from '@/utils/StoreMutations';
-import { localStorageKeys, serviceEndpoints, modalNames } from '@/utils/defaults';
+import { targetValidator } from '@/utils/ConfigHelpers';
+import {
+  localStorageKeys,
+  serviceEndpoints,
+  modalNames,
+  openingMethod as defaultOpeningMethod,
+} from '@/utils/defaults';
 
 export default {
   name: 'Item',
@@ -70,8 +76,7 @@ export default {
     hotkey: Number, // Shortcut for quickly launching app
     target: { // Where resource will open, either 'newtab', 'sametab' or 'modal'
       type: String,
-      default: 'newtab',
-      validator: (value) => ['newtab', 'sametab', 'modal', 'workspace'].indexOf(value) !== -1,
+      validator: targetValidator,
     },
     itemSize: String,
     enableStatusCheck: Boolean,
@@ -84,6 +89,25 @@ export default {
     appConfig() {
       return this.$store.getters.appConfig;
     },
+    accumulatedTarget() {
+      return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod;
+    },
+    /* Convert config target value, into HTML anchor target attribute */
+    anchorTarget() {
+      const target = this.accumulatedTarget;
+      switch (target) {
+        case 'sametab': return '_self';
+        case 'newtab': return '_blank';
+        case 'parent': return '_parent';
+        case 'top': return '_top';
+        default: return undefined;
+      }
+    },
+    /* Get the href value for the anchor, if not opening in modal/ workspace */
+    hyperLinkHref() {
+      const noAnchorNeeded = ['modal', 'workspace'];
+      return noAnchorNeeded.includes(this.accumulatedTarget) ? '#' : this.url;
+    },
   },
   data() {
     return {
@@ -111,10 +135,10 @@ export default {
   methods: {
     /* Called when an item is clicked, manages the opening of modal & resets the search field */
     itemOpened(e) {
-      if (e.altKey || this.target === 'modal') {
+      if (e.altKey || this.accumulatedTarget === 'modal') {
         e.preventDefault();
         this.$emit('triggerModal', this.url);
-      } else if (this.target === 'workspace') {
+      } else if (this.accumulatedTarget === 'workspace') {
         router.push({ name: 'workspace', query: { url: this.url } });
       } else {
         this.$emit('itemClicked');
@@ -157,12 +181,15 @@ export default {
         classes: `item-description-tooltip tooltip-is-${this.itemSize}`,
       };
     },
-    /* Used by certain themes, which display an icon with animated CSS */
+    /* Used by certain themes (material), to show animated CSS icon */
     getUnicodeOpeningIcon() {
-      switch (this.target) {
+      switch (this.accumulatedTarget) {
         case 'newtab': return '"\\f360"';
         case 'sametab': return '"\\f24d"';
+        case 'parent': return '"\\f3bf"';
+        case 'top': return '"\\f102"';
         case 'modal': return '"\\f2d0"';
+        case 'workspace': return '"\\f0b1"';
         default: return '"\\f054"';
       }
     },
@@ -304,7 +331,6 @@ export default {
 /* Text in tile */
 .tile-title {
   white-space: nowrap;
-  // overflow: hidden;
   text-overflow: ellipsis;
   min-width: 120px;
   height: 30px;

src/components/LinkItems/ItemOpenMethodIcon.vue

@@ -5,6 +5,9 @@
       <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
       <IframeOpenIcon v-else-if="openingMethod === 'modal'" />
       <WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" />
+      <ParentOpenIcon v-else-if="openingMethod === 'parent'" />
+      <TopOpenIcon v-else-if="openingMethod === 'top'" />
+      <UnknownIcon v-else />
     </div>
     <div v-if="hotkey" :class="`hotkey-denominator ${makeClass(position, isSmall, isTransparent)}`">
       {{ hotkey }}
@@ -20,11 +23,14 @@ import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
 import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
+import ParentOpenIcon from '@/assets/interface-icons/open-parent.svg';
+import TopOpenIcon from '@/assets/interface-icons/open-top.svg';
+import UnknownIcon from '@/assets/interface-icons/unknown-icon.svg';
 
 export default {
   name: 'ItemOpenMethodIcon',
   props: {
-    openingMethod: String, // newtab | sametab | modal | workspace
+    openingMethod: String, // newtab | sametab | parent | top | modal | workspace
     isSmall: Boolean, // If true, will apply small class
     position: String, // Position classes: top, bottom, left, right
     isTransparent: Boolean, // If true, will apply opacity
@@ -44,6 +50,9 @@ export default {
     SameTabOpenIcon,
     IframeOpenIcon,
     WorkspaceOpenIcon,
+    ParentOpenIcon,
+    TopOpenIcon,
+    UnknownIcon,
   },
 };
 </script>