Display 'path' when creating a new file/folder

Fixes #6544

- displays the parent `path` when attempting to create a new file (path in which the file is created at).
- displays the parent `path` when attempting to create a new folder (path in which the folder is created at).
- when the URI selection from the explorer is at the workspace root display the entire path.
- when the URI selection from the explorer is not the workspace root, display the relative path (ex: packages/core/src/common).
- introduces the `WorkspaceInputDialog` dialog.
- introduces the `WorkspaceInputDialogProps` which has a new `parentUri` prop.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>

packages/workspace/src/browser/workspace-commands.ts

@@ -23,7 +23,7 @@ import { CommonMenus } from '@theia/core/lib/browser/common-frontend-contributio
 import { FileSystem, FileStat } from '@theia/filesystem/lib/common/filesystem';
 import { FileDialogService } from '@theia/filesystem/lib/browser';
 import { SingleTextInputDialog, ConfirmDialog } from '@theia/core/lib/browser/dialogs';
-import { OpenerService, OpenHandler, open, FrontendApplication } from '@theia/core/lib/browser';
+import { OpenerService, OpenHandler, open, FrontendApplication, LabelProvider } from '@theia/core/lib/browser';
 import { UriCommandHandler, UriAwareCommandHandler } from '@theia/core/lib/common/uri-command-handler';
 import { WorkspaceService } from './workspace-service';
 import { MessageService } from '@theia/core/lib/common/message-service';
@@ -34,6 +34,7 @@ import { FileSystemUtils } from '@theia/filesystem/lib/common';
 import { WorkspaceCompareHandler } from './workspace-compare-handler';
 import { FileDownloadCommands } from '@theia/filesystem/lib/browser/download/file-download-command-contribution';
 import { FileSystemCommands } from '@theia/filesystem/lib/browser/filesystem-frontend-contribution';
+import { WorkspaceInputDialog } from './workspace-input-dialog';
 
 const validFilename: (arg: string) => boolean = require('valid-filename');
 
@@ -171,6 +172,7 @@ export class EditMenuContribution implements MenuContribution {
 @injectable()
 export class WorkspaceCommandContribution implements CommandContribution {
 
+    @inject(LabelProvider) protected readonly labelProvider: LabelProvider;
     @inject(FileSystem) protected readonly fileSystem: FileSystem;
     @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
     @inject(SelectionService) protected readonly selectionService: SelectionService;
@@ -201,11 +203,12 @@ export class WorkspaceCommandContribution implements CommandContribution {
                     const { fileName, fileExtension } = this.getDefaultFileConfig();
                     const vacantChildUri = FileSystemUtils.generateUniqueResourceURI(parentUri, parent, fileName, fileExtension);
 
-                    const dialog = new SingleTextInputDialog({
+                    const dialog = new WorkspaceInputDialog({
                         title: 'New File',
+                        parentUri: parentUri,
                         initialValue: vacantChildUri.path.base,
                         validate: name => this.validateFileName(name, parent, true)
-                    });
+                    }, this.labelProvider);
 
                     dialog.open().then(name => {
                         if (name) {
@@ -223,11 +226,12 @@ export class WorkspaceCommandContribution implements CommandContribution {
                 if (parent) {
                     const parentUri = new URI(parent.uri);
                     const vacantChildUri = FileSystemUtils.generateUniqueResourceURI(parentUri, parent, 'Untitled');
-                    const dialog = new SingleTextInputDialog({
+                    const dialog = new WorkspaceInputDialog({
                         title: 'New Folder',
+                        parentUri: parentUri,
                         initialValue: vacantChildUri.path.base,
                         validate: name => this.validateFileName(name, parent, true)
-                    });
+                    }, this.labelProvider);
                     dialog.open().then(name => {
                         if (name) {
                             this.fileSystem.createFolder(parentUri.resolve(name).toString());

packages/workspace/src/browser/workspace-input-dialog.ts

@@ -0,0 +1,57 @@
+/********************************************************************************
+ * Copyright (C) 2019 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 { inject, injectable } from 'inversify';
+import URI from '@theia/core/lib/common/uri';
+import { SingleTextInputDialog, SingleTextInputDialogProps, LabelProvider } from '@theia/core/lib/browser';
+
+@injectable()
+export class WorkspaceInputDialogProps extends SingleTextInputDialogProps {
+    /**
+     * The parent `URI` for the selection present in the explorer.
+     * Used to display the path in which the file/folder is created at.
+     */
+    parentUri: URI;
+}
+
+export class WorkspaceInputDialog extends SingleTextInputDialog {
+
+    constructor(
+        @inject(WorkspaceInputDialogProps) protected readonly props: WorkspaceInputDialogProps,
+        @inject(LabelProvider) protected readonly labelProvider: LabelProvider,
+    ) {
+        super(props);
+        this.appendParentPath();
+    }
+
+    /**
+     * Append the human-readable parent `path` to the dialog.
+     * When possible, display the relative path, else display the full path (ex: workspace root).
+     */
+    protected appendParentPath(): void {
+        // Compute the label for the parent URI.
+        const label = this.labelProvider.getLongName(this.props.parentUri);
+        const element = document.createElement('div');
+        // Create the `folder` icon.
+        const icon = document.createElement('i');
+        icon.classList.add('fa', 'fa-folder');
+        icon.style.marginRight = '0.5em';
+        element.appendChild(icon);
+        element.appendChild(document.createTextNode(label));
+        // Add the path and icon div before the `inputField`.
+        this.contentNode.insertBefore(element, this.inputField);
+    }
+}