Various Polish Stories (#11123)
* Decrease space below overlay headings * Make panels contrast with background when nested in a tabbed page * Improve styling of user settings page * Improve styling of Labels and Tokens pages * Polish Bucket overlays * Link to org profile from dashboards list * Refer to actual resource type instead of "This Resource" * Link homepage card to collectors page * Update test snapshotspull/11122/head
alexpaxton
GitHub
parent
2a3b82bd3f
commit
cf7ab909fb
|
|
@ -121,6 +121,6 @@ $overlay-min-height: 150px;
|
||||||
|
|
||||||
.overlay--body {
|
.overlay--body {
|
||||||
padding: $overlay-gutter;
|
padding: $overlay-gutter;
|
||||||
padding-top: 18px;
|
padding-top: 0;
|
||||||
min-height: $overlay-min-height;
|
min-height: $overlay-min-height;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
$panel-gutter: $ix-marg-b * 2;
|
$panel-gutter: $ix-marg-b * 2;
|
||||||
$panel-background: $g3-castle;
|
$panel-background: $g3-castle;
|
||||||
|
$panel-nested-background: $g4-onyx;
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -55,3 +56,13 @@ $panel-background: $g3-castle;
|
||||||
.panel-body hr {
|
.panel-body hr {
|
||||||
margin: $ix-marg-c 0;
|
margin: $ix-marg-c 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Panels Nested inside Tabbed Pages
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
.tabbed-page .panel {
|
||||||
|
background-color: $panel-nested-background;
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
background-color: mix($panel-nested-background, $g3-castle, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -98,6 +98,7 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
|
||||||
limitChildCount={4}
|
limitChildCount={4}
|
||||||
className="index-list--labels"
|
className="index-list--labels"
|
||||||
onEdit={this.handleEditLabels}
|
onEdit={this.handleEditLabels}
|
||||||
|
resourceName="this Dashboard"
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -107,6 +108,7 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
|
||||||
limitChildCount={4}
|
limitChildCount={4}
|
||||||
className="index-list--labels"
|
className="index-list--labels"
|
||||||
onEdit={this.handleEditLabels}
|
onEdit={this.handleEditLabels}
|
||||||
|
resourceName="this Dashboard"
|
||||||
>
|
>
|
||||||
{dashboard.labels.map(label => (
|
{dashboard.labels.map(label => (
|
||||||
<Label
|
<Label
|
||||||
|
|
@ -147,10 +149,15 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
|
||||||
return dashboard.name || DEFAULT_DASHBOARD_NAME
|
return dashboard.name || DEFAULT_DASHBOARD_NAME
|
||||||
}
|
}
|
||||||
|
|
||||||
private get ownerName(): string {
|
private get ownerName(): JSX.Element {
|
||||||
const {dashboard, orgs} = this.props
|
const {dashboard, orgs} = this.props
|
||||||
const ownerOrg = orgs.find(o => o.id === dashboard.orgID)
|
const ownerOrg = orgs.find(o => o.id === dashboard.orgID)
|
||||||
return ownerOrg.name
|
|
||||||
|
return (
|
||||||
|
<Link to={`/organizations/${dashboard.orgID}/members_tab`}>
|
||||||
|
{ownerOrg.name}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
private get nameClassName(): string {
|
private get nameClassName(): string {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
// Libraries
|
// Libraries
|
||||||
import React, {PureComponent} from 'react'
|
import React, {PureComponent} from 'react'
|
||||||
import {Link} from 'react-router'
|
import {Link} from 'react-router'
|
||||||
|
import {connect} from 'react-redux'
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import GradientBorder from 'src/shared/components/cells/GradientBorder'
|
import GradientBorder from 'src/shared/components/cells/GradientBorder'
|
||||||
|
|
@ -8,15 +9,25 @@ import DashboardingGraphic from 'src/me/graphics/DashboardingGraphic'
|
||||||
import ExploreGraphic from 'src/me/graphics/ExploreGraphic'
|
import ExploreGraphic from 'src/me/graphics/ExploreGraphic'
|
||||||
import CollectorGraphic from 'src/me/graphics/CollectorGraphic'
|
import CollectorGraphic from 'src/me/graphics/CollectorGraphic'
|
||||||
|
|
||||||
|
// Types
|
||||||
|
import {Organization} from 'src/types/v2'
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
import 'src/me/components/GettingStarted.scss'
|
import 'src/me/components/GettingStarted.scss'
|
||||||
|
|
||||||
export default class GettingStarted extends PureComponent {
|
interface StateProps {
|
||||||
|
orgs: Organization[]
|
||||||
|
}
|
||||||
|
|
||||||
|
class GettingStarted extends PureComponent<StateProps> {
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<div className="getting-started">
|
<div className="getting-started">
|
||||||
<div className="getting-started--container">
|
<div className="getting-started--container">
|
||||||
<Link to={`/data-explorer`} className="getting-started--card">
|
<Link
|
||||||
|
to={this.firstOrgCollectorLink}
|
||||||
|
className="getting-started--card"
|
||||||
|
>
|
||||||
<GradientBorder />
|
<GradientBorder />
|
||||||
<CollectorGraphic />
|
<CollectorGraphic />
|
||||||
<h3 className="getting-started--title">
|
<h3 className="getting-started--title">
|
||||||
|
|
@ -50,4 +61,23 @@ export default class GettingStarted extends PureComponent {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private get firstOrgCollectorLink(): string {
|
||||||
|
const {orgs} = this.props
|
||||||
|
|
||||||
|
const firstOrgID = orgs[0].id
|
||||||
|
|
||||||
|
return `/organizations/${firstOrgID}/collectors_tab`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const mstp = (state): StateProps => {
|
||||||
|
const {orgs} = state
|
||||||
|
|
||||||
|
return {orgs}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect<StateProps>(
|
||||||
|
mstp,
|
||||||
|
null
|
||||||
|
)(GettingStarted)
|
||||||
|
|
|
||||||
|
|
@ -35,15 +35,15 @@ export class Settings extends PureComponent<StateProps, State> {
|
||||||
const {me} = this.state
|
const {me} = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel>
|
<Grid>
|
||||||
<Panel.Header title="About Me">
|
<Grid.Row>
|
||||||
<Button text="Edit About Me" />
|
<Grid.Column widthXS={Columns.Six}>
|
||||||
</Panel.Header>
|
<Panel>
|
||||||
<Panel.Body>
|
<Panel.Header title="About Me">
|
||||||
<Form>
|
<Button text="Edit About Me" />
|
||||||
<Grid>
|
</Panel.Header>
|
||||||
<Grid.Row>
|
<Panel.Body>
|
||||||
<Grid.Column widthXS={Columns.Six}>
|
<Form>
|
||||||
<Form.Element label="Username">
|
<Form.Element label="Username">
|
||||||
<Input
|
<Input
|
||||||
value={me.name}
|
value={me.name}
|
||||||
|
|
@ -54,12 +54,12 @@ export class Settings extends PureComponent<StateProps, State> {
|
||||||
onChange={this.handleChangeInput}
|
onChange={this.handleChangeInput}
|
||||||
/>
|
/>
|
||||||
</Form.Element>
|
</Form.Element>
|
||||||
</Grid.Column>
|
</Form>
|
||||||
</Grid.Row>
|
</Panel.Body>
|
||||||
</Grid>
|
</Panel>
|
||||||
</Form>
|
</Grid.Column>
|
||||||
</Panel.Body>
|
</Grid.Row>
|
||||||
</Panel>
|
</Grid>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,11 @@ import React, {PureComponent, ChangeEvent} from 'react'
|
||||||
import {connect} from 'react-redux'
|
import {connect} from 'react-redux'
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import {Panel, Input, Spinner} from 'src/clockface'
|
import {IconFont, Input, Spinner} from 'src/clockface'
|
||||||
import ResourceFetcher from 'src/shared/components/resource_fetcher'
|
import ResourceFetcher from 'src/shared/components/resource_fetcher'
|
||||||
import TokenList from 'src/me/components/account/TokensList'
|
import TokenList from 'src/me/components/account/TokensList'
|
||||||
import FilterList from 'src/shared/components/Filter'
|
import FilterList from 'src/shared/components/Filter'
|
||||||
|
import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
|
||||||
|
|
||||||
// APIs
|
// APIs
|
||||||
import {getAuthorizations} from 'src/authorizations/apis'
|
import {getAuthorizations} from 'src/authorizations/apis'
|
||||||
|
|
@ -44,37 +45,36 @@ export class Tokens extends PureComponent<Props, State> {
|
||||||
const {searchTerm} = this.state
|
const {searchTerm} = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel>
|
<>
|
||||||
<Panel.Body>
|
<TabbedPageHeader>
|
||||||
<Input
|
<Input
|
||||||
|
icon={IconFont.Search}
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
placeholder="Filter tokens by column"
|
placeholder="Filter Tokens..."
|
||||||
onChange={this.handleChangeSearchTerm}
|
onChange={this.handleChangeSearchTerm}
|
||||||
widthPixels={256}
|
widthPixels={256}
|
||||||
/>
|
/>
|
||||||
</Panel.Body>
|
</TabbedPageHeader>
|
||||||
<Panel.Body>
|
<ResourceFetcher<Authorization[]> fetcher={getAuthorizations}>
|
||||||
<ResourceFetcher<Authorization[]> fetcher={getAuthorizations}>
|
{(fetchedAuths, loading) => (
|
||||||
{(fetchedAuths, loading) => (
|
<Spinner loading={loading}>
|
||||||
<Spinner loading={loading}>
|
<FilterList<Authorization>
|
||||||
<FilterList<Authorization>
|
list={fetchedAuths}
|
||||||
list={fetchedAuths}
|
searchTerm={searchTerm}
|
||||||
searchTerm={searchTerm}
|
searchKeys={this.searchKeys}
|
||||||
searchKeys={this.searchKeys}
|
>
|
||||||
>
|
{filteredAuths => (
|
||||||
{filteredAuths => (
|
<TokenList
|
||||||
<TokenList
|
auths={filteredAuths}
|
||||||
auths={filteredAuths}
|
onNotify={onNotify}
|
||||||
onNotify={onNotify}
|
searchTerm={searchTerm}
|
||||||
searchTerm={searchTerm}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
</FilterList>
|
||||||
</FilterList>
|
</Spinner>
|
||||||
</Spinner>
|
)}
|
||||||
)}
|
</ResourceFetcher>
|
||||||
</ResourceFetcher>
|
</>
|
||||||
</Panel.Body>
|
|
||||||
</Panel>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -82,11 +82,13 @@ export default class TokenList extends PureComponent<Props, State> {
|
||||||
|
|
||||||
private get emptyState(): JSX.Element {
|
private get emptyState(): JSX.Element {
|
||||||
const {searchTerm} = this.props
|
const {searchTerm} = this.props
|
||||||
let emptyStateText = 'Could not find any tokens'
|
let emptyStateText =
|
||||||
|
'There are not any Tokens associated with this account. Contact your administrator'
|
||||||
|
|
||||||
if (searchTerm) {
|
if (searchTerm) {
|
||||||
emptyStateText = 'Looks like no tokens match your search term'
|
emptyStateText = 'No Tokens match your search term'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EmptyState size={ComponentSize.Large}>
|
<EmptyState size={ComponentSize.Large}>
|
||||||
<EmptyState.Text text={emptyStateText} />
|
<EmptyState.Text text={emptyStateText} />
|
||||||
|
|
|
||||||
|
|
@ -13,81 +13,81 @@ exports[`Account rendering renders! 1`] = `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Panel>
|
<Grid>
|
||||||
<div
|
<div
|
||||||
className="panel"
|
className="grid--container"
|
||||||
>
|
>
|
||||||
<PanelHeader
|
<Select
|
||||||
title="About Me"
|
type={[Function]}
|
||||||
>
|
>
|
||||||
<div
|
<GridRow
|
||||||
className="panel-header"
|
key=".0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="panel-title"
|
className="grid--row"
|
||||||
>
|
>
|
||||||
About Me
|
<GridColumn
|
||||||
</div>
|
widthXS={6}
|
||||||
<div
|
|
||||||
className="panel-controls"
|
|
||||||
>
|
|
||||||
<ComponentSpacer
|
|
||||||
align="right"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="component-spacer component-spacer--right component-spacer--horizontal"
|
className="grid--column col-xs-6"
|
||||||
>
|
>
|
||||||
<Button
|
<Panel>
|
||||||
active={false}
|
<div
|
||||||
color="default"
|
className="panel"
|
||||||
shape="none"
|
|
||||||
size="sm"
|
|
||||||
status="default"
|
|
||||||
text="Edit About Me"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="button button-sm button-default"
|
|
||||||
disabled={false}
|
|
||||||
tabIndex={0}
|
|
||||||
title="Edit About Me"
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Edit About Me
|
<PanelHeader
|
||||||
</button>
|
title="About Me"
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</ComponentSpacer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</PanelHeader>
|
|
||||||
<PanelBody>
|
|
||||||
<div
|
|
||||||
className="panel-body"
|
|
||||||
>
|
|
||||||
<Form>
|
|
||||||
<form
|
|
||||||
className="form--wrapper"
|
|
||||||
onSubmit={[Function]}
|
|
||||||
>
|
|
||||||
<Grid>
|
|
||||||
<div
|
|
||||||
className="grid--container"
|
|
||||||
>
|
|
||||||
<Select
|
|
||||||
type={[Function]}
|
|
||||||
>
|
|
||||||
<GridRow
|
|
||||||
key=".0"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="grid--row"
|
className="panel-header"
|
||||||
>
|
>
|
||||||
<GridColumn
|
<div
|
||||||
widthXS={6}
|
className="panel-title"
|
||||||
>
|
>
|
||||||
<div
|
About Me
|
||||||
className="grid--column col-xs-6"
|
</div>
|
||||||
|
<div
|
||||||
|
className="panel-controls"
|
||||||
|
>
|
||||||
|
<ComponentSpacer
|
||||||
|
align="right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="component-spacer component-spacer--right component-spacer--horizontal"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
active={false}
|
||||||
|
color="default"
|
||||||
|
shape="none"
|
||||||
|
size="sm"
|
||||||
|
status="default"
|
||||||
|
text="Edit About Me"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="button button-sm button-default"
|
||||||
|
disabled={false}
|
||||||
|
tabIndex={0}
|
||||||
|
title="Edit About Me"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Edit About Me
|
||||||
|
</button>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</ComponentSpacer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PanelHeader>
|
||||||
|
<PanelBody>
|
||||||
|
<div
|
||||||
|
className="panel-body"
|
||||||
|
>
|
||||||
|
<Form>
|
||||||
|
<form
|
||||||
|
className="form--wrapper"
|
||||||
|
onSubmit={[Function]}
|
||||||
>
|
>
|
||||||
<FormElement
|
<FormElement
|
||||||
label="Username"
|
label="Username"
|
||||||
|
|
@ -148,18 +148,18 @@ exports[`Account rendering renders! 1`] = `
|
||||||
</Input>
|
</Input>
|
||||||
</div>
|
</div>
|
||||||
</FormElement>
|
</FormElement>
|
||||||
</div>
|
</form>
|
||||||
</GridColumn>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</GridRow>
|
</PanelBody>
|
||||||
</Select>
|
</div>
|
||||||
</div>
|
</Panel>
|
||||||
</Grid>
|
</div>
|
||||||
</form>
|
</GridColumn>
|
||||||
</Form>
|
</div>
|
||||||
</div>
|
</GridRow>
|
||||||
</PanelBody>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
</Panel>
|
</Grid>
|
||||||
</Settings>
|
</Settings>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -4,135 +4,250 @@ exports[`Account rendering renders! 1`] = `
|
||||||
<Tokens
|
<Tokens
|
||||||
authorizationsLink="api/v2/authorizations"
|
authorizationsLink="api/v2/authorizations"
|
||||||
>
|
>
|
||||||
<Panel>
|
<TabbedPageHeader>
|
||||||
<div
|
<div
|
||||||
className="panel"
|
className="tabbed-page-section--header"
|
||||||
>
|
>
|
||||||
<PanelBody>
|
<Input
|
||||||
|
autoFocus={false}
|
||||||
|
autocomplete="off"
|
||||||
|
disabledTitleText="This input is disabled"
|
||||||
|
icon="search"
|
||||||
|
name=""
|
||||||
|
onChange={[Function]}
|
||||||
|
placeholder="Filter Tokens..."
|
||||||
|
size="sm"
|
||||||
|
spellCheck={false}
|
||||||
|
status="default"
|
||||||
|
titleText=""
|
||||||
|
value=""
|
||||||
|
widthPixels={256}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
className="panel-body"
|
className="input input-sm input--has-icon"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"width": "256px",
|
||||||
|
}
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<Input
|
<input
|
||||||
|
autoComplete="off"
|
||||||
autoFocus={false}
|
autoFocus={false}
|
||||||
autocomplete="off"
|
className="input-field"
|
||||||
disabledTitleText="This input is disabled"
|
disabled={false}
|
||||||
name=""
|
name=""
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
placeholder="Filter tokens by column"
|
placeholder="Filter Tokens..."
|
||||||
size="sm"
|
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
status="default"
|
title=""
|
||||||
titleText=""
|
|
||||||
value=""
|
value=""
|
||||||
widthPixels={256}
|
/>
|
||||||
>
|
<span
|
||||||
<div
|
className="input-icon icon search"
|
||||||
className="input input-sm"
|
/>
|
||||||
style={
|
<div
|
||||||
Object {
|
className="input-shadow"
|
||||||
"width": "256px",
|
/>
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
autoComplete="off"
|
|
||||||
autoFocus={false}
|
|
||||||
className="input-field"
|
|
||||||
disabled={false}
|
|
||||||
name=""
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder="Filter tokens by column"
|
|
||||||
spellCheck={false}
|
|
||||||
title=""
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="input-shadow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Input>
|
|
||||||
</div>
|
</div>
|
||||||
</PanelBody>
|
</Input>
|
||||||
<PanelBody>
|
</div>
|
||||||
<div
|
</TabbedPageHeader>
|
||||||
className="panel-body"
|
<ResourceFetcher
|
||||||
|
fetcher={[Function]}
|
||||||
|
>
|
||||||
|
<Spinner
|
||||||
|
loading="Done"
|
||||||
|
>
|
||||||
|
<FilterList
|
||||||
|
list={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"description": "im a token",
|
||||||
|
"id": "030444b11fb10000",
|
||||||
|
"links": Object {
|
||||||
|
"self": "/api/v2/authorizations/030444b11fb10000",
|
||||||
|
"user": "/api/v2/users/030444b10a710000",
|
||||||
|
},
|
||||||
|
"orgID": "030444b10a713000",
|
||||||
|
"permissions": Array [
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "orgs",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "buckets",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"status": "active",
|
||||||
|
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
||||||
|
"user": "watts",
|
||||||
|
"userID": "030444b10a710000",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"description": "im a token",
|
||||||
|
"id": "1",
|
||||||
|
"links": Object {
|
||||||
|
"self": "/api/v2/authorizations/030444b11fb10000",
|
||||||
|
"user": "/api/v2/users/030444b10a710000",
|
||||||
|
},
|
||||||
|
"orgID": "030444b10a713000",
|
||||||
|
"permissions": Array [
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "orgs",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "buckets",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"status": "active",
|
||||||
|
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
||||||
|
"user": "watts",
|
||||||
|
"userID": "030444b10a710000",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
searchKeys={
|
||||||
|
Array [
|
||||||
|
"status",
|
||||||
|
"description",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
searchTerm=""
|
||||||
|
>
|
||||||
|
<TokenList
|
||||||
|
auths={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"description": "im a token",
|
||||||
|
"id": "030444b11fb10000",
|
||||||
|
"links": Object {
|
||||||
|
"self": "/api/v2/authorizations/030444b11fb10000",
|
||||||
|
"user": "/api/v2/users/030444b10a710000",
|
||||||
|
},
|
||||||
|
"orgID": "030444b10a713000",
|
||||||
|
"permissions": Array [
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "orgs",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "buckets",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"status": "active",
|
||||||
|
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
||||||
|
"user": "watts",
|
||||||
|
"userID": "030444b10a710000",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"description": "im a token",
|
||||||
|
"id": "1",
|
||||||
|
"links": Object {
|
||||||
|
"self": "/api/v2/authorizations/030444b11fb10000",
|
||||||
|
"user": "/api/v2/users/030444b10a710000",
|
||||||
|
},
|
||||||
|
"orgID": "030444b10a713000",
|
||||||
|
"permissions": Array [
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "orgs",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"action": "write",
|
||||||
|
"resource": Object {
|
||||||
|
"type": "buckets",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"status": "active",
|
||||||
|
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
||||||
|
"user": "watts",
|
||||||
|
"userID": "030444b10a710000",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
searchTerm=""
|
||||||
>
|
>
|
||||||
<ResourceFetcher
|
<IndexList>
|
||||||
fetcher={[Function]}
|
<table
|
||||||
>
|
className="index-list"
|
||||||
<Spinner
|
|
||||||
loading="Done"
|
|
||||||
>
|
>
|
||||||
<FilterList
|
<IndexListHeader>
|
||||||
list={
|
<thead
|
||||||
Array [
|
className="index-list--header"
|
||||||
Object {
|
>
|
||||||
"description": "im a token",
|
<tr>
|
||||||
"id": "030444b11fb10000",
|
<IndexListHeaderCell
|
||||||
"links": Object {
|
alignment="left"
|
||||||
"self": "/api/v2/authorizations/030444b11fb10000",
|
columnName="Description"
|
||||||
"user": "/api/v2/users/030444b10a710000",
|
>
|
||||||
},
|
<th
|
||||||
"orgID": "030444b10a713000",
|
className="index-list--header-cell index-list--align-left"
|
||||||
"permissions": Array [
|
onClick={[Function]}
|
||||||
Object {
|
style={
|
||||||
"action": "write",
|
Object {
|
||||||
"resource": Object {
|
"width": undefined,
|
||||||
"type": "orgs",
|
}
|
||||||
},
|
}
|
||||||
},
|
>
|
||||||
Object {
|
Description
|
||||||
"action": "write",
|
</th>
|
||||||
"resource": Object {
|
</IndexListHeaderCell>
|
||||||
"type": "buckets",
|
<IndexListHeaderCell
|
||||||
},
|
alignment="left"
|
||||||
},
|
columnName="Status"
|
||||||
],
|
>
|
||||||
"status": "active",
|
<th
|
||||||
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
className="index-list--header-cell index-list--align-left"
|
||||||
"user": "watts",
|
onClick={[Function]}
|
||||||
"userID": "030444b10a710000",
|
style={
|
||||||
},
|
Object {
|
||||||
Object {
|
"width": undefined,
|
||||||
"description": "im a token",
|
}
|
||||||
"id": "1",
|
}
|
||||||
"links": Object {
|
>
|
||||||
"self": "/api/v2/authorizations/030444b11fb10000",
|
Status
|
||||||
"user": "/api/v2/users/030444b10a710000",
|
</th>
|
||||||
},
|
</IndexListHeaderCell>
|
||||||
"orgID": "030444b10a713000",
|
</tr>
|
||||||
"permissions": Array [
|
</thead>
|
||||||
Object {
|
</IndexListHeader>
|
||||||
"action": "write",
|
<IndexListBody
|
||||||
"resource": Object {
|
columnCount={2}
|
||||||
"type": "orgs",
|
emptyState={
|
||||||
},
|
<EmptyState
|
||||||
},
|
size="lg"
|
||||||
Object {
|
>
|
||||||
"action": "write",
|
<EmptyStateText
|
||||||
"resource": Object {
|
text="There are not any Tokens associated with this account. Contact your administrator"
|
||||||
"type": "buckets",
|
/>
|
||||||
},
|
</EmptyState>
|
||||||
},
|
|
||||||
],
|
|
||||||
"status": "active",
|
|
||||||
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
|
||||||
"user": "watts",
|
|
||||||
"userID": "030444b10a710000",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
searchKeys={
|
|
||||||
Array [
|
|
||||||
"status",
|
|
||||||
"description",
|
|
||||||
]
|
|
||||||
}
|
|
||||||
searchTerm=""
|
|
||||||
>
|
>
|
||||||
<TokenList
|
<tbody
|
||||||
auths={
|
className="index-list--body"
|
||||||
Array [
|
>
|
||||||
|
<TokenRow
|
||||||
|
auth={
|
||||||
Object {
|
Object {
|
||||||
"description": "im a token",
|
"description": "im a token",
|
||||||
"id": "030444b11fb10000",
|
"id": "030444b11fb10000",
|
||||||
|
|
@ -159,7 +274,96 @@ exports[`Account rendering renders! 1`] = `
|
||||||
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
||||||
"user": "watts",
|
"user": "watts",
|
||||||
"userID": "030444b10a710000",
|
"userID": "030444b10a710000",
|
||||||
},
|
}
|
||||||
|
}
|
||||||
|
key="030444b11fb10000"
|
||||||
|
onClickDescription={[Function]}
|
||||||
|
>
|
||||||
|
<IndexListRow
|
||||||
|
disabled={false}
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
className="index-list--row"
|
||||||
|
>
|
||||||
|
<IndexListRowCell
|
||||||
|
alignment="left"
|
||||||
|
revealOnHover={false}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className="index-list--row-cell index-list--align-left"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="index-list--cell"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
data-test="token-description-030444b11fb10000"
|
||||||
|
href="#"
|
||||||
|
onClick={[Function]}
|
||||||
|
>
|
||||||
|
im a token
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</IndexListRowCell>
|
||||||
|
<IndexListRowCell
|
||||||
|
alignment="left"
|
||||||
|
revealOnHover={false}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className="index-list--row-cell index-list--align-left"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="index-list--cell"
|
||||||
|
>
|
||||||
|
active
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</IndexListRowCell>
|
||||||
|
<IndexListRowCell
|
||||||
|
alignment="right"
|
||||||
|
revealOnHover={true}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className="index-list--row-cell index-list--show-hover index-list--align-right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="index-list--cell"
|
||||||
|
>
|
||||||
|
<ComponentSpacer
|
||||||
|
align="right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="component-spacer component-spacer--right component-spacer--horizontal"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
active={false}
|
||||||
|
color="danger"
|
||||||
|
shape="none"
|
||||||
|
size="xs"
|
||||||
|
status="default"
|
||||||
|
text="Delete"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="button button-xs button-danger"
|
||||||
|
disabled={false}
|
||||||
|
tabIndex={0}
|
||||||
|
title="Delete"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</ComponentSpacer>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</IndexListRowCell>
|
||||||
|
</tr>
|
||||||
|
</IndexListRow>
|
||||||
|
</TokenRow>
|
||||||
|
<TokenRow
|
||||||
|
auth={
|
||||||
Object {
|
Object {
|
||||||
"description": "im a token",
|
"description": "im a token",
|
||||||
"id": "1",
|
"id": "1",
|
||||||
|
|
@ -186,328 +390,116 @@ exports[`Account rendering renders! 1`] = `
|
||||||
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
||||||
"user": "watts",
|
"user": "watts",
|
||||||
"userID": "030444b10a710000",
|
"userID": "030444b10a710000",
|
||||||
},
|
}
|
||||||
]
|
}
|
||||||
}
|
key="1"
|
||||||
searchTerm=""
|
onClickDescription={[Function]}
|
||||||
>
|
|
||||||
<IndexList>
|
|
||||||
<table
|
|
||||||
className="index-list"
|
|
||||||
>
|
|
||||||
<IndexListHeader>
|
|
||||||
<thead
|
|
||||||
className="index-list--header"
|
|
||||||
>
|
|
||||||
<tr>
|
|
||||||
<IndexListHeaderCell
|
|
||||||
alignment="left"
|
|
||||||
columnName="Description"
|
|
||||||
>
|
|
||||||
<th
|
|
||||||
className="index-list--header-cell index-list--align-left"
|
|
||||||
onClick={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": undefined,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Description
|
|
||||||
</th>
|
|
||||||
</IndexListHeaderCell>
|
|
||||||
<IndexListHeaderCell
|
|
||||||
alignment="left"
|
|
||||||
columnName="Status"
|
|
||||||
>
|
|
||||||
<th
|
|
||||||
className="index-list--header-cell index-list--align-left"
|
|
||||||
onClick={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": undefined,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Status
|
|
||||||
</th>
|
|
||||||
</IndexListHeaderCell>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
</IndexListHeader>
|
|
||||||
<IndexListBody
|
|
||||||
columnCount={2}
|
|
||||||
emptyState={
|
|
||||||
<EmptyState
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<EmptyStateText
|
|
||||||
text="Could not find any tokens"
|
|
||||||
/>
|
|
||||||
</EmptyState>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<tbody
|
|
||||||
className="index-list--body"
|
|
||||||
>
|
|
||||||
<TokenRow
|
|
||||||
auth={
|
|
||||||
Object {
|
|
||||||
"description": "im a token",
|
|
||||||
"id": "030444b11fb10000",
|
|
||||||
"links": Object {
|
|
||||||
"self": "/api/v2/authorizations/030444b11fb10000",
|
|
||||||
"user": "/api/v2/users/030444b10a710000",
|
|
||||||
},
|
|
||||||
"orgID": "030444b10a713000",
|
|
||||||
"permissions": Array [
|
|
||||||
Object {
|
|
||||||
"action": "write",
|
|
||||||
"resource": Object {
|
|
||||||
"type": "orgs",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"action": "write",
|
|
||||||
"resource": Object {
|
|
||||||
"type": "buckets",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
"status": "active",
|
|
||||||
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
|
||||||
"user": "watts",
|
|
||||||
"userID": "030444b10a710000",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
key="030444b11fb10000"
|
|
||||||
onClickDescription={[Function]}
|
|
||||||
>
|
|
||||||
<IndexListRow
|
|
||||||
disabled={false}
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
className="index-list--row"
|
|
||||||
>
|
|
||||||
<IndexListRowCell
|
|
||||||
alignment="left"
|
|
||||||
revealOnHover={false}
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="index-list--row-cell index-list--align-left"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="index-list--cell"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
data-test="token-description-030444b11fb10000"
|
|
||||||
href="#"
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
im a token
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</IndexListRowCell>
|
|
||||||
<IndexListRowCell
|
|
||||||
alignment="left"
|
|
||||||
revealOnHover={false}
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="index-list--row-cell index-list--align-left"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="index-list--cell"
|
|
||||||
>
|
|
||||||
active
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</IndexListRowCell>
|
|
||||||
<IndexListRowCell
|
|
||||||
alignment="right"
|
|
||||||
revealOnHover={true}
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="index-list--row-cell index-list--show-hover index-list--align-right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="index-list--cell"
|
|
||||||
>
|
|
||||||
<ComponentSpacer
|
|
||||||
align="right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="component-spacer component-spacer--right component-spacer--horizontal"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
active={false}
|
|
||||||
color="danger"
|
|
||||||
shape="none"
|
|
||||||
size="xs"
|
|
||||||
status="default"
|
|
||||||
text="Delete"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="button button-xs button-danger"
|
|
||||||
disabled={false}
|
|
||||||
tabIndex={0}
|
|
||||||
title="Delete"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</ComponentSpacer>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</IndexListRowCell>
|
|
||||||
</tr>
|
|
||||||
</IndexListRow>
|
|
||||||
</TokenRow>
|
|
||||||
<TokenRow
|
|
||||||
auth={
|
|
||||||
Object {
|
|
||||||
"description": "im a token",
|
|
||||||
"id": "1",
|
|
||||||
"links": Object {
|
|
||||||
"self": "/api/v2/authorizations/030444b11fb10000",
|
|
||||||
"user": "/api/v2/users/030444b10a710000",
|
|
||||||
},
|
|
||||||
"orgID": "030444b10a713000",
|
|
||||||
"permissions": Array [
|
|
||||||
Object {
|
|
||||||
"action": "write",
|
|
||||||
"resource": Object {
|
|
||||||
"type": "orgs",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"action": "write",
|
|
||||||
"resource": Object {
|
|
||||||
"type": "buckets",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
"status": "active",
|
|
||||||
"token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
|
|
||||||
"user": "watts",
|
|
||||||
"userID": "030444b10a710000",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
key="1"
|
|
||||||
onClickDescription={[Function]}
|
|
||||||
>
|
|
||||||
<IndexListRow
|
|
||||||
disabled={false}
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
className="index-list--row"
|
|
||||||
>
|
|
||||||
<IndexListRowCell
|
|
||||||
alignment="left"
|
|
||||||
revealOnHover={false}
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="index-list--row-cell index-list--align-left"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="index-list--cell"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
data-test="token-description-1"
|
|
||||||
href="#"
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
im a token
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</IndexListRowCell>
|
|
||||||
<IndexListRowCell
|
|
||||||
alignment="left"
|
|
||||||
revealOnHover={false}
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="index-list--row-cell index-list--align-left"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="index-list--cell"
|
|
||||||
>
|
|
||||||
active
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</IndexListRowCell>
|
|
||||||
<IndexListRowCell
|
|
||||||
alignment="right"
|
|
||||||
revealOnHover={true}
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="index-list--row-cell index-list--show-hover index-list--align-right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="index-list--cell"
|
|
||||||
>
|
|
||||||
<ComponentSpacer
|
|
||||||
align="right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="component-spacer component-spacer--right component-spacer--horizontal"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
active={false}
|
|
||||||
color="danger"
|
|
||||||
shape="none"
|
|
||||||
size="xs"
|
|
||||||
status="default"
|
|
||||||
text="Delete"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="button button-xs button-danger"
|
|
||||||
disabled={false}
|
|
||||||
tabIndex={0}
|
|
||||||
title="Delete"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</ComponentSpacer>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</IndexListRowCell>
|
|
||||||
</tr>
|
|
||||||
</IndexListRow>
|
|
||||||
</TokenRow>
|
|
||||||
</tbody>
|
|
||||||
</IndexListBody>
|
|
||||||
</table>
|
|
||||||
</IndexList>
|
|
||||||
<OverlayTechnology
|
|
||||||
visible={false}
|
|
||||||
>
|
>
|
||||||
<div
|
<IndexListRow
|
||||||
className="overlay-tech"
|
disabled={false}
|
||||||
>
|
>
|
||||||
<div
|
<tr
|
||||||
className="overlay--dialog"
|
className="index-list--row"
|
||||||
data-test="overlay-children"
|
>
|
||||||
/>
|
<IndexListRowCell
|
||||||
<div
|
alignment="left"
|
||||||
className="overlay--mask"
|
revealOnHover={false}
|
||||||
/>
|
>
|
||||||
</div>
|
<td
|
||||||
</OverlayTechnology>
|
className="index-list--row-cell index-list--align-left"
|
||||||
</TokenList>
|
>
|
||||||
</FilterList>
|
<div
|
||||||
</Spinner>
|
className="index-list--cell"
|
||||||
</ResourceFetcher>
|
>
|
||||||
</div>
|
<a
|
||||||
</PanelBody>
|
data-test="token-description-1"
|
||||||
</div>
|
href="#"
|
||||||
</Panel>
|
onClick={[Function]}
|
||||||
|
>
|
||||||
|
im a token
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</IndexListRowCell>
|
||||||
|
<IndexListRowCell
|
||||||
|
alignment="left"
|
||||||
|
revealOnHover={false}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className="index-list--row-cell index-list--align-left"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="index-list--cell"
|
||||||
|
>
|
||||||
|
active
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</IndexListRowCell>
|
||||||
|
<IndexListRowCell
|
||||||
|
alignment="right"
|
||||||
|
revealOnHover={true}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className="index-list--row-cell index-list--show-hover index-list--align-right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="index-list--cell"
|
||||||
|
>
|
||||||
|
<ComponentSpacer
|
||||||
|
align="right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="component-spacer component-spacer--right component-spacer--horizontal"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
active={false}
|
||||||
|
color="danger"
|
||||||
|
shape="none"
|
||||||
|
size="xs"
|
||||||
|
status="default"
|
||||||
|
text="Delete"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="button button-xs button-danger"
|
||||||
|
disabled={false}
|
||||||
|
tabIndex={0}
|
||||||
|
title="Delete"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</ComponentSpacer>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</IndexListRowCell>
|
||||||
|
</tr>
|
||||||
|
</IndexListRow>
|
||||||
|
</TokenRow>
|
||||||
|
</tbody>
|
||||||
|
</IndexListBody>
|
||||||
|
</table>
|
||||||
|
</IndexList>
|
||||||
|
<OverlayTechnology
|
||||||
|
visible={false}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="overlay-tech"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="overlay--dialog"
|
||||||
|
data-test="overlay-children"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="overlay--mask"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</OverlayTechnology>
|
||||||
|
</TokenList>
|
||||||
|
</FilterList>
|
||||||
|
</Spinner>
|
||||||
|
</ResourceFetcher>
|
||||||
</Tokens>
|
</Tokens>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -60,25 +60,24 @@ export default class BucketOverlayForm extends PureComponent<Props> {
|
||||||
/>
|
/>
|
||||||
</Form.Element>
|
</Form.Element>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column>
|
<Retention
|
||||||
<Retention
|
type={ruleType}
|
||||||
type={ruleType}
|
retentionSeconds={retentionSeconds}
|
||||||
retentionSeconds={retentionSeconds}
|
onChangeRuleType={onChangeRuleType}
|
||||||
onChangeRuleType={onChangeRuleType}
|
onChangeRetentionRule={onChangeRetentionRule}
|
||||||
onChangeRetentionRule={onChangeRetentionRule}
|
/>
|
||||||
/>
|
</Grid.Row>
|
||||||
</Grid.Column>
|
<Grid.Row>
|
||||||
<Grid.Column>
|
<Grid.Column>
|
||||||
<Form.Footer>
|
<Form.Footer>
|
||||||
<Button
|
<Button
|
||||||
text="Cancel"
|
text="Cancel"
|
||||||
color={ComponentColor.Danger}
|
|
||||||
onClick={onCloseModal}
|
onClick={onCloseModal}
|
||||||
type={ButtonType.Button}
|
type={ButtonType.Button}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
text={buttonText}
|
text={buttonText}
|
||||||
color={ComponentColor.Primary}
|
color={this.submitButtonColor}
|
||||||
type={ButtonType.Submit}
|
type={ButtonType.Submit}
|
||||||
/>
|
/>
|
||||||
</Form.Footer>
|
</Form.Footer>
|
||||||
|
|
@ -88,4 +87,14 @@ export default class BucketOverlayForm extends PureComponent<Props> {
|
||||||
</Form>
|
</Form>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private get submitButtonColor(): ComponentColor {
|
||||||
|
const {buttonText} = this.props
|
||||||
|
|
||||||
|
if (buttonText === 'Save Changes') {
|
||||||
|
return ComponentColor.Success
|
||||||
|
}
|
||||||
|
|
||||||
|
return ComponentColor.Primary
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@ export default class BucketOverlay extends PureComponent<Props, State> {
|
||||||
const {bucket, nameInputStatus, errorMessage, ruleType} = this.state
|
const {bucket, nameInputStatus, errorMessage, ruleType} = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<OverlayContainer>
|
<OverlayContainer maxWidth={500}>
|
||||||
<OverlayHeading
|
<OverlayHeading
|
||||||
title="Create Bucket"
|
title="Create Bucket"
|
||||||
onDismiss={this.props.onCloseModal}
|
onDismiss={this.props.onCloseModal}
|
||||||
|
|
|
||||||
|
|
@ -213,15 +213,26 @@ class Labels extends PureComponent<Props, State> {
|
||||||
private get emptyState(): JSX.Element {
|
private get emptyState(): JSX.Element {
|
||||||
const {searchTerm} = this.state
|
const {searchTerm} = this.state
|
||||||
|
|
||||||
let emptyText = 'No Labels were found'
|
|
||||||
|
|
||||||
if (searchTerm) {
|
if (searchTerm) {
|
||||||
emptyText = 'No Labels match your search term'
|
return (
|
||||||
|
<EmptyState size={ComponentSize.Medium}>
|
||||||
|
<EmptyState.Text text="No Labels match your search term" />
|
||||||
|
</EmptyState>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EmptyState size={ComponentSize.Medium}>
|
<EmptyState size={ComponentSize.Medium}>
|
||||||
<EmptyState.Text text={emptyText} />
|
<EmptyState.Text
|
||||||
|
text="Looks like you haven't created any Labels , why not create one?"
|
||||||
|
highlightWords={['Labels']}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
text="Create Label"
|
||||||
|
color={ComponentColor.Primary}
|
||||||
|
icon={IconFont.Plus}
|
||||||
|
onClick={this.handleShowOverlay}
|
||||||
|
/>
|
||||||
</EmptyState>
|
</EmptyState>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import React, {PureComponent, ChangeEvent} from 'react'
|
import React, {PureComponent, ChangeEvent} from 'react'
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import {Form, Radio} from 'src/clockface'
|
import {Grid, Form, Radio, ButtonShape} from 'src/clockface'
|
||||||
import RetentionDuration from 'src/organizations/components/RetentionDuration'
|
import RetentionDuration from 'src/organizations/components/RetentionDuration'
|
||||||
|
|
||||||
// Utils
|
// Utils
|
||||||
|
|
@ -27,24 +27,26 @@ export default class Retention extends PureComponent<Props> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Form.Element label="How often to clear data?">
|
<Grid.Column>
|
||||||
<Radio>
|
<Form.Element label="How often to clear data?">
|
||||||
<Radio.Button
|
<Radio shape={ButtonShape.StretchToFit}>
|
||||||
active={type === BucketRetentionRules.TypeEnum.Expire}
|
<Radio.Button
|
||||||
onClick={this.handleRadioClick}
|
active={type === BucketRetentionRules.TypeEnum.Expire}
|
||||||
value={BucketRetentionRules.TypeEnum.Expire}
|
onClick={this.handleRadioClick}
|
||||||
>
|
value={BucketRetentionRules.TypeEnum.Expire}
|
||||||
Periodically
|
>
|
||||||
</Radio.Button>
|
Periodically
|
||||||
<Radio.Button
|
</Radio.Button>
|
||||||
active={type === null}
|
<Radio.Button
|
||||||
onClick={this.handleRadioClick}
|
active={type === null}
|
||||||
value={null}
|
onClick={this.handleRadioClick}
|
||||||
>
|
value={null}
|
||||||
Never
|
>
|
||||||
</Radio.Button>
|
Never
|
||||||
</Radio>
|
</Radio.Button>
|
||||||
</Form.Element>
|
</Radio>
|
||||||
|
</Form.Element>
|
||||||
|
</Grid.Column>
|
||||||
<RetentionDuration
|
<RetentionDuration
|
||||||
type={type}
|
type={type}
|
||||||
retentionSeconds={retentionSeconds}
|
retentionSeconds={retentionSeconds}
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ export default class RetentionDuration extends PureComponent<Props> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Grid.Column widthXS={Columns.Two}>
|
<Grid.Column widthSM={Columns.Three}>
|
||||||
<Form.Element label="Days">
|
<Form.Element label="Days">
|
||||||
<Input
|
<Input
|
||||||
name={DurationKey.Days}
|
name={DurationKey.Days}
|
||||||
|
|
@ -41,7 +41,7 @@ export default class RetentionDuration extends PureComponent<Props> {
|
||||||
/>
|
/>
|
||||||
</Form.Element>
|
</Form.Element>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column widthXS={Columns.Two}>
|
<Grid.Column widthSM={Columns.Three}>
|
||||||
<Form.Element label="Hours">
|
<Form.Element label="Hours">
|
||||||
<Input
|
<Input
|
||||||
name={DurationKey.Hours}
|
name={DurationKey.Hours}
|
||||||
|
|
@ -52,7 +52,7 @@ export default class RetentionDuration extends PureComponent<Props> {
|
||||||
/>
|
/>
|
||||||
</Form.Element>
|
</Form.Element>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column widthXS={Columns.Two}>
|
<Grid.Column widthSM={Columns.Three}>
|
||||||
<Form.Element label="Minutes">
|
<Form.Element label="Minutes">
|
||||||
<Input
|
<Input
|
||||||
name={DurationKey.Minutes}
|
name={DurationKey.Minutes}
|
||||||
|
|
@ -63,7 +63,7 @@ export default class RetentionDuration extends PureComponent<Props> {
|
||||||
/>
|
/>
|
||||||
</Form.Element>
|
</Form.Element>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column widthXS={Columns.Two}>
|
<Grid.Column widthSM={Columns.Three}>
|
||||||
<Form.Element label="Seconds">
|
<Form.Element label="Seconds">
|
||||||
<Input
|
<Input
|
||||||
name={DurationKey.Seconds}
|
name={DurationKey.Seconds}
|
||||||
|
|
|
||||||
|
|
@ -44,15 +44,15 @@ export default class BucketOverlay extends PureComponent<Props, State> {
|
||||||
const {bucket, nameInputStatus, errorMessage, ruleType} = this.state
|
const {bucket, nameInputStatus, errorMessage, ruleType} = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<OverlayContainer>
|
<OverlayContainer maxWidth={500}>
|
||||||
<OverlayHeading
|
<OverlayHeading
|
||||||
title="Update Bucket"
|
title="Edit Bucket"
|
||||||
onDismiss={this.props.onCloseModal}
|
onDismiss={this.props.onCloseModal}
|
||||||
/>
|
/>
|
||||||
<OverlayBody>
|
<OverlayBody>
|
||||||
<BucketOverlayForm
|
<BucketOverlayForm
|
||||||
name={bucket.name}
|
name={bucket.name}
|
||||||
buttonText="Update"
|
buttonText="Save Changes"
|
||||||
ruleType={ruleType}
|
ruleType={ruleType}
|
||||||
onCloseModal={onCloseModal}
|
onCloseModal={onCloseModal}
|
||||||
errorMessage={errorMessage}
|
errorMessage={errorMessage}
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,7 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Label.Container limitChildCount={4}>
|
<Label.Container limitChildCount={4} resourceName="this Task">
|
||||||
{task.labels.map(label => (
|
{task.labels.map(label => (
|
||||||
<Label
|
<Label
|
||||||
key={label.resourceID}
|
key={label.resourceID}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue