From 2d8639094cebd7c32584acdb68c035503d6c3dc9 Mon Sep 17 00:00:00 2001
From: Frenkel <lior.frenkel@sap.com>
Date: Wed, 16 Sep 2020 18:05:02 +0300
Subject: [PATCH] preferences: improve category headers and leaf

Signed-off-by: Lior Frenkel <lior.frenkel@sap.com>
---
 .../preferences/src/browser/style/index.css   | 12 ++++---
 .../util/preference-tree-generator.spec.ts    | 35 +++++++++++++++++++
 .../browser/util/preference-tree-generator.ts |  8 +++--
 .../views/preference-editor-widget.tsx        |  4 ++-
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/preferences/src/browser/style/index.css b/packages/preferences/src/browser/style/index.css
index a7c09bb70053c..d07167b1fdf81 100644
--- a/packages/preferences/src/browser/style/index.css
+++ b/packages/preferences/src/browser/style/index.css
@@ -189,13 +189,17 @@
     text-decoration: underline;
 }
 
-
-
-.theia-settings-container .settings-section-title {
+.theia-settings-container .settings-section-category-title {
     font-weight: bold;
     font-size: var(--theia-ui-font-size3);
     padding-left: calc(2 * var(--theia-ui-padding));
-}
+  }
+  
+.theia-settings-container .settings-section-subcategory-title {
+    font-weight: bold;
+    font-size: var(--theia-ui-font-size2);
+    padding-left: calc(2 * var(--theia-ui-padding));
+  }
 
 .theia-settings-container .settings-section>li {
     list-style-type: none;
diff --git a/packages/preferences/src/browser/util/preference-tree-generator.spec.ts b/packages/preferences/src/browser/util/preference-tree-generator.spec.ts
index f24d6bc4aa82f..98696d65c1204 100644
--- a/packages/preferences/src/browser/util/preference-tree-generator.spec.ts
+++ b/packages/preferences/src/browser/util/preference-tree-generator.spec.ts
@@ -30,6 +30,7 @@ import { Container } from 'inversify';
 import { PreferenceTreeGenerator } from './preference-tree-generator';
 import { PreferenceSchemaProvider } from '@theia/core/lib/browser';
 import { PreferenceConfigurations } from '@theia/core/lib/browser/preferences/preference-configurations';
+import { Preference } from './preference-types';
 
 disableJSDOM();
 
@@ -51,4 +52,38 @@ describe('preference-tree-generator', () => {
         expect(preferenceTreeGenerator['split'](testString)).deep.eq(testString.split(splitter));
     });
 
+    it('PreferenceTreeGenerator.format', () => {
+        const testString = 'aaaBbbCcc Dddd eee';
+        expect(preferenceTreeGenerator['formatString'](testString)).eq('Aaa Bbb Ccc Dddd Eee');
+    });
+
+    describe('PreferenceTreeGenerator.createLeafNode', () => {
+        it('when property constructs of three parts the third part is the leaf', () => {
+            const property = 'category-name.subcategory.leaf';
+            const expectedName = 'Leaf';
+            testLeafName(property, expectedName);
+        });
+
+        it('when property constructs of two parts the second part is the leaf', () => {
+            const property = 'category-name.leaf';
+            const expectedName = 'Leaf';
+            testLeafName(property, expectedName);
+        });
+
+        function testLeafName(property: string, expectedName: string): void {
+            const preferencesGroups: Preference.Branch[] = [];
+            const root = preferenceTreeGenerator['createRootNode'](preferencesGroups);
+            const preferencesGroup = preferenceTreeGenerator['createPreferencesGroup']('group', root);
+
+            const expectedSelectableTreeNode = {
+                id: property,
+                name: expectedName,
+                parent: preferencesGroup,
+                visible: true,
+                selected: false,
+            };
+            expect(preferenceTreeGenerator['createLeafNode'](property, preferencesGroup)).deep.eq(expectedSelectableTreeNode);
+        }
+
+    });
 });
diff --git a/packages/preferences/src/browser/util/preference-tree-generator.ts b/packages/preferences/src/browser/util/preference-tree-generator.ts
index 860e657ae24f6..a6b23ced31ed0 100644
--- a/packages/preferences/src/browser/util/preference-tree-generator.ts
+++ b/packages/preferences/src/browser/util/preference-tree-generator.ts
@@ -69,8 +69,8 @@ export class PreferenceTreeGenerator {
     });
 
     protected createLeafNode = (property: string, preferencesGroup: Preference.Branch): SelectableTreeNode => {
-        const propertySpecifier = this.split(property).slice(1);
-        const name = propertySpecifier.map(word => word.slice(0, 1).toLocaleUpperCase() + word.slice(1)).join(' ').trim();
+        const rawLeaf = property.split('.').pop();
+        const name = this.formatString(rawLeaf!);
         return {
             id: property,
             name,
@@ -119,4 +119,8 @@ export class PreferenceTreeGenerator {
         return split;
     }
 
+    private formatString(string: string): string {
+        const specifier = this.split(string);
+        return specifier.map(word => word.slice(0, 1).toLocaleUpperCase() + word.slice(1)).join(' ').trim();
+    }
 }
diff --git a/packages/preferences/src/browser/views/preference-editor-widget.tsx b/packages/preferences/src/browser/views/preference-editor-widget.tsx
index f9a79b06c0b2f..8f7cec6b215fd 100644
--- a/packages/preferences/src/browser/views/preference-editor-widget.tsx
+++ b/packages/preferences/src/browser/views/preference-editor-widget.tsx
@@ -154,13 +154,15 @@ export class PreferencesEditorWidget extends ReactWidget {
 
     protected renderCategory(category: Preference.Branch): React.ReactNode {
         const children = category.children.concat(category.leaves).sort((a, b) => this.sort(a.id, b.id));
+        const isCategory = category.parent?.parent === undefined;
+        const categoryLevelClass = isCategory ? 'settings-section-category-title' : 'settings-section-subcategory-title';
         return category.visible && (
             <ul
                 className="settings-section"
                 key={`${category.id}-editor`}
                 id={`${category.id}-editor`}
             >
-                <li className="settings-section-title" data-id={category.id}>{category.name}</li>
+                <li className={categoryLevelClass} data-id={category.id}>{category.name}</li>
                 {children.map((preferenceNode: SelectableTreeNode | Preference.Branch) => {
                     if (Preference.Branch.is(preferenceNode)) {
                         return this.renderCategory(preferenceNode);