From 0b39c4a8430522fb0c0b58e5886e616b4bd1d71a Mon Sep 17 00:00:00 2001
From: Alexey Zinoviev <alexey.zinoviev@xored.com>
Date: Fri, 20 Sep 2024 19:08:22 +0400
Subject: [PATCH] eqzms-1175: improve copy UX when clipboard is not available
 (#6657)

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>
---
 models/tracker/src/actions.ts                    |  3 +++
 models/view/src/plugin.ts                        |  1 +
 .../src/components/InviteLink.svelte             | 16 +++++++++++++---
 plugins/view-resources/src/index.ts              |  4 +++-
 plugins/view-resources/src/visibilityTester.ts   |  4 ++++
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/models/tracker/src/actions.ts b/models/tracker/src/actions.ts
index 783895f8c5..e42af938fa 100644
--- a/models/tracker/src/actions.ts
+++ b/models/tracker/src/actions.ts
@@ -562,6 +562,7 @@ export function createActions (builder: Builder, issuesId: string, componentsId:
       input: 'focus',
       category: tracker.category.Tracker,
       target: tracker.class.Issue,
+      visibilityTester: view.function.IsClipboardAvailable,
       context: {
         mode: ['context', 'browser'],
         application: tracker.app.Tracker,
@@ -582,6 +583,7 @@ export function createActions (builder: Builder, issuesId: string, componentsId:
       input: 'focus',
       category: tracker.category.Tracker,
       target: tracker.class.Issue,
+      visibilityTester: view.function.IsClipboardAvailable,
       context: {
         mode: ['context', 'browser'],
         application: tracker.app.Tracker,
@@ -602,6 +604,7 @@ export function createActions (builder: Builder, issuesId: string, componentsId:
       input: 'focus',
       category: tracker.category.Tracker,
       target: tracker.class.Issue,
+      visibilityTester: view.function.IsClipboardAvailable,
       context: {
         mode: ['context', 'browser'],
         application: tracker.app.Tracker,
diff --git a/models/view/src/plugin.ts b/models/view/src/plugin.ts
index c45bfc0e37..aeb975a63d 100644
--- a/models/view/src/plugin.ts
+++ b/models/view/src/plugin.ts
@@ -140,6 +140,7 @@ export default mergeIds(viewId, view, {
     CanDeleteSpace: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
     CanJoinSpace: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
     CanLeaveSpace: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
+    IsClipboardAvailable: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
     BlobImageMetadata: '' as Resource<(file: FileOrBlob, blob: Ref<Blob>) => Promise<BlobMetadata | undefined>>,
     BlobVideoMetadata: '' as Resource<(file: FileOrBlob, blob: Ref<Blob>) => Promise<BlobMetadata | undefined>>
   },
diff --git a/plugins/login-resources/src/components/InviteLink.svelte b/plugins/login-resources/src/components/InviteLink.svelte
index 2f8e18dcdb..5d42a5d75f 100644
--- a/plugins/login-resources/src/components/InviteLink.svelte
+++ b/plugins/login-resources/src/components/InviteLink.svelte
@@ -40,6 +40,7 @@
   const dispatch = createEventDispatcher()
 
   const query = createQuery()
+  const isSecureContext = window.isSecureContext
 
   interface InviteParams {
     expirationTime: number
@@ -87,6 +88,7 @@
     }
   }
   function copy (): void {
+    if (!isSecureContext) return
     if (link === undefined) return
     copyTextToClipboard(link)
     copied = true
@@ -109,7 +111,7 @@
   let loading = false
 </script>
 
-<div class="antiPopup popup">
+<div class="antiPopup popup" class:secure={isSecureContext}>
   <div class="flex-between fs-title mb-9">
     <Label label={login.string.InviteDescription} />
     <InviteWorkspace size={'large'} />
@@ -154,7 +156,9 @@
     <Loading />
   {:else if link !== undefined}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="over-underline link" on:click={copy}>{link}</div>
+    <div class="link" class:notSecure={!isSecureContext} class:over-underline={isSecureContext} on:click={copy}>
+      {link}
+    </div>
     <div class="buttons">
       <Button
         label={login.string.Close}
@@ -164,7 +168,9 @@
           dispatch('close')
         }}
       />
-      <Button label={copied ? login.string.Copied : login.string.Copy} size={'medium'} on:click={copy} />
+      {#if isSecureContext}
+        <Button label={copied ? login.string.Copied : login.string.Copy} size={'medium'} on:click={copy} />
+      {/if}
     </div>
   {:else}
     <div class="buttons">
@@ -195,6 +201,10 @@
     .link {
       margin: 1.75rem 0 0;
       overflow-wrap: break-word;
+
+      &.notSecure {
+        user-select: text;
+      }
     }
 
     .buttons {
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index f05390a215..0e08e278c5 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -135,7 +135,8 @@ import {
   canDeleteSpace,
   canEditSpace,
   canJoinSpace,
-  canLeaveSpace
+  canLeaveSpace,
+  isClipboardAvailable
 } from './visibilityTester'
 export { canArchiveSpace, canDeleteObject, canDeleteSpace, canEditSpace } from './visibilityTester'
 export { getActions, getContextActions, invokeAction, showMenu } from './actions'
@@ -334,6 +335,7 @@ export default async (): Promise<Resources> => ({
     CanDeleteSpace: canDeleteSpace,
     CanJoinSpace: canJoinSpace,
     CanLeaveSpace: canLeaveSpace,
+    IsClipboardAvailable: isClipboardAvailable,
     BlobImageMetadata: blobImageMetadata,
     BlobVideoMetadata: blobVideoMetadata
   }
diff --git a/plugins/view-resources/src/visibilityTester.ts b/plugins/view-resources/src/visibilityTester.ts
index 060f2789e4..5787083d62 100644
--- a/plugins/view-resources/src/visibilityTester.ts
+++ b/plugins/view-resources/src/visibilityTester.ts
@@ -143,3 +143,7 @@ export async function canLeaveSpace (doc?: Doc | Doc[]): Promise<boolean> {
 
   return space.members?.includes(getCurrentAccount()._id)
 }
+
+export function isClipboardAvailable (doc?: Doc | Doc[]): boolean {
+  return isSecureContext && navigator.clipboard !== undefined
+}