Merge pull request #12 from polarityio/develop

feat: add copy data button
polarityio · Feb 27, 2023 · 1136291 · 1136291
2 parents 47dbf3f + ae08569
commit 1136291
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 77 deletions.
diff --git a/component/block.js b/component/block.js
@@ -2,7 +2,15 @@
 polarity.export = PolarityComponent.extend({
   details: Ember.computed.alias('block.data.details'),
   errorMessage: '',
+  showCopyMessage: false,
+  uniqueIdPrefix: '',
   running: false,
+  init () {
+    let array = new Uint32Array(5);
+    this.set('uniqueIdPrefix', window.crypto.getRandomValues(array).join(''));
+
+    this._super(...arguments);
+  },
   actions: {
     retryLookup: function () {
       this.set('running', true);
@@ -21,6 +29,34 @@ polarity.export = PolarityComponent.extend({
         .finally(() => {
           this.set('running', false);
         });
+    },
+    copyData: function () {
+      Ember.run.scheduleOnce(
+        'afterRender',
+        this,
+        this.copyElementToClipboard,
+        `arin-container-${this.get('uniqueIdPrefix')}`
+      );
+
+      Ember.run.scheduleOnce('destroy', this, this.restoreCopyState);
     }
+  },
+  copyElementToClipboard (element) {
+    window.getSelection().removeAllRanges();
+    let range = document.createRange();
+
+    range.selectNode(typeof element === 'string' ? document.getElementById(element) : element);
+    window.getSelection().addRange(range);
+    document.execCommand('copy');
+    window.getSelection().removeAllRanges();
+  },
+  restoreCopyState () {
+    this.set('showCopyMessage', true);
+
+    setTimeout(() => {
+      if (!this.isDestroyed) {
+        this.set('showCopyMessage', false);
+      }
+    }, 2000);
   }
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ARIN",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "main": "./integration.js",
   "description": "ARIN Integration",
   "private": true,

diff --git a/styles/arin.less b/styles/arin.less
@@ -31,3 +31,46 @@ pre{
   margin-bottom: 0px;
 }
 
+
+.copy-btn-container {
+  flex: 1 1 auto;
+  position: absolute;
+  right: 10px;
+  top: 7px;
+
+  .copy-btn {
+    font-size: 12px;
+    padding: 0px;
+    height: 20px;
+
+    :active {
+      color: darken(#388e3c, 5%);
+    }
+  }
+
+  .copy-success-message {
+    position: absolute;
+    top: 20px;
+    right: 0px;
+    background-color: rgb(222, 226, 230);
+    min-width: max-content;;
+    padding: 5px;
+    border-radius: 3px;
+
+    .copy-success-icon {
+      color: #aaa;
+    }
+
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.25s linear;
+    }
+
+    &.hidden {
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0s 0.25s, opacity 0.25s linear;
+    }
+  }
+}
diff --git a/template/block.hbs b/template/block.hbs
@@ -1,120 +1,138 @@
 {{#if errorMessage}}
-<div class="alert alert-danger">
-<pre>{{errorMessage}}</pre>
-</div>
+  <div class="alert alert-danger">
+    <pre>{{errorMessage}}</pre>
+  </div>
 {{/if}}
 {{#if (or details.isConnectionReset details.maxRequestQueueLimitHit)}}
-    <button type="button" class="btn btn-polarity btn-sm retry-btn"{{action "retryLookup"}}>
-        {{#if running}}
-            {{fa-icon icon="spinner-third" fixedWidth=true spin=true}}
-        {{else}}
-            Retry Search
-        {{/if}}
-    </button>
-    <div class="mt-1">
-        <span class="p-footnote">The ARIN API search limit was reached.  You can retry your search by pressing the "Retry Search" button.</span>
-    </div>
-{{else if details}}
-    {{#if block.isCached}}
-        <i class="cached">(Entity is Cached)</i>
+  <button type="button" class="btn btn-polarity btn-sm retry-btn" {{action "retryLookup"}}>
+    {{#if running}}
+      {{fa-icon icon="spinner-third" fixedWidth=true spin=true}}
+    {{else}}
+      Retry Search
     {{/if}}
+  </button>
+  <div class="mt-1">
+    <span class="p-footnote">The ARIN API search limit was reached. You can retry your search by pressing the "Retry
+      Search" button.</span>
+  </div>
+{{else if details}}
+
+  {{#if block.isCached}}
+    <i class="cached">(Entity is Cached)</i>
+  {{/if}}
 
-    <h1 class="p-title">{{fa-icon icon="sitemap" fixedWidth=true}} Organization Information
-        {{#if details.orgRef}}
-            <a class="p-link" href="{{details.orgRef}}">(View Org Info {{fa-icon icon="external-link-square" fixedWidth=true class="external-link"}})</a>
-        {{/if}}
+  <div class="d-flex align-items-center justify-content-end copy-btn-container">
+    <button class="btn copy-btn p-action" {{action "copyData"}} title="Copy Information to Clipboard">
+      {{fa-icon icon="clipboard" fixedWidth=true}}
+    </button>
+    <div class="copy-success-message {{if showCopyMessage "visible" "hidden"}}">
+      {{fa-icon icon="check" fixedWidth=true class="copy-success-icon"}}
+      Copied Information.
+    </div>
+  </div>
+
+  <div id={{concat "arin-container-" uniqueIdPrefix}}>
+    <h1 class="p-title">{{fa-icon icon="sitemap" fixedWidth=true}}
+      Organization Information
+      {{#if details.orgRef}}
+        <a class="p-link" href="{{details.orgRef}}">(View Org Info
+          {{fa-icon icon="external-link-square" fixedWidth=true class="external-link"}})</a>
+      {{/if}}
     </h1>
 
     {{#if details.orgHandle}}
-        <div>
-            <span class="p-key">Handle: </span>
-            <span class="p-value">{{details.orgHandle}}</span>
-        </div>
+      <div>
+        <span class="p-key">Handle: </span>
+        <span class="p-value">{{details.orgHandle}}</span>
+      </div>
     {{/if}}
 
     {{#if details.orgName}}
-        <div>
-            <span class="p-key">Name: </span>
-            <span class="p-value">{{details.orgName}}</span>
-        </div>
+      <div>
+        <span class="p-key">Name: </span>
+        <span class="p-value">{{details.orgName}}</span>
+      </div>
     {{/if}}
 
-
-    <h1 class="p-title">{{fa-icon icon="cube" fixedWidth=true}} Network Block
-        {{#if details.netBlockRef}}
-            <a class="p-link" href="{{details.netBlockRef}}">(View Network Info {{fa-icon icon="external-link-square" fixedWidth=true class="external-link"}})</a>
-        {{/if}}
+    <h1 class="p-title">{{fa-icon icon="cube" fixedWidth=true}}
+      Network Block
+      {{#if details.netBlockRef}}
+        <a class="p-link" href="{{details.netBlockRef}}">(View Network Info
+          {{fa-icon icon="external-link-square" fixedWidth=true class="external-link"}})</a>
+      {{/if}}
     </h1>
 
     {{#if details.netBlockHandle}}
-        <div>
-            <span class="p-key">Handle: </span>
-            <span class="p-value">{{details.netBlockHandle}}</span>
-        </div>
+      <div>
+        <span class="p-key">Handle: </span>
+        <span class="p-value">{{details.netBlockHandle}}</span>
+      </div>
     {{/if}}
 
     {{#if details.netBlockName}}
-        <div>
-            <span class="p-key">Name: </span>
-            <span class="p-value">{{details.netBlockName}}</span>
-        </div>
+      <div>
+        <span class="p-key">Name: </span>
+        <span class="p-value">{{details.netBlockName}}</span>
+      </div>
     {{/if}}
 
     {{#if details.netBlockCIDR}}
-        <div>
-            <span class="p-key">CIDR: </span>
-            <span class="p-value">{{details.netBlockCIDR}}</span>
-        </div>
+      <div>
+        <span class="p-key">CIDR: </span>
+        <span class="p-value">{{details.netBlockCIDR}}</span>
+      </div>
     {{/if}}
 
     {{#if details.startAddr}}
-        <div>
-            <span class="p-key">Start Address: </span>
-            <span class="p-value">{{details.startAddr}}</span>
-        </div>
+      <div>
+        <span class="p-key">Start Address: </span>
+        <span class="p-value">{{details.startAddr}}</span>
+      </div>
     {{/if}}
 
     {{#if details.endAddr}}
-        <div>
-            <span class="p-key">End Address: </span>
-            <span class="p-value">{{details.endAddr}}</span>
-        </div>
+      <div>
+        <span class="p-key">End Address: </span>
+        <span class="p-value">{{details.endAddr}}</span>
+      </div>
     {{/if}}
 
     {{#if details.regDate}}
-        <div>
-            <span class="p-key">Registration Date: </span>
-            <span class="p-value">{{details.regDate}}</span>
-        </div>
+      <div>
+        <span class="p-key">Registration Date: </span>
+        <span class="p-value">{{details.regDate}}</span>
+      </div>
     {{/if}}
 
     {{#if details.upDate}}
-        <div>
-            <span class="p-key">Last Update Date: </span>
-            <span class="p-value">{{details.upDate}}</span>
-        </div>
+      <div>
+        <span class="p-key">Last Update Date: </span>
+        <span class="p-value">{{details.upDate}}</span>
+      </div>
     {{/if}}
 
     {{#if details.parentRef}}
-        <h1 class="p-title">{{fa-icon icon="globe" fixedWidth=true}} Parent Network Details
-            <a class="p-link" href="{{details.parentRef}}">(View Parent Info {{fa-icon icon="external-link-square" fixedWidth=true class="external-link"}})</a>
-        </h1>
+      <h1 class="p-title">{{fa-icon icon="globe" fixedWidth=true}}
+        Parent Network Details
+        <a class="p-link" href="{{details.parentRef}}">(View Parent Info
+          {{fa-icon icon="external-link-square" fixedWidth=true class="external-link"}})</a>
+      </h1>
     {{/if}}
 
     {{#if details.parentHandle}}
-        <div>
-            <span class="p-key">Parent Net Handle: </span>
-            <span class="p-value">{{details.parentHandle}}</span>
-        </div>
+      <div>
+        <span class="p-key">Parent Net Handle: </span>
+        <span class="p-value">{{details.parentHandle}}</span>
+      </div>
     {{/if}}
 
     {{#if details.parentName}}
-        <div>
-            <span class="p-key">Parent Net Name: </span>
-            <span class="p-value">{{details.parentName}}</span>
-        </div>
+      <div>
+        <span class="p-key">Parent Net Name: </span>
+        <span class="p-value">{{details.parentName}}</span>
+      </div>
     {{/if}}
+  </div>
 {{else}}
-    No Results
-{{/if}}
-
+  No Results
+{{/if}}