feat: added Remove from Files: Exclude button, added new setting Hide…

… Excluded Files
kubeshop · Nov 22, 2021 · 89a7d5d · 89a7d5d
1 parent cb8ec4a
commit 89a7d5d
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 17 deletions.
diff --git a/src/components/organisms/FileTreePane/FileTreePane.tsx b/src/components/organisms/FileTreePane/FileTreePane.tsx
@@ -69,7 +69,12 @@ const NodeTitleContainer = styled.div`
   text-overflow: ellipsis;
 `;
 
-const createNode = (fileEntry: FileEntry, fileMap: FileMapType, resourceMap: ResourceMapType) => {
+const createNode = (
+  fileEntry: FileEntry,
+  fileMap: FileMapType,
+  resourceMap: ResourceMapType,
+  hideExcludedFilesInFileExplorer: boolean
+): TreeNode => {
   const resources = getResourcesForPath(fileEntry.filePath, resourceMap);
 
   const node: TreeNode = {
@@ -100,7 +105,14 @@ const createNode = (fileEntry: FileEntry, fileMap: FileMapType, resourceMap: Res
       node.children = fileEntry.children
         .map(child => fileMap[getChildFilePath(child, fileEntry, fileMap)])
         .filter(childEntry => childEntry)
-        .map(childEntry => createNode(childEntry, fileMap, resourceMap));
+        .map(childEntry => createNode(childEntry, fileMap, resourceMap, hideExcludedFilesInFileExplorer))
+        .filter(childEntry => {
+          if (!hideExcludedFilesInFileExplorer) {
+            return childEntry;
+          }
+
+          return !childEntry.isExcluded;
+        });
     }
   } else {
     node.isLeaf = true;
@@ -296,6 +308,7 @@ interface TreeItemProps {
   onDelete: (args: DeleteEntityCallback) => void;
   onRename: (absolutePath: string, osPlatform: NodeJS.Platform) => void;
   onExcludeFromProcessing: (relativePath: string) => void;
+  onIncludeToProcessing: (relativePath: string) => void;
   isExcluded?: Boolean;
 }
 
@@ -324,6 +337,7 @@ const TreeItem: React.FC<TreeItemProps> = props => {
     onDelete,
     onRename,
     onExcludeFromProcessing,
+    onIncludeToProcessing,
   } = props;
 
   const fileMap = useAppSelector(state => state.main.fileMap);
@@ -379,18 +393,19 @@ const TreeItem: React.FC<TreeItemProps> = props => {
       </Menu.Item>
       {fileMap[ROOT_FILE_ENTRY].filePath !== treeKey ? (
         <>
-          {!isExcluded ? (
-            <Menu.Item
-              onClick={e => {
-                e.domEvent.stopPropagation();
-
+          <Menu.Item
+            onClick={e => {
+              e.domEvent.stopPropagation();
+              if (isExcluded) {
+                onIncludeToProcessing(relativePath);
+              } else {
                 onExcludeFromProcessing(relativePath);
-              }}
-              key="add_to_files_exclude"
-            >
-              Add to Files: Exclude
-            </Menu.Item>
-          ) : null}
+              }
+            }}
+            key="add_to_files_exclude"
+          >
+            {isExcluded ? 'Remove from' : 'Add to'} Files: Exclude
+          </Menu.Item>
           <ContextMenuDivider />
           <Menu.Item
             onClick={e => {
@@ -468,6 +483,9 @@ const FileTreePane = () => {
   const selectedResourceId = useAppSelector(state => state.main.selectedResourceId);
   const selectedPath = useAppSelector(state => state.main.selectedPath);
   const isSelectingFile = useAppSelector(state => state.main.isSelectingFile);
+  const hideExcludedFilesInFileExplorer = useAppSelector(
+    state => state.config.settings.hideExcludedFilesInFileExplorer
+  );
   const loadLastFolderOnStartup = useAppSelector(state => state.config.settings.loadLastFolderOnStartup);
   const recentFolders = useAppSelector(state => state.config.recentFolders);
   const fileIncludes = useAppSelector(state => state.config.fileIncludes);
@@ -511,7 +529,7 @@ const FileTreePane = () => {
 
   useEffect(() => {
     const rootEntry = fileMap[ROOT_FILE_ENTRY];
-    const treeData = rootEntry && createNode(rootEntry, fileMap, resourceMap);
+    const treeData = rootEntry && createNode(rootEntry, fileMap, resourceMap, hideExcludedFilesInFileExplorer);
 
     setTree(treeData);
 
@@ -622,9 +640,7 @@ const FileTreePane = () => {
     }
   };
 
-  const onExcludeFromProcessing = async (relativePath: string) => {
-    dispatch(updateScanExcludes([...excludedFromScanFiles, relativePath]));
-
+  const openConfirmModal = () => {
     Modal.confirm({
       title: 'You should reload the file explorer to have your changes applied. Do you want to do it now?',
       icon: <ExclamationCircleOutlined />,
@@ -639,6 +655,20 @@ const FileTreePane = () => {
     });
   };
 
+  const onExcludeFromProcessing = (relativePath: string) => {
+    dispatch(updateScanExcludes([...excludedFromScanFiles, relativePath]));
+
+    openConfirmModal();
+  };
+
+  const onIncludeToProcessing = (relativePath: string) => {
+    dispatch(
+      updateScanExcludes(excludedFromScanFiles.filter((_, index) => excludedFromScanFiles[index] !== relativePath))
+    );
+
+    openConfirmModal();
+  };
+
   useEffect(() => {
     if (isSelectingFile) {
       dispatch(setSelectingFile(false));
@@ -796,6 +826,7 @@ const FileTreePane = () => {
                 onDelete={onDelete}
                 onRename={onRename}
                 onExcludeFromProcessing={onExcludeFromProcessing}
+                onIncludeToProcessing={onIncludeToProcessing}
                 {...event}
               />
             );

diff --git a/src/components/organisms/SettingsDrawer/SettingsDrawer.tsx b/src/components/organisms/SettingsDrawer/SettingsDrawer.tsx
@@ -10,6 +10,7 @@ import {
   updateFileIncludes,
   updateFolderReadsMaxDepth,
   updateHelmPreviewMode,
+  updateHideExcludedFilesInFileExplorer,
   updateKubeconfig,
   updateKustomizeCommand,
   updateLoadLastFolderOnStartup,
@@ -114,6 +115,10 @@ const SettingsDrawer = () => {
     }
   };
 
+  const onChangeHideExcludedFilesInFileExplorer = (e: any) => {
+    dispatch(updateHideExcludedFilesInFileExplorer(e.target.checked));
+  };
+
   const onChangeKustomizeCommand = (selectedKustomizeCommand: any) => {
     if (selectedKustomizeCommand === 'kubectl' || selectedKustomizeCommand === 'kustomize') {
       dispatch(updateKustomizeCommand(selectedKustomizeCommand));
@@ -247,6 +252,15 @@ const SettingsDrawer = () => {
           </Checkbox>
         </Tooltip>
       </StyledDiv>
+      <StyledDiv>
+        <StyledSpan>On Folder Scan Start</StyledSpan>
+        <Checkbox
+          checked={appConfig.settings.hideExcludedFilesInFileExplorer}
+          onChange={onChangeHideExcludedFilesInFileExplorer}
+        >
+          Hide files from the Files: Exclude list in the File Explorer
+        </Checkbox>
+      </StyledDiv>
       <StyledDiv>
         <StyledSpan>Maximum folder read recursion depth</StyledSpan>
         <InputNumber min={1} value={currentFolderReadsMaxDepth} onChange={setCurrentFolderReadsMaxDepth} />

diff --git a/src/models/appconfig.ts b/src/models/appconfig.ts
@@ -53,6 +53,7 @@ interface AppConfig {
     helmPreviewMode: 'template' | 'install';
     kustomizeCommand: KustomizeCommandType;
     loadLastFolderOnStartup: boolean;
+    hideExcludedFilesInFileExplorer: boolean;
   };
   recentFolders: string[];
   newVersion: {

diff --git a/src/redux/initialState.ts b/src/redux/initialState.ts
@@ -56,6 +56,7 @@ const initialAppConfigState: AppConfig = {
     textSize: electronStore.get('appConfig.settings.textSize'),
     language: electronStore.get('appConfig.settings.language'),
     loadLastFolderOnStartup: electronStore.get('appConfig.settings.loadLastFolderOnStartup'),
+    hideExcludedFilesInFileExplorer: false,
   },
   scanExcludes: electronStore.get('appConfig.scanExcludes') || [],
   isScanExcludesUpdated: 'outdated',

diff --git a/src/redux/reducers/appConfig.ts b/src/redux/reducers/appConfig.ts
@@ -72,6 +72,14 @@ export const updateLoadLastFolderOnStartup = createAsyncThunk(
   }
 );
 
+export const updateHideExcludedFilesInFileExplorer = createAsyncThunk(
+  'config/updateHideExcludedFilesInFileExplorer',
+  async (hideExcludedFiles: boolean, thunkAPI) => {
+    electronStore.set('appConfig.settings.hideExcludedFilesInFileExplorer', hideExcludedFiles);
+    thunkAPI.dispatch(configSlice.actions.setHideExcludedFilesInFileExplorer(hideExcludedFiles));
+  }
+);
+
 export const updateTheme = createAsyncThunk('config/updateTheme', async (theme: Themes, thunkAPI) => {
   electronStore.set('appConfig.settings.theme', theme);
   thunkAPI.dispatch(configSlice.actions.setTheme(theme));
@@ -153,6 +161,9 @@ export const configSlice = createSlice({
     setLoadLastFolderOnStartup: (state: Draft<AppConfig>, action: PayloadAction<boolean>) => {
       state.settings.loadLastFolderOnStartup = action.payload;
     },
+    setHideExcludedFilesInFileExplorer: (state: Draft<AppConfig>, action: PayloadAction<boolean>) => {
+      state.settings.hideExcludedFilesInFileExplorer = action.payload;
+    },
     setRecentFolders: (state: Draft<AppConfig>, action: PayloadAction<string[]>) => {
       state.recentFolders = action.payload;
     },