Skip to content

Commit

Permalink
web: show button to trigger update [ch2697] (#1738)
Browse files Browse the repository at this point in the history
  • Loading branch information
hyu authored and Dan Miller committed Jun 12, 2019
1 parent 54c17a6 commit 737ba0c
Show file tree
Hide file tree
Showing 9 changed files with 252 additions and 2 deletions.
1 change: 1 addition & 0 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"enzyme-to-json": "^3.3.5",
"jest-fetch-mock": "^2.1.2",
"prettier": "1.16.4"
},
"engines": {
Expand Down
10 changes: 9 additions & 1 deletion web/src/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import PathBuilder from "./PathBuilder"
import { timeAgoFormatter } from "./timeFormatters"
import { AlertResource } from "./AlertPane"
import SidebarIcon from "./SidebarIcon"
import SidebarTriggerButton from "./SidebarTriggerButton"
import { ReactComponent as triggerButton } from "./assets/svg/trigger.svg"

class SidebarItem {
name: string
Expand Down Expand Up @@ -96,13 +98,14 @@ class Sidebar extends PureComponent<SidebarProps> {
let hasBuilt = !isZeroTime(item.lastDeployTime)
let building = !isZeroTime(item.currentBuildStartTime)
let timeAgo = <TimeAgo date={item.lastDeployTime} formatter={formatter} />
let isSelected = this.props.selected === item.name

let classes = "resLink"
if (building) {
classes += " resLink--building"
}

if (this.props.selected === item.name) {
if (isSelected) {
classes += " is-selected"
}
return (
Expand All @@ -115,6 +118,11 @@ class Sidebar extends PureComponent<SidebarProps> {
hasWarning={item.hasWarnings}
isBuilding={building}
/>
<SidebarTriggerButton
isSelected={isSelected}
resourceName={item.name}
triggerMode={item.triggerMode}
/>
</div>
<span className="resLink-name">{item.name}</span>
{item.numberOfAlerts() > 0 ? (
Expand Down
23 changes: 23 additions & 0 deletions web/src/SidebarTriggerButton.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@import "constants";

.SidebarTriggerButton {
position: absolute;
background-color: transparent;
border: 0 none;
height: $sidebar-item;
width: $sidebar-item;
display: flex;
align-items: center;
justify-content: center;
fill: $color-white;
opacity: $translucent-ish;
cursor: pointer;
}

.SidebarTriggerButton.isSelected {
fill: $color-gray-dark;
}

.SidebarTriggerButton:hover {
opacity: 1;
}
33 changes: 33 additions & 0 deletions web/src/SidebarTriggerButton.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from "react"
import { mount } from "enzyme"
import SidebarTriggerButton from "./SidebarTriggerButton"
import { TriggerMode } from "./types"

describe("SidebarTriggerButtoon", () => {
beforeEach(() => {
fetchMock.resetMocks()
})

it("POSTs to endpoint when clicked", () => {
fetchMock.mockResponse(JSON.stringify({}))

const root = mount(
<SidebarTriggerButton
isSelected={true}
resourceName="doggos"
triggerMode={TriggerMode.TriggerModeManual}
/>
)

let element = root.find(".SidebarTriggerButton")
expect(element).toHaveLength(1)
element.simulate("click")

expect(fetchMock.mock.calls.length).toEqual(1)
expect(fetchMock.mock.calls[0][0]).toEqual("//localhost/api/trigger")
expect(fetchMock.mock.calls[0][1].method).toEqual("post")
expect(fetchMock.mock.calls[0][1].body).toEqual(
JSON.stringify({ manifest_names: ["doggos"] })
)
})
})
45 changes: 45 additions & 0 deletions web/src/SidebarTriggerButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, { PureComponent } from "react"
import { TriggerMode } from "./types"
import { ReactComponent as TriggerSvg } from "./assets/svg/trigger.svg"
import "./SidebarTriggerButton.scss"

type SidebarTriggerButtonProps = {
resourceName: string
triggerMode: TriggerMode
isSelected: boolean
}

const triggerUpdate = (name: string): void => {
let url = `//${window.location.host}/api/trigger`

fetch(url, {
method: "post",
body: JSON.stringify({ manifest_names: [name] }),
}).then(response => {
if (!response.ok) {
console.log(response)
}
})
}

export default class SidebarTriggerButton extends PureComponent<
SidebarTriggerButtonProps
> {
render() {
let props = this.props
if (props.triggerMode === TriggerMode.TriggerModeAuto) {
return null
}

return (
<button
onClick={() => triggerUpdate(props.resourceName)}
className={`SidebarTriggerButton ${
props.isSelected ? "isSelected" : ""
}`}
>
<TriggerSvg />
</button>
)
}
}
104 changes: 104 additions & 0 deletions web/src/__snapshots__/Sidebar.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,14 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -91,6 +99,14 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -134,6 +150,14 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -177,6 +201,14 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -220,6 +252,14 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -263,6 +303,14 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -306,6 +354,14 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -439,6 +495,14 @@ exports[`sidebar renders list of resources 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -482,6 +546,14 @@ exports[`sidebar renders list of resources 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -572,6 +644,14 @@ exports[`sidebar renders resources that haven't been built yet 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -610,6 +690,14 @@ exports[`sidebar renders resources that haven't been built yet 1`] = `
>
indicator-auto-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -695,6 +783,14 @@ exports[`sidebar renders resources with manual trigger mode 1`] = `
>
indicator-manual-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down Expand Up @@ -738,6 +834,14 @@ exports[`sidebar renders resources with manual trigger mode 1`] = `
>
indicator-manual-building.svg
</svg>
<button
className="SidebarTriggerButton "
onClick={[Function]}
>
<svg>
trigger.svg
</svg>
</button>
</div>
<span
className="resLink-name"
Expand Down
2 changes: 1 addition & 1 deletion web/src/assets/svg/trigger.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions web/src/setupTests.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"
import { GlobalWithFetchMock } from "jest-fetch-mock"

configure({ adapter: new Adapter() })

const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock
customGlobal.fetch = require("jest-fetch-mock")
customGlobal.fetchMock = customGlobal.fetch
Loading

0 comments on commit 737ba0c

Please sign in to comment.