Implement the Open Locally button on file previews [SCI-9757]

app/javascript/packs/vue/open_locally_menu.js

@@ -0,0 +1,10 @@
+/* global notTurbolinksPreview */
+
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import OpenLocallyMenu from '../../vue/shared/content/attachments/open_locally_menu.vue';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
+
+const app = createApp({});
+app.component('OpenLocallyMenu', OpenLocallyMenu);
+app.config.globalProperties.i18n = window.I18n;
+mountWithTurbolinks(app, '#openLocallyMenu');

app/javascript/vue/shared/content/attachments/open_locally_menu.vue

@@ -0,0 +1,65 @@
+<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>
+    <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>
+    </div>
+  </div>
+</template>
+
+<script>
+  import OpenLocallyMixin from './mixins/open_locally.js'
+  import MenuDropdown from '../../menu_dropdown.vue'
+
+  export default {
+    name: 'OpenLocallyMenu',
+    mixins: [OpenLocallyMixin],
+    components: { MenuDropdown },
+    props: {
+      data: { type: String, required: true }
+    },
+    created() {
+      window.openLocallyMenu = this;
+      this.attachment = JSON.parse(this.data)
+    },
+    beforeUnmount() {
+      delete window.openLocallyMenuComponent;
+    },
+    computed: {
+      menu() {
+        let menu = [];
+
+        if (this.attachment.wopi && this.attachment.urls.edit_asset) {
+          menu.push({
+            text: this.attachment.wopi_context.button_text,
+            url: this.attachment.urls.edit_asset,
+            url_target: '_blank'
+          })
+        }
+        if (this.canOpenLocally) {
+            console.log(this.localAppName)
+          const text = this.localAppName ?
+            this.i18n.t('attachments.open_locally_in', { application: this.localAppName }) :
+            this.i18n.t('attachments.open_locally')
+
+          menu.push({
+            text: text,
+            emit: 'open_locally'
+          })
+        }
+        return menu;
+      }
+    }
+  }
+</script>

app/views/shared/file_preview/_content.html.erb

@@ -3,13 +3,9 @@
   <div class="sci-btn-group">
     <% if can_edit && !preview %>
       <% if wopi_enabled? && wopi_file?(asset) %>
-        <% edit_supported, title = wopi_file_edit_button_status(asset) %>
-        <%= render partial: 'assets/wopi/file_wopi_controls',
-          locals: {
-            asset: asset,
-            edit_supported: edit_supported,
-            title: title
-          } %>
+        <div id="openLocallyMenu" data-behaviour="vue">
+          <open-locally-menu data="<%= AssetSerializer.new(asset, scope: { user: current_user }).to_json %>"/>
+        </div>
       <% elsif asset.file.metadata[:asset_type] == 'marvinjs' %>
         <button class="btn btn-light marvinjs-edit-button"
           data-sketch-id="<%= asset.id %>"
@@ -110,3 +106,4 @@
 <% end %>
 
 <%= javascript_include_tag 'shared/file_preview', nonce: true %>
+<%= javascript_include_tag "vue_open_locally_menu", nonce: true %>

config/webpack/webpack.config.js

@@ -46,6 +46,7 @@ const entryList = {
   vue_components_export_stock_consumption_modal: './app/javascript/packs/vue/export_stock_consumption_modal.js',
   vue_components_manage_stock_value_modal: './app/javascript/packs/vue/manage_stock_value_modal.js',
   vue_legacy_datetime_picker: './app/javascript/packs/vue/legacy/datetime_picker.js',
+  vue_open_locally_menu: './app/javascript/packs/vue/open_locally_menu.js'
 }
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949