fix: LSDV-5066: Filter row validation to set filter just if value is added (#1372)

* fix: LSDV-5066: Filter row validation to set filter just if value is added

* fix when user deletes a filter row

---------

Co-authored-by: juliosgarbi <[email protected]>

Author: juliosgarbi

src/components/Filter/Filter.tsx

@@ -65,6 +65,10 @@ export const Filter: FC<FilterInterface> = ({
 
       newList.splice(index, 1);
 
+      if (newList[0]) {
+        newList[0].logic = 'and';
+      }
+
       onChange(FilterItems(filterData, newList));
 
       return newList;

src/components/Filter/FilterDropdown.tsx

@@ -49,7 +49,7 @@ export const FilterDropdown: FC<FilterDropdownInterface> = ({
         backgroundColor: '#fafafa',
         ...(style ?? {}),
       }}
-      onChange={(value) => onChange(items.findIndex((item) => (item.key ?? item.label) === value))}
+      onChange={(value) => onChange(value)}
       size='small'
     >
       {items.map(renderOptions)}

src/components/Filter/FilterRow.tsx

@@ -40,8 +40,11 @@ export const FilterRow: FC<FilterRowInterface> = ({
   }, [_selectedField]);
 
   useEffect(() => {
-    if(!isDefined(_selectedOperation) || _selectedOperation < 0) return;
-    const _filterInputs = FilterInputs?.[availableFilters[_selectedField].type][_selectedOperation];
+    const _operationItems = FilterInputs?.[availableFilters[_selectedField].type];
+    const _operation = _operationItems.findIndex((item:any) => (item.key ?? item.label) === _selectedOperation);
+
+    if(!isDefined(_operation) || _operation < 0) return;
+    const _filterInputs = FilterInputs?.[availableFilters[_selectedField].type][_operation];
 
     onChange(index, { operation: _filterInputs?.key });
     setInputComponent(_filterInputs?.input);
@@ -57,7 +60,7 @@ export const FilterRow: FC<FilterRowInterface> = ({
             dataTestid={'logic-dropdown'}
             style={{ width: '60px' }}
             onChange={(value: any) => {
-              onChange(index, { logic:logicItems[value].key });
+              onChange(index, { logic:value });
             }}
           />
         )}
@@ -69,9 +72,9 @@ export const FilterRow: FC<FilterRowInterface> = ({
           dataTestid={'field-dropdown'}
           style={{ width: '140px' }}
           onChange={(value: any) => {
-            setSelectedField(value);
+            setSelectedField(availableFilters.findIndex((item:any) => (item.key ?? item.label) === value));
 
-            onChange(index, { value:'' });
+            onChange(index, { value:null });
           }}
         />
       </Elem>

src/components/Filter/filter-util.ts

@@ -38,6 +38,8 @@ export const FilterItems = (items: any[], filterList: FilterListInterface[]) =>
   const _filteredList = [[...items]];
 
   for(let i = 0; i < filterList.length; i++) {
+    if (!filterList[i].value && filterList[i].operation !== 'empty') continue;
+
     if (filterList[i].logic === 'and') { // 0 is equal to AND, 1 is equal to OR
       _filteredList[_filteredList.length - 1] = FilterItemsByOperation(_filteredList[_filteredList.length - 1], filterList[i]);
     } else {

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

@@ -252,4 +252,54 @@ describe('Filter outliner scenario', () => {
     cy.contains('There are 4 hidden regions').should('be.visible');
 
   });
+
+  it('Shouldnt show all items if second filter is set to OR and doesnt have any value added', () => {
+    LabelStudio.init({
+      config,
+      task,
+    });
+
+    LabelStudio.setFeatureFlagsOnPageLoad({
+      [FF_LSDV_3025]: true,
+    });
+
+    cy.get('[data-testid="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 ');
+    cy.contains('There are 2 hidden regions').should('be.visible');
+    cy.contains('Add Another Filter').click();
+    cy.get('[data-testid="logic-dropdown"]').click();
+    cy.get('.lsf-select__list').contains('Or').click();
+
+    Sidebar.hasRegions(2);
+  });
+
+  it('Should remove the first filter rule if its deleted', () => {
+    LabelStudio.init({
+      config,
+      task,
+    });
+
+    LabelStudio.setFeatureFlagsOnPageLoad({
+      [FF_LSDV_3025]: true,
+    });
+
+    cy.get('[data-testid="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 ');
+    cy.contains('There are 2 hidden regions').should('be.visible');
+    cy.contains('Add Another Filter').click();
+    cy.get('[data-testid="logic-dropdown"]').click();
+    cy.get('.lsf-select__list').contains('Or').click();
+    cy.contains('Select value').click();
+    cy.get('.lsf-select__dropdown.lsf-visible > .lsf-select__list').contains('contains').click();
+    cy.get('[data-testid="filter-input"]').eq(1).type('Planet');
+    Sidebar.hasRegions(3);
+    cy.get('[data-testid="delete-row-0"]').click();
+    Sidebar.hasRegions(1);
+  });
 });