Skip to content

feat: Allow editing views #2889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

45 changes: 45 additions & 0 deletions src/dashboard/Data/Views/DeleteViewDialog.react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import Field from 'components/Field/Field.react';
import Label from 'components/Label/Label.react';
import Modal from 'components/Modal/Modal.react';
import React from 'react';
import TextInput from 'components/TextInput/TextInput.react';

export default class DeleteViewDialog extends React.Component {
constructor() {
super();
this.state = {
confirmation: '',
};
}

valid() {
return this.state.confirmation === this.props.name;
}

render() {
return (
<Modal
type={Modal.Types.DANGER}
icon="warn-outline"
title="Delete view?"
subtitle="This action cannot be undone!"
disabled={!this.valid()}
confirmText="Delete"
cancelText="Cancel"
onCancel={this.props.onCancel}
onConfirm={this.props.onConfirm}
>
<Field
label={<Label text="Confirm this action" description="Enter the view name to continue." />}
input={
<TextInput
placeholder="View name"
value={this.state.confirmation}
onChange={confirmation => this.setState({ confirmation })}
/>
}
/>
</Modal>
);
}
}
112 changes: 112 additions & 0 deletions src/dashboard/Data/Views/EditViewDialog.react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import Dropdown from 'components/Dropdown/Dropdown.react';
import Field from 'components/Field/Field.react';
import Label from 'components/Label/Label.react';
import Modal from 'components/Modal/Modal.react';
import Option from 'components/Dropdown/Option.react';
import React from 'react';
import TextInput from 'components/TextInput/TextInput.react';
import Checkbox from 'components/Checkbox/Checkbox.react';

function isValidJSON(value) {
try {
JSON.parse(value);
return true;
} catch {
return false;
}
}

export default class EditViewDialog extends React.Component {
constructor(props) {
super();
const view = props.view || {};
this.state = {
name: view.name || '',
className: view.className || '',
query: JSON.stringify(view.query || [], null, 2),
showCounter: !!view.showCounter,
};
}

valid() {
return (
this.state.name.length > 0 &&
this.state.className.length > 0 &&
isValidJSON(this.state.query)
);
}

render() {
const { classes, onConfirm, onCancel } = this.props;
return (
<Modal
type={Modal.Types.INFO}
icon="edit-solid"
iconSize={40}
title="Edit view?"
subtitle="Update the custom query."
confirmText="Save"
cancelText="Cancel"
disabled={!this.valid()}
onCancel={onCancel}
onConfirm={() =>
onConfirm({
name: this.state.name,
className: this.state.className,
query: JSON.parse(this.state.query),
showCounter: this.state.showCounter,
})
}
>
<Field
label={<Label text="Name" />}
input={
<TextInput
value={this.state.name}
onChange={name => this.setState({ name })}
/>
}
/>
<Field
label={<Label text="Class" />}
input={
<Dropdown
value={this.state.className}
onChange={className => this.setState({ className })}
>
{classes.map(c => (
<Option key={c} value={c}>
{c}
</Option>
))}
</Dropdown>
}
/>
<Field
label={
<Label
text="Query"
description="An aggregation pipeline that returns an array of items."
/>
}
input={
<TextInput
multiline={true}
value={this.state.query}
onChange={query => this.setState({ query })}
/>
}
/>
<Field
label={<Label text="Show object counter" />}
input={
<Checkbox
checked={this.state.showCounter}
onChange={showCounter => this.setState({ showCounter })}
/>
}
/>
</Modal>
);
}
}
Loading
Loading