From b86d8fd11b96009e8be7750842626e130b7b82e0 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Thu, 13 Jan 2022 22:48:18 +0800
Subject: [PATCH] Minor Shares UX Improvements (#11015)

* Add notification when copying shares' links

* add danger styling for shares delete option
---
 app/src/lang/translations/en-US.yaml               |  2 ++
 .../shares-sidebar-detail/share-item.vue           |  8 +++++++-
 .../shares-sidebar-detail.vue                      | 14 +++++++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 34151a94af..95c33d3892 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1170,6 +1170,8 @@ share_access_not_found: This shared page either does not exist or has already ex
 share_access_not_found_desc: Please contact an authorized user of this project to request access.
 share_access_not_found_title: Unknown Share Page
 share_copy_link: Copy Link
+share_copy_link_success: Link Copied
+share_copy_link_error: Unable to Copy Link
 share_send_link: Send Link
 relational_triggers: Relational Triggers
 referential_action_field_label_m2o: On Delete of {collection}...
diff --git a/app/src/views/private/components/shares-sidebar-detail/share-item.vue b/app/src/views/private/components/shares-sidebar-detail/share-item.vue
index d53af08ab9..5a3aff53ee 100644
--- a/app/src/views/private/components/shares-sidebar-detail/share-item.vue
+++ b/app/src/views/private/components/shares-sidebar-detail/share-item.vue
@@ -26,7 +26,7 @@
 							<v-list-item-icon><v-icon name="edit" /></v-list-item-icon>
 							<v-list-item-content>{{ t('edit') }}</v-list-item-content>
 						</v-list-item>
-						<v-list-item v-if="deleteAllowed" clickable @click="$emit('delete')">
+						<v-list-item v-if="deleteAllowed" clickable class="danger" @click="$emit('delete')">
 							<v-list-item-icon><v-icon name="delete" /></v-list-item-icon>
 							<v-list-item-content>{{ t('delete_label') }}</v-list-item-content>
 						</v-list-item>
@@ -121,6 +121,12 @@ export default defineComponent({
 	margin-bottom: 0;
 }
 
+.v-list-item.danger {
+	--v-list-item-color: var(--danger);
+	--v-list-item-color-hover: var(--danger);
+	--v-list-item-icon-color: var(--danger);
+}
+
 .share-item-info {
 	display: flex;
 	align-items: center;
diff --git a/app/src/views/private/components/shares-sidebar-detail/shares-sidebar-detail.vue b/app/src/views/private/components/shares-sidebar-detail/shares-sidebar-detail.vue
index 207d020567..39d6ac6045 100644
--- a/app/src/views/private/components/shares-sidebar-detail/shares-sidebar-detail.vue
+++ b/app/src/views/private/components/shares-sidebar-detail/shares-sidebar-detail.vue
@@ -80,6 +80,7 @@ import { defineComponent, ref, computed } from 'vue';
 import DrawerItem from '@/views/private/components/drawer-item';
 import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
+import { notify } from '@/utils/notify';
 import { Share } from '@directus/shared/types';
 
 import api from '@/api';
@@ -167,7 +168,18 @@ export default defineComponent({
 
 		async function copy(id: string) {
 			const url = window.location.origin + getRootPath() + 'admin/shared/' + id;
-			await navigator?.clipboard?.writeText(url);
+			try {
+				await navigator?.clipboard?.writeText(url);
+				notify({
+					type: 'success',
+					title: t('share_copy_link_success'),
+				});
+			} catch (err: any) {
+				notify({
+					type: 'error',
+					title: t('share_copy_link_error'),
+				});
+			}
 		}
 
 		function select(id: string) {