Skip to content
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

chore: convert index list to resource list #18361

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
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
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
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