Replace custom tooltips with native one in vue components and views

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

Author: JuliaKirschenheuter

apps/files_sharing/src/components/SharingEntry.vue

@@ -25,12 +25,13 @@
 		<NcAvatar class="sharing-entry__avatar"
 			:is-no-user="share.type !== SHARE_TYPES.SHARE_TYPE_USER"
 			:user="share.shareWith"
-			:display-name="share.shareWithDisplayName"
-			:tooltip-message="share.type === SHARE_TYPES.SHARE_TYPE_USER ? share.shareWith : ''"
+			:title="share.type === SHARE_TYPES.SHARE_TYPE_USER ? share.shareWithDisplayName : ''"
 			:menu-position="'left'"
 			:url="share.shareWithAvatar" />
+
 		<component :is="share.shareWithLink ? 'a' : 'div'"
-			v-tooltip.auto="tooltip"
+			:title="tooltip"
+			:aria-label="tooltip"
 			:href="share.shareWithLink"
 			class="sharing-entry__desc">
 			<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
@@ -116,11 +117,6 @@
 					</NcActionCheckbox>
 					<NcActionTextEditable v-if="hasNote"
 						ref="note"
-						v-tooltip.auto="{
-							content: errors.note,
-							show: errors.note,
-							trigger: 'manual'
-						}"
 						:class="{ error: errors.note}"
 						:disabled="saving"
 						:value="share.newNote || share.note"
@@ -147,7 +143,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
 import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import SharesMixin from '../mixins/SharesMixin.js'
 
@@ -163,10 +158,6 @@ export default {
 		NcAvatar,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	mixins: [SharesMixin],
 
 	data() {
@@ -204,7 +195,6 @@ export default {
 					user: this.share.shareWithDisplayName,
 					owner: this.share.ownerDisplayName,
 				}
-
 				if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
 					return t('files_sharing', 'Shared with the group {user} by {owner}', data)
 				} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) {

apps/files_sharing/src/components/SharingEntryInherited.vue

@@ -26,9 +26,9 @@
 		:title="share.shareWithDisplayName">
 		<template #avatar>
 			<NcAvatar :user="share.shareWith"
-				:display-name="share.shareWithDisplayName"
-				class="sharing-entry__avatar"
-				tooltip-message="" />
+				:aria-label="share.shareWithDisplayName"
+				:title="share.shareWithDisplayName"
+				class="sharing-entry__avatar" />
 		</template>
 		<NcActionText icon="icon-user">
 			{{ t('files_sharing', 'Added by {initiator}', { initiator: share.ownerDisplayName }) }}

apps/files_sharing/src/components/SharingEntryInternal.vue

@@ -10,12 +10,11 @@
 			</template>
 
 			<NcActionLink :href="internalLink"
-				:aria-label="t('files_sharing', 'Copy internal link to clipboard')"
+				:aria-label="copyLinkTooltip"
+				:title="copyLinkTooltip"
 				target="_blank"
 				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-				@click.prevent="copyLink">
-				{{ clipboardTooltip }}
-			</NcActionLink>
+				@click.prevent="copyLink" />
 		</SharingEntrySimple>
 	</ul>
 </template>
@@ -60,18 +59,18 @@ export default {
 		},
 
 		/**
-		 * Clipboard v-tooltip message
+		 * Tooltip message
 		 *
 		 * @return {string}
 		 */
-		clipboardTooltip() {
+		copyLinkTooltip() {
 			if (this.copied) {
 				if (this.copySuccess) {
 					return ''
 				}
 				return t('files_sharing', 'Cannot copy, please copy the link manually')
 			}
-			return t('files_sharing', 'Copy to clipboard')
+			return t('files_sharing', 'Copy internal link to clipboard')
 		},
 
 		internalLinkSubtitle() {

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -40,11 +40,10 @@
 			class="sharing-entry__copy">
 			<NcActionLink :href="shareLink"
 				target="_blank"
-				:aria-label="t('files_sharing', 'Copy public link to clipboard')"
+				:title="copyLinkTooltip"
+				:aria-label="copyLinkTooltip"
 				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-				@click.stop.prevent="copyLink">
-				{{ clipboardTooltip }}
-			</NcActionLink>
+				@click.stop.prevent="copyLink" />
 		</NcActions>
 
 		<!-- pending actions -->
@@ -74,13 +73,8 @@
 				@uncheck="onPasswordDisable">
 				{{ t('files_sharing', 'Password protection') }}
 			</NcActionCheckbox>
+
 			<NcActionInput v-if="pendingPassword || share.password"
-				v-tooltip.auto="{
-					content: errors.password,
-					show: errors.password,
-					trigger: 'manual',
-					defaultContainer: '#app-sidebar'
-				}"
 				class="share-link-password"
 				:value.sync="share.password"
 				:disabled="saving"
@@ -129,12 +123,6 @@
 				<template v-if="share.canEdit && canReshare">
 					<!-- Custom Label -->
 					<NcActionInput ref="label"
-						v-tooltip.auto="{
-							content: errors.label,
-							show: errors.label,
-							trigger: 'manual',
-							defaultContainer: '.app-sidebar'
-						}"
 						:class="{ error: errors.label }"
 						:disabled="saving"
 						:aria-label="t('files_sharing', 'Share label')"
@@ -167,14 +155,9 @@
 							? t('files_sharing', 'Password protection (enforced)')
 							: t('files_sharing', 'Password protect') }}
 					</NcActionCheckbox>
+
 					<NcActionInput v-if="isPasswordProtected"
 						ref="password"
-						v-tooltip.auto="{
-							content: errors.password,
-							show: errors.password,
-							trigger: 'manual',
-							defaultContainer: '#app-sidebar'
-						}"
 						class="share-link-password"
 						:class="{ error: errors.password}"
 						:disabled="saving"
@@ -233,14 +216,9 @@
 						@uncheck="queueUpdate('note')">
 						{{ t('files_sharing', 'Note to recipient') }}
 					</NcActionCheckbox>
+
 					<NcActionTextEditable v-if="hasNote"
 						ref="note"
-						v-tooltip.auto="{
-							content: errors.note,
-							show: errors.note,
-							trigger: 'manual',
-							defaultContainer: '#app-sidebar'
-						}"
 						:class="{ error: errors.note}"
 						:disabled="saving"
 						:placeholder="t('files_sharing', 'Enter a note for the share recipient')"
@@ -286,10 +264,10 @@
 			<!-- Create new share -->
 			<NcActionButton v-else-if="canReshare"
 				class="new-share-link"
+				:title="t('files_sharing', 'Create a new share link')"
+				:aria-label="t('files_sharing', 'Create a new share link')"
 				:icon="loading ? 'icon-loading-small' : 'icon-add'"
-				@click.prevent.stop="onNewLinkShare">
-				{{ t('files_sharing', 'Create a new share link') }}
-			</NcActionButton>
+				@click.prevent.stop="onNewLinkShare" />
 		</NcActions>
 
 		<!-- loading indicator to replace the menu -->
@@ -312,7 +290,6 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
 import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import ExternalShareAction from './ExternalShareAction.vue'
 import SharePermissionsEditor from './SharePermissionsEditor.vue'
@@ -337,10 +314,6 @@ export default {
 		SharePermissionsEditor,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	mixins: [SharesMixin],
 
 	props: {
@@ -558,18 +531,18 @@ export default {
 		},
 
 		/**
-		 * Clipboard v-tooltip message
+		 * Tooltip message for copy button
 		 *
 		 * @return {string}
 		 */
-		clipboardTooltip() {
+		copyLinkTooltip() {
 			if (this.copied) {
 				if (this.copySuccess) {
 					return ''
 				}
 				return t('files_sharing', 'Cannot copy, please copy the link manually')
 			}
-			return t('files_sharing', 'Copy to clipboard')
+			return t('files_sharing', 'Copy public link to clipboard')
 		},
 
 		/**
@@ -730,6 +703,7 @@ export default {
 					// otherwise the user needs to copy/paste the password before finishing the share.
 					component.copyLink()
 				}
+				showSuccess(t('sharing', 'Link share created'))
 
 			} catch (data) {
 				const message = data?.response?.data?.ocs?.meta?.message
@@ -767,7 +741,6 @@ export default {
 			if (typeof this.share.newLabel === 'string') {
 				this.share.label = this.share.newLabel
 				this.$delete(this.share, 'newLabel')
-				showSuccess(t('files_sharing', 'Share label saved'))
 				this.queueUpdate('label')
 			}
 		},
@@ -835,7 +808,6 @@ export default {
 		onPasswordSubmit() {
 			if (this.hasUnsavedPassword) {
 				this.share.password = this.share.newPassword.trim()
-				showSuccess(t('files_sharing', 'Share password saved'))
 				this.queueUpdate('password')
 			}
 		},

apps/files_sharing/src/components/SharingEntrySimple.vue

@@ -23,7 +23,7 @@
 <template>
 	<li class="sharing-entry">
 		<slot name="avatar" />
-		<div v-tooltip="tooltip" class="sharing-entry__desc">
+		<div class="sharing-entry__desc">
 			<span class="sharing-entry__title">{{ title }}</span>
 			<p v-if="subtitle">
 				{{ subtitle }}
@@ -41,7 +41,6 @@
 
 <script>
 import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 export default {
 	name: 'SharingEntrySimple',
@@ -50,20 +49,12 @@ export default {
 		NcActions,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		title: {
 			type: String,
 			default: '',
 			required: true,
 		},
-		tooltip: {
-			type: String,
-			default: '',
-		},
 		subtitle: {
 			type: String,
 			default: '',

apps/files_sharing/src/mixins/SharesMixin.js

@@ -25,7 +25,7 @@
  *
  */
 
-import { showSuccess } from '@nextcloud/dialogs'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
 // eslint-disable-next-line import/no-unresolved, node/no-missing-import
 import PQueue from 'p-queue'
@@ -212,7 +212,6 @@ export default {
 			if (this.share.newNote) {
 				this.share.note = this.share.newNote
 				this.$delete(this.share, 'newNote')
-				showSuccess(t('files_sharing', 'Share note saved'))
 				this.queueUpdate('note')
 			}
 		},
@@ -278,10 +277,11 @@ export default {
 
 						// clear any previous errors
 						this.$delete(this.errors, propertyNames[0])
-
+						showSuccess(t('files_sharing', 'Share {propertyName} saved', { propertyName: propertyNames[0] }))
 					} catch ({ message }) {
 						if (message && message !== '') {
 							this.onSyncError(propertyNames[0], message)
+							showError(t('files_sharing', message))
 						}
 					} finally {
 						this.saving = false

apps/files_sharing/src/utils/GeneratePassword.js

@@ -22,6 +22,7 @@
 
 import axios from '@nextcloud/axios'
 import Config from '../services/ConfigService'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 
 const config = new Config()
 const passwordSet = 'abcdefgijkmnopqrstwxyzABCDEFGHJKLMNPQRSTWXYZ23456789'
@@ -39,10 +40,12 @@ export default async function() {
 		try {
 			const request = await axios.get(config.passwordPolicy.api.generate)
 			if (request.data.ocs.data.password) {
+				showSuccess(t('files_sharing', 'Password created successfully'))
 				return request.data.ocs.data.password
 			}
 		} catch (error) {
 			console.info('Error generating password from password_policy', error)
+			showError(t('files_sharing', 'Error generating password from password_policy'))
 		}
 	}
 

apps/files_sharing/src/views/SharingInherited.vue

@@ -31,10 +31,9 @@
 				<div class="avatar-shared icon-more-white" />
 			</template>
 			<NcActionButton :icon="showInheritedSharesIcon"
-				:aria-label="mainTitle"
-				@click.prevent.stop="toggleInheritedShares">
-				{{ toggleTooltip }}
-			</NcActionButton>
+				:aria-label="toggleTooltip"
+				:title="toggleTooltip"
+				@click.prevent.stop="toggleInheritedShares" />
 		</SharingEntrySimple>
 
 		<!-- Inherited shares list -->

apps/files_sharing/src/views/SharingTab.vue

@@ -34,9 +34,8 @@
 			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
 				<template #avatar>
 					<NcAvatar :user="sharedWithMe.user"
-						:display-name="sharedWithMe.displayName"
-						class="sharing-entry__avatar"
-						tooltip-message="" />
+						:title="sharedWithMe.displayName"
+						class="sharing-entry__avatar" />
 				</template>
 			</SharingEntrySimple>