feat(ui): Display version on login page

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
 

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<Props> {
             <Support />
           </Panel.Body>
           <Panel.Footer>
-            <p>
-              Version {VERSION}{' '}
-              {GIT_SHA && <code>({GIT_SHA.slice(0, 7)})</code>}
-            </p>
+            <VersionInfo />
           </Panel.Footer>
         </Panel>
       </>

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<WithRouterProps, State> {
             <SplashPage.Header title="InfluxData" />
             <SigninForm />
           </SplashPage.Panel>
+          <VersionInfo widthPixels={300} />
         </SplashPage>
       </SpinnerContainer>
     )

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%);
+}

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(<VersionInfo {...props} />)
+
+  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()
+    })
+  })
+})

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<Props> {
+  public render() {
+    return (
+      <div className="version-info" style={this.style}>
+        <p>
+          Version {VERSION} {GIT_SHA && <code>({GIT_SHA.slice(0, 7)})</code>}
+        </p>
+      </div>
+    )
+  }
+
+  private get style() {
+    if (this.props.widthPixels) {
+      return {width: `${this.props.widthPixels}px`}
+    }
+  }
+}
+
+export default VersionInfo

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`] = `
+<div
+  className="version-info"
+>
+  <p>
+    Version 
+    2.0.0
+
+  </p>
+</div>
+`;
+
+exports[`VersionInfo when width is specified renders corectly 1`] = `
+<div
+  className="version-info"
+  style={
+    Object {
+      "width": "300px",
+    }
+  }
+>
+  <p>
+    Version 
+    2.0.0
+
+  </p>
+</div>
+`;

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 {