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

@@ -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,

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>>
   },

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 {

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
   }

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
+}