Add embeddable share link (#1522)

* add embeddable share link

* use slug from props

* remove unwanted feature policies

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">

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;