scm: add 'scm.defaultViewMode' preference

added the preference `scm.defaultViewMode` which controls the
view mode rendering of the scm widget from tree to flat list.

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

packages/scm/src/browser/scm-contribution.ts

@@ -60,11 +60,11 @@ export namespace SCM_COMMANDS {
         iconClass: 'codicon codicon-list-tree',
         label: 'Toggle to Tree View',
     };
-    export const FLAT_VIEW_MODE = {
-        id: 'scm.viewmode.flat',
-        tooltip: 'Toggle to Flat View',
+    export const LIST_VIEW_MODE = {
+        id: 'scm.viewmode.list',
+        tooltip: 'Toggle to List View',
         iconClass: 'codicon codicon-list-flat',
-        label: 'Toggle to Flat View',
+        label: 'Toggle to List View',
     };
 }
 
@@ -151,7 +151,7 @@ export class ScmContribution extends AbstractViewContribution<ScmWidget> impleme
                 }
             }
         };
-        const registerToggleViewItem = (command: Command, mode: 'tree' | 'flat') => {
+        const registerToggleViewItem = (command: Command, mode: 'tree' | 'list') => {
             const id = command.id;
             const item: TabBarToolbarItem = {
                 id,
@@ -179,7 +179,7 @@ export class ScmContribution extends AbstractViewContribution<ScmWidget> impleme
             registry.registerItem(item);
         };
         registerToggleViewItem(SCM_COMMANDS.TREE_VIEW_MODE, 'tree');
-        registerToggleViewItem(SCM_COMMANDS.FLAT_VIEW_MODE, 'flat');
+        registerToggleViewItem(SCM_COMMANDS.LIST_VIEW_MODE, 'list');
     }
 
     registerKeybindings(keybindings: KeybindingRegistry): void {

packages/scm/src/browser/scm-frontend-module.ts

@@ -44,6 +44,7 @@ import { ScmTreeLabelProvider } from './scm-tree-label-provider';
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 import { LabelProviderContribution } from '@theia/core/lib/browser/label-provider';
+import { bindScmPreferences } from './scm-preferences';
 
 export default new ContainerModule(bind => {
     bind(ScmContextKeyService).toSelf().inSingletonScope();
@@ -115,6 +116,8 @@ export default new ContainerModule(bind => {
 
     bind(ScmTreeLabelProvider).toSelf().inSingletonScope();
     bind(LabelProviderContribution).toService(ScmTreeLabelProvider);
+
+    bindScmPreferences(bind);
 });
 
 export function createFileChangeTreeContainer(parent: interfaces.Container): Container {

packages/scm/src/browser/scm-preferences.ts

@@ -0,0 +1,61 @@
+/********************************************************************************
+ * Copyright (C) 2020 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 { interfaces } from 'inversify';
+import {
+    createPreferenceProxy,
+    PreferenceProxy,
+    PreferenceService,
+    PreferenceSchema,
+    PreferenceContribution
+} from '@theia/core/lib/browser/preferences';
+
+export const scmPreferenceSchema: PreferenceSchema = {
+    type: 'object',
+    properties: {
+        'scm.defaultViewMode': {
+            type: 'string',
+            enum: ['tree', 'list'],
+            enumDescriptions: [
+                'Show the repository changes as a tree.',
+                'Show the repository changes as a list.'
+            ],
+            description: 'Controls the default source control view mode.',
+            default: 'list'
+        }
+    }
+};
+
+export interface ScmConfiguration {
+    'scm.defaultViewMode': 'tree' | 'list'
+}
+
+export const ScmPreferences = Symbol('ScmPreferences');
+export type ScmPreferences = PreferenceProxy<ScmConfiguration>;
+
+export function createScmPreferences(preferences: PreferenceService): ScmPreferences {
+    return createPreferenceProxy(preferences, scmPreferenceSchema);
+}
+
+export function bindScmPreferences(bind: interfaces.Bind): void {
+    bind(ScmPreferences).toDynamicValue((ctx: interfaces.Context) => {
+        const preferences = ctx.container.get<PreferenceService>(PreferenceService);
+        return createScmPreferences(preferences);
+    }).inSingletonScope();
+
+    bind(PreferenceContribution).toConstantValue({ schema: scmPreferenceSchema });
+}
+

packages/scm/src/browser/scm-tree-model.ts

@@ -83,8 +83,8 @@ export class ScmTreeModel extends TreeModelImpl {
         return this._languageId;
     }
 
-    protected _viewMode: 'tree' | 'flat' = 'flat';
-    set viewMode(id: 'tree' | 'flat') {
+    protected _viewMode: 'tree' | 'list' = 'list';
+    set viewMode(id: 'tree' | 'list') {
         const oldSelection = this.selectedNodes;
         this._viewMode = id;
         if (this._provider) {
@@ -98,7 +98,7 @@ export class ScmTreeModel extends TreeModelImpl {
             }
         }
     }
-    get viewMode(): 'tree' | 'flat' {
+    get viewMode(): 'tree' | 'list' {
         return this._viewMode;
     }
 
@@ -149,7 +149,7 @@ export class ScmTreeModel extends TreeModelImpl {
         };
 
         switch (this._viewMode) {
-            case 'flat':
+            case 'list':
                 groupNode.children = group.resources.map(fileChange => this.toFileChangeNode(fileChange, groupNode));
                 break;
             case 'tree':

packages/scm/src/browser/scm-tree-widget.tsx

@@ -79,10 +79,10 @@ export class ScmTreeWidget extends TreeWidget {
         }));
     }
 
-    set viewMode(id: 'tree' | 'flat') {
+    set viewMode(id: 'tree' | 'list') {
         this.model.viewMode = id;
     }
-    get viewMode(): 'tree' | 'flat' {
+    get viewMode(): 'tree' | 'list' {
         return this.model.viewMode;
     }
 
@@ -409,7 +409,7 @@ export class ScmTreeWidget extends TreeWidget {
 
     restoreState(oldState: any): void {
         const { mode, tree } = oldState;
-        this.model.viewMode = mode === 'tree' ? 'tree' : 'flat';
+        this.model.viewMode = mode === 'tree' ? 'tree' : 'list';
         super.restoreState(tree);
     }
 

packages/scm/src/browser/scm-widget.tsx

@@ -20,12 +20,14 @@ import { Message } from '@phosphor/messaging';
 import { injectable, inject, postConstruct } from 'inversify';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import {
-    BaseWidget, Widget, StatefulWidget, Panel, PanelLayout, MessageLoop} from '@theia/core/lib/browser';
+    BaseWidget, Widget, StatefulWidget, Panel, PanelLayout, MessageLoop, PreferenceChangeEvent
+} from '@theia/core/lib/browser';
 import { ScmCommitWidget } from './scm-commit-widget';
 import { ScmAmendWidget } from './scm-amend-widget';
 import { ScmNoRepositoryWidget } from './scm-no-repository-widget';
 import { ScmService } from './scm-service';
 import { ScmTreeWidget } from './scm-tree-widget';
+import { ScmPreferences, ScmConfiguration } from './scm-preferences';
 
 @injectable()
 export class ScmWidget extends BaseWidget implements StatefulWidget {
@@ -39,11 +41,12 @@ export class ScmWidget extends BaseWidget implements StatefulWidget {
     @inject(ScmTreeWidget) protected readonly resourceWidget: ScmTreeWidget;
     @inject(ScmAmendWidget) protected readonly amendWidget: ScmAmendWidget;
     @inject(ScmNoRepositoryWidget) protected readonly noRepositoryWidget: ScmNoRepositoryWidget;
+    @inject(ScmPreferences) protected readonly scmPreferences: ScmPreferences;
 
-    set viewMode(mode: 'tree' | 'flat') {
+    set viewMode(mode: 'tree' | 'list') {
         this.resourceWidget.viewMode = mode;
     }
-    get viewMode(): 'tree' | 'flat' {
+    get viewMode(): 'tree' | 'list' {
         return this.resourceWidget.viewMode;
     }
 
@@ -60,7 +63,7 @@ export class ScmWidget extends BaseWidget implements StatefulWidget {
         const layout = new PanelLayout();
         this.layout = layout;
         this.panel = new Panel({
-            layout: new PanelLayout ({
+            layout: new PanelLayout({
             })
         });
         this.panel.node.tabIndex = -1;
@@ -74,12 +77,27 @@ export class ScmWidget extends BaseWidget implements StatefulWidget {
 
         this.refresh();
         this.toDispose.push(this.scmService.onDidChangeSelectedRepository(() => this.refresh()));
+        this.updateViewMode(this.scmPreferences.get('scm.defaultViewMode'));
+        this.toDispose.push(this.scmPreferences.onPreferenceChanged((e: PreferenceChangeEvent<ScmConfiguration>) => {
+            if (e.preferenceName === 'scm.defaultViewMode') {
+                this.updateViewMode(e.newValue!);
+            }
+        }));
+
     }
 
     get containerLayout(): PanelLayout {
         return this.panel.layout as PanelLayout;
     }
 
+    /**
+     * Updates the view mode based on the preference value.
+     * @param preference the view mode preference.
+     */
+    protected updateViewMode(preference: 'tree' | 'list'): void {
+        this.viewMode = preference;
+    }
+
     protected readonly toDisposeOnRefresh = new DisposableCollection();
     protected refresh(): void {
         this.toDisposeOnRefresh.dispose();