Skip to content

N
nexpie-grafana-theme
Commit 05dee9e3 by Torkel Ödegaard
Options

Merge branch 'mondras-empty-cta-apikeys'

parents 89cd15d9 95a8a598
Showing with 194 additions and 410 deletions
public/app/core/components/Animations/SlideDown.tsx
import React from 'react';
import React from 'react';
import Transition from 'react-transition-group/Transition';
const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value.
interface Style {
transition?: string;
overflow?: string;
}
// When animating using max-height we need to use a static value.
// If this is not enough, pass in <SlideDown maxHeight="....
const defaultMaxHeight = '200px';
const defaultDuration = 200;
const defaultStyle = {
export const defaultStyle: Style = {
transition: `max-height ${defaultDuration}ms ease-in-out`,
overflow: 'hidden',
};
export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
export default ({ children, in: inProp, maxHeight = defaultMaxHeight, style = defaultStyle }) => {
// There are 4 main states a Transition can be in:
// ENTERING, ENTERED, EXITING, EXITED
// https://reactcommunity.org/react-transition-group/
......@@ -25,7 +32,7 @@ export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
{state => (
<div
style={{
...defaultStyle,
...style,
...transitionStyles[state],
}}
>
......
public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
......@@ -7,6 +7,7 @@ const model = {
buttonIcon: 'ga css class',
buttonLink: 'http://url/to/destination',
buttonTitle: 'Click me',
onClick: jest.fn(),
proTip: 'This is a tip',
proTipLink: 'http://url/to/tip/destination',
proTipLinkTitle: 'Learn more',
......
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
......@@ -11,6 +11,7 @@ class EmptyListCTA extends Component<Props, any> {
buttonIcon,
buttonLink,
buttonTitle,
onClick,
proTip,
proTipLink,
proTipLinkTitle,
......@@ -19,7 +20,7 @@ class EmptyListCTA extends Component<Props, any> {
return (
<div className="empty-list-cta">
<div className="empty-list-cta__title">{title}</div>
<a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
<a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
<i className={buttonIcon} />
{buttonTitle}
</a>
......
public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
......@@ -12,6 +12,7 @@ exports[`EmptyListCTA renders correctly 1`] = `
<a
className="empty-list-cta__button btn btn-xlarge btn-success"
href="http://url/to/destination"
onClick={[MockFunction]}
>
<i
className="ga css class"
......
public/app/features/api-keys/ApiKeysPage.test.tsx
import React from 'react';
import React from 'react';
import { shallow } from 'enzyme';
import { Props, ApiKeysPage } from './ApiKeysPage';
import { NavModel, ApiKey } from 'app/types';
......@@ -14,6 +14,7 @@ const setup = (propOverrides?: object) => {
deleteApiKey: jest.fn(),
setSearchQuery: jest.fn(),
addApiKey: jest.fn(),
apiKeysCount: 0,
};
Object.assign(props, propOverrides);
......@@ -28,14 +29,19 @@ const setup = (propOverrides?: object) => {
};
describe('Render', () => {
it('should render component', () => {
const { wrapper } = setup();
it('should render API keys table if there are any keys', () => {
const { wrapper } = setup({
apiKeys: getMultipleMockKeys(5),
apiKeysCount: 5,
});
expect(wrapper).toMatchSnapshot();
});
it('should render API keys table', () => {
it('should render CTA if there are no API keys', () => {
const { wrapper } = setup({
apiKeys: getMultipleMockKeys(5),
apiKeys: getMultipleMockKeys(0),
apiKeysCount: 0,
hasFetched: true,
});
......
public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render API keys table 1`] = `
exports[`Render should render API keys table if there are any keys 1`] = `
<div>
<PageHeader
model={Object {}}
/>
<div
className="page-container page-body"
>
<div
className="page-action-bar"
>
<div
className="gf-form gf-form--grow"
>
<label
className="gf-form--has-input-icon gf-form--grow"
>
<input
className="gf-form-input"
onChange={[Function]}
placeholder="Search keys"
type="text"
value=""
/>
<i
className="gf-form-input-icon fa fa-search"
/>
</label>
</div>
<div
className="page-action-bar__spacer"
/>
<button
className="btn btn-success pull-right"
disabled={false}
onClick={[Function]}
>
<i
className="fa fa-plus"
/>
Add API Key
</button>
</div>
<Component
in={false}
>
<div
className="cta-form"
>
<button
className="cta-form__close btn btn-transparent"
onClick={[Function]}
>
<i
className="fa fa-close"
/>
</button>
<h5>
Add API Key
</h5>
<form
className="gf-form-group"
onSubmit={[Function]}
>
<div
className="gf-form-inline"
>
<div
className="gf-form max-width-21"
>
<span
className="gf-form-label"
>
Key name
</span>
<input
className="gf-form-input"
onChange={[Function]}
placeholder="Name"
type="text"
value=""
/>
</div>
<div
className="gf-form"
>
<span
className="gf-form-label"
>
Role
</span>
<span
className="gf-form-select-wrapper"
>
<select
className="gf-form-input gf-size-auto"
onChange={[Function]}
value="Viewer"
>
<option
key="Viewer"
label="Viewer"
value="Viewer"
>
Viewer
</option>
<option
key="Editor"
label="Editor"
value="Editor"
>
Editor
</option>
<option
key="Admin"
label="Admin"
value="Admin"
>
Admin
</option>
</select>
</span>
</div>
<div
className="gf-form"
>
<button
className="btn gf-form-btn btn-success"
>
Add
</button>
</div>
</div>
</form>
</div>
</Component>
<h3
className="page-heading"
key="header"
>
Existing Keys
</h3>
<table
className="filter-table"
key="table"
>
<thead>
<tr>
<th>
Name
</th>
<th>
Role
</th>
<th
style={
Object {
"width": "34px",
}
}
/>
</tr>
</thead>
<tbody>
<tr
key="1"
>
<td>
test-1
</td>
<td>
Viewer
</td>
<td>
<a
className="btn btn-danger btn-mini"
onClick={[Function]}
>
<i
className="fa fa-remove"
/>
</a>
</td>
</tr>
<tr
key="2"
>
<td>
test-2
</td>
<td>
Viewer
</td>
<td>
<a
className="btn btn-danger btn-mini"
onClick={[Function]}
>
<i
className="fa fa-remove"
/>
</a>
</td>
</tr>
<tr
key="3"
>
<td>
test-3
</td>
<td>
Viewer
</td>
<td>
<a
className="btn btn-danger btn-mini"
onClick={[Function]}
>
<i
className="fa fa-remove"
/>
</a>
</td>
</tr>
<tr
key="4"
>
<td>
test-4
</td>
<td>
Viewer
</td>
<td>
<a
className="btn btn-danger btn-mini"
onClick={[Function]}
>
<i
className="fa fa-remove"
/>
</a>
</td>
</tr>
<tr
key="5"
>
<td>
test-5
</td>
<td>
Viewer
</td>
<td>
<a
className="btn btn-danger btn-mini"
onClick={[Function]}
>
<i
className="fa fa-remove"
/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<PageLoader
pageName="Api keys"
/>
</div>
`;
exports[`Render should render component 1`] = `
exports[`Render should render CTA if there are no API keys 1`] = `
<div>
<PageHeader
model={Object {}}
......@@ -278,43 +19,29 @@ exports[`Render should render component 1`] = `
<div
className="page-container page-body"
>
<div
className="page-action-bar"
>
<div
className="gf-form gf-form--grow"
>
<label
className="gf-form--has-input-icon gf-form--grow"
>
<input
className="gf-form-input"
onChange={[Function]}
placeholder="Search keys"
type="text"
value=""
/>
<i
className="gf-form-input-icon fa fa-search"
/>
</label>
</div>
<div
className="page-action-bar__spacer"
/>
<button
className="btn btn-success pull-right"
disabled={false}
onClick={[Function]}
>
<i
className="fa fa-plus"
/>
Add API Key
</button>
</div>
<EmptyListCTA
model={
Object {
"buttonIcon": "fa fa-plus",
"buttonLink": "#",
"buttonTitle": " New API Key",
"onClick": [Function],
"proTip": "Remember you can provide view-only API access to other applications.",
"proTipLink": "",
"proTipLinkTitle": "",
"proTipTarget": "_blank",
"title": "You haven't added any API Keys yet.",
}
}
/>
<Component
in={false}
style={
Object {
"overflow": "hidden",
"transition": "unset",
}
}
>
<div
className="cta-form"
......@@ -406,9 +133,6 @@ exports[`Render should render component 1`] = `
</form>
</div>
</Component>
<PageLoader
pageName="Api keys"
/>
</div>
</div>
`;
public/app/features/api-keys/state/selectors.ts
import { ApiKeysState } from 'app/types';
export const getApiKeysCount = (state: ApiKeysState) => state.keys.length;
export const getApiKeys = (state: ApiKeysState) => {
const regex = RegExp(state.searchQuery, 'i');
......
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