feat: add copy sandbox link on Sandbox Card from Dashboard

Author: jyash97

packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx

@@ -81,6 +81,18 @@ type State = {
 export const DELETE_SANDBOX_DROP_KEY = 'delete';
 export const MAKE_TEMPLATE_DROP_KEY = 'makeTemplate';
 
+const copyToClipboard = (str: string) => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+};
+
 class SandboxItemComponent extends React.PureComponent<Props, State> {
   el: HTMLDivElement;
   screenshotTimeout: number;
@@ -290,6 +302,13 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
             return true;
           },
         },
+        {
+          title: 'Copy Sandbox Link',
+          action: () => {
+            this.copySandboxURL();
+            return true;
+          },
+        },
         {
           title: 'Fork Sandbox',
           action: () => {
@@ -383,6 +402,14 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
     return true;
   };
 
+  copySandboxURL = () => {
+    const url = sandboxUrl({ id: this.props.id, alias: this.props.alias });
+
+    copyToClipboard(`https://codesandbox.io${url}`);
+
+    return true;
+  };
+
   handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();