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} - {tree.DESCRIPTION && ( - {tree.DESCRIPTION} - )} +
+ {tree.DESCRIPTION && ( + + {tree.DESCRIPTION} + + )} +
+ {tree.PRODUCT && ( +
+ Product: + {tree.PRODUCT.split(',')[0].trim()} +
+ )} + {tree.COMPONENT && ( +
+ Component: + {tree.COMPONENT.split(',')[0].trim()} +
+ )} +
+
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('', () => { 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();