From 06c7b3a60e167640711691731666c39c6c72e794 Mon Sep 17 00:00:00 2001
From: Nikola Glumac <niglumac@gmail.com>
Date: Thu, 11 Jul 2019 10:35:42 +0200
Subject: [PATCH] [DDW-748] Ada redemption application menu item UX (#1458)

* [DDW-748] Add CHANGELOG entry

* [DDW-748] Disable 'Ada redemption' menu item if node is out of sync, Fix 'Daedalus diagnostics' dialog closing on ESC key after check-time is pressed, Minor styling fixes
---
 CHANGELOG.md                                  |  1 +
 source/main/menus/osx.js                      |  2 ++
 source/main/menus/win-linux.js                |  2 ++
 source/main/utils/buildAppMenus.js            | 14 ++++++--
 .../components/status/DaedalusDiagnostics.js  | 32 +++++++++++++------
 .../status/DaedalusDiagnostics.scss           | 14 +++++---
 .../renderer/app/stores/NetworkStatusStore.js |  5 +++
 7 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aeed819721..936f5471a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,6 +53,7 @@ Changelog
 
 ### Chores
 
+- Improved the "Ada redemption" menu item UX by disabling the option while Daedalus is out of sync ([PR 1458](https://github.com/input-output-hk/daedalus/pull/1458))
 - Added `themes:check` script for checking missing definitions on createTheme object ([PR 1424](https://github.com/input-output-hk/daedalus/pull/1424))
 - Refactored the Loading screen, adding containers for each overlay ([PR 1446](https://github.com/input-output-hk/daedalus/pull/1446))
 - Added button to open local state directory on Daedalus Diagnostics Screen ([PR 1438](https://github.com/input-output-hk/daedalus/pull/1438))
diff --git a/source/main/menus/osx.js b/source/main/menus/osx.js
index 7f03bc8607..54bf2d3ee3 100644
--- a/source/main/menus/osx.js
+++ b/source/main/menus/osx.js
@@ -18,6 +18,7 @@ export const osxMenu = (
   actions: MenuActions,
   translations: {},
   supportRequestData: SupportRequests,
+  isNodeInSync: boolean,
   translation: Function = getTranslation(translations, id)
 ) => [
   {
@@ -31,6 +32,7 @@ export const osxMenu = (
       },
       {
         label: translation('daedalus.adaRedemption'),
+        enabled: isNodeInSync,
         click() {
           actions.openAdaRedemptionScreen();
         },
diff --git a/source/main/menus/win-linux.js b/source/main/menus/win-linux.js
index 5e7d95e24b..cb0ca80026 100644
--- a/source/main/menus/win-linux.js
+++ b/source/main/menus/win-linux.js
@@ -18,6 +18,7 @@ export const winLinuxMenu = (
   actions: MenuActions,
   translations: {},
   supportRequestData: SupportRequests,
+  isNodeInSync: boolean,
   translation: Function = getTranslation(translations, id)
 ) => [
   {
@@ -31,6 +32,7 @@ export const winLinuxMenu = (
       },
       {
         label: translation('daedalus.adaRedemption'),
+        enabled: isNodeInSync,
         click() {
           actions.openAdaRedemptionScreen();
         },
diff --git a/source/main/utils/buildAppMenus.js b/source/main/utils/buildAppMenus.js
index 9aa30f1242..f46a864f8c 100644
--- a/source/main/utils/buildAppMenus.js
+++ b/source/main/utils/buildAppMenus.js
@@ -1,5 +1,6 @@
 // @flow
 import { app, globalShortcut, Menu, BrowserWindow } from 'electron';
+import { get } from 'lodash';
 import { environment } from '../environment';
 import { winLinuxMenu } from '../menus/win-linux';
 import { osxMenu } from '../menus/osx';
@@ -92,9 +93,17 @@ export const buildAppMenus = async (
 
   // Build app menus
   let menu;
+  const isNodeInSync = get(cardanoNode, 'status.isNodeInSync', false);
   if (isMacOS) {
     menu = Menu.buildFromTemplate(
-      osxMenu(app, mainWindow, menuActions, translations, supportRequestData)
+      osxMenu(
+        app,
+        mainWindow,
+        menuActions,
+        translations,
+        supportRequestData,
+        isNodeInSync
+      )
     );
     Menu.setApplicationMenu(menu);
   } else {
@@ -104,7 +113,8 @@ export const buildAppMenus = async (
         mainWindow,
         menuActions,
         translations,
-        supportRequestData
+        supportRequestData,
+        isNodeInSync
       )
     );
     mainWindow.setMenu(menu);
diff --git a/source/renderer/app/components/status/DaedalusDiagnostics.js b/source/renderer/app/components/status/DaedalusDiagnostics.js
index 3c220c79ca..3b67ed0392 100644
--- a/source/renderer/app/components/status/DaedalusDiagnostics.js
+++ b/source/renderer/app/components/status/DaedalusDiagnostics.js
@@ -482,7 +482,6 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
       networkBlockHeight,
       latestLocalBlockTimestamp,
       latestNetworkBlockTimestamp,
-      onForceCheckLocalTimeDifference,
       onOpenStateDirectory,
       onClose,
       onCopyStateDirectoryPath,
@@ -578,8 +577,8 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
           <table className={styles.table}>
             <tbody>
               <tr>
-                <th colSpan={2}>
-                  {intl.formatMessage(messages.systemInfo)}
+                <th className={styles.sectionTitle} colSpan={2}>
+                  <span>{intl.formatMessage(messages.systemInfo)}</span>
                   <hr />
                 </th>
               </tr>
@@ -608,8 +607,8 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
             </tbody>
             <tbody>
               <tr>
-                <th colSpan={2}>
-                  {intl.formatMessage(messages.coreInfo)}
+                <th className={styles.sectionTitle} colSpan={2}>
+                  <span>{intl.formatMessage(messages.coreInfo)}</span>
                   <hr />
                 </th>
               </tr>
@@ -701,8 +700,8 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
           <table className={styles.table}>
             <tbody>
               <tr>
-                <th colSpan={2}>
-                  {intl.formatMessage(messages.daedalusStatus)}
+                <th className={styles.sectionTitle} colSpan={2}>
+                  <span>{intl.formatMessage(messages.daedalusStatus)}</span>
                   <hr />
                 </th>
               </tr>
@@ -760,7 +759,7 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
                 <th>{intl.formatMessage(messages.localTimeDifference)}:</th>
                 <td className={styles.localTimeDifferenceItem}>
                   <button
-                    onClick={() => onForceCheckLocalTimeDifference()}
+                    onClick={() => this.checkTime()}
                     disabled={isForceCheckingNodeTime || !isConnected}
                   >
                     {isForceCheckingNodeTime
@@ -803,8 +802,8 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
             </tbody>
             <tbody>
               <tr>
-                <th colSpan={2}>
-                  {intl.formatMessage(messages.cardanoNodeStatus)}
+                <th className={styles.sectionTitle} colSpan={2}>
+                  <span>{intl.formatMessage(messages.cardanoNodeStatus)}</span>
                   <button
                     className={styles.statusBtn}
                     onClick={() => this.restartNode()}
@@ -937,9 +936,22 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
     return localisationKey;
   };
 
+  restoreDialogCloseOnEscKey = () => {
+    // This method is to be used on buttons which get disabled after click
+    // as without it the ReactModal is not closing if you press the ESC key
+    // even after the button is later re-enabled
+    document.getElementsByClassName('ReactModal__Content')[0].focus();
+  };
+
+  checkTime = () => {
+    this.props.onForceCheckLocalTimeDifference();
+    this.restoreDialogCloseOnEscKey();
+  };
+
   restartNode = () => {
     this.setState({ isNodeRestarting: true });
     this.props.onRestartNode.trigger();
+    this.restoreDialogCloseOnEscKey();
   };
 
   getClass = (isTrue: boolean) =>
diff --git a/source/renderer/app/components/status/DaedalusDiagnostics.scss b/source/renderer/app/components/status/DaedalusDiagnostics.scss
index b63e8bd9df..d1d3ea3049 100644
--- a/source/renderer/app/components/status/DaedalusDiagnostics.scss
+++ b/source/renderer/app/components/status/DaedalusDiagnostics.scss
@@ -83,7 +83,6 @@
     font-weight: normal;
     line-height: 2;
     letter-spacing: normal;
-    opacity: 0.7;
 
     .safeMode {
       max-width: 100px;
@@ -91,11 +90,19 @@
   }
 
   th {
+    opacity: 0.7;
     white-space: nowrap;
+
+    &.sectionTitle {
+      opacity: 1;
+
+      *:not(button) {
+        opacity: 0.7;
+      }
+    }
   }
 
   td {
-    opacity: 1;
     text-align: right;
     user-select: text;
 
@@ -300,8 +307,7 @@
     }
 
     &.stateDirectoryOpenBtn {
-      margin: 4px 16px 0 0;
-      padding-top: 0;
+      margin-right: 16px;
     }
   }
 
diff --git a/source/renderer/app/stores/NetworkStatusStore.js b/source/renderer/app/stores/NetworkStatusStore.js
index 6bc9a4cf07..63086f6d71 100644
--- a/source/renderer/app/stores/NetworkStatusStore.js
+++ b/source/renderer/app/stores/NetworkStatusStore.js
@@ -33,6 +33,7 @@ import type { NodeInfoQueryParams } from '../api/nodes/requests/getNodeInfo';
 import type { CheckDiskSpaceResponse } from '../../../common/types/no-disk-space.types';
 import { TlsCertificateNotValidError } from '../api/nodes/errors';
 import { openLocalDirectoryChannel } from '../ipc/open-local-directory';
+import { rebuildApplicationMenu } from '../ipc/rebuild-application-menu';
 
 // DEFINE CONSTANTS -------------------------
 const NETWORK_STATUS = {
@@ -192,6 +193,10 @@ export default class NetworkStatusStore extends Store {
     try {
       Logger.info('NetworkStatusStore: Updating node status');
       await setCachedCardanoStatusChannel.send(this._extractNodeStatus(this));
+      // Force application menu rebuild in order to disable/enable
+      // "Ada redemption" option based on isNodeInSync variable value
+      // which was sent to the main process via setCachedCardanoStatusChannel
+      await rebuildApplicationMenu.send();
     } catch (error) {
       Logger.error('NetworkStatusStore: Error while updating node status', {
         error,