Extracted update banner to a separated component

package-lock.json

@@ -7609,9 +7609,9 @@
       "dev": true
     },
     "arch": {
-      "version": "2.1.2",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
-      "integrity": "sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
       "dev": true
     },
     "arg": {
@@ -10792,40 +10792,48 @@
       "dev": true
     },
     "clipboardy": {
-      "version": "1.2.3",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
-      "integrity": "sha512-2WNImOvCRe6r63Gk9pShfkwXsVtKCroMAevIbiae021mS850UkWPbevxsBz3tnvjZIEGvlwaqCPsw+4ulzNgJA==",
+      "integrity": "sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==",
       "dev": true,
       "requires": {
-        "arch": "^2.1.0",
+        "arch": "^2.1.1",
-        "execa": "^0.8.0"
+        "execa": "^1.0.0",
+        "is-wsl": "^2.1.1"
       },
       "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
         "execa": {
-          "version": "0.8.0",
+          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-          "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
           "dev": true,
           "requires": {
-            "cross-spawn": "^5.0.1",
+            "cross-spawn": "^6.0.0",
-            "get-stream": "^3.0.0",
+            "get-stream": "^4.0.0",
             "is-stream": "^1.1.0",
             "npm-run-path": "^2.0.0",
             "p-finally": "^1.0.0",
             "signal-exit": "^3.0.0",
             "strip-eof": "^1.0.0"
           }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "dev": true,
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
         }
       }
     },
@@ -14252,12 +14260,6 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
-    "fast-deep-equal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
-    },
     "fast-glob": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
@@ -26161,34 +26163,22 @@
       }
     },
     "serve": {
-      "version": "11.3.2",
+      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/serve/-/serve-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-12.0.0.tgz",
-      "integrity": "sha512-yKWQfI3xbj/f7X1lTBg91fXBP0FqjJ4TEi+ilES5yzH0iKJpN5LjNb1YzIfQg9Rqn4ECUS2SOf2+Kmepogoa5w==",
+      "integrity": "sha512-BkTsETQYynAZ7rXX414kg4X6EvuZQS3UVs1NY0VQYdRHSTYWPYcH38nnDh48D0x6ONuislgjag8uKlU2gTBImA==",
       "dev": true,
       "requires": {
         "@zeit/schemas": "2.6.0",
-        "ajv": "6.5.3",
+        "ajv": "6.12.6",
         "arg": "2.0.0",
         "boxen": "1.3.0",
         "chalk": "2.4.1",
-        "clipboardy": "1.2.3",
+        "clipboardy": "2.3.0",
         "compression": "1.7.3",
         "serve-handler": "6.1.3",
         "update-check": "1.5.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "6.5.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz",
-          "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
         "chalk": {
           "version": "2.4.1",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",

package.json

@@ -130,7 +130,7 @@
     "resolve": "^1.19.0",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
-    "serve": "^11.3.2",
+    "serve": "^12.0.0",
     "stryker-cli": "^1.0.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.7.2",

src/App.scss

@@ -1,5 +1,4 @@
 @import './utils/base';
-@import './utils/mixins/horizontal-align';
 
 .app-container {
   height: 100%;
@@ -25,18 +24,3 @@
     padding: 0 15px;
   }
 }
-
-.app__update-banner.app__update-banner {
-  @include horizontal-align();
-
-  position: fixed;
-  top: $headerHeight - 25px;
-  padding: 0 4rem 0 0;
-  z-index: 1040;
-  margin: 0;
-  color: var(--text-color);
-  text-align: center;
-  width: 700px;
-  max-width: calc(100% - 30px);
-  box-shadow: 0 0 1rem var(--brand-color);
-}

src/App.tsx

@@ -1,11 +1,10 @@
 import { useEffect, FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { Alert } from 'reactstrap';
 import NotFound from './common/NotFound';
 import { ServersMap } from './servers/data';
 import { Settings } from './settings/reducers/settings';
 import { changeThemeInMarkup } from './utils/theme';
-import { SimpleCard } from './utils/SimpleCard';
+import { AppUpdateBanner } from './common/AppUpdateBanner';
 import './App.scss';
 
 interface AppProps {
@@ -55,16 +54,7 @@ const App = (
         </div>
       </div>
 
-      <Alert
+      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} />
-        className="app__update-banner"
-        tag={SimpleCard}
-        color="secondary"
-        isOpen={appUpdated}
-        toggle={resetAppUpdate}
-      >
-        <h4 className="mb-4">This app has just been updated!</h4>
-        <p className="mb-0">Restart it to enjoy the new features.</p>
-      </Alert>
     </div>
   );
 };

src/common/AppUpdateBanner.scss

@@ -0,0 +1,17 @@
+@import '../utils/base';
+@import '../utils/mixins/horizontal-align';
+
+.app-update-banner.app-update-banner {
+  @include horizontal-align();
+
+  position: fixed;
+  top: $headerHeight - 25px;
+  padding: 0 4rem 0 0;
+  z-index: 1040;
+  margin: 0;
+  color: var(--text-color);
+  text-align: center;
+  width: 700px;
+  max-width: calc(100% - 30px);
+  box-shadow: 0 0 1rem var(--brand-color);
+}

src/common/AppUpdateBanner.tsx

@@ -0,0 +1,16 @@
+import { FC, MouseEventHandler } from 'react';
+import { Alert } from 'reactstrap';
+import { SimpleCard } from '../utils/SimpleCard';
+import './AppUpdateBanner.scss';
+
+interface AppUpdateBannerProps {
+  isOpen: boolean;
+  toggle: MouseEventHandler<any>;
+}
+
+export const AppUpdateBanner: FC<AppUpdateBannerProps> = (props) => (
+  <Alert className="app-update-banner" {...props} tag={SimpleCard} color="secondary">
+    <h4 className="mb-4">This app has just been updated!</h4>
+    <p className="mb-0">Restart it to enjoy the new features.</p>
+  </Alert>
+);

test/App.test.tsx

@@ -1,9 +1,9 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Route } from 'react-router-dom';
 import { Mock } from 'ts-mockery';
-import { Alert } from 'reactstrap';
 import { Settings } from '../src/settings/reducers/settings';
 import appFactory from '../src/App';
+import { AppUpdateBanner } from '../src/common/AppUpdateBanner';
 
 describe('<App />', () => {
   let wrapper: ShallowWrapper;
@@ -29,7 +29,7 @@ describe('<App />', () => {
 
   it('renders versions', () => expect(wrapper.find(ShlinkVersions)).toHaveLength(1));
 
-  it('renders an Alert', () => expect(wrapper.find(Alert)).toHaveLength(1));
+  it('renders an update banner', () => expect(wrapper.find(AppUpdateBanner)).toHaveLength(1));
 
   it('renders app main routes', () => {
     const routes = wrapper.find(Route);