From 71605762f67b054d9314e8fe81339511d0f89a4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romain=20D=C3=A9nari=C3=A9?=
 <romain.denarie@exoplatform.com>
Date: Wed, 25 Oct 2023 09:57:39 +0100
Subject: [PATCH 1/2] fix: Merge meeds-io/MIPs#99 : update usage of v-alert to
 use the common method - EXO-67165

---
 .../ActivityCommentTranslatedBody.vue         | 21 +---------
 .../components/ActivityTranslatedBody.vue     | 22 +---------
 .../AutomaticTranslationAdministrationApp.vue | 40 ++++---------------
 3 files changed, 11 insertions(+), 72 deletions(-)

diff --git a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue
index b35a5b87..01f3640a 100644
--- a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue
+++ b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue
@@ -16,12 +16,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div>
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
     <div
       v-if="isTranslatedBodyNotEmpty && !translationHidden">
       <dynamic-html-element
@@ -61,9 +55,6 @@ export default {
   data: () => ({
     translatedBody: null,
     translationHidden: true,
-    alert: false,
-    type: '',
-    message: ''
   }),
   computed: {
     isTranslatedBodyNotEmpty() {
@@ -87,10 +78,7 @@ export default {
     });
     document.addEventListener('activity-translation-error', (event) => {
       if (event.detail.id === this.activity.id) {
-        this.displayMessage({
-          type: 'error',
-          message: this.$t('automaticTranslation.errorTranslation')
-        });
+        this.$root.$emit('alert-message', this.$t('automaticTranslation.errorTranslation'), 'error');
       }
     });
     this.retrieveCommentProperties();
@@ -111,13 +99,6 @@ export default {
       this.translationHidden=false;
       this.$el.parentNode.parentNode.firstChild.classList.add('hide');
     },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
-    }
-
   },
 };
 </script>
diff --git a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue
index 91fe8b77..d4e7ab1c 100644
--- a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue
+++ b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue
@@ -15,13 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
+  <div
     <div
       v-if="isTranslatedBodyNotEmpty && !translationHidden">
       <v-divider class="mb-2" />
@@ -59,9 +53,6 @@ export default {
   data: () => ({
     translatedBody: null,
     translationHidden: false,
-    alert: false,
-    type: '',
-    message: ''
   }),
   computed: {
     isTranslatedBodyNotEmpty() {
@@ -83,10 +74,7 @@ export default {
     });
     document.addEventListener('activity-translation-error', (event) => {
       if (event.detail.id === this.activity.id) {
-        this.displayMessage({
-          type: 'error',
-          message: this.$t('automaticTranslation.errorTranslation')
-        });
+        this.$root.$emit('alert-message', this.$t('automaticTranslation.errorTranslation'), 'error');
       }
     });
     this.retrieveActivityProperties();
@@ -99,12 +87,6 @@ export default {
     },
     hideTranslation() {
       this.translationHidden=true;
-    },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
     }
   },
 };
diff --git a/webapps/src/main/webapp/vue-apps/automatic-translation-administration/components/AutomaticTranslationAdministrationApp.vue b/webapps/src/main/webapp/vue-apps/automatic-translation-administration/components/AutomaticTranslationAdministrationApp.vue
index 1f4bb9a3..d0df31df 100644
--- a/webapps/src/main/webapp/vue-apps/automatic-translation-administration/components/AutomaticTranslationAdministrationApp.vue
+++ b/webapps/src/main/webapp/vue-apps/automatic-translation-administration/components/AutomaticTranslationAdministrationApp.vue
@@ -16,12 +16,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <v-app role="main" id="automaticTranslationAdministration">
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
     <v-main class="white rounded-lg pa-5">
       <v-container fluid>
         <v-row>
@@ -82,31 +76,25 @@ export default {
   data: () => ({
     connectors: [],
     selectedConnector: '',
-    alert: false,
-    type: '',
-    message: '',
     apiKey: ''
   }),
   mounted() {
     this.$nextTick().then(() => this.$root.$emit('application-loaded'));
   },
   created() {
-    this.$root.$on('show-alert', message => {
-      this.displayMessage(message);
-    });
     this.getConfiguration();
   },
   methods: {
     getConfiguration() {
       getConfiguration().then(data => {
-        this.connectors = data && data.connectors || [];
+        this.connectors = data?.connectors || [];
         this.connectors.unshift({'name': 'none','description': this.$t('automatic.translation.administration.noconnectorselected')});
-        this.selectedConnector = data && data.activeConnector || 'none';
-        this.apiKey = data && data.activeApiKey || '';
+        this.selectedConnector = data?.activeConnector || 'none';
+        this.apiKey = data?.activeApiKey || '';
       });
     },
     closeSelect() {
-      if (this.$refs.connectorSelector && this.$refs.connectorSelector.isMenuActive) {
+      if (this.$refs.connectorSelector?.isMenuActive) {
         window.setTimeout(() => {
           this.$refs.connectorSelector.isMenuActive = false;
         }, 100);
@@ -120,7 +108,7 @@ export default {
       setActiveConnector(connector).then(resp => {
         let message='';
         let type='';
-        if (resp && resp.ok) {
+        if (resp?.ok) {
           if (connector === null) {
             message = this.$t('automatic.translation.administration.changeConnector.noconnector.confirm');
           } else {
@@ -131,10 +119,7 @@ export default {
           type='error';
           message = this.$t('automatic.translation.administration.changeConnector.error');
         }
-        this.$root.$emit('show-alert', {
-          type: type,
-          message: message
-        });
+        this.$root.$emit('alert-message', message, type);
         this.getConfiguration();
       });
     },
@@ -142,7 +127,7 @@ export default {
       setApiKey(this.selectedConnector, this.apiKey).then(resp => {
         let message='';
         let type='';
-        if (resp && resp.ok) {
+        if (resp?.ok) {
           if (this.apiKey === '') {
             message = this.$t('automatic.translation.administration.changeApiKey.emptykey.confirm');
           } else {
@@ -153,18 +138,9 @@ export default {
           type='error';
           message = this.$t('automatic.translation.administration.changeApiKey.error');
         }
-        this.$root.$emit('show-alert', {
-          type: type,
-          message: message
-        });
+        this.$root.$emit('alert-message', message, type);
         this.getConfiguration();
       });
-    },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
     }
   }
 };

From e06daf3c22cfcbff77a5dac625beee664114b1c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romain=20D=C3=A9nari=C3=A9?=
 <romain.denarie@exoplatform.com>
Date: Wed, 25 Oct 2023 11:55:24 +0100
Subject: [PATCH 2/2] fix

---
 .../ActivityCommentTranslatedBody.vue         | 30 ++++++++--------
 .../components/ActivityTranslatedBody.vue     | 34 +++++++++----------
 .../main.js                                   |  8 ++---
 3 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue
index 01f3640a..b53152c6 100644
--- a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue
+++ b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue
@@ -15,23 +15,21 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
+  <div
+    v-if="isTranslatedBodyNotEmpty && !translationHidden">
+    <dynamic-html-element
+      v-sanitized-html="translatedBody"
+      :element="element"
+      class="reset-style-box text-break overflow-hidden font-italic text-light-color translationContent"
+      dir="auto" />
     <div
-      v-if="isTranslatedBodyNotEmpty && !translationHidden">
-      <dynamic-html-element
-        v-sanitized-html="translatedBody"
-        :element="element"
-        class="reset-style-box text-break overflow-hidden font-italic text-light-color translationContent"
-        dir="auto" />
-      <div
-        class="font-italic text-light-color clickable caption"
-        :class="$vuetify.rtl ? 'float-left' : 'float-right'"
-        @click="hideTranslation">
-        <v-icon size="12">mdi-translate</v-icon>
-        <span>
-          {{ $t('automaticTranslation.hideTranslation') }}
-        </span>
-      </div>
+      class="font-italic text-light-color clickable caption"
+      :class="$vuetify.rtl ? 'float-left' : 'float-right'"
+      @click="hideTranslation">
+      <v-icon size="12">mdi-translate</v-icon>
+      <span>
+        {{ $t('automaticTranslation.hideTranslation') }}
+      </span>
     </div>
   </div>
 </template>
diff --git a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue
index d4e7ab1c..d349798e 100644
--- a/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue
+++ b/webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue
@@ -16,26 +16,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    <div
-      v-if="isTranslatedBodyNotEmpty && !translationHidden">
-      <v-divider class="mb-2" />
-      <dynamic-html-element
-        v-sanitized-html="translatedBody"
-        :element="element"
-        class="reset-style-box text-break overflow-hidden font-italic text-light-color"
-        dir="auto" />
+    v-if="isTranslatedBodyNotEmpty && !translationHidden">
+    <v-divider class="mb-2" />
+    <dynamic-html-element
+      v-sanitized-html="translatedBody"
+      :element="element"
+      class="reset-style-box text-break overflow-hidden font-italic text-light-color"
+      dir="auto" />
 
-      <div
-        class="font-italic text-light-color clickable caption"
-        :class="$vuetify.rtl ? 'float-left' : 'float-right'"
-        @click="hideTranslation">
-        <v-icon size="12">mdi-translate</v-icon>
-        <span>
-          {{ $t('automaticTranslation.hideTranslation') }}
-        </span>
-      </div>
+    <div
+      class="font-italic text-light-color clickable caption"
+      :class="$vuetify.rtl ? 'float-left' : 'float-right'"
+      @click="hideTranslation">
+      <v-icon size="12">mdi-translate</v-icon>
+      <span>
+        {{ $t('automaticTranslation.hideTranslation') }}
+      </span>
+    </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/webapps/src/main/webapp/vue-apps/automatic-translation-administration/main.js b/webapps/src/main/webapp/vue-apps/automatic-translation-administration/main.js
index a394b88d..cfb1b45f 100644
--- a/webapps/src/main/webapp/vue-apps/automatic-translation-administration/main.js
+++ b/webapps/src/main/webapp/vue-apps/automatic-translation-administration/main.js
@@ -35,14 +35,10 @@ export function init() {
     const appElement = document.createElement('div');
     appElement.id = appId;
 
-    // init Vue app when locale ressources are ready
-    new Vue({
-      mounted() {
-        document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
-      },
+    Vue.createApp({
       template: `<automatic-translation-administration-app v-cacheable id="${appId}" />`,
       vuetify,
       i18n
-    }).$mount(appElement);
+    }, appElement, 'Automatic Translation Administration');
   });
 }