fix: sorting label by description (#14148)

* chore: labels test cleanup

* fix: throwing error when value is empty string

ui/cypress/e2e/labels.test.ts

@@ -188,7 +188,7 @@ describe('labels', () => {
       "(\u03944) J'entends par attribut ce que l'entendement perçoit d'une substance comme constituant son essence. "
     const newLabelColor = '#B0D0FF'
 
-    //create label
+    // create label
 
     cy.get<Organization>('@org').then(({id}) => {
       cy.createLabel(oldLabelName, id, {
@@ -197,14 +197,16 @@ describe('labels', () => {
       })
     })
 
-    //verify name, descr, color
+    // verify name, descr, color
     cy.getByTestID('label-card').should('have.length', 1)
     cy.getByTestID('label-card')
       .contains(oldLabelName)
       .should('be.visible')
+
     cy.getByTestID('label-card')
       .contains(oldLabelDescription)
       .should('be.visible')
+
     cy.getByTestID('label-card')
       .children('div.resource-list--name-meta')
       .children('div.label')
@@ -219,12 +221,13 @@ describe('labels', () => {
       .children('div')
       .invoke('text')
       .should('equal', 'Edit Label')
-    //dissmiss
+
+    // dismiss
     cy.getByTestID('overlay--header')
       .children('button')
       .click()
 
-    //modify
+    // modify
     cy.getByTestID('label-card')
       .contains(oldLabelName)
       .click()
@@ -240,7 +243,7 @@ describe('labels', () => {
       .type(newLabelColor)
     cy.getByTestID('create-label-form--submit').click()
 
-    //verify name, descr, color
+    // verify name, descr, color
     cy.getByTestID('label-card').should('have.length', 1)
     cy.getByTestID('label-card')
       .contains(newLabelName)

ui/src/labels/components/LabelsTab.tsx

@@ -101,7 +101,7 @@ class Labels extends PureComponent<Props, State> {
         </TabbedPageHeader>
         <FilterList<ILabel>
           list={labels}
-          searchKeys={['name', 'description']}
+          searchKeys={['name', 'properties.description']}
           searchTerm={searchTerm}
         >
           {ls => (

ui/src/shared/components/Filter.test.tsx

@@ -173,6 +173,47 @@ describe('FilterList', () => {
     expect(expected[2].textContent).toEqual(itemThree.name)
   })
 
+  it('can filter nested objects', () => {
+    const itemOne = {
+      id: '1',
+      name: 'crackle',
+      properties: {
+        description: 'a',
+      },
+    }
+
+    const itemTwo = {
+      id: '2',
+      name: 'ports',
+      properties: {
+        description: 'b',
+      },
+    }
+
+    const itemThree = {
+      id: '3',
+      name: 'rando',
+      properties: {
+        description: 'z',
+      },
+    }
+
+    const list = [itemOne, itemTwo, itemThree]
+
+    const searchTerm = 'Z'
+    const searchKeys = ['name', 'properties.description']
+    const {getAllByTestId} = setup({
+      list,
+      searchTerm,
+      searchKeys,
+    })
+
+    const expected = getAllByTestId('list-item')
+
+    expect(expected.length).toEqual(1)
+    expect(expected[0].textContent).toEqual(itemThree.name)
+  })
+
   it('errors when searchKey value is an object', () => {
     const itemOne = {
       name: {

ui/src/shared/components/Filter.tsx

@@ -56,7 +56,7 @@ export default class FilterList<T> extends PureComponent<Props<T>> {
 
         if (!isStringArray && _.isObject(value)) {
           throw new Error(
-            `The value at key "${key}" is an object.  Take a look at "searchKeys" and 
+            `The value at key "${key}" is an object.  Take a look at "searchKeys" and
              make sure you're indexing onto a primitive value`
           )
         }
@@ -66,10 +66,6 @@ export default class FilterList<T> extends PureComponent<Props<T>> {
           return this.checkIndex(searchIndex, formattedSearchTerm)
         }
 
-        if (value === '') {
-          throw new Error(`${key} is undefined.  Take a look at "searchKeys". `)
-        }
-
         return String(value)
           .toLocaleLowerCase()
           .includes(formattedSearchTerm)