From 0eb323b2f12ce8d916219122e787e7077c90fe35 Mon Sep 17 00:00:00 2001
From: Ivan Kljun <ivan@scinote.net>
Date: Tue, 23 Jan 2024 11:52:35 +0100
Subject: [PATCH 1/3] Add wrong-version modal for SciNote Edit [SCI-10010]

---
 .../javascripts/sitewide/constants.js.erb     |  2 +
 .../content/attachments/context_menu.vue      | 17 ++++--
 .../attachments/mixins/open_locally.js        | 16 +++++-
 .../content/attachments/open_locally_menu.vue | 54 +++++++++++--------
 .../shared/content/attachments/thumbnail.vue  |  9 +++-
 .../content/modal/no_predefined_app_modal.vue |  6 +--
 .../content/modal/update_version_modal.vue    | 54 +++++++++++++++++++
 .../vue/shared/scinote_edit_download.vue      | 30 +++++++----
 .../shared/file_preview/_content.html.erb     |  2 +-
 config/initializers/constants.rb              |  4 ++
 config/locales/en.yml                         |  7 ++-
 11 files changed, 155 insertions(+), 46 deletions(-)
 create mode 100644 app/javascript/vue/shared/content/modal/update_version_modal.vue

diff --git a/app/assets/javascripts/sitewide/constants.js.erb b/app/assets/javascripts/sitewide/constants.js.erb
index 8e37b3abc..2ba7d7fc4 100644
--- a/app/assets/javascripts/sitewide/constants.js.erb
+++ b/app/assets/javascripts/sitewide/constants.js.erb
@@ -15,4 +15,6 @@ const GLOBAL_CONSTANTS = {
   FAST_STATUS_POLLING_INTERVAL: <%= Constants::FAST_STATUS_POLLING_INTERVAL %>,
   SLOW_STATUS_POLLING_INTERVAL: <%= Constants::SLOW_STATUS_POLLING_INTERVAL %>,
   ASSET_SYNC_URL: '<%= Constants::ASSET_SYNC_URL %>',
+  MIN_SCINOTE_EDIT_VERSION: '<%= Constants::MIN_SCINOTE_EDIT_VERSION %>',
+  MAX_SCINOTE_EDIT_VERSION: '<%= Constants::MAX_SCINOTE_EDIT_VERSION %>',
 };
diff --git a/app/javascript/vue/shared/content/attachments/context_menu.vue b/app/javascript/vue/shared/content/attachments/context_menu.vue
index 1dd6c0af0..d78379525 100644
--- a/app/javascript/vue/shared/content/attachments/context_menu.vue
+++ b/app/javascript/vue/shared/content/attachments/context_menu.vue
@@ -57,11 +57,15 @@
         :fileName="attachment.attributes.file_name"
         @confirm="showNoPredefinedAppModal = false"
       />
+      <UpdateVersionModal
+        v-if="showUpdateVersionModal"
+        @cancel="showUpdateVersionModal = false"
+      />
       <editLaunchingApplicationModal
-          v-if="editAppModal"
-          :fileName="attachment.attributes.file_name"
-          :application="this.localAppName"
-          @cancel="editAppModal = false"
+        v-if="editAppModal"
+        :fileName="attachment.attributes.file_name"
+        :application="this.localAppName"
+        @cancel="editAppModal = false"
       />
     </Teleport>
   </div>
@@ -72,6 +76,7 @@ import deleteAttachmentModal from './delete_modal.vue';
 import editLaunchingApplicationModal from './edit_launching_application_modal.vue';
 import moveAssetModal from '../modal/move.vue';
 import NoPredefinedAppModal from '../modal/no_predefined_app_modal.vue';
+import UpdateVersionModal from '../modal/update_version_modal.vue';
 import MoveMixin from './mixins/move.js';
 import OpenLocallyMixin from './mixins/open_locally.js';
 import MenuDropdown from '../../menu_dropdown.vue';
@@ -83,6 +88,7 @@ export default {
     moveAssetModal,
     MenuDropdown,
     NoPredefinedAppModal,
+    UpdateVersionModal,
     editLaunchingApplicationModal
   },
   mixins: [MoveMixin, OpenLocallyMixin],
@@ -98,7 +104,8 @@ export default {
       viewModeOptions: ['inline', 'thumbnail', 'list'],
       deleteModal: false,
       editAppModal: false,
-      showNoPredefinedAppModal: false
+      showNoPredefinedAppModal: false,
+      showUpdateVersionModal: false
     };
   },
   computed: {
diff --git a/app/javascript/vue/shared/content/attachments/mixins/open_locally.js b/app/javascript/vue/shared/content/attachments/mixins/open_locally.js
index 6ce3d06d4..a104e7a7c 100644
--- a/app/javascript/vue/shared/content/attachments/mixins/open_locally.js
+++ b/app/javascript/vue/shared/content/attachments/mixins/open_locally.js
@@ -1,10 +1,12 @@
 import axios from '../../../../../packs/custom_axios.js';
+import { satisfies } from 'compare-versions';
 
 export default {
   data() {
     return {
       localAppName: null,
-      scinoteEditRunning: false
+      scinoteEditRunning: false,
+      scinoteEditVersion: null      
     };
   },
   computed: {
@@ -24,6 +26,7 @@ export default {
 
         if (statusResponse.status === 200) {
           this.scinoteEditRunning = true;
+          this.scinoteEditVersion = statusResponse.data.version;
         } else {
           return;
         }
@@ -40,7 +43,10 @@ export default {
       }
     },
     async openLocally() {
-      if (this.localAppName === null) {
+      if (this.isWrongVersion(this.scinoteEditVersion)) {
+        this.showUpdateVersionModal = true;
+        return;
+      } else if (this.localAppName === null) {
         this.showNoPredefinedAppModal = true;
         return;
       }
@@ -52,6 +58,12 @@ export default {
       } catch (error) {
         console.error('Error in request:', error);
       }
+    },
+    isWrongVersion(version) {
+      const min = GLOBAL_CONSTANTS.MIN_SCINOTE_EDIT_VERSION;
+      const max = GLOBAL_CONSTANTS.MAX_SCINOTE_EDIT_VERSION;
+      version = "3.0"
+      return !satisfies(version, `${min} - ${max}`);
     }
   }
 }
diff --git a/app/javascript/vue/shared/content/attachments/open_locally_menu.vue b/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
index 43d1498aa..16fe92443 100644
--- a/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
+++ b/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
@@ -1,21 +1,27 @@
 <template>
-  <div class="sn-open-locally-menu">
-    <div v-if="!this.canOpenLocally && (this.attachment.wopi && this.attachment.urls.edit_asset)">
-        <a :href="`${this.attachment.urls.edit_asset}`" target="_blank"
-        class="block whitespace-nowrap rounded px-3 py-2.5
-               hover:!text-sn-blue hover:no-underline cursor-pointer hover:bg-sn-super-light-grey">
-            {{ this.attachment.wopi_context.button_text }}
-        </a>
+  <div class="sn-open-locally-menu" @mouseenter="fetchLocalAppInfo">
+    <div v-if="!canOpenLocally && (attachment.attributes.wopi && attachment.attributes.urls.edit_asset)">
+      <a :href="`${attachment.attributes.urls.edit_asset}`" target="_blank"
+      class="block whitespace-nowrap rounded px-3 py-2.5
+              hover:!text-sn-blue hover:no-underline cursor-pointer hover:bg-sn-super-light-grey">
+          {{ attachment.attributes.wopi_context.button_text }}
+      </a>
     </div>
     <div v-else>
-        <MenuDropdown
-          class="ml-auto"
-          :listItems="this.menu"
-          :btnClasses="`btn btn-light icon-btn !bg-sn-white`"
-          :position="'right'"
-          :btnText="'Open in'"
-          @open_locally="openLocally"
-        ></MenuDropdown>
+      <MenuDropdown
+        class="ml-auto"
+        :listItems="menu"
+        :btnClasses="`btn btn-light icon-btn !bg-sn-white`"
+        :position="'right'"
+        :btnText="'Open in'"
+        @open_locally="openLocally"
+      ></MenuDropdown>
+      <Teleport to="body">
+        <UpdateVersionModal
+          v-if="showUpdateVersionModal"
+          @cancel="showUpdateVersionModal = false"
+        />
+      </Teleport>
     </div>
   </div>
 </template>
@@ -23,17 +29,21 @@
 <script>
 import OpenLocallyMixin from './mixins/open_locally.js';
 import MenuDropdown from '../../menu_dropdown.vue';
+import UpdateVersionModal from '../modal/update_version_modal.vue';
 
 export default {
   name: 'OpenLocallyMenu',
   mixins: [OpenLocallyMixin],
-  components: { MenuDropdown },
+  components: { MenuDropdown, UpdateVersionModal },
+  data: {
+    showUpdateVersionModal: false
+  },
   props: {
-    data: { type: String, required: true },
+    attachment: { type: Object, required: true }
   },
   created() {
+    this.fetchLocalAppInfo();
     window.openLocallyMenu = this;
-    this.attachment = JSON.parse(this.data);
   },
   beforeUnmount() {
     delete window.openLocallyMenuComponent;
@@ -42,10 +52,10 @@ export default {
     menu() {
       const menu = [];
 
-      if (this.attachment.wopi && this.attachment.urls.edit_asset) {
+      if (this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset) {
         menu.push({
-          text: this.attachment.wopi_context.button_text,
-          url: this.attachment.urls.edit_asset,
+          text: this.attachment.attributes.wopi_context.button_text,
+          url: this.attachment.attributes.urls.edit_asset,
           url_target: '_blank',
         });
       }
@@ -62,6 +72,6 @@ export default {
 
       return menu;
     },
-  },
+  }
 };
 </script>
diff --git a/app/javascript/vue/shared/content/attachments/thumbnail.vue b/app/javascript/vue/shared/content/attachments/thumbnail.vue
index 980b1ddab..e8fffed5f 100644
--- a/app/javascript/vue/shared/content/attachments/thumbnail.vue
+++ b/app/javascript/vue/shared/content/attachments/thumbnail.vue
@@ -145,6 +145,10 @@
       :fileName="attachment.attributes.file_name"
       @confirm="showNoPredefinedAppModal = false"
     />
+    <UpdateVersionModal
+      v-if="showUpdateVersionModal"
+      @cancel="showUpdateVersionModal = false"
+    />
     <a  class="image-edit-button hidden"
       v-if="attachment.attributes.asset_type != 'marvinjs'
             && attachment.attributes.image_editable
@@ -168,6 +172,7 @@ import deleteAttachmentModal from './delete_modal.vue';
 import MenuDropdown from '../../../shared/menu_dropdown.vue';
 import MoveAssetModal from '../modal/move.vue';
 import NoPredefinedAppModal from '../modal/no_predefined_app_modal.vue';
+import UpdateVersionModal from '../modal/update_version_modal.vue';
 import MoveMixin from './mixins/move.js';
 import OpenLocallyMixin from './mixins/open_locally.js';
 import { vOnClickOutside } from '@vueuse/components';
@@ -180,6 +185,7 @@ export default {
     deleteAttachmentModal,
     MoveAssetModal,
     NoPredefinedAppModal,
+    UpdateVersionModal,
     MenuDropdown
   },
   props: {
@@ -197,7 +203,8 @@ export default {
       showOptions: false,
       deleteModal: false,
       isMenuOpen: false,
-      showNoPredefinedAppModal: false
+      showNoPredefinedAppModal: false,
+      showUpdateVersionModal: false
     };
   },
   directives: {
diff --git a/app/javascript/vue/shared/content/modal/no_predefined_app_modal.vue b/app/javascript/vue/shared/content/modal/no_predefined_app_modal.vue
index 0df7e6ceb..402f2175a 100644
--- a/app/javascript/vue/shared/content/modal/no_predefined_app_modal.vue
+++ b/app/javascript/vue/shared/content/modal/no_predefined_app_modal.vue
@@ -5,14 +5,14 @@
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
           <h4 class="modal-title" id="modal-delete-result-element">
-            {{ i18n.t('assets.asset_sync.set_up_app') }}
+            {{ i18n.t('assets.no_predefined_app_modal.set_up_app') }}
           </h4>
         </div>
         <div class="modal-body">
-          <p v-html="i18n.t('assets.asset_sync.body_text_html', { file_name: fileName })"></p>
+          <p v-html="i18n.t('assets.no_predefined_app_modal.body_text_html', { file_name: fileName })"></p>
         </div>
         <div class="modal-footer">
-          <button class="btn btn-primary" @click="confirm">{{ this.i18n.t('assets.asset_sync.no_predefined_app') }}</button>
+          <button class="btn btn-primary" @click="confirm">{{ this.i18n.t('assets.no_predefined_app_modal.understand_button') }}</button>
         </div>
       </div>
     </div>
diff --git a/app/javascript/vue/shared/content/modal/update_version_modal.vue b/app/javascript/vue/shared/content/modal/update_version_modal.vue
new file mode 100644
index 000000000..c1650915f
--- /dev/null
+++ b/app/javascript/vue/shared/content/modal/update_version_modal.vue
@@ -0,0 +1,54 @@
+<template>
+  <div ref="modal" @keydown.esc="cancel" class="modal" id="modalUpdateVersion" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-md" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
+          <h4 class="modal-title" id="modal-delete-result-element">
+            {{ i18n.t('assets.update_version_modal.title') }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <p v-html="i18n.t('assets.update_version_modal.body_text_html')"></p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
+          <ScinoteEditDownload 
+            :data="userAgent"
+            :isUpdateVersionModal="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScinoteEditDownload from '../../../../vue/shared/scinote_edit_download.vue';
+
+export default {
+  name: 'UpdateVersionModal',
+  components: {
+    ScinoteEditDownload
+  },
+  props: {
+    fileName: String
+  },
+  computed: {
+    userAgent() {
+      return window.navigator.userAgent;
+    }
+  },
+  mounted() {
+    $(this.$refs.modal).modal('show');
+    $(this.$refs.modal).on('hidden.bs.modal', () => {
+      this.$emit('cancel');
+    });
+  },
+  methods: {
+    cancel() {
+      $(this.$refs.modal).modal('hide');
+    }
+  }
+}
+</script>
diff --git a/app/javascript/vue/shared/scinote_edit_download.vue b/app/javascript/vue/shared/scinote_edit_download.vue
index 80e994ef0..a655f8968 100644
--- a/app/javascript/vue/shared/scinote_edit_download.vue
+++ b/app/javascript/vue/shared/scinote_edit_download.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="buttons">
     <template v-if="isWindows">
-      <a :href="responseData[0]['url']"
+      <a :href="getWindowsHref"
          class="btn btn-primary new-project-btn"
          :title="i18n.t('users.settings.account.addons.desktop_app.windows_button')"
          role="button"
@@ -9,13 +9,13 @@
          target="_blank">
         <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
       </a>
-      <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+      <p v-if="showButtonLabel"   class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
         {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[0]['version']}) }}
       </p>
     </template>
 
     <template v-else-if="isMac">
-      <a :href="responseData[1]['url']"
+      <a :href="getMacHref"
          class="btn btn-primary new-project-btn"
          :title="i18n.t('users.settings.account.addons.desktop_app.macos_button')"
          role="button"
@@ -23,7 +23,7 @@
          target="_blank">
         <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
       </a>
-      <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+      <p v-if="showButtonLabel"  class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
         {{ i18n.t('users.settings.account.addons.desktop_app.version', { version: this.responseData[1]['version']}) }}
       </p>
     </template>
@@ -31,7 +31,7 @@
     <template v-else>
       <div class="flex">
         <div>
-          <a :href="responseData[0]['url']"
+          <a :href="getWindowsHref"
              class="btn btn-primary new-project-btn"
              :title="i18n.t('users.settings.account.addons.desktop_app.windows_button')"
              role="button"
@@ -39,7 +39,7 @@
              target="_blank">
             <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.windows_button') }}</span>
           </a>
-          <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+          <p v-if="showButtonLabel" class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
             {{ i18n.t('users.settings.account.addons.desktop_app.version',
               { version: this.responseData[0]['version']})
             }}
@@ -47,7 +47,7 @@
         </div>
 
         <div class="ml-2">
-          <a :href="responseData[1]['url']"
+          <a :href="getMacHref"
              class="btn btn-primary new-project-btn"
              :title="i18n.t('users.settings.account.addons.desktop_app.macos_button')"
              role="button"
@@ -55,7 +55,7 @@
              target="_blank">
             <span class="hidden-xs">{{ i18n.t('users.settings.account.addons.desktop_app.macos_button') }}</span>
           </a>
-          <p class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
+          <p v-if="showButtonLabel" class="text-xs mt-1" style="color: var(--sn-sleepy-grey);">
             {{ i18n.t('users.settings.account.addons.desktop_app.version',
               { version: this.responseData[1]['version']})
             }}
@@ -77,12 +77,13 @@
 export default {
   name: 'ScinoteEditDownload',
   props: {
-    data: { type: String, required: true }
+    data: { type: String, required: true },
+    isUpdateVersionModal: { type: Boolean, required: false }
   },
   data() {
     return {
       userAgent: this.data,
-      responseData: {}
+      responseData: []
     };
   },
   computed: {
@@ -91,6 +92,15 @@ export default {
     },
     isMac() {
       return /Mac OS/.test(this.userAgent);
+    },
+    showButtonLabel() {
+      return this.responseData && this.responseData.length > 0 && !this.isUpdateVersionModal;
+    },
+    getWindowsHref() {
+      return this.responseData && this.responseData.length > 0 ? this.responseData[0]['url'] : '#'
+    },
+    getMacHref() {
+      return this.responseData && this.responseData.length > 0 ? this.responseData[1]['url'] : '#'
     }
   },
   created() {
diff --git a/app/views/shared/file_preview/_content.html.erb b/app/views/shared/file_preview/_content.html.erb
index 31fd8e0d8..a6dd5acf3 100644
--- a/app/views/shared/file_preview/_content.html.erb
+++ b/app/views/shared/file_preview/_content.html.erb
@@ -4,7 +4,7 @@
     <% if can_edit && !preview %>
       <% if wopi_enabled? && wopi_file?(asset) %>
         <div id="openLocallyMenu" data-behaviour="vue">
-          <open-locally-menu data="<%= AssetSerializer.new(asset, scope: { user: current_user }).to_json %>"/>
+          <open-locally-menu :attachment="<%= { attributes: AssetSerializer.new(asset, scope: { user: current_user }).as_json }.to_json %>" />
         </div>
       <% elsif asset.file.metadata[:asset_type] == 'marvinjs' %>
         <button class="btn btn-light marvinjs-edit-button"
diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb
index 714ce034b..2068b505c 100644
--- a/config/initializers/constants.rb
+++ b/config/initializers/constants.rb
@@ -434,6 +434,10 @@ class Constants
   # Grover timeout in ms
   GROVER_TIMEOUT_MS = 300000
 
+  # SciNote Edit supported versions
+  MIN_SCINOTE_EDIT_VERSION = ENV['MIN_SCINOTE_EDIT_VERSION'].freeze
+  MAX_SCINOTE_EDIT_VERSION = ENV['MAX_SCINOTE_EDIT_VERSION'].freeze
+
   #                             )       \   /      (
   #                            /|\      )\_/(     /|\
   #   *                       / | \    (/\|/\)   / | \                      *
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ffd9fa51e..096de133a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3608,10 +3608,13 @@ en:
     empty_office_file:
       description: "The file is empty. Please add some data before saving the file."
       reload: "Reload file"
-    asset_sync:
+    no_predefined_app_modal:
       body_text_html: "The specified application for accessing the <b>%{file_name}</b> is not preconfigured. To successfully open this file, please set up the appropriate application in your local environment beforehand.</p>"
-      no_predefined_app: "I understand"
+      understand_button: "I understand"
       set_up_app: "Set up an application to open this file"
+    update_version_modal:
+      title: "Update required"
+      body_text_html: "The current version of the SciNote Edit application is no longer supported. To ensure a seamless and secure user experience, we recommend installing to the latest version."
     edit_launching_application_modal:
       title: "Launching application"
       description: "%{file_name} will now open in %{application}. Saved changes in %{application} will automatically be synced in SciNote."

From 6b50039dac9dc2df6c1a4e9b41702bad80f55fc8 Mon Sep 17 00:00:00 2001
From: Ivan Kljun <ivan@scinote.net>
Date: Wed, 24 Jan 2024 09:32:31 +0100
Subject: [PATCH 2/3] Change event name to be same as function name [SCI-10010]

---
 .../vue/shared/content/attachments/open_locally_menu.vue      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/vue/shared/content/attachments/open_locally_menu.vue b/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
index 97ad8d456..8b477b945 100644
--- a/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
+++ b/app/javascript/vue/shared/content/attachments/open_locally_menu.vue
@@ -17,7 +17,7 @@
         :btnText="i18n.t('attachments.open_in')"
         :caret="true"
         @open-locally="openLocally"
-        @open-scinote-editor="openImageEditor"
+        @open-image-editor="openImageEditor"
       ></MenuDropdown>
       <a v-else-if="menu.length === 1" class="btn btn-light !bg-sn-white" :href="menu[0].url" :target="menu[0].target" @click="this[this.menu[0].emit]()">
         {{ menu[0].text }}
@@ -69,7 +69,7 @@ export default {
       if (this.attachment.attributes.image_editable) {
         menu.push({
           text: this.i18n.t('assets.file_preview.edit_in_scinote'),
-          emit: 'openScinoteEditor'
+          emit: 'openImageEditor'
         });
       }
 

From 78f3456da06b6a821e014e544f8df5c072f38cf4 Mon Sep 17 00:00:00 2001
From: Ivan Kljun <ivan@scinote.net>
Date: Thu, 1 Feb 2024 10:42:40 +0100
Subject: [PATCH 3/3] Move modals logic to open_locally.js [SCI-10010]

---
 .../content/attachments/mixins/open_locally.js   | 16 ++++++++--------
 .../vue/shared/content/attachments/thumbnail.vue |  8 +-------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/app/javascript/vue/shared/content/attachments/mixins/open_locally.js b/app/javascript/vue/shared/content/attachments/mixins/open_locally.js
index b72e64d77..99773f7eb 100644
--- a/app/javascript/vue/shared/content/attachments/mixins/open_locally.js
+++ b/app/javascript/vue/shared/content/attachments/mixins/open_locally.js
@@ -1,8 +1,8 @@
 import axios from '../../../../../packs/custom_axios.js';
 import { satisfies } from 'compare-versions';
-// import editLaunchingApplicationModal from '../../modal/edit_launching_application_modal.vue';
-// import NoPredefinedAppModal from '../../modal/no_predefined_app_modal.vue';
-// import UpdateVersionModal from '../../modal/update_version_modal.vue';
+import editLaunchingApplicationModal from '../../modal/edit_launching_application_modal.vue';
+import NoPredefinedAppModal from '../../modal/no_predefined_app_modal.vue';
+import UpdateVersionModal from '../../modal/update_version_modal.vue';
 
 export default {
   data() {
@@ -15,11 +15,11 @@ export default {
       editAppModal: false
     };
   },
-  // components: {
-  //   editLaunchingApplicationModal,
-  //   NoPredefinedAppModal,
-  //   UpdateVersionModal
-  // },
+  components: {
+    editLaunchingApplicationModal,
+    NoPredefinedAppModal,
+    UpdateVersionModal
+  },
   computed: {
     attributes() {
       return this.attachment.attributes;
diff --git a/app/javascript/vue/shared/content/attachments/thumbnail.vue b/app/javascript/vue/shared/content/attachments/thumbnail.vue
index e8fffed5f..2f9956620 100644
--- a/app/javascript/vue/shared/content/attachments/thumbnail.vue
+++ b/app/javascript/vue/shared/content/attachments/thumbnail.vue
@@ -171,8 +171,6 @@ import ContextMenu from './context_menu.vue';
 import deleteAttachmentModal from './delete_modal.vue';
 import MenuDropdown from '../../../shared/menu_dropdown.vue';
 import MoveAssetModal from '../modal/move.vue';
-import NoPredefinedAppModal from '../modal/no_predefined_app_modal.vue';
-import UpdateVersionModal from '../modal/update_version_modal.vue';
 import MoveMixin from './mixins/move.js';
 import OpenLocallyMixin from './mixins/open_locally.js';
 import { vOnClickOutside } from '@vueuse/components';
@@ -184,8 +182,6 @@ export default {
     ContextMenu,
     deleteAttachmentModal,
     MoveAssetModal,
-    NoPredefinedAppModal,
-    UpdateVersionModal,
     MenuDropdown
   },
   props: {
@@ -202,9 +198,7 @@ export default {
     return {
       showOptions: false,
       deleteModal: false,
-      isMenuOpen: false,
-      showNoPredefinedAppModal: false,
-      showUpdateVersionModal: false
+      isMenuOpen: false
     };
   },
   directives: {