fix: LSDV-5058: Outliner filter filtering empty labels (#1369)

Author: juliosgarbi

src/components/Filter/filter-util.ts

@@ -189,7 +189,7 @@ const empty = (items: any[], filterItem: FilterListInterface) => {
   return items.filter((obj) => {
     const item = getFilteredPath(filterItem.path, obj);
 
-    return item === '' || !item || item === null || item === undefined;
+    return item === '' || !item || item === null || item === undefined || item === 'blank';
   });
 };
 

tests/functional/specs/outliner/filter.cy.ts

@@ -13,6 +13,19 @@ const config = `
   </View>
 `;
 
+const configWithAllowEmpty = `
+  <View>
+    <Image name="img" value="$image"></Image>
+    <RectangleLabels name="tag" toName="img" allowEmpty="true">
+      <Label value="Planet"></Label>
+      <Label value="Moonwalker" background="blue"></Label>
+      <Label value="Moonwalker 1" background="red"></Label>
+      <Label value="Moonwalker 2" background="pink"></Label>
+      <Label value="Moonwalker 3" background="yellow"></Label>
+    </RectangleLabels>
+  </View>
+`;
+
 const image = 'https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg';
 
 const task = {
@@ -187,4 +200,56 @@ describe('Filter outliner scenario', () => {
     cy.get('[data-testid="filter-input"]').type('Moonwalker 4');
     cy.contains('All regions hidden').should('be.visible');
   });
+
+  it('isEmpty should filter empty labels', () => {
+    LabelStudio.init({
+      config: configWithAllowEmpty,
+      task,
+    });
+
+    LabelStudio.setFeatureFlagsOnPageLoad({
+      [FF_LSDV_3025]: true,
+    });
+
+    Labels.select('blank');
+
+    ImageView.drawRect(20, 20, 100, 100);
+
+    cy.get('[data-cy="filter-button"]').click();
+    cy.contains('Add Filter').click();
+    cy.get('[data-testid="operation-dropdown"]').click();
+    cy.contains('is empty').click();
+    Sidebar.hasRegions(1);
+  });
+
+  it('Should filter regions if user add new regions', () => {
+    LabelStudio.init({
+      config,
+      task,
+    });
+
+    LabelStudio.setFeatureFlagsOnPageLoad({
+      [FF_LSDV_3025]: true,
+    });
+
+    cy.get('[data-cy="filter-button"]').click();
+    cy.contains('Add Filter').click();
+    cy.get('[data-testid="operation-dropdown"]').click();
+    cy.contains('contains').click();
+    cy.get('[data-testid="filter-input"]').type('Moonwalker 2');
+
+    Sidebar.hasRegions(1);
+
+    Labels.select('Moonwalker 2');
+    ImageView.drawRect(20, 20, 20, 20);
+
+    Sidebar.hasRegions(2);
+
+    Labels.select('Planet');
+    ImageView.drawRect(270, 450, 20, 20);
+
+    Sidebar.hasRegions(2);
+    cy.contains('There are 4 hidden regions').should('be.visible');
+
+  });
 });