feat: LSDV-3025-15: Add a message in the bottom of the outliner when user creates a new rule of filtering (#1356)

* feat: LSDV-3025-15: Add a message in the bottom of the outliner when user create a new rule of filtering

* fix the number of hidden regions displayed

* fix update filterList when add new region

* change usecallback to usememo

* add safe default

* fix some ui problems

Author: juliosgarbi

src/assets/icons/outliner/index.ts

@@ -1,3 +1,4 @@
 export { ReactComponent as IconOutlinerCollapse } from './collapse.svg';
 export { ReactComponent as IconOutlinerExpand } from './expand.svg';
-export { ReactComponent as IconOutlinerDrag } from './drag.svg';
+export { ReactComponent as IconOutlinerDrag } from './drag.svg';
+export { ReactComponent as IconInfo } from './info.svg';

src/assets/icons/outliner/info.svg

@@ -19,9 +19,7 @@ export const Filter: FC<FilterInterface> = ({
   const [filterList, setFilterList] = useState<FilterListInterface[]>([]);
 
   useEffect(() => {
-    if(filterList.length > 0) {
-      onChange(FilterItems(filterData, filterList));
-    }
+    onChange(FilterItems(filterData, filterList));
   }, [filterData]);
 
   const addNewFilterListItem = useCallback(() => {

src/components/Filter/Filter.tsx

@@ -3,3 +3,18 @@
     padding 16px
     font-size 14px
     color rgba(#000, 0.6)
+
+  &__filters
+    &-empty
+      text-align center
+      margin 22px 0 30px 0
+
+    &-title
+      font-weight 500
+      font-size 12px
+      color #1f1f1f
+
+    &-description
+      font-weight 400
+      font-size 12px
+      color #898098

src/components/SidePanels/OutlinerPanel/OutlinerPanel.styl

@@ -1,10 +1,11 @@
 import { observer } from 'mobx-react';
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Block, Elem } from '../../../utils/bem';
 import { PanelBase, PanelProps } from '../PanelBase';
 import { OutlinerTree } from './OutlinerTree';
 import { ViewControls } from './ViewControls';
 import './OutlinerPanel.styl';
+import { IconInfo } from '../../../assets/icons/outliner';
 
 interface OutlinerPanelProps extends PanelProps {
   regions: any;
@@ -69,6 +70,10 @@ 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
@@ -81,10 +86,19 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
         onFilterChange={onFilterChange}
       />
       {regions?.regions?.length > 0 ? (
-        <OutlinerTree
-          regions={regions}
-          selectedKeys={regions.selection.keys}
-        />
+        <>
+          <OutlinerTree
+            regions={regions}
+            selectedKeys={regions.selection.keys}
+          />
+          {hiddenRegions > 0 && (
+            <Elem name="filters-empty">
+              <IconInfo width={21} height={20} />
+              <Elem name="filters-title">There {hiddenRegions === 1 ? 'is' : 'are'} {hiddenRegions} hidden region{hiddenRegions > 1 && 's'}</Elem>
+              <Elem name="filters-description">Adjust or remove filters to view</Elem>
+            </Elem>
+          )}
+        </>
       ) : (
         <Elem name="empty">
           Regions not added