fix(ga): issue #606 - search inconsistent

Author: eouin

package.json

@@ -25,7 +25,7 @@
         "jest": "29.7.0",
         "jest-sonar": "0.2.16",
         "prettier": "3.3.3",
-        "pretty-quick": "3.3.1",
+        "pretty-quick": "4.0.0",
         "rimraf": "5.0.10",
         "ts-jest": "29.2.4",
         "ts-node": "10.9.2",

packages/core/package.json

@@ -21,10 +21,10 @@
         "watch": "tsc --watch"
     },
     "dependencies": {
-        "@sap/bas-sdk": "3.8.8",
+        "@sap/bas-sdk": "3.8.9",
         "@sap/guided-answers-extension-types": "workspace:*",
-        "axios": "1.6.8",
-        "xss": "1.0.14"
+        "axios": "1.7.4",
+        "xss": "1.0.15"
     },
     "files": [
         "LICENSE",

packages/core/src/guided-answers-api.ts

@@ -173,6 +173,7 @@ async function getTrees(host: string, queryOptions?: GuidedAnswersQueryOptions):
     const url = `${host}${TREE_PATH}${query}${urlGetParamString}`;
     const response: AxiosResponse<GuidedAnswerTreeSearchResult> = await axios.get<GuidedAnswerTreeSearchResult>(url);
     const searchResult = response.data;
+
     if (!Array.isArray(searchResult?.trees)) {
         throw Error(
             `Query result from call '${url}' does not contain property 'trees' as array. Received response: '${searchResult}'`

packages/ide-extension/package.json

@@ -82,13 +82,13 @@
     "devDependencies": {
         "@sap/guided-answers-extension-core": "workspace:*",
         "@sap/guided-answers-extension-types": "workspace:*",
-        "@types/uuid": "9.0.7",
-        "@types/vscode": "1.74.1",
-        "@vscode/vsce": "2.22.0",
-        "applicationinsights": "2.9.2",
-        "esbuild": "0.19.11",
+        "@types/uuid": "10.0.0",
+        "@types/vscode": "1.92.0",
+        "@vscode/vsce": "3.0.0",
+        "applicationinsights": "3.2.2",
+        "esbuild": "0.23.1",
         "esbuild-plugin-copy": "2.1.1",
-        "uuid": "9.0.1",
+        "uuid": "10.0.0",
         "vscode-uri": "3.0.8"
     },
     "galleryBanner": {

packages/webapp/package.json

@@ -45,14 +45,14 @@
         "react-redux": "8.1.2",
         "redux": "4.2.1",
         "redux-mock-store": "1.5.4",
-        "uuid": "9.0.1"
+        "uuid": "10.0.0"
     },
     "dependencies": {
         "@fluentui/react": "8.114.2",
         "@fluentui/react-focus": "8.8.37",
         "@fluentui/style-utilities": "8.10.1",
         "@fluentui/utilities": "8.13.23",
-        "@sap-ux/ui-components": "1.15.12",
+        "@sap-ux/ui-components": "1.17.5",
         "react-copy-to-clipboard": "5.1.0",
         "react-infinite-scroll-component": "6.1.0"
     }

packages/webapp/src/webview/state/reducers.ts

@@ -145,6 +145,7 @@ function updateGuidedAnswerTreesReducer(newState: AppState, action: UpdateGuided
     }
     delete newState.activeGuidedAnswer;
     newState.activeScreen = 'SEARCH';
+
     return newState;
 }
 

packages/webapp/src/webview/ui/components/App/App.tsx

@@ -1,21 +1,25 @@
 import type { ReactElement } from 'react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import i18next from 'i18next';
+
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { SpinnerSize } from '@fluentui/react';
+import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
+import { initIcons, UILoader, UIIcon, UiIcons } from '@sap-ux/ui-components';
+
 import type { AppState } from '../../../types';
 import { actions } from '../../../state';
+
 import { GuidedAnswerNode } from '../GuidedAnswerNode';
 import { Header } from '../Header';
 import { ErrorScreen } from '../ErrorScreen';
 import { FiltersRibbon } from '../Header/Filters';
-import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
-import './App.scss';
-import { initIcons, UILoader, UIIcon, UiIcons } from '@sap-ux/ui-components';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import { SpinnerSize } from '@fluentui/react';
-import i18next from 'i18next';
 import { TreeItemBottomSection } from '../TreeItemBottomSection';
 import { HomeGrid } from '../HomeGrid';
 
+import './App.scss';
+
 initIcons();
 
 /**
@@ -25,6 +29,8 @@ initIcons();
  */
 export function App(): ReactElement {
     const appState = useSelector<AppState, AppState>((state) => state);
+    const [hasMore, setHasMore] = useState(true);
+
     useEffect(() => {
         const resultsContainer = document.getElementById('results-container');
         if (!resultsContainer) {
@@ -50,8 +56,16 @@ export function App(): ReactElement {
         };
     }, []);
 
+    useEffect(() => {
+        // appState.pageSize
+
+        const isMore =
+            appState.guidedAnswerTreeSearchResult.trees.length < appState.guidedAnswerTreeSearchResult.resultSize;
+        setHasMore(isMore);
+    }, [appState.guidedAnswerTreeSearchResult.trees]);
+
     function fetchData() {
-        if (appState.guidedAnswerTreeSearchResult.resultSize > appState.pageSize) {
+        if (hasMore) {
             actions.searchTree({
                 query: appState.query,
                 filters: {
@@ -97,10 +111,7 @@ export function App(): ReactElement {
                             dataLength={appState.guidedAnswerTreeSearchResult.trees.length} //This is important field to render the next data
                             next={fetchData}
                             loader={<UILoader id="loading-indicator" size={SpinnerSize.large} />}
-                            hasMore={
-                                appState.guidedAnswerTreeSearchResult.trees.length <
-                                appState.guidedAnswerTreeSearchResult.resultSize
-                            }>
+                            hasMore={hasMore}>
                             {appState.guidedAnswerTreeSearchResult.trees.map((tree) => {
                                 return (
                                     <li key={`tree-item-${tree.TITLE}`} className="tree-item">

packages/webapp/src/webview/ui/components/Header/SearchField/SearchField.tsx

@@ -1,35 +1,57 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import type { ChangeEvent } from 'react';
 import { useSelector } from 'react-redux';
-import type { AppState } from '../../../../types';
-import { actions } from '../../../../state';
+
 import { UISearchBox } from '@sap-ux/ui-components';
 
+import type { AppState } from '../../../../types';
+import { actions } from '../../../../state';
 import { Filters } from '../Filters';
 
-let timer: NodeJS.Timeout;
+const SEARCH_TIMEOUT = 250;
+
 /**
  *
  * @returns An input field
  */
 export function SearchField() {
     const appState = useSelector<AppState, AppState>((state) => state);
 
-    const onChange = (value: string): void => {
-        clearTimeout(timer);
-        actions.setQueryValue(value);
-        timer = setTimeout(() => {
-            actions.searchTree({
-                query: value,
-                filters: {
-                    product: appState.selectedProductFilters,
-                    component: appState.selectedComponentFilters
-                },
-                paging: {
-                    responseSize: appState.pageSize,
-                    offset: 0
-                }
-            });
-        }, 100);
+    const debounce = (fn: Function, delay = SEARCH_TIMEOUT) => {
+        let timeoutId: ReturnType<typeof setTimeout>;
+        return function (this: any, ...args: any[]) {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => fn.apply(this, args), delay);
+        };
+    };
+
+    const debounceSearch = useCallback(
+        debounce(
+            (newSearchTerm: string) =>
+                actions.searchTree({
+                    query: newSearchTerm,
+                    filters: {
+                        product: appState.selectedProductFilters,
+                        component: appState.selectedComponentFilters
+                    },
+                    paging: {
+                        responseSize: appState.pageSize,
+                        offset: 0
+                    }
+                }),
+            SEARCH_TIMEOUT
+        ),
+        []
+    );
+
+    const onClearSearchTerm = (): void => {
+        actions.setQueryValue('');
+        debounceSearch('');
+    };
+
+    const onChangeSearchTerm = (_?: ChangeEvent<HTMLInputElement> | undefined, newSearchTerm = ''): void => {
+        actions.setQueryValue(newSearchTerm);
+        debounceSearch(newSearchTerm);
     };
 
     return (
@@ -40,8 +62,8 @@ export function SearchField() {
                 readOnly={appState.networkStatus === 'LOADING'}
                 placeholder="Search Guided Answers"
                 id="search-field"
-                onClear={() => onChange('')}
-                onChange={(e: any) => onChange(e?.target?.value || '')}></UISearchBox>
+                onClear={onClearSearchTerm}
+                onChange={onChangeSearchTerm}></UISearchBox>
             {appState.activeScreen === 'SEARCH' && <Filters />}
         </div>
     );