Make update banner dismissable (#564)

- Remove the sticky option passed to InfoBar in AppUpdateInfoBar
- Use component state to manage visibility of AppUpdateInfoBar in AuthLayout and AppLayout.
- InfoBar will be dismissed only for the current session

Co-Authored-By: Mahadevan Sreenivasan <mahadevan_sv@yahoo.com>

Co-authored-by: Mahadevan Sreenivasan <mahadevan_sv@yahoo.com>

3 files changed, 19 insertions, 3 deletions

diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js
index 4108fdf12..f51fe029b 100644
--- a/src/components/AppUpdateInfoBar.js
+++ b/src/components/AppUpdateInfoBar.js
@@ -24,6 +24,7 @@ class AppUpdateInfoBar extends Component {
   static propTypes = {
     onInstallUpdate: PropTypes.func.isRequired,
     nextAppReleaseVersion: PropTypes.string,
+    onHide: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -39,6 +40,7 @@ class AppUpdateInfoBar extends Component {
     const {
       onInstallUpdate,
       nextAppReleaseVersion,
+      onHide,
     } = this.props;
 
     return (
@@ -46,7 +48,7 @@ class AppUpdateInfoBar extends Component {
         type="primary"
         ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
         onClick={onInstallUpdate}
-        sticky
+        onHide={onHide}
       >
         <span className="mdi mdi-information" />
         {intl.formatMessage(messages.updateAvailable)}
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 0c5198583..4783fc6a0 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -27,6 +27,10 @@ export default @observer class AuthLayout extends Component {
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
   };
 
+  state = {
+    shouldShowAppUpdateInfoBar: true,
+  }
+
   static defaultProps = {
     nextAppReleaseVersion: null,
   };
@@ -62,10 +66,13 @@ export default @observer class AuthLayout extends Component {
               {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
             </InfoBar>
           )}
-          {appUpdateIsDownloaded && (
+          {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
             <AppUpdateInfoBar
               nextAppReleaseVersion={nextAppReleaseVersion}
               onInstallUpdate={installAppUpdate}
+              onHide={() => {
+                this.setState({ shouldShowAppUpdateInfoBar: false });
+              }}
             />
           )}
           {isOnline && !isAPIHealthy && (
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index fe43c42d2..3b732e602 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -81,6 +81,10 @@ class AppLayout extends Component {
     hasActivatedTrial: PropTypes.bool.isRequired,
   };
 
+  state = {
+    shouldShowAppUpdateInfoBar: true,
+  }
+
   static defaultProps = {
     children: [],
     nextAppReleaseVersion: null,
@@ -181,10 +185,13 @@ class AppLayout extends Component {
                   {intl.formatMessage(messages.servicesUpdated)}
                 </InfoBar>
               )}
-              {appUpdateIsDownloaded && (
+              { appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
                 <AppUpdateInfoBar
                   nextAppReleaseVersion={nextAppReleaseVersion}
                   onInstallUpdate={installAppUpdate}
+                  onHide={() => {
+                    this.setState({ shouldShowAppUpdateInfoBar: false });
+                  }}
                 />
               )}
               <BasicAuth />