diff --git a/frontend/server/package-lock.json b/frontend/server/package-lock.json index a1f113c9ab9..2e0e25e2577 100644 --- a/frontend/server/package-lock.json +++ b/frontend/server/package-lock.json @@ -229,7 +229,7 @@ }, "@types/websocket": { "version": "0.0.38", - "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-0.0.38.tgz", + "resolved": "http://registry.npmjs.org/@types/websocket/-/websocket-0.0.38.tgz", "integrity": "sha512-Z7dRTAiMoIjz9HBa/xb3k+2mx2uJx2sbnbkRRIvM+l/srNLfthHFBW/jD59thOcEa1/ZooKd30G0D+KGH9wU7Q==", "requires": { "@types/events": "*", @@ -601,7 +601,7 @@ }, "colors": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz", + "resolved": "http://registry.npmjs.org/colors/-/colors-0.5.1.tgz", "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=" }, "combined-stream": { @@ -2107,7 +2107,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-parse": { diff --git a/frontend/src/components/Toolbar.test.tsx b/frontend/src/components/Toolbar.test.tsx index 55131ab6d9b..db270da4b5b 100644 --- a/frontend/src/components/Toolbar.test.tsx +++ b/frontend/src/components/Toolbar.test.tsx @@ -16,7 +16,7 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import { createBrowserHistory } from 'history'; +import { createBrowserHistory, createMemoryHistory } from 'history'; import Toolbar from './Toolbar'; import HelpIcon from '@material-ui/icons/Help'; import InfoIcon from '@material-ui/icons/Info'; @@ -57,6 +57,10 @@ const breadcrumbs = [ const history = createBrowserHistory({}); describe('Toolbar', () => { + beforeAll(() => { + history.push('/pipelines'); + }); + it('renders nothing when there are no breadcrumbs or actions', () => { const tree = shallow(); expect(tree).toMatchSnapshot(); @@ -154,4 +158,12 @@ describe('Toolbar', () => { history={history} />); expect(tree).toMatchSnapshot(); }); + + it('disables the back button when there is no browser history', () => { + // This test uses createMemoryHistory because createBroweserHistory returns a singleton, and + // there is no way to clear its entries which this test requires. + const emptyHistory = createMemoryHistory(); + const tree = shallow(); + expect(tree).toMatchSnapshot(); + }); }); diff --git a/frontend/src/components/Toolbar.tsx b/frontend/src/components/Toolbar.tsx index 874976da141..903085b8355 100644 --- a/frontend/src/components/Toolbar.tsx +++ b/frontend/src/components/Toolbar.tsx @@ -51,7 +51,6 @@ const css = stylesheet({ marginRight: spacing.units(-2), }, backIcon: { - color: color.foreground, fontSize: backIconHeight, verticalAlign: 'bottom', }, @@ -70,6 +69,12 @@ const css = stylesheet({ chevron: { height: 12, }, + disabled: { + color: '#aaa', + }, + enabled: { + color: color.foreground, + }, link: { $nest: { '&:hover': { @@ -136,11 +141,14 @@ class Toolbar extends React.Component { {/* Back Arrow */} {breadcrumbs.length > 0 && - - - +
{/* Div needed because we sometimes disable a button within a tooltip */} + + + +
} {/* Resource Name */} diff --git a/frontend/src/components/__snapshots__/Toolbar.test.tsx.snap b/frontend/src/components/__snapshots__/Toolbar.test.tsx.snap index 1bfd6084169..fa72b643e00 100644 --- a/frontend/src/components/__snapshots__/Toolbar.test.tsx.snap +++ b/frontend/src/components/__snapshots__/Toolbar.test.tsx.snap @@ -1,5 +1,124 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Toolbar disables the back button when there is no browser history 1`] = ` +
+
+
+ + + test display name + + + + + + test display name2 + + +
+
+ +
+ + + + +
+
+ +
+
+
+ +
+ +
+
+ +
+ +
+
+
+
+`; + exports[`Toolbar renders nothing when there are no breadcrumbs or actions 1`] = `""`; exports[`Toolbar renders outlined action buttons 1`] = ` @@ -53,14 +172,18 @@ exports[`Toolbar renders outlined action buttons 1`] = ` enterDelay={300} title="Back" > - - - +
+ + + + +
- - - +
+ + + + +
- - - +
+ + + + +
- - - +
+ + + + +
- - - +
+ + + + +
- - - +
+ + + + +