Skip to content

Commit

Permalink
chore: convert index list to resource list
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoorayimhelping
Rose Parker authored and hoorayimhelping committed Jun 5, 2020
1 parent 09843e1 commit ea86dfd
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 129 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
### UI Improvements

1. [18319](https://github.com/influxdata/influxdb/pull/18319): Display bucket ID in bucket list and enable 1 click copying
1. [18361](https://github.com/influxdata/influxdb/pull/18361): Tokens list is now consistent with the other resource lists


## v2.0.0-beta.11 [2020-05-26]

Expand Down
104 changes: 49 additions & 55 deletions ui/cypress/e2e/tokens.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,14 @@ describe('tokens', () => {
cy.fixture('routes').then(({orgs}) => {
cy.visit(`${orgs}/${id}/load-data/tokens`)
})
cy.get('[data-testid="index-list"]', {timeout: PAGE_LOAD_SLA})
cy.get('[data-testid="resource-list"]', {timeout: PAGE_LOAD_SLA})
})
})
})

it('can list tokens', () => {
cy.getByTestID('table-row').should('have.length', 4)
cy.getByTestID('table-row').then(rows => {
cy.getByTestID('resource-card').should('have.length', 4)
cy.getByTestID('resource-card').then(rows => {
authData = authData.sort((a, b) =>
// eslint-disable-next-line
a.description < b.description
Expand All @@ -105,11 +105,9 @@ describe('tokens', () => {
)

for (let i = 0; i < rows.length; i++) {
cy.getByTestID('editable-name')
cy.getByTestID('resource-editable-name')
.eq(i)
.children('a')
.children('span')
.should('have.text', authData[i].description)
.contains(authData[i].description)

if (authData[i].status) {
cy.getByTestID('slide-toggle')
Expand All @@ -127,22 +125,22 @@ describe('tokens', () => {
it('can filter tokens', () => {
// basic filter
cy.getByTestID('input-field--filter').type('test')
cy.getByTestID('table-row').should('have.length', 3)
cy.getByTestID('resource-card').should('have.length', 3)

// clear filter
cy.getByTestID('input-field--filter').clear()
cy.getByTestID('table-row').should('have.length', 4)
cy.getByTestID('resource-card').should('have.length', 4)

// exotic filter
cy.getByTestID('input-field--filter').type('\u0950')
cy.getByTestID('table-row').should('have.length', 1)
cy.getByTestID('resource-card').should('have.length', 1)
})

it('can change token activation status', () => {
// toggle on
cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('token test 02')
.parents('[data-testid=table-row]')
.parents('[data-testid=resource-card]')
.within(() => {
cy.getByTestID('slide-toggle')
.click()
Expand All @@ -162,16 +160,16 @@ describe('tokens', () => {
})
})

cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('token test 02')
.parents('[data-testid=table-row]')
.parents('[data-testid=resource-card]')
.within(() => {
cy.getByTestID('slide-toggle').should('have.class', 'active')
})

cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('token test 02')
.parents('[data-testid=table-row]')
.parents('[data-testid=resource-card]')
.within(() => {
cy.getByTestID('slide-toggle')
.click()
Expand All @@ -191,67 +189,63 @@ describe('tokens', () => {
})
})

cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('token test 02')
.parents('[data-testid=table-row]')
.parents('[data-testid=resource-card]')
.within(() => {
cy.getByTestID('slide-toggle').should('not.have.class', 'active')
})
})

it('can delete a token', () => {
cy.getByTestID('table-row').should('have.length', 4)
cy.getByTestID('resource-card').should('have.length', 4)

cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('token test 03')
.parents('[data-testid=table-row]')
.parents('[data-testid=resource-card]')
.within(() => {
cy.getByTestID('delete-token--button').click()
})
.then(() => {
cy.getByTestID('delete-token--popover--contents').within(() => {
cy.getByTestID('delete-token--confirm-button').click()
})
cy.getByTestID('context-menu').click()

cy.getByTestID('delete-token')
.contains('Delete')
.click()
})

cy.getByTestID('table-row').should('have.length', 3)
cy.getByTestID('resource-card').should('have.length', 3)

cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('token test 03')
.should('not.exist')

// Delete remaining tokens
cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.first()
.within(() => {
cy.getByTestID('delete-token--button').click()
})
.then(() => {
cy.getByTestID('delete-token--popover--contents').within(() => {
cy.getByTestID('delete-token--confirm-button').click()
})
cy.getByTestID('context-menu').click()

cy.getByTestID('delete-token')
.contains('Delete')
.click()
})

cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.first()
.within(() => {
cy.getByTestID('delete-token--button').click()
})
.then(() => {
cy.getByTestID('delete-token--popover--contents').within(() => {
cy.getByTestID('delete-token--confirm-button').click()
})
cy.getByTestID('context-menu').click()

cy.getByTestID('delete-token')
.contains('Delete')
.click()
})

cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.first()
.within(() => {
cy.getByTestID('delete-token--button').click()
})
.then(() => {
cy.getByTestID('delete-token--popover--contents').within(() => {
cy.getByTestID('delete-token--confirm-button').click()
})
cy.getByTestID('context-menu').click()

cy.getByTestID('delete-token')
.contains('Delete')
.click()
})

// Assert empty state
Expand All @@ -261,7 +255,7 @@ describe('tokens', () => {
})

it('can generate a read/write token', () => {
cy.getByTestID('table-row').should('have.length', 4)
cy.getByTestID('resource-card').should('have.length', 4)

// create some extra buckets for filters
cy.get<Organization>('@org').then(({id, name}: Organization) => {
Expand All @@ -280,7 +274,7 @@ describe('tokens', () => {
// check cancel
cy.getByTestID('button--cancel').click()
cy.getByTestID('overlay--container').should('not.be.visible')
cy.getByTestID('table-row').should('have.length', 4)
cy.getByTestID('resource-card').should('have.length', 4)

// open overlay - again
cy.getByTestID('dropdown-button--gen-token').click()
Expand All @@ -305,11 +299,11 @@ describe('tokens', () => {
cy.getByTestID('button--save').click()

// Verify token
cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.should('have.length', 5)
.contains('Jeton 01')
.should('be.visible')
cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('Jeton 01')
.click()
cy.getByTestID('overlay--container').should('be.visible')
Expand Down Expand Up @@ -349,7 +343,7 @@ describe('tokens', () => {
})

it('can view a token', () => {
cy.getByTestID('table-row')
cy.getByTestID('resource-card')
.contains('token test \u0950')
.click()

Expand Down
37 changes: 7 additions & 30 deletions ui/src/authorizations/components/TokenList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import _ from 'lodash'
import memoizeOne from 'memoize-one'

// Components
import {Overlay, IndexList} from '@influxdata/clockface'
import {Overlay, ResourceList} from '@influxdata/clockface'
import TokenRow from 'src/authorizations/components/TokenRow'
import ViewTokenOverlay from 'src/authorizations/components/ViewTokenOverlay'

Expand All @@ -15,12 +15,12 @@ import {Sort} from '@influxdata/clockface'

// Utils
import {getSortedResources} from 'src/shared/utils/sort'
import TokensEmptyState from './TokensEmptyState'

type SortKey = keyof Authorization

interface Props {
auths: Authorization[]
emptyState: JSX.Element
searchTerm: string
sortKey: string
sortDirection: Sort
Expand All @@ -47,35 +47,16 @@ export default class TokenList extends PureComponent<Props, State> {
}

public render() {
const {sortKey, sortDirection, onClickColumn, searchTerm} = this.props
const {isTokenOverlayVisible, authInView} = this.state

return (
<>
<IndexList>
<IndexList.Header>
<IndexList.HeaderCell
sortKey={this.headerKeys[0]}
sort={sortKey === this.headerKeys[0] ? sortDirection : Sort.None}
columnName="Description"
onClick={onClickColumn}
width="50%"
/>
<IndexList.HeaderCell
sortKey={this.headerKeys[1]}
sort={sortKey === this.headerKeys[1] ? sortDirection : Sort.None}
columnName="Status"
onClick={onClickColumn}
width="50%"
/>
</IndexList.Header>
<IndexList.Body
emptyState={<TokensEmptyState searchTerm={searchTerm} />}
columnCount={2}
>
<ResourceList>
<ResourceList.Body emptyState={this.props.emptyState}>
{this.rows}
</IndexList.Body>
</IndexList>
</ResourceList.Body>
</ResourceList>

<Overlay visible={isTokenOverlayVisible}>
<ViewTokenOverlay
auth={authInView}
Expand All @@ -86,10 +67,6 @@ export default class TokenList extends PureComponent<Props, State> {
)
}

private get headerKeys(): SortKey[] {
return ['description', 'status']
}

private get rows(): JSX.Element[] {
const {auths, sortDirection, sortKey, sortType} = this.props
const sortedAuths = this.memGetSortedResources(
Expand Down
Loading

0 comments on commit ea86dfd

Please sign in to comment.