Option to toggle hidden folders/files in browser file dialog

packages/filesystem/src/browser/file-dialog/file-dialog-hidden-files-renderer.tsx

@@ -0,0 +1,59 @@
+// *****************************************************************************
+// Copyright (C) 2023 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { nls } from '@theia/core';
+import { ReactRenderer } from '@theia/core/lib/browser';
+import { inject, postConstruct } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { FileDialogTree } from './file-dialog-tree';
+
+const TOGGLE_HIDDEN_PANEL_CLASS = 'theia-ToggleHiddenPanel';
+const TOGGLE_HIDDEN_CONTAINER_CLASS = 'theia-ToggleHiddenInputContainer';
+const CHECKBOX_CLASS = 'theia-ToggleHiddenInputCheckbox';
+
+export const HiddenFilesToggleRendererFactory = Symbol('HiddenFilesToggleRendererFactory');
+export interface HiddenFilesToggleRendererFactory {
+    (fileDialogTree: FileDialogTree): FileDialogHiddenFilesToggleRenderer;
+}
+export class FileDialogHiddenFilesToggleRenderer extends ReactRenderer {
+    @inject(FileDialogTree) fileDialogTree: FileDialogTree;
+
+    @postConstruct()
+    protected init(): void {
+        this.host.classList.add(TOGGLE_HIDDEN_PANEL_CLASS);
+        this.render();
+    }
+
+    protected readonly handleCheckboxChanged = (e: React.ChangeEvent<HTMLInputElement>): void => this.onCheckboxChanged(e);
+    protected override doRender(): React.ReactNode {
+        return (
+            <div className={TOGGLE_HIDDEN_CONTAINER_CLASS}>
+                {nls.localize('theia/fileDialog/showHidden', 'Show hidden files')}
+                <input
+                    type='checkbox'
+                    className={CHECKBOX_CLASS}
+                    onChange={this.handleCheckboxChanged}
+                />
+            </div>
+        );
+    }
+
+    protected onCheckboxChanged(e: React.ChangeEvent<HTMLInputElement>): void {
+        const { checked } = e.target;
+        this.fileDialogTree.showHidden = checked;
+        e.stopPropagation();
+    }
+}

packages/filesystem/src/browser/file-dialog/file-dialog-module.ts

@@ -16,7 +16,9 @@
 
 import { ContainerModule } from '@theia/core/shared/inversify';
 import { LocationListRenderer, LocationListRendererFactory, LocationListRendererOptions } from '../location';
+import { FileDialogHiddenFilesToggleRenderer, HiddenFilesToggleRendererFactory } from './file-dialog-hidden-files-renderer';
 import { DefaultFileDialogService, FileDialogService } from './file-dialog-service';
+import { FileDialogTree } from './file-dialog-tree';
 import { FileDialogTreeFiltersRenderer, FileDialogTreeFiltersRendererFactory, FileDialogTreeFiltersRendererOptions } from './file-dialog-tree-filters-renderer';
 export default new ContainerModule(bind => {
     bind(DefaultFileDialogService).toSelf().inSingletonScope();
@@ -33,4 +35,10 @@ export default new ContainerModule(bind => {
         childContainer.bind(FileDialogTreeFiltersRenderer).toSelf().inSingletonScope();
         return childContainer.get(FileDialogTreeFiltersRenderer);
     });
+    bind(HiddenFilesToggleRendererFactory).toFactory(({ container }) => (fileDialogTree: FileDialogTree) => {
+        const child = container.createChild();
+        child.bind(FileDialogTree).toConstantValue(fileDialogTree);
+        child.bind(FileDialogHiddenFilesToggleRenderer).toSelf().inSingletonScope();
+        return child.get(FileDialogHiddenFilesToggleRenderer);
+    });
 });

packages/filesystem/src/browser/file-dialog/file-dialog-tree.ts

@@ -21,7 +21,22 @@ import { FileStat } from '../../common/files';
 
 @injectable()
 export class FileDialogTree extends FileTree {
+    protected _showHidden = false;
+    set showHidden(show: boolean) {
+        this._showHidden = show;
+        this.refresh();
+    }
 
+    get showHidden(): boolean {
+        return this._showHidden;
+    }
+
+    protected isHiddenFile = (fileStat: FileStat): boolean => {
+        const { name } = fileStat;
+        const filename = name ?? '';
+        const isHidden = filename.startsWith('.');
+        return isHidden;
+    };
     /**
      * Extensions for files to be shown
      */
@@ -57,6 +72,9 @@ export class FileDialogTree extends FileTree {
      * @param fileStat resource to check
      */
     protected isVisible(fileStat: FileStat): boolean {
+        if (!this._showHidden && this.isHiddenFile(fileStat)) {
+            return false;
+        }
         if (fileStat.isDirectory) {
             return true;
         }

packages/filesystem/src/browser/file-dialog/file-dialog.ts

@@ -26,6 +26,7 @@ import { FileDialogTreeFiltersRenderer, FileDialogTreeFilters, FileDialogTreeFil
 import URI from '@theia/core/lib/common/uri';
 import { Panel } from '@theia/core/shared/@phosphor/widgets';
 import * as DOMPurify from '@theia/core/shared/dompurify';
+import { FileDialogHiddenFilesToggleRenderer, HiddenFilesToggleRendererFactory } from './file-dialog-hidden-files-renderer';
 
 export const OpenFileDialogFactory = Symbol('OpenFileDialogFactory');
 export interface OpenFileDialogFactory {
@@ -127,11 +128,13 @@ export abstract class FileDialog<T> extends AbstractDialog<T> {
     protected up: HTMLSpanElement;
     protected locationListRenderer: LocationListRenderer;
     protected treeFiltersRenderer: FileDialogTreeFiltersRenderer | undefined;
+    protected hiddenFilesToggleRenderer: FileDialogHiddenFilesToggleRenderer;
     protected treePanel: Panel;
 
     @inject(FileDialogWidget) readonly widget: FileDialogWidget;
     @inject(LocationListRendererFactory) readonly locationListFactory: LocationListRendererFactory;
     @inject(FileDialogTreeFiltersRendererFactory) readonly treeFiltersFactory: FileDialogTreeFiltersRendererFactory;
+    @inject(HiddenFilesToggleRendererFactory) readonly hiddenFilesToggleFactory: HiddenFilesToggleRendererFactory;
 
     constructor(
         @inject(FileDialogProps) override readonly props: FileDialogProps
@@ -174,6 +177,9 @@ export abstract class FileDialog<T> extends AbstractDialog<T> {
         this.locationListRenderer.host.classList.add(NAVIGATION_LOCATION_LIST_PANEL_CLASS);
         navigationPanel.appendChild(this.locationListRenderer.host);
 
+        this.hiddenFilesToggleRenderer = this.hiddenFilesToggleFactory(this.widget.model.tree);
+        this.contentNode.appendChild(this.hiddenFilesToggleRenderer.host);
+
         if (this.props.filters) {
             this.treeFiltersRenderer = this.treeFiltersFactory({ suppliedFilters: this.props.filters, fileDialogTree: this.widget.model.tree });
             const filters = Object.keys(this.props.filters);

packages/filesystem/src/browser/style/file-dialog.css

@@ -202,3 +202,10 @@
 .dialogContent .theia-ControlPanel > * {
     margin-left: 4px;
 }
+
+.dialogContent .theia-ToggleHiddenInputContainer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: var(--theia-ui-padding);
+}