⚡ Reusable save/cancel buttons for new config editors

src/components/LinkItems/Item.vue

@@ -33,7 +33,7 @@
       <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
     </a>
     <ContextMenu
-      :show="contextMenuOpen"
+      :show="contextMenuOpen && !isAddNew"
       v-click-outside="closeContextMenu"
       :posX="contextPos.posX"
       :posY="contextPos.posY"
@@ -86,14 +86,14 @@ export default {
       type: String,
       validator: targetValidator,
     },
-    itemSize: String,
-    enableStatusCheck: Boolean,
-    statusCheckHeaders: Object,
-    statusCheckUrl: String,
-    statusCheckInterval: Number,
-    statusCheckAllowInsecure: Boolean,
-    parentSectionTitle: String,
-    isAddNew: Boolean,
+    itemSize: String, // Item size: small | medium | large
+    enableStatusCheck: Boolean, // Should run status checks
+    statusCheckHeaders: Object, // Custom status check headers
+    statusCheckUrl: String, // Custom URL for status check endpoint
+    statusCheckInterval: Number, // Num seconds beteween repeating checks
+    statusCheckAllowInsecure: Boolean, // Status check ignore SSL certs
+    parentSectionTitle: String, // Title of parent section (for add new)
+    isAddNew: Boolean, // Only set if 'fake' item used as Add New button
   },
   components: {
     Icon,

src/components/LinkItems/ItemContextMenu.vue

@@ -5,41 +5,41 @@
       <!-- Open Options -->
       <ul class="menu-section">
         <li class="section-title">
-          {{ $t('menu.open-section-title') }}
+          {{ $t('context-menus.item.open-section-title') }}
         </li>
         <li @click="launch('sametab')">
           <SameTabOpenIcon />
-          <span>{{ $t('menu.sametab') }}</span>
+          <span>{{ $t('context-menus.item.sametab') }}</span>
         </li>
         <li @click="launch('newtab')">
           <NewTabOpenIcon />
-          <span>{{ $t('menu.newtab') }}</span>
+          <span>{{ $t('context-menus.item.newtab') }}</span>
         </li>
         <li @click="launch('modal')">
           <IframeOpenIcon />
-          <span>{{ $t('menu.modal') }}</span>
+          <span>{{ $t('context-menus.item.modal') }}</span>
         </li>
         <li @click="launch('workspace')">
           <WorkspaceOpenIcon />
-          <span>{{ $t('menu.workspace') }}</span>
+          <span>{{ $t('context-menus.item.workspace') }}</span>
         </li>
       </ul>
       <!-- Edit Options -->
       <ul class="menu-section">
         <li class="section-title">
-          {{ $t('menu.options-section-title') }}
+          {{ $t('context-menus.item.options-section-title') }}
         </li>
         <li @click="openSettings()">
           <EditIcon />
-          <span>{{ $t('menu.edit-item') }}</span>
+          <span>{{ $t('context-menus.item.edit-item') }}</span>
         </li>
         <li v-if="isEditMode" @click="openMoveMenu()">
           <MoveIcon />
-          <span>{{ $t('menu.move-item') }}</span>
+          <span>{{ $t('context-menus.item.move-item') }}</span>
         </li>
         <li v-if="isEditMode" @click="openDeleteItem()">
           <BinIcon />
-          <span>{{ $t('menu.remove-item') }}</span>
+          <span>{{ $t('context-menus.item.remove-item') }}</span>
         </li>
       </ul>
     </div>

src/components/LinkItems/Section.vue

@@ -238,8 +238,12 @@ export default {
     },
     /* Deletes current section, in local state */
     removeSection() {
-      const payload = { sectionIndex: this.index, sectionName: this.title };
-      this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      const confirmMsg = this.$t('interactive-editor.edit-section.remove-confirm');
+      const youSure = confirm(confirmMsg); // eslint-disable-line no-alert, no-restricted-globals
+      if (youSure) {
+        const payload = { sectionIndex: this.index, sectionName: this.title };
+        this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      }
       this.closeContextMenu();
     },
     /* Open custom context menu, and set position */