Merge pull request #6821 from G-Chubinidze/gc_SCI_9757

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

app/javascript/packs/vue/open_locally_menu.js

@@ -0,0 +1,8 @@
+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,67 @@
+<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() {
+      const 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) {
+        const text = this.localAppName
+          ? this.i18n.t('attachments.open_locally_in', { application: this.localAppName })
+          : this.i18n.t('attachments.open_locally');
+
+        menu.push({
+          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

@@ -48,6 +48,7 @@ const entryList = {
   vue_user_preferences: './app/javascript/packs/vue/user_preferences.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',
   vue_scinote_edit_download: './app/javascript/packs/vue/scinote_edit_download.js'
 }