UX improvements (#92)

* feat: logo updated * (feat): search field/list updated * error screen added * visual cleanup * minor changes * conflict resolved * pnpm lock file updated * pnpm lock file updated * Update packages/core/src/guided-answers-api.ts Co-authored-by: Klaus Keller <66327622+Klaus-Keller@users.noreply.github.com> * visual changes * refactoring initalState to searchResultCount * search button removed * file cleanup * change set added * alignment changes * minor alignment changes * changeset to ide added * heading color updated * detailed view visual bug fixed * chore: cleanup commented styles Co-authored-by: Klaus Keller <66327622+Klaus-Keller@users.noreply.github.com> Co-authored-by: Klaus Keller <klaus.keller@sap.com>
SAP · Jun 7, 2022 · 617f359 · 617f359
1 parent c1ae3a7
commit 617f359
Show file tree

Hide file tree

Showing 13 changed files with 9,596 additions and 7,066 deletions.
diff --git a/.changeset/tender-ants-raise.md b/.changeset/tender-ants-raise.md
@@ -0,0 +1,5 @@
+---
+'sap-guided-answers-extension': minor
+---
+
+Added new UI for GA extension
diff --git a/.changeset/weak-comics-shake.md b/.changeset/weak-comics-shake.md
@@ -0,0 +1,5 @@
+---
+'@sap/guided-answers-extension-webapp': minor
+---
+
+Added new UI for GA extension
diff --git a/packages/webapp/src/webview/state/reducers.ts b/packages/webapp/src/webview/state/reducers.ts
@@ -18,7 +18,8 @@ export function getInitialState(): AppState {
     return {
         query: '',
         guidedAnswerTrees: [],
-        activeGuidedAnswerNode: []
+        activeGuidedAnswerNode: [],
+        searchResultCount: -1
     };
 }
 
@@ -37,6 +38,7 @@ export const reducer: Reducer<AppState, GuidedAnswerActions> = (
     switch (action.type) {
         case UPDATE_GUIDED_ANSWER_TREES: {
             newState.guidedAnswerTrees = action.payload;
+            newState.searchResultCount = newState.guidedAnswerTrees.length;
             delete newState.activeGuidedAnswer;
             break;
         }

diff --git a/packages/webapp/src/webview/types.ts b/packages/webapp/src/webview/types.ts
@@ -5,4 +5,5 @@ export interface AppState {
     guidedAnswerTrees: GuidedAnswerTree[];
     activeGuidedAnswerNode: GuidedAnswerNode[];
     activeGuidedAnswer?: GuidedAnswerTree;
+    searchResultCount: number;
 }
diff --git a/packages/webapp/src/webview/ui/components/App.scss b/packages/webapp/src/webview/ui/components/App.scss
@@ -3,11 +3,17 @@ html {
 }
 * {
     font-family: var(--vscode-font-family);
+    -webkit-font-smoothing: antialiased;
 }
 
 h1 {
     font-weight: 300;
     color: var(--vscode-foreground);
+    font-size: 24px;
+}
+
+h2 {
+    font-size: 13px;
 }
 
 .guided-answer {
@@ -18,12 +24,11 @@ h1 {
         width: 100%;
         z-index: 10;
         background-color: var(--vscode-editor-background);
-        &__sub {
-            display: flex;
-            align-items: center;
-        }
         &__title {
             font-weight: 600;
+            margin: 0px;
+            color: var(--vscode-settings-headerForeground);
+            line-height: 29px;
         }
         &__subtitle {
             color: var(--vscode-editorCodeLens-foreground, #999);
@@ -33,42 +38,57 @@ h1 {
             height: 26px;
             margin-top: 17px;
         }
+        &__logoAndTitle {
+            display: flex;
+            align-items: center;
+            margin-top: 40px;
+        }
+        &__searchField {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            margin-top: -28px;
+            margin-bottom: 40px;
+        }
     }
     &__container {
-        margin-top: 74px;
+        margin-top: 111px;
+        padding-bottom: 10px;
     }
     &__tree {
         width: 100%;
         height: auto;
         cursor: pointer;
-        padding-left: 3em;
         text-align: left;
         display: flex;
         border: none;
-        border-radius: 8px;
-        background-color: var(--vscode-sideBar-background);
         &:hover {
             background-color: var(--vscode-list-hoverBackground);
         }
 
         &__ul {
-            padding: 0px;
-            padding-bottom: 1.5em;
+            padding: 15px;
+            &h3 {
+                margin-bottom: 10px;
+            }
         }
         &__title {
-            color: var(--vscode-foreground);
+            font-size: 14px;
+            color: var(--vscode-settings-headerForeground);
+            margin-bottom: 10px;
+            margin-top: 0px;
         }
         &__desc {
             color: var(--vscode-foreground);
             height: auto;
+            font-size: 13px;
         }
     }
 }
 
 .tree-search-field {
-    margin: 2em;
     width: 33%;
-    min-width: 200px;
+    min-width: 250px;
 }
 
 .tree-search-icon {
@@ -77,9 +97,24 @@ h1 {
 }
 
 .tree-item {
-    margin: 2em;
+    margin: 0;
 }
 
 #sap-logo {
-    width: 100px;
+    width: 59px;
+}
+
+.striped-list {
+    padding-left: 0px;
+    margin-top: 0px;
+}
+
+ul.striped-list > li:nth-of-type(odd) {
+    background-color: var(--vscode-breadcrumbPicker-background);
+    padding-left: 0px;
+}
+
+li {
+    background-color: var(--vscode-editor-background);
+    list-style-type: none;
 }
diff --git a/packages/webapp/src/webview/ui/components/App.tsx b/packages/webapp/src/webview/ui/components/App.tsx
@@ -1,12 +1,12 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { VscSearch } from 'react-icons/vsc';
 import { VSCodeButton, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
 import { AppState } from '../../types';
 import './App.scss';
 import { actions } from '../../state';
 import { GuidedAnswerNode } from './GuidedAnswerNode';
+import { NoAnswersFound } from './NoAnswersFound';
 
 import Logo from './sap-logo.svg';
 
@@ -24,48 +24,32 @@ export function App(): ReactElement {
     if (appState.activeGuidedAnswerNode.length > 0) {
         content = <GuidedAnswerNode />;
     } else if (appState.guidedAnswerTrees) {
-        content = (
-            <>
-                <VSCodeTextField
-                    className="tree-search-field"
-                    value={appState.query}
-                    placeholder="Search Guided Answers"
-                    onInput={(e: any) => {
-                        console.log(`Value changed`, e);
-                        const newValue = e?.target?.value;
-                        if (newValue !== undefined) {
-                            clearTimeout(timer);
-                            actions.setQueryValue(newValue);
-                            timer = setTimeout(() => {
-                                actions.searchTree(newValue);
-                            }, 400);
-                        }
-                    }}>
-                    <span slot="end" className="tree-search-icon">
-                        <VscSearch />
-                    </span>
-                </VSCodeTextField>
-                {appState.guidedAnswerTrees.map((tree, index) => {
-                    return (
-                        <div key={`tree-item-${index}`} className="tree-item">
-                            <div
-                                className="guided-answer__tree"
-                                onClick={(): void => {
-                                    actions.setActiveTree(tree);
-                                    actions.selectNode(tree.FIRST_NODE_ID);
-                                }}>
-                                <ul className="guided-answer__tree__ul">
-                                    <h3 className="guided-answer__tree__title">{tree.TITLE}</h3>
-                                    {tree.DESCRIPTION && (
-                                        <span className="guided-answer__tree__desc">{tree.DESCRIPTION}</span>
-                                    )}
-                                </ul>
-                            </div>
-                        </div>
-                    );
-                })}
-            </>
-        );
+        content =
+            appState.searchResultCount === 0 ? (
+                <NoAnswersFound />
+            ) : (
+                <ul className="striped-list">
+                    {appState.guidedAnswerTrees.map((tree, index) => {
+                        return (
+                            <li key={`tree-item-${index}`} className="tree-item">
+                                <div
+                                    className="guided-answer__tree"
+                                    onClick={(): void => {
+                                        actions.setActiveTree(tree);
+                                        actions.selectNode(tree.FIRST_NODE_ID);
+                                    }}>
+                                    <ul className="guided-answer__tree__ul">
+                                        <h3 className="guided-answer__tree__title">{tree.TITLE}</h3>
+                                        {tree.DESCRIPTION && (
+                                            <span className="guided-answer__tree__desc">{tree.DESCRIPTION}</span>
+                                        )}
+                                    </ul>
+                                </div>
+                            </li>
+                        );
+                    })}
+                </ul>
+            );
     }
     const backButton =
         appState.activeGuidedAnswerNode.length > 0 ? (
@@ -83,13 +67,32 @@ export function App(): ReactElement {
         <div className="guided-answer">
             <div className="guided-answer__header">
                 <div className="guided-answer__header__sub">
-                    <span id="sap-logo">
-                        <Logo />
-                    </span>
-                    <h1 className="guided-answer__header__title">Guided Answers</h1>
-                    <span className="guided-answer__header__subtitle">
-                        {appState.activeGuidedAnswer ? ': ' + appState.activeGuidedAnswer.TITLE : ''}
-                    </span>
+                    <div className="guided-answer__header__logoAndTitle">
+                        <span id="sap-logo">
+                            <Logo />
+                        </span>
+                        <h1 className="guided-answer__header__title">Guided Answers</h1>
+                        <span className="guided-answer__header__subtitle">
+                            {appState.activeGuidedAnswer ? ': ' + appState.activeGuidedAnswer.TITLE : ''}
+                        </span>
+                    </div>
+                    <div className="guided-answer__header__searchField">
+                        <VSCodeTextField
+                            className="tree-search-field"
+                            value={appState.query}
+                            placeholder="Search Guided Answers"
+                            onInput={(e: any) => {
+                                console.log(`Value changed`, e);
+                                const newValue = e?.target?.value;
+                                if (newValue !== undefined) {
+                                    clearTimeout(timer);
+                                    actions.setQueryValue(newValue);
+                                    timer = setTimeout(() => {
+                                        actions.searchTree(newValue);
+                                    }, 400);
+                                }
+                            }}></VSCodeTextField>
+                    </div>
                 </div>
                 {backButton}
             </div>

diff --git a/packages/webapp/src/webview/ui/components/GuidedAnswerNavPath.scss b/packages/webapp/src/webview/ui/components/GuidedAnswerNavPath.scss
@@ -9,7 +9,7 @@ h1 span {
 
 .container {
     width: 100%;
-    margin-top: 80px;
+    margin-top: 107px;
     position: relative;
     overflow: hidden;
     padding-left: 20px;

diff --git a/packages/webapp/src/webview/ui/components/NoAnswersFound/NoAnswersFound.scss b/packages/webapp/src/webview/ui/components/NoAnswersFound/NoAnswersFound.scss
@@ -0,0 +1,36 @@
+* {
+    font-family: var(--vscode-font-family);
+}
+.error-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 100px;
+
+    &__objects {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    h1 {
+        font-style: normal;
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 29px;
+        margin-top: 0px;
+        margin-bottom: 0px;
+    }
+
+    h2 {
+        font-style: normal;
+        font-weight: 200;
+        font-size: 13px;
+        line-height: 18px;
+        margin: 20px 0px 20px 0px;
+    }
+
+    &__logo {
+        margin-top: 20px;
+    }
+}
diff --git a/packages/webapp/src/webview/ui/components/NoAnswersFound/NoAnswersFound.tsx b/packages/webapp/src/webview/ui/components/NoAnswersFound/NoAnswersFound.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import './NoAnswersFound.scss';
+import ErrorIcon from './no-answers-found.svg';
+
+/**
+ *@returns - react element to show an error page when there are no answers found
+ */
+export function NoAnswersFound() {
+    return (
+        <div className="error-screen">
+            <div className="error-screen__objects">
+                <h1 className="error-screen__object__title">No answers found</h1>
+                <h2 className="error-screen__object__subtitle">Please modfiy search</h2>
+                <span className="error-screen__object__logo">
+                    <ErrorIcon />
+                </span>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/webapp/src/webview/ui/components/NoAnswersFound/index.ts b/packages/webapp/src/webview/ui/components/NoAnswersFound/index.ts
@@ -0,0 +1 @@
+export * from './NoAnswersFound';
diff --git a/packages/webapp/src/webview/ui/components/NoAnswersFound/no-answers-found.svg b/packages/webapp/src/webview/ui/components/NoAnswersFound/no-answers-found.svg
diff --git a/packages/webapp/src/webview/ui/components/sap-logo.svg b/packages/webapp/src/webview/ui/components/sap-logo.svg