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>
SAP · Aug 23, 2022 · c9353d8 · c9353d8
1 parent 4ade337
commit c9353d8
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 5 deletions.
diff --git a/.changeset/unlucky-readers-hammer.md 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
@@ -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
@@ -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
@@ -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();