Merge pull request #4191 from kubeshop/devcatalin/refactor/filtering

improve filtering visuals
kubeshop · Nov 13, 2023 · 52d61a3 · 52d61a3
2 parents 122e2b3 + 737b835
commit 52d61a3
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 10 deletions.
diff --git a/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/TreeNode.styled.tsx b/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/TreeNode.styled.tsx
@@ -65,6 +65,7 @@ export const TitleText = styled.span<{
   $isSelected?: boolean;
   $isHighlighted?: boolean;
   $isExcluded: boolean;
+  $isDisabled?: boolean;
 }>(props => ({
   overflow: 'hidden',
   position: 'relative',
@@ -75,6 +76,8 @@ export const TitleText = styled.span<{
     ? Colors.blackPure
     : props.$isHighlighted
     ? Colors.cyan7
+    : props.$isDisabled
+    ? Colors.grey7
     : props.$isExcluded
     ? Colors.grey7
     : Colors.blue10,

diff --git a/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/TreeNodeFile.tsx b/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/TreeNodeFile.tsx
@@ -62,7 +62,7 @@ const TreeNodeFile: React.FC<Props> = props => {
       $isDisabled={isDisabled}
     >
       <S.TitleContainer $actionButtonsWidth={actionButtonsWidth} $isHovered={isHovered}>
-        <S.TitleText $isSelected={isSelected} $isExcluded={fileEntry.isExcluded}>
+        <S.TitleText $isSelected={isSelected} $isExcluded={fileEntry.isExcluded} $isDisabled={isDisabled}>
           <Tooltip
             overlayStyle={{fontSize: '12px', wordBreak: 'break-all'}}
             mouseEnterDelay={TOOLTIP_DELAY}

diff --git a/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/TreeNodeFolder.tsx b/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/TreeNodeFolder.tsx
@@ -59,7 +59,7 @@ const TreeNodeFolder: React.FC<Props> = props => {
       onContextMenu={onContextMenu}
     >
       <S.TitleContainer $actionButtonsWidth={actionButtonsWidth} $isHovered={isHovered}>
-        <S.TitleText $isExcluded={folderEntry.isExcluded}>
+        <S.TitleText $isExcluded={folderEntry.isExcluded} $isDisabled={isDisabled}>
           <Tooltip
             overlayStyle={{fontSize: '12px', wordBreak: 'break-all'}}
             mouseEnterDelay={TOOLTIP_DELAY}

diff --git a/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/hooks.tsx b/src/components/organisms/ExplorerPane/FilePane/FileSystemTree/TreeNode/hooks.tsx
@@ -121,9 +121,10 @@ export const useRename = () => {
 };
 
 export const useIsDisabled = (fileEntry?: FileEntry) => {
+  const fileOrFolderContainedIn = useAppSelector(state => state.main.resourceFilter.fileOrFolderContainedIn);
   const isDisabled = useMemo(() => {
-    return isFileEntryDisabled(fileEntry);
-  }, [fileEntry]);
+    return isFileEntryDisabled(fileEntry, fileOrFolderContainedIn);
+  }, [fileEntry, fileOrFolderContainedIn]);
   return isDisabled;
 };
 

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -79,6 +79,20 @@ export const ADDITIONAL_SUPPORTED_FILES = [
   '.env.development',
   '.github',
   '.vscode',
+  'OWNERS',
+  'SECURITY_CONTACTS',
+  'SECURITY',
+  'CODEOWNERS',
+  'CODE_OF_CONDUCT',
+  'CONTRIBUTING',
+  'CONTRIBUTORS',
+  'AUTHORS',
+  'PULL_REQUEST_TEMPLATE',
+  'ISSUE_TEMPLATE',
+  'README',
+  'CHANGELOG',
+  'LICENSE_TEMPLATE',
+  'OWNERS_ALIASES',
 ];
 
 export const CLUSTER_DASHBOARD_HELP_URL: string = 'https://kubeshop.github.io/monokle/cluster-mode';

diff --git a/src/redux/selectors/dryRunsSelectors.ts b/src/redux/selectors/dryRunsSelectors.ts
@@ -3,6 +3,8 @@ import {createSelector} from 'reselect';
 
 import {isKustomizationResource} from '@redux/services/kustomize';
 
+import {isResourcePassingFilter} from '@utils/resources';
+
 import {ResourceMeta} from '@shared/models/k8sResource';
 import {RootState} from '@shared/models/rootState';
 import {isDefined} from '@shared/utils/filter';
@@ -82,8 +84,9 @@ export const dryRunNodesSelector = createSelector(
     (state: RootState) => state.main.helmValuesMap,
     (state: RootState) => state.config.projectConfig?.helm?.previewConfigurationMap,
     (state: RootState) => state.config.projectConfig?.savedCommandMap,
+    (state: RootState) => state.main.resourceFilter,
   ],
-  (localResourceMetaMap, helmChartMap, helmValuesMap, previewConfigurationMap, savedCommandMa) => {
+  (localResourceMetaMap, helmChartMap, helmValuesMap, previewConfigurationMap, savedCommandMap, filter) => {
     const list: DryRunNode[] = [];
 
     const kustomizationsByAnchestorFolder = Object.values(localResourceMetaMap).reduce<
@@ -92,6 +95,9 @@ export const dryRunNodesSelector = createSelector(
       if (!isKustomizationResource(resource)) {
         return acc;
       }
+      if (!isResourcePassingFilter(resource, filter)) {
+        return acc;
+      }
       const anchestorFolder = dirname(dirname(resource.origin.filePath));
       if (!acc[anchestorFolder]) {
         acc[anchestorFolder] = [];
@@ -112,7 +118,17 @@ export const dryRunNodesSelector = createSelector(
           });
       });
 
-    const helmCharts = Object.values(helmChartMap).sort((a, b) => a.name.localeCompare(b.name));
+    const helmCharts = Object.values(helmChartMap)
+      .filter(chart => {
+        if (!filter.fileOrFolderContainedIn || filter.fileOrFolderContainedIn.trim() === '') {
+          return true;
+        }
+        if (!chart.filePath.startsWith(filter.fileOrFolderContainedIn)) {
+          return false;
+        }
+        return true;
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
     helmCharts.forEach(helmChart => {
       list.push({type: 'helm-chart', chartId: helmChart.id});
       const helmValues = helmChart.valueFileIds.map(id => helmValuesMap[id]).filter(isDefined);
@@ -139,7 +155,7 @@ export const dryRunNodesSelector = createSelector(
       });
     });
 
-    const commands = Object.values(savedCommandMa ?? {})
+    const commands = Object.values(savedCommandMap ?? {})
       .filter(isDefined)
       .sort((a, b) => a.label.localeCompare(b.label));
 

diff --git a/src/utils/files.ts b/src/utils/files.ts
@@ -202,18 +202,23 @@ export function createFileWithContent(filePath: string, content: string) {
   return fs.writeFileSync(filePath, content, {flag: 'wx'});
 }
 
-export const isFileEntryDisabled = (fileEntry?: FileEntry) => {
+export const isFileEntryDisabled = (fileEntry?: FileEntry, fileOrFolderContainedIn?: string) => {
   if (!fileEntry) {
     return true;
   }
   const isFolder = isDefined(fileEntry.children);
   const isTextFile = ALL_TEXT_EXTENSIONS.some(extension => fileEntry.name.endsWith(extension));
 
+  const isPassingFilter =
+    !fileOrFolderContainedIn ||
+    fileOrFolderContainedIn.trim() === '' ||
+    fileEntry.filePath.startsWith(fileOrFolderContainedIn);
+
   if (isFolder) {
-    return false;
+    return !isPassingFilter;
   }
 
-  return !isTextFile || fileEntry.isExcluded;
+  return !isTextFile || fileEntry.isExcluded || !isPassingFilter;
 };
 
 const getParentFolderPath = (relativePath: string): string | undefined => {