Fix updatenotifications display, dependencies and csp

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

3 files changed, 8 insertions, 57 deletions

diff --git a/apps/updatenotification/src/components/popoverMenu.vue b/apps/updatenotification/src/components/popoverMenu.vue
deleted file mode 100644
index 92f62c5090d..00000000000
--- a/apps/updatenotification/src/components/popoverMenu.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<ul>
-		<popover-item v-for="(item, key) in menu" :item="item" :key="key" />
-	</ul>
-</template>
-
-
-<script>
-import popoverItem from './popoverMenu/popoverItem';
-
-export default {
-	name: 'popoverMenu',
-	props: ['menu'],
-	components: {
-		popoverItem
-	}
-}
-</script>
diff --git a/apps/updatenotification/src/components/popoverMenu/popoverItem.vue b/apps/updatenotification/src/components/popoverMenu/popoverItem.vue
deleted file mode 100644
index d496a336c22..00000000000
--- a/apps/updatenotification/src/components/popoverMenu/popoverItem.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-	<li>
-		<!-- If item.href is set, a link will be directly used -->
-		<a @click="item.action" v-if="item.href" :href="(item.href) ? item.href : '#' " :target="(item.target) ? item.target : '' " rel="noreferrer noopener">
-			<span :class="item.icon"></span>
-			<span v-if="item.text">{{item.text}}</span>
-			<p v-else-if="item.longtext">{{item.longtext}}</p>
-		</a>
-		<!-- If item.action is set instead, a button will be used -->
-		<button @click="item.action" v-else-if="item.action">
-			<span :class="item.icon"></span>
-			<span v-if="item.text">{{item.text}}</span>
-			<p v-else-if="item.longtext">{{item.longtext}}</p>
-		</button>
-		<!-- If item.longtext is set AND the item does not have an action -->
-		<span class="menuitem" v-else>
-			<span :class="item.icon"></span>
-			<span v-if="item.text">{{item.text}}</span>
-			<p v-else-if="item.longtext">{{item.longtext}}</p>
-		</span>
-	</li>
-</template>
-
-<script>
-export default {
-	props: ['item']
-}
-</script>
diff --git a/apps/updatenotification/src/components/root.vue b/apps/updatenotification/src/components/root.vue
index b2fcdf328cc..351fe947765 100644
--- a/apps/updatenotification/src/components/root.vue
+++ b/apps/updatenotification/src/components/root.vue
@@ -53,7 +53,7 @@
 			<template v-else-if="!isUpdateChecked">{{ t('updatenotification', 'The update check is not yet finished. Please refresh the page.') }}</template>
 			<template v-else>
 				{{ t('updatenotification', 'Your version is up to date.') }}
-				<span class="icon-info svg" :title="lastCheckedOnString"></span>
+				<span class="icon-info svg" v-tooltip.auto="lastCheckedOnString"></span>
 			</template>
 
 			<template v-if="!isDefaultUpdateServerURL">
@@ -81,7 +81,7 @@
 
 		<p id="oca_updatenotification_groups">
 			{{ t('updatenotification', 'Notify members of the following groups about available updates:') }}
-			<v-select multiple :value="notifyGroups" :options="availableGroups"></v-select><br />
+			<multiselect v-model="notifyGroups" :options="availableGroups" :multiple="true" label="label" track-by="value" :tag-width="75" /><br />
 			<em v-if="currentChannel === 'daily' || currentChannel === 'git'">{{ t('updatenotification', 'Only notification for app updates are available.') }}</em>
 			<em v-if="currentChannel === 'daily'">{{ t('updatenotification', 'The selected update channel makes dedicated notifications for the server obsolete.') }}</em>
 			<em v-if="currentChannel === 'git'">{{ t('updatenotification', 'The selected update channel does not support updates of the server.') }}</em>
@@ -90,18 +90,19 @@
 </template>
 
 <script>
-	import vSelect from 'vue-select';
-	import popoverMenu from './popoverMenu';
+	import { PopoverMenu, Multiselect } from 'nextcloud-vue';
+	import { VTooltip } from 'v-tooltip';
 	import ClickOutside from 'vue-click-outside';
 
 	export default {
 		name: 'root',
 		components: {
-			vSelect,
-			popoverMenu,
+			Multiselect,
+			PopoverMenu,
 		},
 		directives: {
-			ClickOutside
+			ClickOutside,
+			tooltip: VTooltip
 		},
 		data: function () {
 			return {
@@ -355,10 +356,6 @@
 					this.enableChangeWatcher = true;
 				}.bind(this)
 			});
-		},
-
-		updated: function () {
-			this._$el.find('.icon-info').tooltip({placement: 'right'});
 		}
 	}
 </script>