fix: LSDV-5090: Hidden regions notifications is displaying when filter is applied (#1367)

* fix: LSDV-5090: Hidden regions notifications is displaying when filter is applied

* fix typo

* remove comments

* remove duplicated code

* add an observe to update regions when created with filtered added

* add back inputRef validation

* remove extra space

Author: juliosgarbi

src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx

@@ -11,6 +11,10 @@ interface OutlinerPanelProps extends PanelProps {
   regions: any;
 }
 
+interface OutlinerTreeComponentProps {
+  regions: any;
+}
+
 const OutlinerPanelComponent: FC<OutlinerPanelProps> = ({ regions, ...props }) => {
   const [group, setGroup] = useState();
   const onOrderingChange = useCallback((value) => {
@@ -43,16 +47,7 @@ const OutlinerPanelComponent: FC<OutlinerPanelProps> = ({ regions, ...props }) =
         onGroupingChange={onGroupingChange}
         onFilterChange={onFilterChange}
       />
-      {regions?.regions?.length > 0 ? (
-        <OutlinerTree
-          regions={regions}
-          selectedKeys={regions.selection.keys}
-        />
-      ) : (
-        <Elem name="empty">
-          Regions not added
-        </Elem>
-      )}
+      <OutlinerTreeComponent regions={regions} />
     </PanelBase>
   );
 };
@@ -70,10 +65,6 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
     regions.setFilteredRegions(value);
   }, [regions]);
 
-  const hiddenRegions = useMemo(() => {
-    return (regions?.regions?.length ?? 0) - (regions?.filter?.length ?? 0);
-  }, [regions?.regions?.length, regions?.filter?.length]);
-
   return (
     <Block name="outliner">
       <ViewControls
@@ -85,7 +76,23 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
         onGroupingChange={onGroupingChange}
         onFilterChange={onFilterChange}
       />
-      {(regions?.regions?.length > 0 && regions?.filter?.length === 0) ? (
+      <OutlinerTreeComponent regions={regions} />
+    </Block>
+  );
+};
+
+const OutlinerTreeComponent: FC<OutlinerTreeComponentProps> = observer(({ regions }) => {
+  const allRegionsHidden = regions?.regions?.length > 0 && regions?.filter?.length === 0;
+
+  const hiddenRegions = useMemo(() => {
+    if (!regions?.regions?.length || !regions.filter?.length) return 0;
+
+    return regions?.regions?.length - regions?.filter?.length;
+  }, [regions?.regions?.length, regions?.filter?.length]);
+
+  return(
+    <>
+      {allRegionsHidden ? (
         <Elem name="filters-empty">
           <IconInfo width={21} height={20} />
           <Elem name="filters-title">All regions hidden</Elem>
@@ -110,9 +117,9 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
           Regions not added
         </Elem>
       )}
-    </Block>
+    </>
   );
-};
+});
 
 export const OutlinerComponent = observer(OutlinerStandAlone);
 

src/components/SidePanels/OutlinerPanel/ViewControls.tsx

@@ -10,6 +10,7 @@ import { SidePanelsContext } from '../SidePanelsContext';
 import './ViewControls.styl';
 import { Filter } from '../../Filter/Filter';
 import { FF_DEV_3873, FF_LSDV_3025, isFF } from '../../../utils/feature-flags';
+import { observer } from 'mobx-react';
 
 const { Block, Elem } = BemWithSpecifiContext();
 
@@ -29,7 +30,7 @@ interface ViewControlsProps {
   onFilterChange: (filter: any) => void;
 }
 
-export const ViewControls: FC<ViewControlsProps> = ({
+export const ViewControls: FC<ViewControlsProps> = observer(({
   grouping,
   ordering,
   regions,
@@ -128,7 +129,7 @@ export const ViewControls: FC<ViewControlsProps> = ({
       )}
     </Block>
   );
-};
+});
 
 interface LabelInfo {
   label: string;

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

@@ -88,11 +88,103 @@ const task = {
 };
 
 describe('Filter outliner scenario', () => {
+  const FF_LSDV_3025 = 'fflag_feat_front_lsdv_3025_outliner_filter_short';
+
   it('Check if filter is visible', () => {
-    //the test will be created here
     LabelStudio.init({
       config,
       task,
     });
+
+    LabelStudio.setFeatureFlagsOnPageLoad({
+      [FF_LSDV_3025]: true,
+    });
+
+    cy.get('[data-cy="filter-button"]').should('be.visible');
+  });
+
+  it('Check if filter is filtering', () => {
+    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('Planet');
+    Sidebar.hasRegions(1);
+  });
+
+  it('Check if filter message is hidden', () => {
+    LabelStudio.init({
+      config,
+      task,
+    });
+
+    LabelStudio.setFeatureFlagsOnPageLoad({
+      [FF_LSDV_3025]: true,
+    });
+
+    cy.contains('Adjust or remove filters to view').should('not.exist');
+  });
+
+  it('Check if filter message for 1 filter item is showing', () => {
+    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');
+    cy.contains('There is 1 hidden region').should('be.visible');
+  });
+
+  it('Check if filter message for 2 or more filter items is showing', () => {
+    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 ');
+    cy.contains('There are 2 hidden regions').should('be.visible');
+  });
+
+  it('Check if filter message for all items hidden is showing', () => {
+    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 4');
+    cy.contains('All regions hidden').should('be.visible');
   });
 });