diff --git a/ui/src/data_explorer/components/SendToDashboardOverlay.tsx b/ui/src/data_explorer/components/SendToDashboardOverlay.tsx index 3fc442909..cb635d959 100644 --- a/ui/src/data_explorer/components/SendToDashboardOverlay.tsx +++ b/ui/src/data_explorer/components/SendToDashboardOverlay.tsx @@ -71,6 +71,7 @@ type Props = PassedProps & ConnectedProps interface State { selectedIDs: string[] name: string + newDashboardName: string } const NEW_DASHBOARD_ID = 'new' @@ -82,6 +83,7 @@ class SendToDashboardOverlay extends PureComponent { this.state = { selectedIDs: [], name: '', + newDashboardName: '', } } public async componentDidMount() { @@ -94,9 +96,14 @@ class SendToDashboardOverlay extends PureComponent { this.setState({name}) } + public handleChangeNewDashboardName = e => { + const newDashboardName = e.target.value + this.setState({newDashboardName}) + } + public render() { const {onCancel} = this.props - const {name, selectedIDs} = this.state + const {name, selectedIDs, newDashboardName} = this.state const numberDashboards = selectedIDs.length > 1 ? selectedIDs.length : '' const pluralizer = selectedIDs.length > 1 ? 's' : '' @@ -115,6 +122,15 @@ class SendToDashboardOverlay extends PureComponent { {this.dropdownItems} + {this.isNewDashboardSelected && ( + + + + )} { private get dropdownItems(): JSX.Element[] { const {dashboards} = this.props + const {newDashboardName} = this.state const simpleArray = dashboards.map(d => ({ id: d.id.toString(), @@ -162,7 +179,10 @@ class SendToDashboardOverlay extends PureComponent { Send to a New Dashboard @@ -175,6 +195,10 @@ class SendToDashboardOverlay extends PureComponent { return [newDashboardItem, divider, ...items] } + private get isNewDashboardSelected(): boolean { + return this.state.selectedIDs.includes(NEW_DASHBOARD_ID) + } + private get hasQuery(): boolean { const {queryConfig, script, isFluxQuery} = this.props if (isFluxQuery) { @@ -226,7 +250,7 @@ class SendToDashboardOverlay extends PureComponent { } private sendToDashboard = async () => { - const {name, selectedIDs} = this.state + const {name, newDashboardName} = this.state const { queryConfig, script, @@ -279,9 +303,19 @@ class SendToDashboardOverlay extends PureComponent { let selectedDashboards = this.selectedDashboards - if (_.includes(selectedIDs, NEW_DASHBOARD_ID)) { - const {data} = await createDashboard(NEW_EMPTY_DASHBOARD) - const newDashboard: Dashboard = data + if (this.isNewDashboardSelected) { + let result + + if (newDashboardName === '') { + result = await createDashboard(NEW_EMPTY_DASHBOARD) + } else { + result = await createDashboard({ + ...NEW_EMPTY_DASHBOARD, + name: newDashboardName, + }) + } + + const newDashboard: Dashboard = result.data selectedDashboards = [...selectedDashboards, newDashboard] }