feat: displayed the amount of filters applied

src/components/molecules/IconWithPopover/IconWithPopover.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Popover, Button} from 'antd';
+
+import Icon from '@components/atoms/Icon';
+
+interface IconWithPopoverProps {
+  popoverContent: React.ReactNode | (() => React.ReactNode);
+  popoverTrigger: string | string[];
+  isDisabled?: boolean;
+  iconName?: string;
+  buttonType?: 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text';
+  iconComponent: React.ReactNode;
+}
+
+const IconWithPopover: React.FC<IconWithPopoverProps> = props => {
+  const {popoverContent, popoverTrigger, isDisabled = false, iconName, buttonType = 'link', iconComponent} = props;
+
+  const iconToDisplay = iconComponent || (iconName ? <Icon name={iconName} /> : null);
+
+  return (
+    <Popover content={popoverContent} trigger={popoverTrigger}>
+      <Button disabled={isDisabled} type={buttonType} size="small" icon={iconToDisplay} />
+    </Popover>
+  );
+};
+
+export default IconWithPopover;

src/components/molecules/IconWithPopover/index.ts

@@ -0,0 +1 @@
+export {default} from './IconWithPopover';

src/components/molecules/ResourceFilter/ResourceFilter.tsx

@@ -63,9 +63,11 @@ const makeKeyValuesFromObjectList = (objectList: any[], getNestedObject: (curren
 
 const ResourceFilter = () => {
   const dispatch = useAppDispatch();
-  const [name, setName] = useState<string>();
-  const [kind, setKind] = useState<string>();
-  const [namespace, setNamespace] = useState<string>();
+
+  // TODO: Should we use here Antd Form instead of storing all the field values in useStates?
+  const [name, setName] = useState('');
+  const [kind, setKind] = useState(ALL_OPTIONS);
+  const [namespace, setNamespace] = useState(ALL_OPTIONS);
   const [labels, setLabels] = useState<Record<string, string | null>>({});
   const [annotations, setAnnotations] = useState<Record<string, string | null>>({});
   const allNamespaces = useNamespaces({extra: ['all', 'default']});
@@ -88,27 +90,27 @@ const ResourceFilter = () => {
   }, [resourceMap]);
 
   const resetFilters = () => {
-    setName(undefined);
+    setName('');
     setKind(ALL_OPTIONS);
     setNamespace(ALL_OPTIONS);
     setLabels({});
     setAnnotations({});
   };
 
   const updateKind = (selectedKind: string) => {
-    if (selectedKind === ALL_OPTIONS) {
-      setKind(undefined);
-    } else {
-      setKind(selectedKind);
-    }
+    // if (selectedKind === ALL_OPTIONS) {
+    //   setKind(ALL_OPTIONS);
+    // } else {
+    setKind(selectedKind);
+    // }
   };
 
   const updateNamespace = (selectedNamespace: string) => {
-    if (selectedNamespace === ALL_OPTIONS) {
-      setNamespace(undefined);
-    } else {
-      setNamespace(selectedNamespace);
-    }
+    // if (selectedNamespace === ALL_OPTIONS) {
+    //   setNamespace(ALL_OPTIONS);
+    // } else {
+    setNamespace(selectedNamespace);
+    // }
   };
 
   useDebounce(
@@ -140,6 +142,7 @@ const ResourceFilter = () => {
           autoFocus
           placeholder="All or part of name..."
           defaultValue={name}
+          value={name}
           onChange={e => setName(e.target.value)}
         />
       </FieldContainer>

src/components/organisms/NavigatorPane/NavigatorPane.styled.tsx

@@ -31,8 +31,13 @@ export const TitleBarRightButtons = styled.div`
   float: right;
   display: flex;
   align-items: center;
+  padding-right: 16px;
 `;
 
 export const PlusButton = styled(Button)``;
 
 export const FilterButton = styled(Button)``;
+
+export const FiltersAmount = styled.div`
+  margin-left: 5px;
+`;

src/components/organisms/NavigatorPane/NavigatorPane.tsx

@@ -1,11 +1,12 @@
-import React, {useCallback, useContext} from 'react';
+import {useCallback, useContext, useMemo} from 'react';
 import AppContext from '@src/AppContext';
 import {K8sResource} from '@models/k8sresource';
 import {HelmValuesFile} from '@models/helm';
+import Colors from '@styles/Colors';
+import IconWithPopover from '@components/molecules/IconWithPopover';
 import KustomizationSectionBlueprint, {KustomizationScopeType} from '@src/navsections/KustomizationSectionBlueprint';
 import HelmChartSectionBlueprint, {HelmChartScopeType} from '@src/navsections/HelmChartSectionBlueprint';
 import K8sResourceSectionBlueprint, {K8sResourceScopeType} from '@src/navsections/K8sResourceSectionBlueprint';
-import {Popover} from 'antd';
 import {PlusOutlined, FilterOutlined} from '@ant-design/icons';
 import ResourceFilter from '@components/molecules/ResourceFilter';
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
@@ -18,16 +19,27 @@ import SectionRenderer from './SectionRenderer';
 import WarningsAndErrorsDisplay from './WarningsAndErrorsDisplay';
 import * as S from './NavigatorPane.styled';
 
-const NavPane = () => {
+const NavPane: React.FC = () => {
   const dispatch = useAppDispatch();
   const {windowSize} = useContext(AppContext);
   const windowHeight = windowSize.height;
   const navigatorHeight = windowHeight - NAVIGATOR_HEIGHT_OFFSET;
 
   const fileMap = useAppSelector(state => state.main.fileMap);
+  // TODO: remove this any
+  const resourceFilters: any = useAppSelector(state => state.main.resourceFilter);
+
   const isInClusterMode = useSelector(isInClusterModeSelector);
   const isInPreviewMode = useSelector(isInPreviewModeSelector);
 
+  const appliedFilters = useMemo(() => {
+    return Object.keys(resourceFilters)
+      .map(filterName => {
+        return {filterName, filterValue: resourceFilters[filterName]};
+      })
+      .filter(filter => filter.filterValue && Object.values(filter.filterValue).length);
+  }, [resourceFilters]);
+
   const doesRootFileEntryExist = useCallback(() => {
     return Boolean(fileMap[ROOT_FILE_ENTRY]);
   }, [fileMap]);
@@ -42,7 +54,6 @@ const NavPane = () => {
         <MonoPaneTitle>
           Navigator <WarningsAndErrorsDisplay />
         </MonoPaneTitle>
-
         <S.TitleBarRightButtons>
           <S.PlusButton
             disabled={!doesRootFileEntryExist() || isInClusterMode || isInPreviewMode}
@@ -51,14 +62,13 @@ const NavPane = () => {
             size="small"
             icon={<PlusOutlined />}
           />
-          <Popover content={<ResourceFilter />} trigger="click">
-            <S.FilterButton
-              disabled={!doesRootFileEntryExist() && !isInClusterMode && !isInPreviewMode}
-              type="link"
-              size="small"
-              icon={<FilterOutlined />}
-            />
-          </Popover>
+          <IconWithPopover
+            popoverContent={<ResourceFilter />}
+            popoverTrigger="click"
+            iconComponent={<FilterOutlined style={appliedFilters.length ? {color: Colors.greenOkay} : {}} />}
+            isDisabled={!doesRootFileEntryExist() && !isInClusterMode && !isInPreviewMode}
+          />
+          {appliedFilters.length ? <S.FiltersAmount>{appliedFilters.length} filters applied</S.FiltersAmount> : null}
         </S.TitleBarRightButtons>
       </S.TitleBar>
       <S.List height={navigatorHeight}>

src/components/organisms/NavigatorPane/SectionRenderer/SectionHeader.tsx

@@ -1,8 +1,8 @@
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {MinusSquareOutlined} from '@ant-design/icons';
 import * as S from './styled';
 
-function SectionHeader(props: {
+interface SectionHeaderProps {
   name: string;
   isSectionSelected: boolean;
   isCollapsed: boolean;
@@ -16,7 +16,9 @@ function SectionHeader(props: {
   itemsLength: number;
   expandSection: () => void;
   collapseSection: () => void;
-}) {
+}
+
+function SectionHeader(props: SectionHeaderProps) {
   const {
     name,
     isSectionSelected,