From f26ee59eb063a41ebe5977ab6bcb7b8f865d1e5f Mon Sep 17 00:00:00 2001
From: Ajith KV <ajith.jaban@gmail.com>
Date: Thu, 18 May 2023 13:00:05 +0530
Subject: [PATCH] Add data-cy for share app modal (#6460)

---
 frontend/src/Editor/ManageAppUsers.jsx | 27 ++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx
index 4fdd965aca..6cd2deff0f 100644
--- a/frontend/src/Editor/ManageAppUsers.jsx
+++ b/frontend/src/Editor/ManageAppUsers.jsx
@@ -148,6 +148,7 @@ class ManageAppUsersComponent extends React.Component {
           viewBox="0 0 33 33"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          data-cy="share-button-link"
         >
           <rect x="0.363281" y="0.220703" width="32" height="32" rx="6" fill="#F0F4FF" />
           <path
@@ -169,7 +170,7 @@ class ManageAppUsersComponent extends React.Component {
           contentClassName={this.props.darkMode ? 'theme-dark' : ''}
         >
           <Modal.Header>
-            <Modal.Title>{this.props.t('editor.share', 'Share')}</Modal.Title>
+            <Modal.Title data-cy="modal-header">{this.props.t('editor.share', 'Share')}</Modal.Title>
             <button className="btn-close" aria-label="Close" onClick={this.hideModal} data-cy="modal-close-button" />
           </Modal.Header>
           <Modal.Body>
@@ -187,20 +188,23 @@ class ManageAppUsersComponent extends React.Component {
                       onClick={this.toggleAppVisibility}
                       checked={this.state.app.is_public}
                       disabled={this.state.ischangingVisibility}
+                      data-cy="make-public-app-toggle"
                     />
-                    <span className="form-check-label">
+                    <span className="form-check-label" data-cy="make-public-app-label">
                       {this.props.t('editor.shareModal.makeApplicationPublic', 'Make application public?')}
                     </span>
                   </div>
                 </div>
                 <div className="shareable-link mb-3">
-                  <label className="form-label">
+                  <label className="form-label" data-cy="shareable-app-link-label">
                     <small>
                       {this.props.t('editor.shareModal.shareableLink', 'Get shareable link for this application')}
                     </small>
                   </label>
                   <div className="input-group">
-                    <span className="input-group-text">{appLink}</span>
+                    <span className="input-group-text" data-cy="app-link">
+                      {appLink}
+                    </span>
                     <div className="input-with-icon">
                       <input
                         type="text"
@@ -211,6 +215,7 @@ class ManageAppUsersComponent extends React.Component {
                           this.delayedSlugChange(e);
                         }}
                         defaultValue={this.props.slug}
+                        data-cy="app-name-slug-input"
                       />
                       {isSlugVerificationInProgress && (
                         <div className="icon-container">
@@ -220,7 +225,7 @@ class ManageAppUsersComponent extends React.Component {
                     </div>
                     <span className="input-group-text">
                       <CopyToClipboard text={shareableLink} onCopy={() => toast.success('Link copied to clipboard')}>
-                        <button className="btn btn-secondary btn-sm">
+                        <button className="btn btn-secondary btn-sm" data-cy="copy-app-link-button">
                           {this.props.t('editor.shareModal.copy', 'copy')}
                         </button>
                       </CopyToClipboard>
@@ -230,7 +235,7 @@ class ManageAppUsersComponent extends React.Component {
                 </div>
                 <hr />
                 <div className="shareable-link mb-3">
-                  <label className="form-label">
+                  <label className="form-label" data-cy="iframe-link-label">
                     <small>
                       {this.props.t('editor.shareModal.embeddableLink', 'Get embeddable link for this application')}
                     </small>
@@ -241,13 +246,14 @@ class ManageAppUsersComponent extends React.Component {
                       className={`input-with-icon ${this.props.darkMode && 'text-light'}`}
                       rows={5}
                       value={embeddableLink}
+                      data-cy="iframe-link"
                     />
                     <span className="input-group-text">
                       <CopyToClipboard
                         text={embeddableLink}
                         onCopy={() => toast.success('Embeddable link copied to clipboard')}
                       >
-                        <button className="btn btn-secondary btn-sm">
+                        <button className="btn btn-secondary btn-sm" data-cy="iframe-link-copy-button">
                           {this.props.t('editor.shareModal.copy', 'copy')}
                         </button>
                       </CopyToClipboard>
@@ -260,7 +266,12 @@ class ManageAppUsersComponent extends React.Component {
 
           <Modal.Footer>
             {this.isUserAdmin && (
-              <Link to={getPrivateRoute('workspace_settings')} target="_blank" className="btn color-primary mt-3">
+              <Link
+                to={getPrivateRoute('workspace_settings')}
+                target="_blank"
+                className="btn color-primary mt-3"
+                data-cy="manage-users-button"
+              >
                 Manage users
               </Link>
             )}