feat(ui/labels): add searchTerm updating for label clicks

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Features
 1. [12096](https://github.com/influxdata/influxdb/pull/12096): Add labels to cloned tasks
+1. [12111](https://github.com/influxdata/influxdb/pull/12111): Add ability to filter resources by clicking a label
 
 ### Bug Fixes
 

ui/cypress/e2e/dashboardsIndex.test.ts

@@ -84,4 +84,96 @@ describe('Dashboards', () => {
 
     cy.getByTestID('resource-card').should('contain', newName)
   })
+
+  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.visit('/dashboards')
+
+      cy.getByTestID('resource-card').should('have.length', 2)
+
+      cy.getByTestID(`label--pill ${newLabelName}`).click()
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+    })
+  })
+
+  describe('searching', () => {
+    it('can search dashboards by labels', () => {
+      const widgetSearch = 'searchME'
+
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createDashboard(id).then(({body}) => {
+          cy.createLabel('dashboards', body.id, widgetSearch)
+        })
+
+        cy.createDashboard(id).then(({body}) => {
+          cy.createLabel('dashboards', body.id, 'bar')
+        })
+      })
+
+      cy.visit('/dashboards')
+
+      cy.getByTestID('resource-card').should('have.length', 2)
+
+      cy.getByTestID('search-widget').type(widgetSearch)
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+
+      cy.getByTestID('resource-card')
+        .first()
+        .get('.label')
+        .should('contain', widgetSearch)
+    })
+
+    it('can search by clicking label', () => {
+      const clicked = 'click-me'
+
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createDashboard(id).then(({body}) => {
+          cy.createLabel('dashboards', body.id, clicked)
+        })
+
+        cy.createDashboard(id).then(({body}) => {
+          cy.createLabel('dashboards', body.id, 'bar')
+        })
+      })
+
+      cy.visit('/dashboards')
+
+      cy.getByTestID('resource-card').should('have.length', 2)
+
+      cy.getByTestID(`label--pill ${clicked}`).click()
+
+      cy.getByTestID('search-widget').should('have.value', clicked)
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+    })
+
+    it('can search by dashboard name', () => {
+      const searchName = 'beepBoop'
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createDashboard(id, searchName)
+        cy.createDashboard(id)
+      })
+
+      cy.visit('/dashboards')
+
+      cy.getByTestID('search-widget').type('bEE')
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+      cy.getByTestID('dashboard-card--name').contains('span', searchName)
+    })
+  })
 })

ui/cypress/e2e/tasks.test.ts

@@ -68,4 +68,44 @@ describe('Tasks', () => {
 
     cy.getByTestID('notification-error').should('exist')
   })
+
+  describe('labeling', () => {
+    it.only('can click to filter tasks by labels', () => {
+      const newLabelName = 'click-me'
+
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createTask(id).then(({body}) => {
+          cy.createLabel('tasks', body.id, newLabelName)
+        })
+
+        cy.createTask(id).then(({body}) => {
+          cy.createLabel('tasks', body.id, 'bar')
+        })
+      })
+
+      cy.visit('/tasks')
+
+      cy.getByTestID('task-row').should('have.length', 2)
+
+      cy.getByTestID(`label--pill ${newLabelName}`).click()
+
+      cy.getByTestID('task-row').should('have.length', 1)
+    })
+  })
+
+  describe('searching', () => {
+    it('can search by task name', () => {
+      const searchName = 'beepBoop'
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createTask(id, searchName)
+        cy.createTask(id)
+      })
+
+      cy.visit('/tasks')
+
+      cy.getByTestID('search-widget').type('bEE')
+
+      cy.getByTestID('task-row').should('have.length', 1)
+    })
+  })
 })

ui/cypress/index.d.ts

@@ -11,6 +11,7 @@ import {
   getByTitle,
   createTask,
   createVariable,
+  createLabel,
 } from './support/commands'
 
 declare global {
@@ -27,6 +28,7 @@ declare global {
       getByTestID: typeof getByTestID
       getByInputName: typeof getByInputName
       getByTitle: typeof getByTitle
+      createLabel: typeof createLabel
     }
   }
 }

ui/cypress/support/commands.ts

@@ -15,13 +15,14 @@ export const signin = (): Cypress.Chainable<Cypress.Response> => {
 }
 
 export const createDashboard = (
-  orgID?: string
+  orgID?: string,
+  name: string = 'test dashboard'
 ): Cypress.Chainable<Cypress.Response> => {
   return cy.request({
     method: 'POST',
     url: '/api/v2/dashboards',
     body: {
-      name: 'test dashboard',
+      name,
       orgID,
     },
   })
@@ -48,10 +49,11 @@ export const createBucket = (): Cypress.Chainable<Cypress.Response> => {
 }
 
 export const createTask = (
-  orgID?: string
+  orgID?: string,
+  name: string = '🦄ask'
 ): Cypress.Chainable<Cypress.Response> => {
   const flux = `option task = {
-    name: "🦄ask",
+    name: "${name}",
     every: 1d,
     offset: 20m
   }
@@ -90,6 +92,40 @@ export const createVariable = (
   })
 }
 
+export const createLabel = (
+  resource: string,
+  resourceID: string,
+  name?: string
+): Cypress.Chainable<Cypress.Response> => {
+  return cy
+    .request({
+      method: 'POST',
+      url: '/api/v2/labels',
+      body: {
+        name,
+        properties: {
+          description: `test ${name}`,
+          color: '#ff00ff',
+        },
+      },
+    })
+    .then(({body}) => {
+      return addResourceLabel(resource, resourceID, body.label.id)
+    })
+}
+
+export const addResourceLabel = (
+  resource: string,
+  resourceID: string,
+  labelID: string
+): Cypress.Chainable<Cypress.Response> => {
+  return cy.request({
+    method: 'POST',
+    url: `/api/v2/${resource}/${resourceID}/labels`,
+    body: {labelID},
+  })
+}
+
 export const createSource = (
   orgID?: string
 ): Cypress.Chainable<Cypress.Response> => {
@@ -164,3 +200,6 @@ Cypress.Commands.add('createTask', createTask)
 
 // variables
 Cypress.Commands.add('createVariable', createVariable)
+
+// Labels
+Cypress.Commands.add('createLabel', createLabel)

ui/src/clockface/components/index_views/IndexListRowCell.tsx

@@ -12,21 +12,25 @@ interface Props {
   children: any
   alignment?: Alignment
   revealOnHover?: boolean
+  testID?: string
 }
 
 @ErrorHandling
 class IndexListRowCell extends Component<Props> {
   public static defaultProps: Partial<Props> = {
     alignment: Alignment.Left,
     revealOnHover: false,
+    testID: 'table-cell',
   }
 
   public render() {
-    const {children} = this.props
+    const {children, testID} = this.props
 
     return (
       <td className={this.className}>
-        <div className="index-list--cell">{children}</div>
+        <div className="index-list--cell" data-testid={testID}>
+          {children}
+        </div>
       </td>
     )
   }

ui/src/clockface/components/index_views/test/__snapshots__/IndexList.test.tsx.snap

@@ -155,12 +155,14 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             <IndexListRowCell
               alignment="left"
               revealOnHover={false}
+              testID="table-cell"
             >
               <td
                 className="index-list--row-cell index-list--align-left"
               >
                 <div
                   className="index-list--cell"
+                  data-testid="table-cell"
                 >
                   Apple
                 </div>
@@ -169,12 +171,14 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             <IndexListRowCell
               alignment="left"
               revealOnHover={false}
+              testID="table-cell"
             >
               <td
                 className="index-list--row-cell index-list--align-left"
               >
                 <div
                   className="index-list--cell"
+                  data-testid="table-cell"
                 >
                   500
                 </div>
@@ -193,12 +197,14 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             <IndexListRowCell
               alignment="left"
               revealOnHover={false}
+              testID="table-cell"
             >
               <td
                 className="index-list--row-cell index-list--align-left"
               >
                 <div
                   className="index-list--cell"
+                  data-testid="table-cell"
                 >
                   Pear
                 </div>
@@ -207,12 +213,14 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             <IndexListRowCell
               alignment="left"
               revealOnHover={false}
+              testID="table-cell"
             >
               <td
                 className="index-list--row-cell index-list--align-left"
               >
                 <div
                   className="index-list--cell"
+                  data-testid="table-cell"
                 >
                   1000
                 </div>
@@ -231,12 +239,14 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             <IndexListRowCell
               alignment="left"
               revealOnHover={false}
+              testID="table-cell"
             >
               <td
                 className="index-list--row-cell index-list--align-left"
               >
                 <div
                   className="index-list--cell"
+                  data-testid="table-cell"
                 >
                   Banana
                 </div>
@@ -245,12 +255,14 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             <IndexListRowCell
               alignment="left"
               revealOnHover={false}
+              testID="table-cell"
             >
               <td
                 className="index-list--row-cell index-list--align-left"
               >
                 <div
                   className="index-list--cell"
+                  data-testid="table-cell"
                 >
                   100
                 </div>

ui/src/clockface/components/label/Label.tsx

@@ -62,6 +62,7 @@ class Label extends Component<Props, State> {
         onMouseLeave={this.handleMouseLeave}
         style={this.style}
         title={this.title}
+        data-testid={`label--pill ${name}`}
       >
         <label>{name}</label>
         {this.deleteButton}

ui/src/clockface/components/label/LabelContainer.tsx

@@ -19,22 +19,25 @@ interface Props {
   limitChildCount?: number
   resourceName?: string
   onEdit?: () => void
+  testID?: string
 }
 
 class LabelContainer extends Component<Props> {
   public static defaultProps: Partial<Props> = {
     limitChildCount: 999,
     resourceName: 'this resource',
+    testID: 'labels-con',
   }
 
   public render() {
-    const {className} = this.props
+    const {className, testID} = this.props
 
     return (
       <div
         className={classnames('label--container', {
           [`${className}`]: className,
         })}
+        data-testid={testID}
       >
         <div className="label--container-margin">
           {this.children}