From 988dda23984894cea097d64646196e8d6196d6b6 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Wed, 20 Feb 2019 11:21:55 -0800 Subject: [PATCH] feat(ui): Display version on login page --- CHANGELOG.md | 1 + ui/src/me/components/Resources.tsx | 9 ++--- ui/src/onboarding/containers/SigninPage.tsx | 2 ++ ui/src/shared/components/VersionInfo.scss | 12 +++++++ ui/src/shared/components/VersionInfo.test.tsx | 34 +++++++++++++++++++ ui/src/shared/components/VersionInfo.tsx | 32 +++++++++++++++++ .../__snapshots__/VersionInfo.test.tsx.snap | 30 ++++++++++++++++ .../components/splash_page/SplashPage.scss | 8 ++++- 8 files changed, 120 insertions(+), 8 deletions(-) create mode 100644 ui/src/shared/components/VersionInfo.scss create mode 100644 ui/src/shared/components/VersionInfo.test.tsx create mode 100644 ui/src/shared/components/VersionInfo.tsx create mode 100644 ui/src/shared/components/__snapshots__/VersionInfo.test.tsx.snap diff --git a/CHANGELOG.md b/CHANGELOG.md index b178de3ef5c..a655b2e5327 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ### Features 1. [11954](https://github.com/influxdata/influxdb/pull/11954): Add the ability to run a task manually from tasks page 1. [11990](https://github.com/influxdata/influxdb/pull/11990): Add the ability to select a custom time range in explorer and dashboard +1. [12009](https://github.com/influxdata/influxdb/pull/12009): Display the version information on the login page ### Bug Fixes diff --git a/ui/src/me/components/Resources.tsx b/ui/src/me/components/Resources.tsx index 15b210a295f..c32a53c1f6d 100644 --- a/ui/src/me/components/Resources.tsx +++ b/ui/src/me/components/Resources.tsx @@ -9,9 +9,7 @@ import OrgsList from 'src/me/components/OrgsList' import DashboardsList from 'src/me/components/DashboardsList' import ResourceFetcher from 'src/shared/components/resource_fetcher' import {Panel, SpinnerContainer, TechnoSpinner} from 'src/clockface' - -// Constants -import {VERSION, GIT_SHA} from 'src/shared/constants' +import VersionInfo from 'src/shared/components/VersionInfo' // APIs import {getDashboards} from 'src/organizations/apis' @@ -82,10 +80,7 @@ class ResourceLists extends PureComponent { -

- Version {VERSION}{' '} - {GIT_SHA && ({GIT_SHA.slice(0, 7)})} -

+ diff --git a/ui/src/onboarding/containers/SigninPage.tsx b/ui/src/onboarding/containers/SigninPage.tsx index 4a0e5dc9e78..899ee1c9e3a 100644 --- a/ui/src/onboarding/containers/SigninPage.tsx +++ b/ui/src/onboarding/containers/SigninPage.tsx @@ -13,6 +13,7 @@ import SigninForm from 'src/onboarding/components/SigninForm' import {SpinnerContainer, TechnoSpinner} from 'src/clockface' import {RemoteDataState} from 'src/types' import Notifications from 'src/shared/components/notifications/Notifications' +import VersionInfo from 'src/shared/components/VersionInfo' interface State { status: RemoteDataState @@ -50,6 +51,7 @@ class SigninPage extends PureComponent { + ) diff --git a/ui/src/shared/components/VersionInfo.scss b/ui/src/shared/components/VersionInfo.scss new file mode 100644 index 00000000000..3e3e56228b6 --- /dev/null +++ b/ui/src/shared/components/VersionInfo.scss @@ -0,0 +1,12 @@ +/* + VersionInfo + ----------------------------------------------------------------------------- +*/ + +@import 'src/style/modules'; + +.version-info { + border-radius: 0 0 $ix-radius $ix-radius; + color: $g9-mountain; + background-color: mix($g3-castle, $g2-kevlar, 50%); +} \ No newline at end of file diff --git a/ui/src/shared/components/VersionInfo.test.tsx b/ui/src/shared/components/VersionInfo.test.tsx new file mode 100644 index 00000000000..89a6f23c866 --- /dev/null +++ b/ui/src/shared/components/VersionInfo.test.tsx @@ -0,0 +1,34 @@ +// Libraries +import React from 'react' +import {shallow} from 'enzyme' + +// Components +import VersionInfo from 'src/shared/components/VersionInfo' + +const setup = (override = {}) => { + const props = { + ...override, + } + + const wrapper = shallow() + + return {wrapper} +} + +describe('VersionInfo', () => { + it('renders correctly', () => { + const {wrapper} = setup() + + expect(wrapper.exists()).toBe(true) + expect(wrapper).toMatchSnapshot() + }) + + describe('when width is specified', () => { + it('renders corectly', () => { + const {wrapper} = setup({widthPixels: 300}) + + expect(wrapper.exists()).toBe(true) + expect(wrapper).toMatchSnapshot() + }) + }) +}) diff --git a/ui/src/shared/components/VersionInfo.tsx b/ui/src/shared/components/VersionInfo.tsx new file mode 100644 index 00000000000..9a1818c59b4 --- /dev/null +++ b/ui/src/shared/components/VersionInfo.tsx @@ -0,0 +1,32 @@ +// Libraries +import React, {PureComponent} from 'react' + +// Constants +import {VERSION, GIT_SHA} from 'src/shared/constants' + +// Styles +import 'src/shared/components/VersionInfo.scss' + +interface Props { + widthPixels?: number +} + +class VersionInfo extends PureComponent { + public render() { + return ( +
+

+ Version {VERSION} {GIT_SHA && ({GIT_SHA.slice(0, 7)})} +

+
+ ) + } + + private get style() { + if (this.props.widthPixels) { + return {width: `${this.props.widthPixels}px`} + } + } +} + +export default VersionInfo diff --git a/ui/src/shared/components/__snapshots__/VersionInfo.test.tsx.snap b/ui/src/shared/components/__snapshots__/VersionInfo.test.tsx.snap new file mode 100644 index 00000000000..32814915bda --- /dev/null +++ b/ui/src/shared/components/__snapshots__/VersionInfo.test.tsx.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VersionInfo renders correctly 1`] = ` +
+

+ Version + 2.0.0 + +

+
+`; + +exports[`VersionInfo when width is specified renders corectly 1`] = ` +
+

+ Version + 2.0.0 + +

+
+`; diff --git a/ui/src/shared/components/splash_page/SplashPage.scss b/ui/src/shared/components/splash_page/SplashPage.scss index 3f8459c8aca..197051e56fb 100644 --- a/ui/src/shared/components/splash_page/SplashPage.scss +++ b/ui/src/shared/components/splash_page/SplashPage.scss @@ -12,6 +12,11 @@ @include custom-scrollbar($g3-castle, $c-pool); @include gradient-v($g3-castle, $g0-obsidian); padding: $sidebar--width; + + .version-info { + text-align: center; + padding: $ix-marg-b $ix-marg-b * 2; + } } .auth-image { @@ -190,10 +195,11 @@ .auth-panel { - border-radius: $radius; + border-radius: $radius $radius 0 0; background-color: $g3-castle; padding: 32px; text-align: center; + } .auth-heading {