From 0dc3518793ca13b7e7ff8d9670be5ecb0774787b Mon Sep 17 00:00:00 2001
From: NguyenTranHoangSym
 <97150869+NguyenTranHoangSym@users.noreply.github.com>
Date: Fri, 29 Dec 2023 16:15:18 +0700
Subject: [PATCH] SDA-4430_4431: Adding final factor to fix About us (#2044)

---
 src/renderer/components/about-app.tsx |  43 ++++++---
 src/renderer/styles/about-app.less    | 125 +++++++++++++++-----------
 2 files changed, 106 insertions(+), 62 deletions(-)

diff --git a/src/renderer/components/about-app.tsx b/src/renderer/components/about-app.tsx
index 768cfadf..0341de70 100644
--- a/src/renderer/components/about-app.tsx
+++ b/src/renderer/components/about-app.tsx
@@ -113,7 +113,6 @@ export default class AboutApp extends React.Component<{}, IState> {
       sdaVersion,
       sdaBuildNumber,
       client,
-      didUpdateHostname,
       isValidHostname,
     } = this.state;
 
@@ -146,12 +145,17 @@ export default class AboutApp extends React.Component<{}, IState> {
         value: `${formattedSfeVersion} ${client}`,
       },
     ];
-    const closeButtonText =
-      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 finalConfig = this.state.finalConfig?.url
+      ?.replace(/https:\/\//g, '')
+      ?.split('/')[0];
+    const updatedHostname = this.state.updatedHostname
+      ?.replace(/https:\/\//g, '')
+      ?.split('/')[0];
+    const isHostNamechanged =
+      finalConfig && updatedHostname && finalConfig !== updatedHostname;
+    const closeButtonText = isHostNamechanged
+      ? i18n.t('Save and Restart', ABOUT_SYMPHONY_NAMESPACE)()
+      : i18n.t('Close', ABOUT_SYMPHONY_NAMESPACE)();
     const cancelText = i18n.t('Cancel', ABOUT_SYMPHONY_NAMESPACE)();
 
     return (
@@ -192,7 +196,11 @@ export default class AboutApp extends React.Component<{}, IState> {
           <div className='AboutApp-close-container'>
             {this.state.isPodEditing && (
               <button
-                className='AboutApp-cancel-button'
+                className={
+                  isHostNamechanged
+                    ? 'AboutApp-cancel-button-save-restart'
+                    : 'AboutApp-cancel-button'
+                }
                 onMouseDown={this.eventHandlers.onCancel}
                 title={cancelText}
                 data-testid={'CANCEL_BUTTON'}
@@ -202,9 +210,11 @@ export default class AboutApp extends React.Component<{}, IState> {
             )}
             <button
               className={
-                isValidHostname
-                  ? 'AboutApp-close-button'
-                  : 'AboutApp-close-button-disabled'
+                isHostNamechanged && isValidHostname
+                  ? 'AboutApp-button-save-restart'
+                  : !isValidHostname
+                  ? 'AboutApp-button-save-restart-disabled'
+                  : 'AboutApp-close-button'
               }
               onClick={this.eventHandlers.onClose}
               title={closeButtonText}
@@ -264,7 +274,16 @@ export default class AboutApp extends React.Component<{}, IState> {
    */
   public close(): void {
     const { isValidHostname, didUpdateHostname, hostname } = this.state;
-    if (isValidHostname && didUpdateHostname) {
+    const finalConfig = this.state.finalConfig?.url
+      .replace(/https:\/\//g, '')
+      ?.split('/')[0];
+    const updatedHostname = this.state.updatedHostname
+      ?.replace(/https:\/\//g, '')
+      ?.split('/')[0];
+    const compareHostName =
+      finalConfig && updatedHostname && finalConfig !== updatedHostname;
+
+    if (isValidHostname && didUpdateHostname && compareHostName) {
       ipcRenderer.send('user-pod-updated', hostname);
     }
     ipcRenderer.send('close-about-app');
diff --git a/src/renderer/styles/about-app.less b/src/renderer/styles/about-app.less
index 836fad9e..f0faafe3 100644
--- a/src/renderer/styles/about-app.less
+++ b/src/renderer/styles/about-app.less
@@ -179,55 +179,7 @@ body {
     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;
-    }
-  }
-
-  &-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;
-    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;
+    flex: 1;
     height: 36px;
 
     &:focus {
@@ -251,7 +203,7 @@ body {
     box-sizing: border-box;
     text-transform: uppercase;
     font-weight: 600;
-    width: 120px;
+    width: 50%;
     margin-right: 8px;
     height: 36px;
 
@@ -261,6 +213,79 @@ body {
     }
   }
 
+  &-cancel-button-save-restart {
+    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: 30%;
+    margin-right: 8px;
+    height: 36px;
+
+    &:focus {
+      box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+      outline: none;
+    }
+  }
+
+  &-button-save-restart {
+    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;
+    flex: 1;
+    height: 36px;
+
+    &:focus {
+      box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+      outline: none;
+    }
+  }
+
+  &-button-save-restart-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;
+    flex: 1;
+    height: 36px;
+
+    &:focus {
+      box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+      outline: none;
+    }
+  }
+
   &-version-container {
     width: 100%;
   }