From 08694d7693b8c56c5f8d99e8e92b00ab14a71d3b Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 12 Jul 2021 12:24:04 +0200 Subject: [PATCH] Extracted update banner to a separated component --- package-lock.json | 84 +++++++++++++++------------------ package.json | 2 +- src/App.scss | 16 ------- src/App.tsx | 14 +----- src/common/AppUpdateBanner.scss | 17 +++++++ src/common/AppUpdateBanner.tsx | 16 +++++++ test/App.test.tsx | 4 +- 7 files changed, 75 insertions(+), 78 deletions(-) create mode 100644 src/common/AppUpdateBanner.scss create mode 100644 src/common/AppUpdateBanner.tsx diff --git a/package-lock.json b/package-lock.json index 2d73c4b3..e3daeb0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7609,9 +7609,9 @@ "dev": true }, "arch": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.2.tgz", - "integrity": "sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz", + "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==", "dev": true }, "arg": { @@ -10792,40 +10792,48 @@ "dev": true }, "clipboardy": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz", - "integrity": "sha512-2WNImOvCRe6r63Gk9pShfkwXsVtKCroMAevIbiae021mS850UkWPbevxsBz3tnvjZIEGvlwaqCPsw+4ulzNgJA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz", + "integrity": "sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==", "dev": true, "requires": { - "arch": "^2.1.0", - "execa": "^0.8.0" + "arch": "^2.1.1", + "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", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz", - "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", + "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", "dev": true, "requires": { - "cross-spawn": "^5.0.1", - "get-stream": "^3.0.0", + "cross-spawn": "^6.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", - "resolved": "https://registry.npmjs.org/serve/-/serve-11.3.2.tgz", - "integrity": "sha512-yKWQfI3xbj/f7X1lTBg91fXBP0FqjJ4TEi+ilES5yzH0iKJpN5LjNb1YzIfQg9Rqn4ECUS2SOf2+Kmepogoa5w==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/serve/-/serve-12.0.0.tgz", + "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", diff --git a/package.json b/package.json index a6c00e59..efe43b57 100644 --- a/package.json +++ b/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", diff --git a/src/App.scss b/src/App.scss index 0096d6e4..a6566e27 100644 --- a/src/App.scss +++ b/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); -} diff --git a/src/App.tsx b/src/App.tsx index f7343b53..57108ea0 100644 --- a/src/App.tsx +++ b/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 = ( - -

This app has just been updated!

-

Restart it to enjoy the new features.

- + ); }; diff --git a/src/common/AppUpdateBanner.scss b/src/common/AppUpdateBanner.scss new file mode 100644 index 00000000..7f6f833a --- /dev/null +++ b/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); +} diff --git a/src/common/AppUpdateBanner.tsx b/src/common/AppUpdateBanner.tsx new file mode 100644 index 00000000..be6b05cd --- /dev/null +++ b/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; +} + +export const AppUpdateBanner: FC = (props) => ( + +

This app has just been updated!

+

Restart it to enjoy the new features.

+ +); diff --git a/test/App.test.tsx b/test/App.test.tsx index 1607a7b4..2ce9c408 100644 --- a/test/App.test.tsx +++ b/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('', () => { let wrapper: ShallowWrapper; @@ -29,7 +29,7 @@ describe('', () => { 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);