From 819acf0d5222d4cb93d90f3f0bfffea7dc62984d Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Fri, 15 Jun 2018 09:18:52 -0700 Subject: [PATCH 01/17] Introduce delete body --- ui/src/flux/components/BodyBuilder.tsx | 13 ++++++++++-- ui/src/flux/components/BodyDelete.tsx | 22 ++++++++++++++++++++ ui/src/flux/components/TimeMachine.tsx | 12 ++++++++++- ui/src/flux/constants/ast.ts | 16 ++++++++++++++ ui/src/flux/constants/index.ts | 3 ++- ui/src/flux/containers/FluxPage.tsx | 13 ++++++++++-- ui/src/types/flux.ts | 1 + ui/test/flux/components/TimeMachine.test.tsx | 1 + 8 files changed, 75 insertions(+), 6 deletions(-) create mode 100644 ui/src/flux/components/BodyDelete.tsx diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx index f182dd9f6f..612fcb936b 100644 --- a/ui/src/flux/components/BodyBuilder.tsx +++ b/ui/src/flux/components/BodyBuilder.tsx @@ -5,6 +5,7 @@ import FancyScrollbar from 'src/shared/components/FancyScrollbar' import ExpressionNode from 'src/flux/components/ExpressionNode' import VariableName from 'src/flux/components/VariableName' import FuncSelector from 'src/flux/components/FuncSelector' +import BodyDelete from 'src/flux/components/BodyDelete' import {funcNames} from 'src/flux/constants' import {Service} from 'src/types' @@ -16,6 +17,7 @@ interface Props { suggestions: Suggestion[] onAppendFrom: () => void onAppendJoin: () => void + onDeleteBody: (bodyID: string) => void } interface Body extends FlatBody { @@ -24,12 +26,17 @@ interface Body extends FlatBody { class BodyBuilder extends PureComponent { public render() { - const bodybuilder = this.props.body.map((b, i) => { + const {body, onDeleteBody} = this.props + + const bodybuilder = body.map((b, i) => { if (b.declarations.length) { - return b.declarations.map(d => { + return b.declarations.map((d, dIndex) => { if (d.funcs) { return (
+ {!dIndex && ( + + )} { return (
+
) @@ -53,6 +61,7 @@ class BodyBuilder extends PureComponent { return (
+ void +} + +class BodyDelete extends PureComponent { + public render() { + return ( + + ) + } + + private handleDelete = (): void => { + this.props.onDeleteBody(this.props.bodyID) + } +} + +export default BodyDelete diff --git a/ui/src/flux/components/TimeMachine.tsx b/ui/src/flux/components/TimeMachine.tsx index b923686549..45556135fd 100644 --- a/ui/src/flux/components/TimeMachine.tsx +++ b/ui/src/flux/components/TimeMachine.tsx @@ -7,6 +7,7 @@ import { Suggestion, OnChangeScript, OnSubmitScript, + OnDeleteBody, FlatBody, ScriptStatus, } from 'src/types/flux' @@ -22,6 +23,7 @@ interface Props { status: ScriptStatus suggestions: Suggestion[] onChangeScript: OnChangeScript + onDeleteBody: OnDeleteBody onSubmitScript: OnSubmitScript onAppendFrom: () => void onAppendJoin: () => void @@ -63,7 +65,14 @@ class TimeMachine extends PureComponent { } private get builder() { - const {body, service, suggestions, onAppendFrom, onAppendJoin} = this.props + const { + body, + service, + suggestions, + onAppendFrom, + onDeleteBody, + onAppendJoin, + } = this.props return { name: 'Build', @@ -75,6 +84,7 @@ class TimeMachine extends PureComponent { body={body} service={service} suggestions={suggestions} + onDeleteBody={onDeleteBody} onAppendFrom={onAppendFrom} onAppendJoin={onAppendJoin} /> diff --git a/ui/src/flux/constants/ast.ts b/ui/src/flux/constants/ast.ts index e542d8b432..30822212a5 100644 --- a/ui/src/flux/constants/ast.ts +++ b/ui/src/flux/constants/ast.ts @@ -1,3 +1,19 @@ +export const emptyAST = { + type: 'Program', + location: { + start: { + line: 1, + column: 1, + }, + end: { + line: 1, + column: 1, + }, + source: '', + }, + body: [], +} + export const ast = { type: 'File', start: 0, diff --git a/ui/src/flux/constants/index.ts b/ui/src/flux/constants/index.ts index 81695e650d..b81ebaa087 100644 --- a/ui/src/flux/constants/index.ts +++ b/ui/src/flux/constants/index.ts @@ -1,4 +1,4 @@ -import {ast} from 'src/flux/constants/ast' +import {ast, emptyAST} from 'src/flux/constants/ast' import * as editor from 'src/flux/constants/editor' import * as argTypes from 'src/flux/constants/argumentTypes' import * as funcNames from 'src/flux/constants/funcNames' @@ -10,6 +10,7 @@ const MAX_RESPONSE_BYTES = 1e7 // 10 MB export { ast, + emptyAST, funcNames, argTypes, editor, diff --git a/ui/src/flux/containers/FluxPage.tsx b/ui/src/flux/containers/FluxPage.tsx index 11b9ded99d..24be296328 100644 --- a/ui/src/flux/containers/FluxPage.tsx +++ b/ui/src/flux/containers/FluxPage.tsx @@ -15,7 +15,7 @@ import {UpdateScript} from 'src/flux/actions' import {bodyNodes} from 'src/flux/helpers' import {getSuggestions, getAST, getTimeSeries} from 'src/flux/apis' -import {builder, argTypes} from 'src/flux/constants' +import {builder, argTypes, emptyAST} from 'src/flux/constants' import {Source, Service, Notification, FluxTable} from 'src/types' import { @@ -114,6 +114,7 @@ export class FluxPage extends PureComponent { onAppendJoin={this.handleAppendJoin} onChangeScript={this.handleChangeScript} onSubmitScript={this.handleSubmitScript} + onDeleteBody={this.handleDeleteBody} />
@@ -331,6 +332,13 @@ export class FluxPage extends PureComponent { this.getASTResponse(script) } + private handleDeleteBody = (bodyID: string): void => { + const newBody = this.state.body.filter(b => b.id !== bodyID) + const script = this.getBodyToScript(newBody) + + this.getASTResponse(script) + } + private handleScriptUpToYield = ( bodyID: string, declarationID: string, @@ -601,7 +609,8 @@ export class FluxPage extends PureComponent { const {links} = this.props if (!script) { - return + this.props.updateScript(script) + return this.setState({ast: emptyAST, body: []}) } try { diff --git a/ui/src/types/flux.ts b/ui/src/types/flux.ts index 88014180c2..d1756c6c6f 100644 --- a/ui/src/types/flux.ts +++ b/ui/src/types/flux.ts @@ -21,6 +21,7 @@ export type ScriptUpToYield = ( yieldNodeIndex: number, isYieldable: boolean ) => string +export type OnDeleteBody = (bodyID: string) => void export interface ScriptStatus { type: string diff --git a/ui/test/flux/components/TimeMachine.test.tsx b/ui/test/flux/components/TimeMachine.test.tsx index f701c5cfa6..2fa66c20a7 100644 --- a/ui/test/flux/components/TimeMachine.test.tsx +++ b/ui/test/flux/components/TimeMachine.test.tsx @@ -15,6 +15,7 @@ const setup = () => { onValidate: () => {}, onAppendFrom: () => {}, onAppendJoin: () => {}, + onDeleteBody: () => {}, status: {type: '', text: ''}, } From 87033d37f7791e145276ae66b1d7f17f5d53f5f0 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 15:24:27 -0700 Subject: [PATCH 02/17] Add optional prop for tooltip position --- ui/src/shared/components/ConfirmButton.tsx | 42 ++++++++++++---------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx index c211b3990f..36549ab4cf 100644 --- a/ui/src/shared/components/ConfirmButton.tsx +++ b/ui/src/shared/components/ConfirmButton.tsx @@ -2,6 +2,8 @@ import React, {PureComponent} from 'react' import {ClickOutside} from 'src/shared/components/ClickOutside' import {ErrorHandling} from 'src/shared/decorators/errors' +type Position = 'top' | 'bottom' | 'left' | 'right' + interface Props { text?: string confirmText?: string @@ -12,6 +14,7 @@ interface Props { icon?: string disabled?: boolean customClass?: string + position?: Position } interface State { @@ -47,10 +50,11 @@ class ConfirmButton extends PureComponent { className={this.className} onClick={this.handleButtonClick} ref={r => (this.buttonDiv = r)} + title={confirmText} > {icon && } {text && text} -
+
{ ) } - private get className() { - const {type, size, square, disabled, customClass} = this.props - const {expanded} = this.state - - const customClassString = customClass ? ` ${customClass}` : '' - const squareString = square ? ' btn-square' : '' - const expandedString = expanded ? ' active' : '' - const disabledString = disabled ? ' disabled' : '' - - return `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}` - } - private handleButtonClick = () => { if (this.props.disabled) { return @@ -92,9 +84,23 @@ class ConfirmButton extends PureComponent { this.setState({expanded: false}) } - private get calculatedPosition() { - if (!this.buttonDiv || !this.tooltipDiv) { - return '' + private get className(): string { + const {type, size, square, disabled, customClass} = this.props + const {expanded} = this.state + + const customClassString = customClass ? ` ${customClass}` : '' + const squareString = square ? ' btn-square' : '' + const expandedString = expanded ? ' active' : '' + const disabledString = disabled ? ' disabled' : '' + + return `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}` + } + + private get tooltipClassName(): string { + const {position} = this.props + + if (position) { + return `confirm-button--tooltip ${position}` } const windowWidth = window.innerWidth @@ -104,10 +110,10 @@ class ConfirmButton extends PureComponent { const rightGap = windowWidth - buttonRect.right if (tooltipRect.width / 2 > rightGap) { - return 'left' + return 'confirm-button--tooltip left' } - return 'bottom' + return 'confirm-button--tooltip bottom' } } From 5ce3345259bc5d3577dc19e593f30242bdbe00d9 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 15:25:46 -0700 Subject: [PATCH 03/17] Use ConfirmButton instead of regular delete if func is from --- ui/src/flux/components/FuncNode.tsx | 41 ++++++++++++++----- .../components/time-machine/flux-builder.scss | 3 +- 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx index 84594a2335..2b339f538e 100644 --- a/ui/src/flux/components/FuncNode.tsx +++ b/ui/src/flux/components/FuncNode.tsx @@ -2,6 +2,7 @@ import React, {PureComponent, MouseEvent} from 'react' import classnames from 'classnames' import _ from 'lodash' +import ConfirmButton from 'src/shared/components/ConfirmButton' import FuncArgs from 'src/flux/components/FuncArgs' import FuncArgsPreview from 'src/flux/components/FuncArgsPreview' import { @@ -103,13 +104,7 @@ export default class FuncNode extends PureComponent { return (
{this.yieldToggleButton} - + {this.deleteButton}
) } @@ -140,6 +135,32 @@ export default class FuncNode extends PureComponent { ) } + private get deleteButton(): JSX.Element { + const {name} = this.props.func + + if (name === 'from') { + return ( + + ) + } + + return ( + + ) + } + private get nodeClassName(): string { const {isYielding} = this.props const {editing} = this.state @@ -147,14 +168,14 @@ export default class FuncNode extends PureComponent { return classnames('func-node', {active: isYielding || editing}) } - private handleDelete = (e: MouseEvent): void => { - e.stopPropagation() + private handleDelete = (): void => { const {func, bodyID, declarationID} = this.props this.props.onDelete({funcID: func.id, bodyID, declarationID}) } - private handleToggleEdit = (): void => { + private handleToggleEdit = (e: MouseEvent): void => { + e.stopPropagation() this.setState({editing: !this.state.editing}) } diff --git a/ui/src/style/components/time-machine/flux-builder.scss b/ui/src/style/components/time-machine/flux-builder.scss index 6e7e2925ce..f5bac9c86f 100644 --- a/ui/src/style/components/time-machine/flux-builder.scss +++ b/ui/src/style/components/time-machine/flux-builder.scss @@ -258,7 +258,8 @@ $flux-invalid-hover: $c-dreamsicle; opacity: 0; transition: opacity 0.25s ease; - > button.btn { + > button.btn, + > .confirm-button { margin-left: 4px; } } From 5cac6cb628dbbdd4e7e00877555971eae0281a7d Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 15:38:45 -0700 Subject: [PATCH 04/17] Guard against unrendered button or tooltip --- ui/src/shared/components/ConfirmButton.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx index 36549ab4cf..f3b506e926 100644 --- a/ui/src/shared/components/ConfirmButton.tsx +++ b/ui/src/shared/components/ConfirmButton.tsx @@ -103,6 +103,10 @@ class ConfirmButton extends PureComponent { return `confirm-button--tooltip ${position}` } + if (!this.buttonDiv || !this.tooltipDiv) { + return 'confirm-button--tooltip bottom' + } + const windowWidth = window.innerWidth const buttonRect = this.buttonDiv.getBoundingClientRect() const tooltipRect = this.tooltipDiv.getBoundingClientRect() From 860548bab2c5037c7467c086497b5322019643a7 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 15:39:09 -0700 Subject: [PATCH 05/17] Add styles for confirm button tooltip positions --- ui/src/style/components/confirm-button.scss | 65 ++++++++++++--------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/ui/src/style/components/confirm-button.scss b/ui/src/style/components/confirm-button.scss index 74bc7a1935..a2b1280b08 100644 --- a/ui/src/style/components/confirm-button.scss +++ b/ui/src/style/components/confirm-button.scss @@ -11,18 +11,26 @@ position: absolute; z-index: 1; - + &.top { + bottom: calc(100% + 4px); + left: 50%; + transform: translateX(-50%); + } &.bottom { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); } - &.left { top: 50%; right: calc(100% + 4px); transform: translateY(-50%); } + &.right { + top: 50%; + left: calc(100% + 4px); + transform: translateY(-50%); + } } } .confirm-button--confirmation { @@ -43,11 +51,7 @@ &:after { content: ''; border: 8px solid transparent; - border-bottom-color: $c-curacao; position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%); transition: border-color 0.25s ease; z-index: 100; } @@ -56,28 +60,35 @@ background-color: $c-dreamsicle; cursor: pointer; } - &:hover:after { - border-bottom-color: $c-dreamsicle; - } -} -.confirm-button--tooltip.bottom .confirm-button--confirmation:after { - bottom: 100%; - left: 50%; - border-bottom-color: $c-curacao; - transform: translateX(-50%); -} -.confirm-button--tooltip.bottom .confirm-button--confirmation:hover:after { - border-bottom-color: $c-dreamsicle; -} -.confirm-button--tooltip.left .confirm-button--confirmation:after { - left: 100%; - top: 50%; - border-left-color: $c-curacao; - transform: translateY(-50%); -} -.confirm-button--tooltip.left .confirm-button--confirmation:hover:after { - border-left-color: $c-dreamsicle; + .top &:after { + top: 100%; + left: 50%; + transform: translateX(-50%); + border-top-color: $c-curacao; + } + .top &:hover:after {border-top-color: $c-dreamsicle;} + .bottom &:after { + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-bottom-color: $c-curacao; + } + .bottom &:hover:after {border-bottom-color: $c-dreamsicle;} + .left &:after { + top: 50%; + left: 100%; + transform: translateY(-50%); + border-left-color: $c-curacao; + } + .left &:hover:after {border-left-color: $c-dreamsicle;} + .right &:after { + top: 50%; + right: 100%; + transform: translateY(-50%); + border-right-color: $c-curacao; + } + .right &:hover:after {border-right-color: $c-dreamsicle;} } .confirm-button.active { From 9a0687b43b933ec3a683b88f815b85fd9afb863b Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 15:50:10 -0700 Subject: [PATCH 06/17] Use ConfirmButton in BodyDelete --- ui/src/flux/components/BodyDelete.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx index 46bf07b780..a358fa5b75 100644 --- a/ui/src/flux/components/BodyDelete.tsx +++ b/ui/src/flux/components/BodyDelete.tsx @@ -1,4 +1,5 @@ import React, {PureComponent} from 'react' +import ConfirmButton from 'src/shared/components/ConfirmButton' interface Props { bodyID: string @@ -8,9 +9,14 @@ interface Props { class BodyDelete extends PureComponent { public render() { return ( - + ) } From 6a54d4e65ddeec743304ee14c33e5e034ee0bdab Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 15:50:27 -0700 Subject: [PATCH 07/17] Separate hover interactions between func node and func node menu --- ui/src/flux/components/FuncNode.tsx | 19 +++++++++++-------- .../components/time-machine/flux-builder.scss | 19 +++++++++++-------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx index 2b339f538e..79ae66c07b 100644 --- a/ui/src/flux/components/FuncNode.tsx +++ b/ui/src/flux/components/FuncNode.tsx @@ -54,14 +54,16 @@ export default class FuncNode extends PureComponent { return ( <> -
-
-
{func.name}
- +
+
+
+
{func.name}
+ +
{this.funcMenu}
{this.funcArgs} @@ -146,6 +148,7 @@ export default class FuncNode extends PureComponent { confirmText="Delete this query" square={true} confirmAction={this.handleDelete} + position="right" /> ) } diff --git a/ui/src/style/components/time-machine/flux-builder.scss b/ui/src/style/components/time-machine/flux-builder.scss index f5bac9c86f..7866f92c37 100644 --- a/ui/src/style/components/time-machine/flux-builder.scss +++ b/ui/src/style/components/time-machine/flux-builder.scss @@ -144,6 +144,8 @@ $flux-invalid-hover: $c-dreamsicle; &:hover, &.active { + cursor: pointer !important; + .func-node--preview { color: $g20-white; } @@ -196,7 +198,7 @@ $flux-invalid-hover: $c-dreamsicle; } // When a query exists unassigned to a variable -.func-node:first-child { +.func-node--wrapper:first-child .func-node { margin-left: 0; padding-left: $flux-node-gap; .func-node--connector { @@ -248,13 +250,14 @@ $flux-invalid-hover: $c-dreamsicle; } } +.func-node--wrapper { + display: flex; + align-items: center; +} + .func-node--menu { display: flex; align-items: center; - position: absolute; - top: 50%; - right: 0; - transform: translate(100%, -50%); opacity: 0; transition: opacity 0.25s ease; @@ -264,9 +267,9 @@ $flux-invalid-hover: $c-dreamsicle; } } -.func-node:hover .func-node--menu, -.func-node.editing .func-node--menu, -.func-node.active .func-node--menu { +.func-node--wrapper:hover .func-node--menu, +.func-node.editing + .func-node--menu, +.func-node.active + .func-node--menu { opacity: 1; } From 27d70504fc4bf3c250002ca0f25a7f8f00cbd50a Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 16:06:15 -0700 Subject: [PATCH 08/17] Allow for optional "type" for body delete Used in the confirmation dialog to refer correctly to the object being deleted --- ui/src/flux/components/BodyDelete.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx index a358fa5b75..156df3920e 100644 --- a/ui/src/flux/components/BodyDelete.tsx +++ b/ui/src/flux/components/BodyDelete.tsx @@ -1,18 +1,25 @@ import React, {PureComponent} from 'react' import ConfirmButton from 'src/shared/components/ConfirmButton' +type BodyType = 'variable' | 'query' + interface Props { bodyID: string + type?: BodyType onDeleteBody: (bodyID: string) => void } class BodyDelete extends PureComponent { + public static defaultProps: Partial = { + type: 'query', + } + public render() { return ( { private handleDelete = (): void => { this.props.onDeleteBody(this.props.bodyID) } + + private get confirmText(): string { + const {type} = this.props + + return `Delete this ${type}` + } } export default BodyDelete From 2489aacd998094aa4dd6b690add50aa9a7d60653 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 16:06:35 -0700 Subject: [PATCH 09/17] Move Body type into shared flux types --- ui/src/flux/components/BodyBuilder.tsx | 6 +----- ui/src/types/flux.ts | 3 +++ 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx index 612fcb936b..9a1848f401 100644 --- a/ui/src/flux/components/BodyBuilder.tsx +++ b/ui/src/flux/components/BodyBuilder.tsx @@ -9,7 +9,7 @@ import BodyDelete from 'src/flux/components/BodyDelete' import {funcNames} from 'src/flux/constants' import {Service} from 'src/types' -import {FlatBody, Suggestion} from 'src/types/flux' +import {Body, Suggestion} from 'src/types/flux' interface Props { service: Service @@ -20,10 +20,6 @@ interface Props { onDeleteBody: (bodyID: string) => void } -interface Body extends FlatBody { - id: string -} - class BodyBuilder extends PureComponent { public render() { const {body, onDeleteBody} = this.props diff --git a/ui/src/types/flux.ts b/ui/src/types/flux.ts index d1756c6c6f..ccfae353f1 100644 --- a/ui/src/types/flux.ts +++ b/ui/src/types/flux.ts @@ -106,6 +106,9 @@ export interface FlatBody { funcs?: Func[] declarations?: FlatDeclaration[] } +export interface Body extends FlatBody { + id: string +} export interface Func { type: string From 0bc3789246715e89208fc2e39a2bbcbae7f4f872 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 16:07:01 -0700 Subject: [PATCH 10/17] Style BodyDelete when used on a variable --- ui/src/flux/components/BodyBuilder.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx index 9a1848f401..09cdd60d24 100644 --- a/ui/src/flux/components/BodyBuilder.tsx +++ b/ui/src/flux/components/BodyBuilder.tsx @@ -48,8 +48,16 @@ class BodyBuilder extends PureComponent { return (
- - +
+ +
+ +
+
) }) From 9af35fedfce6711bb7e15a3ad2e76f3a3fa9f6d4 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 16:11:08 -0700 Subject: [PATCH 11/17] Rename component to be consistent --- ui/src/flux/components/BodyBuilder.tsx | 6 +++--- .../flux/components/{VariableName.tsx => VariableNode.tsx} | 0 2 files changed, 3 insertions(+), 3 deletions(-) rename ui/src/flux/components/{VariableName.tsx => VariableNode.tsx} (100%) diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx index 09cdd60d24..436dac5356 100644 --- a/ui/src/flux/components/BodyBuilder.tsx +++ b/ui/src/flux/components/BodyBuilder.tsx @@ -3,7 +3,7 @@ import _ from 'lodash' import FancyScrollbar from 'src/shared/components/FancyScrollbar' import ExpressionNode from 'src/flux/components/ExpressionNode' -import VariableName from 'src/flux/components/VariableName' +import VariableNode from 'src/flux/components/VariableNode' import FuncSelector from 'src/flux/components/FuncSelector' import BodyDelete from 'src/flux/components/BodyDelete' import {funcNames} from 'src/flux/constants' @@ -33,7 +33,7 @@ class BodyBuilder extends PureComponent { {!dIndex && ( )} - + { return (
- +
Date: Fri, 15 Jun 2018 16:23:11 -0700 Subject: [PATCH 12/17] Shorten copy --- ui/src/flux/components/BodyDelete.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx index 156df3920e..29bcd2feed 100644 --- a/ui/src/flux/components/BodyDelete.tsx +++ b/ui/src/flux/components/BodyDelete.tsx @@ -34,7 +34,7 @@ class BodyDelete extends PureComponent { private get confirmText(): string { const {type} = this.props - return `Delete this ${type}` + return `Delete ${type}` } } From d58f06b2321050b4e342986a43fda5ab0ac35923 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 16:24:37 -0700 Subject: [PATCH 13/17] Move BodyDelete into func node menu --- ui/src/flux/components/BodyBuilder.tsx | 8 +++----- ui/src/flux/components/ExpressionNode.tsx | 4 ++++ ui/src/flux/components/FuncNode.tsx | 18 +++++------------- 3 files changed, 12 insertions(+), 18 deletions(-) diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx index 436dac5356..9e50b1afc8 100644 --- a/ui/src/flux/components/BodyBuilder.tsx +++ b/ui/src/flux/components/BodyBuilder.tsx @@ -26,13 +26,10 @@ class BodyBuilder extends PureComponent { const bodybuilder = body.map((b, i) => { if (b.declarations.length) { - return b.declarations.map((d, dIndex) => { + return b.declarations.map(d => { if (d.funcs) { return (
- {!dIndex && ( - - )} { funcs={d.funcs} declarationsFromBody={this.declarationsFromBody} isLastBody={this.isLastBody(i)} + onDeleteBody={onDeleteBody} />
) @@ -65,13 +63,13 @@ class BodyBuilder extends PureComponent { return (
-
) diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx index b70d4f4aaf..8275fd6cf7 100644 --- a/ui/src/flux/components/ExpressionNode.tsx +++ b/ui/src/flux/components/ExpressionNode.tsx @@ -15,6 +15,7 @@ interface Props { declarationID?: string declarationsFromBody: string[] isLastBody: boolean + onDeleteBody: (bodyID: string) => void } interface State { @@ -42,6 +43,7 @@ class ExpressionNode extends PureComponent { funcNames, funcs, declarationsFromBody, + onDeleteBody, } = this.props const {nonYieldableIndexesToggled} = this.state @@ -106,6 +108,7 @@ class ExpressionNode extends PureComponent { onGenerateScript={onGenerateScript} declarationsFromBody={declarationsFromBody} onToggleYieldWithLast={this.handleToggleYieldWithLast} + onDeleteBody={onDeleteBody} /> ) @@ -152,6 +155,7 @@ class ExpressionNode extends PureComponent { onGenerateScript={onGenerateScript} declarationsFromBody={declarationsFromBody} onToggleYieldWithLast={this.handleToggleYieldWithLast} + onDeleteBody={onDeleteBody} /> void } interface State { @@ -138,19 +139,10 @@ export default class FuncNode extends PureComponent { } private get deleteButton(): JSX.Element { - const {name} = this.props.func + const {func, bodyID, onDeleteBody} = this.props - if (name === 'from') { - return ( - - ) + if (func.name === 'from') { + return } return ( From 2ac06bee2e9603ce6d3473ea17d933e2ff97c9f2 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 16:37:01 -0700 Subject: [PATCH 14/17] Don't ask for confirmation when deleting a variable --- ui/src/flux/components/BodyDelete.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/ui/src/flux/components/BodyDelete.tsx b/ui/src/flux/components/BodyDelete.tsx index 29bcd2feed..d5f6c0461b 100644 --- a/ui/src/flux/components/BodyDelete.tsx +++ b/ui/src/flux/components/BodyDelete.tsx @@ -15,11 +15,25 @@ class BodyDelete extends PureComponent { } public render() { + const {type} = this.props + + if (type === 'variable') { + return ( + + ) + } + return ( { private handleDelete = (): void => { this.props.onDeleteBody(this.props.bodyID) } - - private get confirmText(): string { - const {type} = this.props - - return `Delete ${type}` - } } export default BodyDelete From f7907af6f3fda3a0116fc53e13c70d39bad4cf8f Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 15 Jun 2018 16:50:56 -0700 Subject: [PATCH 15/17] Add ability to delete a query assigned to a var from the var --- ui/src/flux/components/BodyBuilder.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx index 9e50b1afc8..faa31eb32a 100644 --- a/ui/src/flux/components/BodyBuilder.tsx +++ b/ui/src/flux/components/BodyBuilder.tsx @@ -30,7 +30,12 @@ class BodyBuilder extends PureComponent { if (d.funcs) { return (
- +
+ +
+ +
+
Date: Mon, 18 Jun 2018 18:47:39 -0700 Subject: [PATCH 16/17] Refactor confirm button to use classnames instead of ternaries --- ui/src/shared/components/ConfirmButton.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx index f3b506e926..4674697be2 100644 --- a/ui/src/shared/components/ConfirmButton.tsx +++ b/ui/src/shared/components/ConfirmButton.tsx @@ -1,4 +1,5 @@ import React, {PureComponent} from 'react' +import classnames from 'classnames' import {ClickOutside} from 'src/shared/components/ClickOutside' import {ErrorHandling} from 'src/shared/decorators/errors' @@ -88,12 +89,12 @@ class ConfirmButton extends PureComponent { const {type, size, square, disabled, customClass} = this.props const {expanded} = this.state - const customClassString = customClass ? ` ${customClass}` : '' - const squareString = square ? ' btn-square' : '' - const expandedString = expanded ? ' active' : '' - const disabledString = disabled ? ' disabled' : '' - - return `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}` + return classnames(`confirm-button btn ${type} ${size}`, { + [customClass]: customClass, + 'btn-square': square, + active: expanded, + disabled, + }) } private get tooltipClassName(): string { From f9ac71a984892198cbf6687c74ab99788c950769 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 18 Jun 2018 18:50:14 -0700 Subject: [PATCH 17/17] Updoot changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e01e7e5cc5..213a92d53b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ 1. [#3474](https://github.com/influxdata/chronograf/pull/3474): Sort task table on Manage Alert page alphabetically 1. [#3590](https://github.com/influxdata/chronograf/pull/3590): Redesign icons in side navigation +1. [#3696](https://github.com/influxdata/chronograf/pull/3696): Add ability to delete entire queries in Flux Editor ### Bug Fixes