From 44b4ea0027e430a429e37effe0309af67814e29d Mon Sep 17 00:00:00 2001
From: "Ivan Hrynevytskyi (FE-underwriting)"
 <83350900+im-ihrynevytskyi@users.noreply.github.com>
Date: Thu, 19 May 2022 14:04:00 +0300
Subject: [PATCH] added copy text tool to workflow defenition info (#3043)

Co-authored-by: Ivan Hrynevytskyi <ivan.hrynevytskyi@IHRYNEVYTSKYIL.local>
---
 .../src/components.d.ts                       |  2 +-
 .../src/components/shared/forms/info-list.tsx | 29 +++++++++++++----
 .../elsa-workflows-designer/src/utils/copy.ts | 32 +++++++++++++++++++
 .../src/utils/index.ts                        |  1 +
 4 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/designer/elsa-workflows-designer/src/utils/copy.ts

diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index 9fd21f1d5..0f60a1827 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -162,7 +162,7 @@ export namespace Components {
     }
     interface ElsaTooltip {
         "tooltipContent": any;
-        "tooltipPosition": string;
+        "tooltipPosition"?: string;
     }
     interface ElsaWorkflowDefinitionBrowser {
         "hide": () => Promise<void>;
diff --git a/src/designer/elsa-workflows-designer/src/components/shared/forms/info-list.tsx b/src/designer/elsa-workflows-designer/src/components/shared/forms/info-list.tsx
index e67509e43..8fd2fb794 100644
--- a/src/designer/elsa-workflows-designer/src/components/shared/forms/info-list.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/shared/forms/info-list.tsx
@@ -1,4 +1,5 @@
-import {FunctionalComponent, h} from "@stencil/core";
+import { FunctionalComponent, h } from '@stencil/core';
+import { copyTextToClipboard } from '../../../utils';
 
 export interface InfoListProps {
   title: string;
@@ -11,17 +12,33 @@ export const InfoList: FunctionalComponent<InfoListProps> = ({title, dictionary}
       <div class="max-w-4xl mx-auto">
         <div>
           <div>
-            <h3 class="text-lg leading-6 font-medium text-gray-900">
-              {title}
-            </h3>
+            <h3 class="text-lg leading-6 font-medium text-gray-900">{title}</h3>
           </div>
           <div class="mt-5 border-t border-gray-200">
             <dl class="sm:divide-y sm:divide-gray-200">
               {Object.entries(dictionary).map(([k, v]) => (
                 <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                   <dt class="text-sm font-medium text-gray-500">{k}</dt>
-                  <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{v}</dd>
-                </div>))}
+                  <dd class="flex justify-between items-center mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                    {v}
+                    <svg
+                      onClick={() => copyTextToClipboard(v as string)}
+                      class="cursor-pointer inline-block ml-2 h-6 w-6 text-blue-500"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      stroke-width="2"
+                      stroke="currentColor"
+                      fill="none"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path stroke="none" d="M0 0h24v24H0z" /> <rect x="8" y="8" width="12" height="12" rx="2" />
+                      <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+                    </svg>
+                  </dd>
+                </div>
+              ))}
             </dl>
           </div>
         </div>
diff --git a/src/designer/elsa-workflows-designer/src/utils/copy.ts b/src/designer/elsa-workflows-designer/src/utils/copy.ts
new file mode 100644
index 000000000..dc25198b8
--- /dev/null
+++ b/src/designer/elsa-workflows-designer/src/utils/copy.ts
@@ -0,0 +1,32 @@
+function fallbackCopyTextToClipboard(text: string) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+
+  document.body.appendChild(textArea);
+
+  textArea.focus();
+  textArea.select();
+
+  try {
+    document.execCommand('copy');
+  } catch (err) {
+    console.error('Fallback: Oops, unable to copy', err);
+  }
+
+  document.body.removeChild(textArea);
+}
+
+export function copyTextToClipboard(text: string) {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+
+  navigator.clipboard.writeText(text).catch(function (err) {
+    console.error('Async: Could not copy text: ', err);
+  });
+}
diff --git a/src/designer/elsa-workflows-designer/src/utils/index.ts b/src/designer/elsa-workflows-designer/src/utils/index.ts
index 4608687ff..d3353fddf 100644
--- a/src/designer/elsa-workflows-designer/src/utils/index.ts
+++ b/src/designer/elsa-workflows-designer/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './download';
 export * from './select-list-items';
 export * from './utils';
+export * from './copy';