From 065e1f6e167fabd7b1a7d5dca8e77ee1ecd18210 Mon Sep 17 00:00:00 2001 From: Riley Bauer <34456002+rileyjbauer@users.noreply.github.com> Date: Tue, 15 Jan 2019 11:39:01 -0800 Subject: [PATCH] Adds a link in the side nav to the KF 'usage-reporting' doc (#682) --- frontend/src/components/SideNav.tsx | 84 +++-- .../__snapshots__/SideNav.test.tsx.snap | 321 +++++++++++++++++- 2 files changed, 360 insertions(+), 45 deletions(-) diff --git a/frontend/src/components/SideNav.tsx b/frontend/src/components/SideNav.tsx index abd9d4ad504..68fc4736610 100644 --- a/frontend/src/components/SideNav.tsx +++ b/frontend/src/components/SideNav.tsx @@ -47,21 +47,10 @@ export const css = stylesheet({ backgroundColor: sideNavColors.hover + ' !important', color: sideNavColors.fgActive + ' !important', }, - buildHash: { - color: '#b7d1e8' - }, buildInfo: { color: sideNavColors.fgDefault, - marginBottom: 30, + marginBottom: 16, marginLeft: 30, - opacity: 'initial', - transition: 'opacity 0.2s', - transitionDelay: '0.3s', - }, - buildInfoHidden: { - opacity: 0, - transition: 'opacity 0s', - transitionDelay: '0s', }, button: { borderRadius: dimension.base / 2, @@ -103,7 +92,17 @@ export const css = stylesheet({ width: '72px !important', }, collapsedSeparator: { - margin: `20px !important`, + margin: '20px !important', + }, + infoHidden: { + opacity: 0, + transition: 'opacity 0s', + transitionDelay: '0s', + }, + infoVisible: { + opacity: 'initial', + transition: 'opacity 0.2s', + transitionDelay: '0.3s', }, label: { fontSize: fontsize.base, @@ -112,6 +111,9 @@ export const css = stylesheet({ transition: 'opacity 0.3s', verticalAlign: 'super', }, + link: { + color: '#b7d1e8' + }, logo: { display: 'flex', marginBottom: 16, @@ -126,14 +128,27 @@ export const css = stylesheet({ justifyContent: 'center', marginLeft: 12, }, - marginBottom8: { - marginBottom: 8, - }, openInNewTabIcon: { height: 12, + marginBottom: 8, marginLeft: 5, width: 12, }, + privacyInfo: { + color: sideNavColors.fgDefault, + marginBottom: 6, + marginLeft: 30, + }, + privacySeparator: { + background: sideNavColors.fgDefault, + borderRadius: 2, + display: 'inline-block', + height: 4, + marginBottom: 3, + marginLeft: 10, + marginRight: 10, + width: 4, + }, root: { background: sideNavColors.bg, paddingTop: 12, @@ -217,7 +232,7 @@ export default class SideNav extends React.Component public render(): JSX.Element { const page = this.props.page; - const { collapsed, displayBuildInfo} = this.state; + const { collapsed, displayBuildInfo } = this.state; const iconColor = { active: sideNavColors.fgActive, inactive: sideNavColors.fgDefault, @@ -271,7 +286,7 @@ export default class SideNav extends React.Component classes(css.button, collapsed && css.collapsedButton)}> Notebooks - + @@ -282,18 +297,27 @@ export default class SideNav extends React.Component - {displayBuildInfo && ( - - - - )} +
+
+ Privacy + + + Usage reporting + +
+ {displayBuildInfo && ( + + + + )} +
); } diff --git a/frontend/src/components/__snapshots__/SideNav.test.tsx.snap b/frontend/src/components/__snapshots__/SideNav.test.tsx.snap index 7a49f918a6a..84208d50377 100644 --- a/frontend/src/components/__snapshots__/SideNav.test.tsx.snap +++ b/frontend/src/components/__snapshots__/SideNav.test.tsx.snap @@ -128,7 +128,7 @@ exports[`SideNav populates the display build information using the response from Notebooks @@ -143,29 +143,47 @@ exports[`SideNav populates the display build information using the response from -
- Build commit: + Privacy + - 0a7b9e3 - + Usage reporting
- + +
+ + Build commit: + + + 0a7b9e3 + +
+ + `; @@ -276,6 +294,27 @@ exports[`SideNav renders Pipelines as active page 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -386,6 +425,27 @@ exports[`SideNav renders Pipelines as active when on PipelineDetails page 1`] = +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -496,6 +556,27 @@ exports[`SideNav renders collapsed state 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -606,6 +687,27 @@ exports[`SideNav renders expanded state 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -716,6 +818,27 @@ exports[`SideNav renders experiments as active page 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -826,6 +949,27 @@ exports[`SideNav renders experiments as active page when on AllRuns page 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -936,6 +1080,27 @@ exports[`SideNav renders experiments as active page when on Compare page 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -1046,6 +1211,27 @@ exports[`SideNav renders experiments as active page when on NewExperiment page 1 +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -1156,6 +1342,27 @@ exports[`SideNav renders experiments as active page when on NewRun page 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -1266,6 +1473,27 @@ exports[`SideNav renders experiments as active page when on RecurringRunDetails +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -1376,6 +1604,27 @@ exports[`SideNav renders experiments as active page when on RunDetails page 1`] +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -1486,6 +1735,27 @@ exports[`SideNav renders experiments as active when on ExperimentDetails page 1` +
+
+ + Privacy + + + + Usage reporting + +
+
`; @@ -1617,7 +1887,7 @@ exports[`SideNav show jupyterhub link if accessible 1`] = ` Notebooks @@ -1632,5 +1902,26 @@ exports[`SideNav show jupyterhub link if accessible 1`] = ` +
+
+ + Privacy + + + + Usage reporting + +
+
`;