SDA-4408: Rennovate about app again

spec/__snapshots__/aboutApp.spec.ts.snap

@@ -48,6 +48,7 @@ exports[`about app should render correctly 1`] = `
       <button
         className="AboutApp-close-button"
         data-testid="CLOSE_BUTTON"
+        disabled={false}
         onClick={[Function]}
         title="Close"
       >

spec/aboutApp.spec.ts

@@ -11,11 +11,11 @@ describe('about app', () => {
     userConfig: {},
     globalConfig: { isPodUrlEditable: true },
     cloudConfig: {},
-    finalConfig: {},
+    finalConfig: { url: 'abcxyz.symphony.com' },
     appName: 'Symphony',
     versionLocalised: 'Version',
     buildNumber: '4.x.x',
-    hostname: 'N/A',
+    hostname: 'abcxyz.symphony.com',
     sfeVersion: 'N/A',
     sfeClientType: '1.5',
     sdaVersion: '3.8.0',
@@ -34,7 +34,7 @@ describe('about app', () => {
   };
   const aboutDataMockState = {
     ...aboutDataMockClipboard,
-    updatedHostname: 'N/A',
+    updatedHostname: 'abcxyz.symphony.com',
   };
   const onLabelEvent = 'on';
   const ipcSendEvent = 'send';
@@ -153,7 +153,7 @@ describe('about app', () => {
     pod.simulate('click', { detail: 2 });
     pod.simulate('click', { detail: 3 });
     const podInput = wrapper.find('[data-testid="CANCEL_BUTTON"]');
-    podInput.simulate('click');
+    podInput.simulate('mousedown');
     expect(wrapper.find(`[data-testid="POD_INFO"]`).exists()).toEqual(true);
   });
 });

src/renderer/components/about-app.tsx

@@ -14,7 +14,7 @@ interface IState {
   userConfig: object;
   globalConfig: object;
   cloudConfig: object;
-  finalConfig: object;
+  finalConfig: IConfig;
   appName: string;
   copyWrite?: string;
   clientVersion: string;
@@ -41,7 +41,6 @@ interface IState {
   isPodEditing: boolean;
   isValidHostname: boolean;
   didUpdateHostname: boolean;
-  isEditMode?: boolean;
 }
 
 const ABOUT_SYMPHONY_NAMESPACE = 'AboutSymphony';
@@ -73,7 +72,7 @@ export default class AboutApp extends React.Component<{}, IState> {
       userConfig: {},
       globalConfig: {},
       cloudConfig: {},
-      finalConfig: {},
+      finalConfig: {} as IConfig,
       appName: 'Symphony',
       versionLocalised: 'Version',
       clientVersion: '',
@@ -98,7 +97,6 @@ export default class AboutApp extends React.Component<{}, IState> {
       isPodEditing: false,
       isValidHostname: true,
       didUpdateHostname: false,
-      isEditMode: false,
     };
     this.updateState = this.updateState.bind(this);
   }
@@ -149,7 +147,9 @@ export default class AboutApp extends React.Component<{}, IState> {
       },
     ];
     const closeButtonText =
-      isValidHostname && didUpdateHostname
+      isValidHostname &&
+      didUpdateHostname &&
+      !this.state.finalConfig.url.includes(this.state.updatedHostname ?? '')
         ? i18n.t('Save and Restart', ABOUT_SYMPHONY_NAMESPACE)()
         : i18n.t('Close', ABOUT_SYMPHONY_NAMESPACE)();
     const cancelText = i18n.t('Cancel', ABOUT_SYMPHONY_NAMESPACE)();
@@ -193,33 +193,27 @@ export default class AboutApp extends React.Component<{}, IState> {
             {this.state.isPodEditing && (
               <button
                 className='AboutApp-cancel-button'
-                onClick={this.eventHandlers.onCancel}
+                onMouseDown={this.eventHandlers.onCancel}
                 title={cancelText}
                 data-testid={'CANCEL_BUTTON'}
               >
                 {cancelText}
               </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>
-            )}
+            <button
+              className={
+                isValidHostname
+                  ? 'AboutApp-close-button'
+                  : 'AboutApp-close-button-disabled'
+              }
+              onClick={this.eventHandlers.onClose}
+              title={closeButtonText}
+              data-testid={'CLOSE_BUTTON'}
+              ref={this.closeButtonRef}
+              disabled={!isValidHostname}
+            >
+              {closeButtonText}
+            </button>
           </div>
         </div>
         <div className='AboutApp-version-container'>
@@ -257,7 +251,6 @@ 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,
@@ -286,7 +279,6 @@ export default class AboutApp extends React.Component<{}, IState> {
       isPodEditing: false,
       isValidHostname: true,
       hostname: this.previousUrl,
-      isEditMode: false,
     });
   }
 
@@ -299,7 +291,6 @@ export default class AboutApp extends React.Component<{}, IState> {
         isPodEditing: !!(this.state.globalConfig as IConfig)?.isPodUrlEditable,
         didUpdateHostname: !!(this.state.globalConfig as IConfig)
           ?.isPodUrlEditable,
-        isEditMode: true,
       });
     }
   }
@@ -310,7 +301,10 @@ export default class AboutApp extends React.Component<{}, IState> {
    */
   public handlePodChange = (e) => {
     const { value } = e.target;
-    this.setState({ updatedHostname: value });
+    this.setState({
+      updatedHostname: value,
+      isValidHostname: HOSTNAME_REGEX.test(value || ''),
+    });
   };
 
   /**
@@ -330,7 +324,6 @@ export default class AboutApp extends React.Component<{}, IState> {
         isPodEditing: false,
         isValidHostname: true,
         hostname: this.previousUrl,
-        isEditMode: false,
       });
     }
   };
@@ -340,17 +333,18 @@ export default class AboutApp extends React.Component<{}, IState> {
    */
   public handlePodInputBlur = (_event) => {
     const { updatedHostname, hostname } = this.state;
+    if (!this.state.isValidHostname) {
+      return;
+    }
     if (!HOSTNAME_REGEX.test(updatedHostname || '')) {
       this.setState({
         isPodEditing: false,
         isValidHostname: false,
-        isEditMode: false,
       });
     } else {
       this.setState({
         isPodEditing: false,
         isValidHostname: true,
-        isEditMode: false,
         hostname: updatedHostname || hostname,
       });
     }
@@ -404,6 +398,7 @@ 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 {
     }
   }
 
+  &-close-button-disabled {
+    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: @graphite-50;
+    color: @electricity-ui-05;
+    cursor: pointer;
+    box-sizing: border-box;
+    text-transform: uppercase;
+    font-weight: 600;
+    width: 100%;
+    height: 36px;
+
+    &:focus {
+      box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+      outline: none;
+    }
+  }
+
   &-save-button {
     box-shadow: none;
     border: none;