Skip to content

Commit

Permalink
Merge pull request #11945 from influxdata/feat/add-resource-dropdown
Browse files Browse the repository at this point in the history 
Create a generic dropdown for creating/importing a resource
  • Loading branch information
@AlirieGray
AlirieGray authored Feb 19, 2019
2 parents abd6fee + 6171ace commit f2c4504
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 65 deletions.
9 changes: 5 additions & 4 deletions ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/D
import {Page} from 'src/pageLayout'
import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
import {OverlayTechnology} from 'src/clockface'
import CreateDashboardDropdown from 'src/dashboards/components/dashboard_index/CreateDashboardDropdown'
import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
import ImportOverlay from 'src/shared/components/ImportOverlay'
import ExportOverlay from 'src/shared/components/ExportOverlay'
import EditLabelsOverlay from 'src/shared/components/EditLabelsOverlay'
Expand Down Expand Up @@ -119,9 +119,10 @@ class DashboardIndex extends PureComponent<Props, State> {
placeholderText="Filter dashboards by name..."
onSearch={this.filterDashboards}
/>
<CreateDashboardDropdown
onNewDashboard={this.handleCreateDashboard}
onToggleOverlay={this.handleToggleImportOverlay}
<AddResourceDropdown
onSelectNew={this.handleCreateDashboard}
onSelectImport={this.handleToggleImportOverlay}
resourceName="Dashboard"
/>
</Page.Header.Right>
</Page.Header>
Expand Down
89 changes: 46 additions & 43 deletions ui/src/organizations/components/Variables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {Button, ComponentSize} from '@influxdata/clockface'
import VariableList from 'src/organizations/components/VariableList'
import {Input, OverlayTechnology, EmptyState} from 'src/clockface'
import FilterList from 'src/shared/components/Filter'
import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'

// Actions
import * as NotificationsActions from 'src/types/actions/notifications'
Expand All @@ -35,21 +36,50 @@ interface Props {

interface State {
searchTerm: string
overlayState: OverlayState
createOverlayState: OverlayState
importOverlayState: OverlayState
}

export default class Variables extends PureComponent<Props, State> {
private get emptyState(): JSX.Element {
const {orgName} = this.props
const {searchTerm} = this.state

if (_.isEmpty(searchTerm)) {
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text
text={`${orgName} does not own any Variables , why not create one?`}
highlightWords={['Buckets']}
/>
<Button
text="Create Variable"
icon={IconFont.Plus}
color={ComponentColor.Primary}
onClick={this.handleOpenCreateOverlay}
/>
</EmptyState>
)
}

return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text text="No Variables match your query" />
</EmptyState>
)
}
constructor(props: Props) {
super(props)
this.state = {
searchTerm: '',
overlayState: OverlayState.Closed,
createOverlayState: OverlayState.Closed,
importOverlayState: OverlayState.Closed,
}
}

public render() {
const {variables, orgID} = this.props
const {searchTerm, overlayState} = this.state
const {searchTerm, createOverlayState} = this.state

return (
<>
Expand All @@ -62,11 +92,10 @@ export default class Variables extends PureComponent<Props, State> {
onChange={this.handleFilterChange}
onBlur={this.handleFilterBlur}
/>
<Button
text="Create Variable"
icon={IconFont.Plus}
color={ComponentColor.Primary}
onClick={this.handleOpenModal}
<AddResourceDropdown
resourceName="Variable"
onSelectImport={this.handleOpenImportOverlay}
onSelectNew={this.handleOpenCreateOverlay}
/>
</TabbedPageHeader>
<FilterList<Variable>
Expand All @@ -82,10 +111,10 @@ export default class Variables extends PureComponent<Props, State> {
/>
)}
</FilterList>
<OverlayTechnology visible={overlayState === OverlayState.Open}>
<OverlayTechnology visible={createOverlayState === OverlayState.Open}>
<CreateVariableOverlay
onCreateVariable={this.handleCreateVariable}
onCloseModal={this.handleCloseModal}
onCloseModal={this.handleCloseCreateOverlay}
orgID={orgID}
/>
</OverlayTechnology>
Expand All @@ -100,12 +129,14 @@ export default class Variables extends PureComponent<Props, State> {

private handleFilterBlur() {}

private handleOpenModal = (): void => {
this.setState({overlayState: OverlayState.Open})
private handleOpenImportOverlay = (): void => {}

private handleOpenCreateOverlay = (): void => {
this.setState({createOverlayState: OverlayState.Open})
}

private handleCloseModal = (): void => {
this.setState({overlayState: OverlayState.Closed})
private handleCloseCreateOverlay = (): void => {
this.setState({createOverlayState: OverlayState.Closed})
}

private handleCreateVariable = async (variable: Variable): Promise<void> => {
Expand All @@ -119,7 +150,7 @@ export default class Variables extends PureComponent<Props, State> {
}

onChange()
this.handleCloseModal()
this.handleCloseCreateOverlay()
}

private handleDeleteVariable = async (variable: Variable): Promise<void> => {
Expand All @@ -134,32 +165,4 @@ export default class Variables extends PureComponent<Props, State> {

onChange()
}

private get emptyState(): JSX.Element {
const {orgName} = this.props
const {searchTerm} = this.state

if (_.isEmpty(searchTerm)) {
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text
text={`${orgName} does not own any Variables , why not create one?`}
highlightWords={['Buckets']}
/>
<Button
text="Create Variable"
icon={IconFont.Plus}
color={ComponentColor.Primary}
onClick={this.handleOpenModal}
/>
</EmptyState>
)
}

return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text text="No Variables match your query" />
</EmptyState>
)
}
}
47 changes: 29 additions & 18 deletions ...shboard_index/CreateDashboardDropdown.tsx → ...shared/components/AddResourceDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,18 @@ import {Dropdown, DropdownMode} from 'src/clockface'
// Types
import {IconFont, ComponentColor, ComponentSize} from '@influxdata/clockface'

enum CreateOption {
New = 'New Dashboard',
Import = 'Import Dashboard',
}

interface Props {
onNewDashboard: () => void
onToggleOverlay: () => void
onSelectNew: () => void
onSelectImport: () => void
resourceName: string
}

export default class CreateDashboardDropdown extends PureComponent<Props> {
public render() {
return (
<Dropdown
mode={DropdownMode.ActionList}
titleText={'Create Dashboard'}
titleText={`Create ${this.props.resourceName}`}
icon={IconFont.Plus}
buttonColor={ComponentColor.Primary}
buttonSize={ComponentSize.Small}
Expand All @@ -38,22 +34,37 @@ export default class CreateDashboardDropdown extends PureComponent<Props> {
private get optionItems(): JSX.Element[] {
return [
<Dropdown.Item
id={CreateOption.New}
key={CreateOption.New}
value={CreateOption.New}
id={this.newOption}
key={this.newOption}
value={this.newOption}
>
{this.newOption}
</Dropdown.Item>,
<Dropdown.Item
id={this.importOption}
key={this.importOption}
value={this.importOption}
>
{CreateOption.New}
{this.importOption}
</Dropdown.Item>,
]
}

private handleSelect = (selection: CreateOption): void => {
const {onNewDashboard, onToggleOverlay} = this.props
private get newOption(): string {
return `New ${this.props.resourceName}`
}

private get importOption(): string {
return `Import ${this.props.resourceName}`
}

private handleSelect = (selection: string): void => {
const {onSelectNew, onSelectImport} = this.props
switch (selection) {
case CreateOption.New:
onNewDashboard()
case CreateOption.Import:
onToggleOverlay()
case this.newOption:
onSelectNew()
case this.importOption:
onSelectImport()
}
}
}

0 comments on commit f2c4504

Please sign in to comment.