feat(ui): add notification when copying urn (#758)

* add notification to copyable * add notification to urn component and where it's used * make notification conditional * address feedback
radicle-dev · Aug 6, 2020 · c461069 · c461069
1 parent c794408
commit c461069
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 13 deletions.
diff --git a/ui/DesignSystem/Component/Copyable.svelte b/ui/DesignSystem/Component/Copyable.svelte
@@ -1,10 +1,12 @@
 <script>
   // TODO(sarah): write tests for this once it's implemented in the ui somewhere
   import { copyToClipboard } from "../../../native/ipc.js";
+  import * as notification from "../../src/notification.ts";
   import Icon from "../Primitive/Icon";
 
   export let style = null;
   export let copyContent = null;
+  export let notificationText = "Copied to your clipboard";
   export let iconBeforeCopy = Icon.Copy;
   export let iconAfterCopy = Icon.Check;
   export let iconSize = "small";
@@ -23,6 +25,8 @@
       copyContent !== null ? copyContent : slotContent.textContent;
     copyToClipboard(content.trim());
 
+    notification.info(notificationText);
+
     copied = true;
 
     copyIcon = Icon.Check;

diff --git a/ui/DesignSystem/Component/Header/Large.svelte b/ui/DesignSystem/Component/Header/Large.svelte
@@ -10,6 +10,17 @@
   export let entity = null;
   export let variant = null; // profile | org
 
+  let name;
+  if (variant === "profile") {
+    if (entity.registered) {
+      name = entity.registered;
+    } else {
+      name = entity.metadata.handle;
+    }
+  } else if (variant === "org") {
+    name = entity.id;
+  }
+
   const onRegisterHandle = () => {
     dispatch("registerHandle");
   };
@@ -79,17 +90,15 @@
       <div class="metadata">
         <div class="user">
           <h1 data-cy="entity-name" style="display: flex; align-items: center;">
-            {#if variant === 'profile' && entity.registered}
-              {entity.registered}
-            {:else if variant === 'profile' && !entity.registered}
-              {entity.metadata.handle}
+            {name}
+            {#if variant === 'profile' && !entity.registered}
               <Button
                 variant="outline"
                 style="margin-left: 12px;"
                 on:click={() => onRegisterHandle()}>
                 Register handle
               </Button>
-            {:else if variant === 'org'}{entity.id}{/if}
+            {/if}
           </h1>
           {#if variant === 'org' || entity.registered}
             <Icon.Verified
@@ -99,7 +108,10 @@
           {/if}
         </div>
         <div class="shareable-entity-identifier">
-          <Urn urn={entity.shareableEntityIdentifier} showOnHover />
+          <Urn
+            urn={entity.shareableEntityIdentifier}
+            showOnHover
+            notificationText={`Radicle ID for ${name} copied to your clipboard.`} />
         </div>
       </div>
     </div>

diff --git a/ui/DesignSystem/Component/Transaction.svelte b/ui/DesignSystem/Component/Transaction.svelte
@@ -96,7 +96,9 @@
       <p class="row-text">Transaction ID</p>
     </div>
     <div slot="right">
-      <Urn urn={transaction.id} />
+      <Urn
+        urn={transaction.id}
+        notificationText="The transaction ID is copied to your clipboard" />
     </div>
   </Row>
 

diff --git a/ui/DesignSystem/Component/Urn.svelte b/ui/DesignSystem/Component/Urn.svelte
@@ -4,6 +4,7 @@
 
   export let urn = null;
   export let showOnHover = false;
+  export let notificationText = "Copied to your clipboard";
 
   const cleanUrn = urn.replace(/^%?rad:git:/, "");
 
@@ -42,7 +43,11 @@
   data-cy="urn"
   on:mouseover={showFullUrn}
   on:mouseout={hideFullUrn}>
-  <Copyable iconSize="small" style="align-items: center;" copyContent={urn}>
+  <Copyable
+    iconSize="small"
+    style="align-items: center;"
+    copyContent={urn}
+    {notificationText}>
     {#if urn.length > 24}
       {#if (showOnHover && !hover) || !showOnHover}
         <p class="typo-text-small-mono">{firstSix}</p>

diff --git a/ui/DesignSystem/Component/Wallet/Receive.svelte b/ui/DesignSystem/Component/Wallet/Receive.svelte
@@ -25,6 +25,8 @@
   {/if}
   <p class="typo-text-bold" style="padding: 1.5rem 0 0.5rem 0;">Address</p>
   <Flex align="center">
-    <Urn urn={accountId} />
+    <Urn
+      urn={accountId}
+      notificationText="The address was copied to your clipboard" />
   </Flex>
 </div>
diff --git a/ui/Screen/DesignSystemGuide.svelte b/ui/Screen/DesignSystemGuide.svelte
@@ -1068,7 +1068,10 @@
       </Swatch>
 
       <Swatch>
-        <Urn urn="%rad:git:copy-me-to-see-the-full-urn" showOnHover />
+        <Urn
+          urn="%rad:git:copy-me-to-see-the-full-urn"
+          showOnHover
+          notificationText="The urn was copied to your clipboard" />
       </Swatch>
     </Section>
   </div>

diff --git a/ui/Screen/Discovery/Project.svelte b/ui/Screen/Discovery/Project.svelte
@@ -95,9 +95,10 @@
 
   </div>
   <div class="shareableEntityIdentifier">
-    <Urn urn={project.shareableEntityIdentifier} />
+    <Urn
+      urn={project.shareableEntityIdentifier}
+      notificationText="The project ID was copied to your clipboard" />
   </div>
-  <!-- TODO(sos): middle-truncate shareableEntityID & show copy icon -->
 
   <div class="description">
     <p>{project.metadata.description}</p>

diff --git a/ui/Screen/Project/Source.svelte b/ui/Screen/Project/Source.svelte
@@ -181,7 +181,10 @@
   <div class="header">
     <h2>{project.metadata.name}</h2>
     <div class="project-id">
-      <Urn urn={project.shareableEntityIdentifier} showOnHover />
+      <Urn
+        urn={project.shareableEntityIdentifier}
+        showOnHover
+        notificationText="The project ID was copied to your clipboard" />
     </div>
     <div class="description">
       <p>{project.metadata.description}</p>