Skip to content

N
nexpie-grafana-theme
Commit 3372dc94 by Johannes Schill
Options

chore: Fix typings and add Page-component to FolderSettingsPage #14762

parent d9a25ee5
Showing with 157 additions and 138 deletions
public/app/features/folders/FolderSettingsPage.tsx
import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import Page from 'app/core/components/Page/Page';
import appEvents from 'app/core/app_events';
import { getNavModel } from 'app/core/selectors/navModel';
import { NavModel, StoreState, FolderState } from 'app/types';
......@@ -18,23 +18,35 @@ export interface Props {
deleteFolder: typeof deleteFolder;
}
export class FolderSettingsPage extends PureComponent<Props> {
export interface State {
isLoading: boolean;
}
export class FolderSettingsPage extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
isLoading: false
};
}
componentDidMount() {
this.props.getFolderByUid(this.props.folderUid);
}
onTitleChange = evt => {
onTitleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
this.props.setFolderTitle(evt.target.value);
};
onSave = async evt => {
onSave = async (evt: React.FormEvent<HTMLFormElement>) => {
evt.preventDefault();
evt.stopPropagation();
this.setState({isLoading: true});
await this.props.saveFolder(this.props.folder);
this.setState({isLoading: false});
};
onDelete = evt => {
onDelete = (evt: React.MouseEvent<HTMLButtonElement>) => {
evt.stopPropagation();
evt.preventDefault();
......@@ -53,34 +65,35 @@ export class FolderSettingsPage extends PureComponent<Props> {
const { navModel, folder } = this.props;
return (
<div>
<PageHeader model={navModel} />
<div className="page-container page-body">
<h2 className="page-sub-heading">Folder Settings</h2>
<Page navModel={navModel}>
<Page.Contents isLoading={this.state.isLoading}>
<div className="page-container page-body">
<h2 className="page-sub-heading">Folder Settings</h2>
<div className="section gf-form-group">
<form name="folderSettingsForm" onSubmit={this.onSave}>
<div className="gf-form">
<label className="gf-form-label width-7">Name</label>
<input
type="text"
className="gf-form-input width-30"
value={folder.title}
onChange={this.onTitleChange}
/>
</div>
<div className="gf-form-button-row">
<button type="submit" className="btn btn-success" disabled={!folder.canSave || !folder.hasChanged}>
<i className="fa fa-save" /> Save
</button>
<button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}>
<i className="fa fa-trash" /> Delete
</button>
</div>
</form>
<div className="section gf-form-group">
<form name="folderSettingsForm" onSubmit={this.onSave}>
<div className="gf-form">
<label className="gf-form-label width-7">Name</label>
<input
type="text"
className="gf-form-input width-30"
value={folder.title}
onChange={this.onTitleChange}
/>
</div>
<div className="gf-form-button-row">
<button type="submit" className="btn btn-success" disabled={!folder.canSave || !folder.hasChanged}>
<i className="fa fa-save" /> Save
</button>
<button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}>
<i className="fa fa-trash" /> Delete
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</Page.Contents>
</Page>
);
}
}
......
public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should enable save button 1`] = `
<div>
<PageHeader
model={Object {}}
/>
<div
className="page-container page-body"
<Page
navModel={Object {}}
>
<PageContents
isLoading={false}
>
<h2
className="page-sub-heading"
>
Folder Settings
</h2>
<div
className="section gf-form-group"
className="page-container page-body"
>
<form
name="folderSettingsForm"
onSubmit={[Function]}
<h2
className="page-sub-heading"
>
<div
className="gf-form"
>
<label
className="gf-form-label width-7"
>
Name
</label>
<input
className="gf-form-input width-30"
onChange={[Function]}
type="text"
value="loading"
/>
</div>
<div
className="gf-form-button-row"
Folder Settings
</h2>
<div
className="section gf-form-group"
>
<form
name="folderSettingsForm"
onSubmit={[Function]}
>
<button
className="btn btn-success"
disabled={false}
type="submit"
<div
className="gf-form"
>
<i
className="fa fa-save"
<label
className="gf-form-label width-7"
>
Name
</label>
<input
className="gf-form-input width-30"
onChange={[Function]}
type="text"
value="loading"
/>
Save
</button>
<button
className="btn btn-danger"
disabled={false}
onClick={[Function]}
</div>
<div
className="gf-form-button-row"
>
<i
className="fa fa-trash"
/>
Delete
</button>
</div>
</form>
<button
className="btn btn-success"
disabled={false}
type="submit"
>
<i
className="fa fa-save"
/>
Save
</button>
<button
className="btn btn-danger"
disabled={false}
onClick={[Function]}
>
<i
className="fa fa-trash"
/>
Delete
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</PageContents>
</Page>
`;
exports[`Render should render component 1`] = `
<div>
<PageHeader
model={Object {}}
/>
<div
className="page-container page-body"
<Page
navModel={Object {}}
>
<PageContents
isLoading={false}
>
<h2
className="page-sub-heading"
>
Folder Settings
</h2>
<div
className="section gf-form-group"
className="page-container page-body"
>
<form
name="folderSettingsForm"
onSubmit={[Function]}
<h2
className="page-sub-heading"
>
<div
className="gf-form"
>
<label
className="gf-form-label width-7"
>
Name
</label>
<input
className="gf-form-input width-30"
onChange={[Function]}
type="text"
value="loading"
/>
</div>
<div
className="gf-form-button-row"
Folder Settings
</h2>
<div
className="section gf-form-group"
>
<form
name="folderSettingsForm"
onSubmit={[Function]}
>
<button
className="btn btn-success"
disabled={true}
type="submit"
<div
className="gf-form"
>
<i
className="fa fa-save"
<label
className="gf-form-label width-7"
>
Name
</label>
<input
className="gf-form-input width-30"
onChange={[Function]}
type="text"
value="loading"
/>
Save
</button>
<button
className="btn btn-danger"
disabled={false}
onClick={[Function]}
</div>
<div
className="gf-form-button-row"
>
<i
className="fa fa-trash"
/>
Delete
</button>
</div>
</form>
<button
className="btn btn-success"
disabled={true}
type="submit"
>
<i
className="fa fa-save"
/>
Save
</button>
<button
className="btn btn-danger"
disabled={false}
onClick={[Function]}
>
<i
className="fa fa-trash"
/>
Delete
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</PageContents>
</Page>
`;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment