From c9353d8c0095385b9de6c0a2828a575f268f2df9 Mon Sep 17 00:00:00 2001
From: sanat-thukral <104602674+sanat-thukral@users.noreply.github.com>
Date: Tue, 23 Aug 2022 23:46:39 +0530
Subject: [PATCH] Show product and component info (#203)

* feat(ga): add dialog, no logic yet

* feat: use API v2

* fix: remove link

* test: adjusted unit tests, v2 API

* test: ide-extension unit test adjustment API v2

* test: webapp, adjustments for API v2

* feat(ga): move files to a new folder

* feat(ga): updated home page list

* chore: changeset

* fix: show only primary (first) product/component in result list

* test: add unit test

* fix: typo

Co-authored-by: Christos Koutsiaris <christos.koutsiaris@sap.com>
Co-authored-by: Klaus Keller <klaus.keller@sap.com>
---
 .changeset/unlucky-readers-hammer.md          |  8 +++++++
 .../src/webview/ui/components/App/App.scss    | 22 +++++++++++++++++
 .../src/webview/ui/components/App/App.tsx     | 24 ++++++++++++++++---
 packages/webapp/test/App.test.tsx             |  8 +++++--
 4 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/unlucky-readers-hammer.md

diff --git a/.changeset/unlucky-readers-hammer.md b/.changeset/unlucky-readers-hammer.md
new file mode 100644
index 00000000..397e5959
--- /dev/null
+++ b/.changeset/unlucky-readers-hammer.md
@@ -0,0 +1,8 @@
+---
+'@sap/guided-answers-extension-webapp': minor
+'@sap/guided-answers-extension-core': minor
+'sap-guided-answers-extension': minor
+'@sap/guided-answers-extension-types': minor
+---
+
+Consumption of API v2 which gives more information about Guided Answers trees, like product or component info
diff --git a/packages/webapp/src/webview/ui/components/App/App.scss b/packages/webapp/src/webview/ui/components/App/App.scss
index fe9ae36e..4284e296 100644
--- a/packages/webapp/src/webview/ui/components/App/App.scss
+++ b/packages/webapp/src/webview/ui/components/App/App.scss
@@ -14,6 +14,25 @@ h1 {
     margin-bottom: 5px;
 }
 
+.bottom-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.component-and-product-container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: row;
+    color: var(--vscode-foreground);
+    font-size: 11px;
+    font-weight: 700;
+    margin-right: 15px;
+}
+
+.bottom-title {
+    font-weight: 400;
+}
+
 .guided-answer {
     display: flex;
     width: 100%;
@@ -52,6 +71,9 @@ h1 {
             height: auto;
             font-size: 13px;
         }
+        &__product {
+            margin-right: 15px;
+        }
     }
 }
 
diff --git a/packages/webapp/src/webview/ui/components/App/App.tsx b/packages/webapp/src/webview/ui/components/App/App.tsx
index d2705065..3cb138d5 100644
--- a/packages/webapp/src/webview/ui/components/App/App.tsx
+++ b/packages/webapp/src/webview/ui/components/App/App.tsx
@@ -49,9 +49,27 @@ export function App(): ReactElement {
                                                 style={{ marginTop: tree.DESCRIPTION ? '0' : '10px' }}>
                                                 {tree.TITLE}
                                             </h3>
-                                            {tree.DESCRIPTION && (
-                                                <span className="guided-answer__tree__desc">{tree.DESCRIPTION}</span>
-                                            )}
+                                            <div className="bottom-section">
+                                                {tree.DESCRIPTION && (
+                                                    <span className="guided-answer__tree__desc">
+                                                        {tree.DESCRIPTION}
+                                                    </span>
+                                                )}
+                                                <div className="component-and-product-container">
+                                                    {tree.PRODUCT && (
+                                                        <div className="guided-answer__tree__product">
+                                                            <span className="bottom-title">Product: </span>
+                                                            {tree.PRODUCT.split(',')[0].trim()}
+                                                        </div>
+                                                    )}
+                                                    {tree.COMPONENT && (
+                                                        <div className="guided-answer__tree__component">
+                                                            <span className="bottom-title">Component: </span>
+                                                            {tree.COMPONENT.split(',')[0].trim()}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
                                         </div>
                                     </button>
                                 </li>
diff --git a/packages/webapp/test/App.test.tsx b/packages/webapp/test/App.test.tsx
index ef62611a..0e290036 100644
--- a/packages/webapp/test/App.test.tsx
+++ b/packages/webapp/test/App.test.tsx
@@ -37,7 +37,7 @@ jest.mock('react-redux', () => ({
             },
             activeGuidedAnswerNode: [],
             activeGuidedAnswer: undefined
-        } as AppState)
+        } as unknown as AppState)
         .mockReturnValueOnce({
             activeGuidedAnswerNode: [],
             guidedAnswerTreeSearchResult: {
@@ -47,7 +47,9 @@ jest.mock('react-redux', () => ({
                         DESCRIPTION: 'This is a troubleshooting guide to solve the issues while using SAP Fiori tools',
                         FIRST_NODE_ID: 45995,
                         TITLE: 'SAP Fiori tools',
-                        TREE_ID: 3046
+                        TREE_ID: 3046,
+                        PRODUCT: 'Product A, Product B',
+                        COMPONENT: 'comp-a, comp-b'
                     }
                 ],
                 resultSize: 1,
@@ -90,6 +92,8 @@ describe('<NoAnswersFound />', () => {
         expect(wrapper.find('.guided-answer__tree__desc').text()).toBe(
             'This is a troubleshooting guide to solve the issues while using SAP Fiori tools'
         );
+        expect(wrapper.find('.guided-answer__tree__product').text()).toBe('Product: Product A');
+        expect(wrapper.find('.guided-answer__tree__component').text()).toBe('Component: comp-a');
         //Test click event
         wrapper.find('.guided-answer__tree').simulate('click');
         expect(actions.setActiveTree).toBeCalled();