From edb43eb22414705497962b52675fb5c741b08630 Mon Sep 17 00:00:00 2001
From: Gandharv <gandharvkumargarg@gmail.com>
Date: Wed, 8 Dec 2021 13:12:47 +0530
Subject: [PATCH] Add embeddable share link (#1522)

* add embeddable share link

* use slug from props

* remove unwanted feature policies
---
 frontend/src/Editor/ManageAppUsers.jsx | 23 +++++++++++++++++++++++
 frontend/src/_ui/Textarea/index.js     |  4 ++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx
index 69219ccd13..32d57c055d 100644
--- a/frontend/src/Editor/ManageAppUsers.jsx
+++ b/frontend/src/Editor/ManageAppUsers.jsx
@@ -7,6 +7,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import 'react-toastify/dist/ReactToastify.css';
 import Skeleton from 'react-loading-skeleton';
 import { debounce } from 'lodash';
+import Textarea from '@/_ui/Textarea';
 
 class ManageAppUsers extends React.Component {
   constructor(props) {
@@ -134,6 +135,7 @@ class ManageAppUsers extends React.Component {
     const appLink = `${window.location.origin}/applications/`;
     const shareableLink = appLink + (this.props.slug || appId);
     const slugButtonClass = isSlugVerificationInProgress ? '' : slugError !== null ? 'is-invalid' : 'is-valid';
+    const embeddableLink = `<iframe width="560" height="315" src="${appLink}${this.props.slug}" title="Tooljet app - ${this.props.slug}" frameborder="0" allowfullscreen></iframe>`;
 
     return (
       <div>
@@ -220,6 +222,27 @@ class ManageAppUsers extends React.Component {
                   </div>
                 </div>
                 <hr />
+                <div className="shareable-link mb-3">
+                  <label className="form-label">
+                    <small>Get embeddable link for this application</small>
+                  </label>
+                  <div className="input-group">
+                    <Textarea disabled className="input-with-icon" rows={5} value={embeddableLink} />
+                    <span className="input-group-text">
+                      <CopyToClipboard
+                        text={embeddableLink}
+                        onCopy={() =>
+                          toast.success('Link copied to clipboard', {
+                            hideProgressBar: true,
+                            position: 'bottom-center',
+                          })
+                        }
+                      >
+                        <button className="btn btn-secondary btn-sm">Copy</button>
+                      </CopyToClipboard>
+                    </span>
+                  </div>
+                </div>
                 {/* <div className="add-user mb-3">
                   <div className="row">
                     <div className="col">
diff --git a/frontend/src/_ui/Textarea/index.js b/frontend/src/_ui/Textarea/index.js
index de4a96cf6e..bb1fec8a4e 100644
--- a/frontend/src/_ui/Textarea/index.js
+++ b/frontend/src/_ui/Textarea/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
-const Input = ({ helpText, ...props }) => (
+const Textarea = ({ helpText, ...props }) => (
   <>
     <textarea {...props} />
     {helpText && <small className="text-muted" dangerouslySetInnerHTML={{ __html: helpText }} />}
   </>
 );
 
-export default Input;
+export default Textarea;