Fix issue with OIDC scope list search

.changeset/large-bees-camp.md

@@ -0,0 +1,6 @@
+---
+"@wso2is/console": patch
+"@wso2is/i18n": patch
+---
+
+Fix issue with OIDC scope list search

apps/console/src/features/oidc-scopes/components/oidc-scopes-list.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -111,9 +111,9 @@ interface OIDCScopesListPropsInterface extends SBACInterface<FeatureConfigInterf
      */
     searchResult?: number;
     /**
-     * Fetch OIDC scopes list
+     * Callback to clear the search query string.
      */
-    getOIDCScopesList?: () => void;
+    clearSearchQuery?: () => void;
 }
 
 /**
@@ -134,7 +134,7 @@ export const OIDCScopeList: FunctionComponent<OIDCScopesListPropsInterface> = (
         isLoading,
         list,
         searchResult,
-        getOIDCScopesList,
+        clearSearchQuery,
         onScopeDelete,
         onListItemClick,
         onEmptyListPlaceholderActionClick,
@@ -316,7 +316,7 @@ export const OIDCScopeList: FunctionComponent<OIDCScopesListPropsInterface> = (
             return (
                 <EmptyPlaceholder
                     action={ (
-                        <LinkButton onClick={ getOIDCScopesList }>
+                        <LinkButton onClick={ () => clearSearchQuery() }>
                             { t("console:manage.features.oidcScopes.placeholders.emptySearch.action") }
                         </LinkButton>
                     ) }
@@ -433,7 +433,7 @@ export const OIDCScopeList: FunctionComponent<OIDCScopesListPropsInterface> = (
 OIDCScopeList.defaultProps = {
     "data-testid": "scope-list",
     defaultListItemLimit: 10,
-    isLoading: true,
+    isLoading: false,
     onListItemClick: () => null,
     selection: true,
     showListItemActions: true

apps/console/src/features/oidc-scopes/pages/oidc-scopes.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -96,23 +96,6 @@ const OIDCScopesPage: FunctionComponent<OIDCScopesPageInterface> = (
         setFilteredScopeList(sortList(filteredScopeList, sortByStrategy.value as string, sortOrder === "ASC"));
     }, [ sortOrder, sortByStrategy ]);
 
-    /**
-     * Filter the list when the seach query changes.
-     * NOTE: This is a fron-end level search since the API does not support search.
-     */
-    useEffect(() => {
-        if (searchQuery.length > 0) {
-            const result: OIDCScopesListInterface[] = scopeList.filter((item: OIDCScopesListInterface) =>
-                item.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1);
-
-            setFilteredScopeList(result);
-
-            return;
-        }
-
-        setFilteredScopeList(undefined);
-    }, [ searchQuery ]);
-
     /**
      * Show errors when the API request fails.
      */
@@ -143,15 +126,6 @@ const OIDCScopesPage: FunctionComponent<OIDCScopesPageInterface> = (
         }));
     }, [ scopeListFetchRequestError ]);
 
-    /**
-     * Search the scope list.
-     *
-     * @param event - Input change event.
-     */
-    const searchScopeList = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setSearchQuery(event.target.value);
-    };
-
     /**
     * Handles sort order change.
     *
@@ -170,6 +144,29 @@ const OIDCScopesPage: FunctionComponent<OIDCScopesPageInterface> = (
     const handleSortStrategyChange = (_event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => {
         setSortByStrategy(SORT_BY.filter(
             (option: { key: number; text: string; value: string; }) => option.value === data.value)[ 0 ]);
+    }; 
+
+    /**
+     * This the the function which is called when the user types 
+     * in the search box and hits enter.
+     * 
+     * @param event - Keyboard event of the search input.
+     */
+    const handleEnterKeyInSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+
+            if (searchQuery.length > 0) {
+                const result: OIDCScopesListInterface[] = scopeList.filter((item: OIDCScopesListInterface) =>
+                    item.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1);
+
+                setFilteredScopeList(result);
+
+                return;
+            }
+
+            setFilteredScopeList(undefined);
+        }
     };
 
     return (
@@ -212,10 +209,11 @@ const OIDCScopesPage: FunctionComponent<OIDCScopesPageInterface> = (
                             icon="search"
                             iconPosition="left"
                             value={ searchQuery }
-                            onChange={ searchScopeList }
+                            onChange={ (e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value) }
                             placeholder={ t("console:manage.features.oidcScopes.list.searchPlaceholder") }
                             floated="right"
                             size="small"
+                            onKeyPress={ (e: React.KeyboardEvent<HTMLInputElement>) => handleEnterKeyInSearch(e) }
                         />
                     </div>
                 ) }
@@ -232,7 +230,10 @@ const OIDCScopesPage: FunctionComponent<OIDCScopesPageInterface> = (
                     onEmptyListPlaceholderActionClick={ () => setShowWizard(true) }
                     data-testid={ `${ testId }-list` }
                     searchResult={ filteredScopeList?.length }
-                    getOIDCScopesList={  () => setSearchQuery("") }
+                    clearSearchQuery={ () => { 
+                        setSearchQuery(""); 
+                        setFilteredScopeList(undefined);
+                    } }
                 />
                 {
                     showWizard && (

modules/i18n/src/translations/en-US/portals/console.ts

@@ -9282,7 +9282,7 @@ export const console: ConsoleNS = {
                         title: "Add a new OIDC Scope"
                     },
                     emptySearch: {
-                        action: "View all",
+                        action: "Clear search query",
                         subtitles: {
                             0: "We couldn't find the scope you searched for.",
                             1: "Please try a different name."

modules/i18n/src/translations/fr-FR/portals/console.ts

@@ -7538,7 +7538,7 @@ export const console: ConsoleNS = {
                         title: "Ajouter un nouveau scope OIDC"
                     },
                     emptySearch: {
-                        action: "Voir tout",
+                        action: "Effacer la requête de recherche",
                         subtitles: {
                             0: "Nous n'avons pas trouvé la portée que vous avez recherchée.",
                             1: "Veuillez essayer un autre nom."

modules/i18n/src/translations/si-LK/portals/console.ts

@@ -7379,7 +7379,7 @@ export const console: ConsoleNS = {
                         title: "නව OIDC විෂය පථයක් එක් කරන්න"
                     },
                     emptySearch: {
-                        action: "සියල්ල බලන්න",
+                        action: "සෙවුම් විමසුම හිස් කරන්න",
                         subtitles: {
                             0: "ඔබ සෙවූ විෂය පථය අපට සොයාගත නොහැකි විය.",
                             1: "කරුණාකර වෙනත් නමක් උත්සාහ කරන්න."