Merge pull request #2028 from NguyenTranHoangSym/SDA-4369

SDA-4369: PoC Revamp About App Edit

src/locale/en-US.json

@@ -11,6 +11,7 @@
     "Copyright": "Copyright",
     "Desktop Application": "Desktop Application",
     "Save and Restart": "Save and Restart",
+    "Save": "Save",
     "Cancel": "Cancel"
   },
   "Actual Size": "Actual Size",

src/renderer/components/about-app.tsx

@@ -41,6 +41,7 @@ interface IState {
   isPodEditing: boolean;
   isValidHostname: boolean;
   didUpdateHostname: boolean;
+  isEditMode?: boolean;
 }
 
 const ABOUT_SYMPHONY_NAMESPACE = 'AboutSymphony';
@@ -97,6 +98,7 @@ export default class AboutApp extends React.Component<{}, IState> {
       isPodEditing: false,
       isValidHostname: true,
       didUpdateHostname: false,
+      isEditMode: false,
     };
     this.updateState = this.updateState.bind(this);
   }
@@ -198,15 +200,26 @@ export default class AboutApp extends React.Component<{}, IState> {
                 {cancelText}
               </button>
             )}
-            <button
-              className='AboutApp-close-button'
-              onClick={this.eventHandlers.onClose}
-              title={closeButtonText}
-              data-testid={'CLOSE_BUTTON'}
-              ref={this.closeButtonRef}
-            >
-              {closeButtonText}
-            </button>
+            {this.state.isEditMode ? (
+              <button
+                className='AboutApp-save-button'
+                onClick={this.eventHandlers.onPodInputBlur}
+                title={i18n.t('Save', ABOUT_SYMPHONY_NAMESPACE)()}
+                data-testid={'SAVE_BUTTON'}
+              >
+                {i18n.t('Save', ABOUT_SYMPHONY_NAMESPACE)()}
+              </button>
+            ) : (
+              <button
+                className='AboutApp-close-button'
+                onClick={this.eventHandlers.onClose}
+                title={closeButtonText}
+                data-testid={'CLOSE_BUTTON'}
+                ref={this.closeButtonRef}
+              >
+                {closeButtonText}
+              </button>
+            )}
           </div>
         </div>
         <div className='AboutApp-version-container'>
@@ -244,6 +257,7 @@ export default class AboutApp extends React.Component<{}, IState> {
     };
     if (data) {
       delete data.updatedHostname;
+      delete data.isEditMode;
       ipcRenderer.send(apiName.symphonyApi, {
         cmd: apiCmds.aboutAppClipBoardData,
         clipboard: data,
@@ -272,6 +286,7 @@ export default class AboutApp extends React.Component<{}, IState> {
       isPodEditing: false,
       isValidHostname: true,
       hostname: this.previousUrl,
+      isEditMode: false,
     });
   }
 
@@ -284,6 +299,7 @@ export default class AboutApp extends React.Component<{}, IState> {
         isPodEditing: !!(this.state.globalConfig as IConfig)?.isPodUrlEditable,
         didUpdateHostname: !!(this.state.globalConfig as IConfig)
           ?.isPodUrlEditable,
+        isEditMode: true,
       });
     }
   }
@@ -314,6 +330,7 @@ export default class AboutApp extends React.Component<{}, IState> {
         isPodEditing: false,
         isValidHostname: true,
         hostname: this.previousUrl,
+        isEditMode: false,
       });
     }
   };
@@ -327,11 +344,13 @@ export default class AboutApp extends React.Component<{}, IState> {
       this.setState({
         isPodEditing: false,
         isValidHostname: false,
+        isEditMode: false,
       });
     } else {
       this.setState({
         isPodEditing: false,
         isValidHostname: true,
+        isEditMode: false,
         hostname: updatedHostname || hostname,
       });
     }
@@ -385,7 +404,6 @@ export default class AboutApp extends React.Component<{}, IState> {
             value={updatedHostname}
             onKeyDown={this.onKeyDown}
             onChange={this.handlePodChange}
-            onBlur={this.handlePodInputBlur}
             autoFocus
           />
         ) : (

src/renderer/styles/about-app.less

@@ -188,6 +188,30 @@ body {
     }
   }
 
+  &-save-button {
+    box-shadow: none;
+    border: none;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    text-align: center;
+    display: inline-block;
+    text-decoration: none;
+    line-height: 12px;
+    background-color: @electricity-ui-50;
+    color: @electricity-ui-05;
+    cursor: pointer;
+    box-sizing: border-box;
+    text-transform: uppercase;
+    font-weight: 600;
+    width: 120px;
+    height: 36px;
+
+    &:focus {
+      box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+      outline: none;
+    }
+  }
+
   &-cancel-button {
     box-shadow: none;
     border: none;