Skip to content

Commit

Permalink
Inline Label Editing from Dashboards Index (#12384)
Browse files Browse the repository at this point in the history 
* Use client generated Label in dashboard actions

* Fetch labels when dashboards index loads

* Add styles for "colorless" labels

* Implement inline label editing from dashboard cards

* Fine tune label deletion

* Create createLabelAJAX function

Co-Authored-By: Delmer <[email protected]>

* Make inline label creation work in dashboards index

Co-Authored-By: Delmer <[email protected]>

* WIP use ILabel as the defacto label type

* Ensure a label can be updated without having to change the name

* Ensure all fields in a Label can be changed in the overlay

* WIP write e2e tests for inline labelling

Co-Authored-By: Andrew Watkins <[email protected]>

* wip: dashboard brittle

* wip dashboards

* Position inline labels popover such that it doesn't collide with the navbar

* chore: run all dashboard tests 25 times

* Ensure that there is a dashboard with a name that matches the search test query

* Appease the lint gods with mortal sacrifice

* Remove unit test in favor of e2e test

Everything the unit test is testing is also tested by the e2e test

Co-Authored-By: Delmer <[email protected]>

* Remove for loop and fix search name assertion

Co-Authored-By: Delmer <[email protected]>
Co-Authored-By: Andrew Watkins <[email protected]>

* Fix affected task test

Co-Authored-By: Delmer <[email protected]>
Co-Authored-By: Andrew Watkins <[email protected]>

* Fix incorrectly named reference in e2e test

Co-Authored-By: Delmer <[email protected]>
Co-Authored-By: Andrew Watkins <[email protected]>

* Undo go file change

* Add guard back in

* Undo changes to go file
  • Loading branch information
alexpaxton authored Mar 8, 2019
1 parent 81e15b7 commit d2bd4b7
Show file tree
Hide file tree
Showing 33 changed files with 554 additions and 591 deletions.
218 changes: 118 additions & 100 deletions ui/cypress/e2e/dashboardsIndex.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import {Organization} from '@influxdata/influx'

const newLabelName = 'click-me'
const dashboardName = 'Bee Happy'
const dashSearchName = 'bEE'

describe('Dashboards', () => {
beforeEach(() => {
cy.flush()
Expand All @@ -20,9 +24,7 @@ describe('Dashboards', () => {

cy.visit('/dashboards')

cy.getByTestID('resource-card')
.its('length')
.should('be.eq', 1)
cy.getByTestID('dashboard-card').should('have.length', 1)
})

it('can create a dashboard from the header', () => {
Expand All @@ -34,146 +36,162 @@ describe('Dashboards', () => {

cy.visit('/dashboards')

cy.getByTestID('resource-card')
.its('length')
.should('be.eq', 1)
cy.getByTestID('dashboard-card').should('have.length', 1)
})

it.skip('can delete a dashboard', () => {
cy.get<Organization>('@org').then(({id}) => {
cy.createDashboard(id)
cy.createDashboard(id)
})
describe('Dashboard List', () => {
beforeEach(() => {
cy.get<Organization>('@org').then(({id}) => {
cy.createDashboard(id, dashboardName).then(({body}) => {
cy.createAndAddLabel('dashboards', body.id, newLabelName)
})

cy.getByTestID('resource-card')
.its('length')
.should('eq', 2)
cy.createDashboard(id).then(({body}) => {
cy.createAndAddLabel('dashboards', body.id, 'bar')
})
})

cy.getByTestID('resource-card')
.first()
.trigger('mouseover')
.within(() => {
cy.getByTestID('context-delete-menu').click()
cy.visit('/dashboards')
})

cy.getByTestID('context-delete-dashboard').click()
})
it('can delete a dashboard', () => {
cy.getByTestID('dashboard-card').should('have.length', 2)

cy.getByTestID('resource-card')
.its('length')
.should('eq', 1)
})
cy.getByTestID('dashboard-card')
.first()
.trigger('mouseover')
.within(() => {
cy.getByTestID('context-delete-menu').click()
cy.getByTestID('context-delete-dashboard').click()
})

it('can edit a dashboards name', () => {
cy.get<Organization>('@org').then(({id}) => {
cy.createDashboard(id)
cy.getByTestID('dashboard-card').should('have.length', 1)
})

const newName = 'new 🅱️ashboard'
it('can edit a dashboards name', () => {
const newName = 'new 🅱️ashboard'

cy.getByTestID('resource-card').within(() => {
cy.getByTestID('dashboard-card--name').trigger('mouseover')
cy.getByTestID('dashboard-card').within(() => {
cy.getByTestID('dashboard-card--name')
.first()
.trigger('mouseover')

cy.getByTestID('dashboard-card--name-button').click()
cy.getByTestID('dashboard-card--name-button')
.first()
.click()

cy.get('.input-field')
.type(newName)
.type('{enter}')
cy.get('.input-field')
.type(newName)
.type('{enter}')
})

cy.getByTestID('dashboard-card').should('contain', newName)
})

cy.visit('/dashboards')
describe('Labeling', () => {
it('can click to filter dashboard labels', () => {
cy.getByTestID('dashboard-card').should('have.length', 2)

cy.getByTestID('resource-card').should('contain', newName)
})
cy.getByTestID(`label--pill ${newLabelName}`).click()

describe('labeling', () => {
it('can click to filter dashboard labels', () => {
const newLabelName = 'click-me'

cy.get<Organization>('@org').then(({id}) => {
cy.createDashboard(id).then(({body}) => {
cy.createLabel('dashboards', body.id, newLabelName)
})

cy.createDashboard(id).then(({body}) => {
cy.createLabel('dashboards', body.id, 'bar')
})
cy.getByTestID('dashboard-card')
.should('have.length', 1)
.and('contain', newLabelName)
})

cy.visit('/dashboards')
it('can delete a label from a dashboard', () => {
cy.getByTestID('dashboard-card')
.first()
.within(() => {
const pillID = `label--pill ${newLabelName}`

cy.getByTestID('resource-card').should('have.length', 2)
cy.getByTestID(pillID).should('have.length', 1)

cy.getByTestID(`label--pill ${newLabelName}`).click()
cy.getByTestID(`label--pill--delete ${newLabelName}`).click({
force: true,
})

cy.getByTestID('resource-card').should('have.length', 1)
})
})
cy.getByTestID(pillID).should('have.length', 0)
cy.getByTestID(`inline-labels--empty`).should('have.length', 1)
})
})

describe('searching', () => {
it('can search dashboards by labels', () => {
const widgetSearch = 'searchME'
it('can add an existing label to a dashboard', () => {
const labelName = 'swogglez'

cy.get<Organization>('@org').then(({id}) => {
cy.createDashboard(id).then(({body}) => {
cy.createLabel('dashboards', body.id, widgetSearch)
})
cy.createLabel(labelName).then(() => {
cy.getByTestID(`inline-labels--add`)
.first()
.click()

cy.createDashboard(id).then(({body}) => {
cy.createLabel('dashboards', body.id, 'bar')
cy.getByTestID('inline-labels--popover').within(() => {
cy.getByTestID(`label--pill ${labelName}`).click()
})

cy.getByTestID('dashboard-card')
.first()
.within(() => {
cy.getByTestID(`label--pill ${labelName}`).should('be.visible')
})
})
})

cy.visit('/dashboards')

cy.getByTestID('resource-card').should('have.length', 2)
it('can create a label and add to a dashboard', () => {
const label = 'plerps'
cy.getByTestID(`inline-labels--add`)
.first()
.click()

cy.getByTestID('search-widget').type(widgetSearch)
cy.getByTestID('inline-labels--popover').within(() => {
cy.getByTestID('input-field').type(label)
cy.getByTestID('inline-labels--create-new').click()
})

cy.getByTestID('resource-card').should('have.length', 1)
cy.getByTestID('overlay--container').within(() => {
cy.getByInputName('name').should('have.value', label)
cy.getByTestID('create-label--button').click()
})

cy.getByTestID('resource-card')
.first()
.get('.label')
.should('contain', widgetSearch)
cy.getByTestID('dashboard-card')
.first()
.within(() => {
cy.getByTestID(`label--pill ${label}`).should('be.visible')
})
})
})

it('can search by clicking label', () => {
const clicked = 'click-me'
describe('Searching', () => {
it('can search dashboards by labels', () => {
cy.getByTestID('dashboard-card').should('have.length', 2)

cy.get<Organization>('@org').then(({id}) => {
cy.createDashboard(id).then(({body}) => {
cy.createLabel('dashboards', body.id, clicked)
})
cy.getByTestID('search-widget').type(newLabelName)

cy.createDashboard(id).then(({body}) => {
cy.createLabel('dashboards', body.id, 'bar')
})
})
cy.getByTestID('dashboard-card').should('have.length', 1)

cy.visit('/dashboards')
cy.getByTestID('dashboard-card')
.first()
.get('.label')
.should('contain', newLabelName)
})

cy.getByTestID('resource-card').should('have.length', 2)
it('can search by clicking label', () => {
const clicked = 'click-me'

cy.getByTestID(`label--pill ${clicked}`).click()
cy.getByTestID('dashboard-card').should('have.length', 2)

cy.getByTestID('search-widget').should('have.value', clicked)
cy.getByTestID(`label--pill ${clicked}`).click()

cy.getByTestID('resource-card').should('have.length', 1)
})
cy.getByTestID('search-widget').should('have.value', clicked)

it('can search by dashboard name', () => {
const searchName = 'beepBoop'
cy.get<Organization>('@org').then(({id}) => {
cy.createDashboard(id, searchName)
cy.createDashboard(id)
cy.getByTestID('dashboard-card').should('have.length', 1)
})

cy.visit('/dashboards')

cy.getByTestID('search-widget').type('bEE')
it('can search by dashboard name', () => {
cy.getByTestID('search-widget').type(dashSearchName)

cy.getByTestID('resource-card').should('have.length', 1)
cy.getByTestID('dashboard-card--name').contains('span', searchName)
cy.getByTestID('dashboard-card').should('have.length', 1)
cy.getByTestID('dashboard-card--name').contains('span', dashboardName)
})
})
})
})
2 changes: 1 addition & 1 deletion ui/cypress/e2e/dashboardsView.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('Dashboard', () => {

cy.visit('/dashboards')

cy.getByTestID('resource-card').should('contain', newName)
cy.getByTestID('dashboard-card').should('contain', newName)
})

it('can create a cell', () => {
Expand Down
4 changes: 2 additions & 2 deletions ui/cypress/e2e/tasks.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,11 +117,11 @@ describe('Tasks', () => {

cy.get<Organization>('@org').then(({id}) => {
cy.createTask(id).then(({body}) => {
cy.createLabel('tasks', body.id, newLabelName)
cy.createAndAddLabel('tasks', body.id, newLabelName)
})

cy.createTask(id).then(({body}) => {
cy.createLabel('tasks', body.id, 'bar')
cy.createAndAddLabel('tasks', body.id, 'bar')
})
})

Expand Down
2 changes: 2 additions & 0 deletions ui/cypress/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
getByTitle,
createTask,
createVariable,
createAndAddLabel,
createLabel,
createBucket,
createScraper,
Expand All @@ -32,6 +33,7 @@ declare global {
getByTestID: typeof getByTestID
getByInputName: typeof getByInputName
getByTitle: typeof getByTitle
createAndAddLabel: typeof createAndAddLabel
createLabel: typeof createLabel
createBucket: typeof createBucket
createScraper: typeof createScraper
Expand Down
17 changes: 17 additions & 0 deletions ui/cypress/support/commands.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,22 @@ export const createVariable = (
}

export const createLabel = (
name?: string
): Cypress.Chainable<Cypress.Response> => {
return cy.request({
method: 'POST',
url: '/api/v2/labels',
body: {
name,
properties: {
description: `test ${name}`,
color: '#ff0054',
},
},
})
}

export const createAndAddLabel = (
resource: string,
resourceID: string,
name?: string
Expand Down Expand Up @@ -274,3 +290,4 @@ Cypress.Commands.add('createVariable', createVariable)

// Labels
Cypress.Commands.add('createLabel', createLabel)
Cypress.Commands.add('createAndAddLabel', createAndAddLabel)
Loading

0 comments on commit d2bd4b7

Please sign in to comment.