diff --git a/.changeset/large-bees-camp.md b/.changeset/large-bees-camp.md new file mode 100644 index 00000000000..d8c41fc5187 --- /dev/null +++ b/.changeset/large-bees-camp.md @@ -0,0 +1,6 @@ +--- +"@wso2is/console": patch +"@wso2is/i18n": patch +--- + +Fix issue with OIDC scope list search diff --git a/apps/console/src/features/oidc-scopes/components/oidc-scopes-list.tsx b/apps/console/src/features/oidc-scopes/components/oidc-scopes-list.tsx index be3d9291b93..551b5250c52 100644 --- a/apps/console/src/features/oidc-scopes/components/oidc-scopes-list.tsx +++ b/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 void; + clearSearchQuery?: () => void; } /** @@ -134,7 +134,7 @@ export const OIDCScopeList: FunctionComponent = ( isLoading, list, searchResult, - getOIDCScopesList, + clearSearchQuery, onScopeDelete, onListItemClick, onEmptyListPlaceholderActionClick, @@ -316,7 +316,7 @@ export const OIDCScopeList: FunctionComponent = ( return ( + clearSearchQuery() }> { t("console:manage.features.oidcScopes.placeholders.emptySearch.action") } ) } @@ -433,7 +433,7 @@ export const OIDCScopeList: FunctionComponent = ( OIDCScopeList.defaultProps = { "data-testid": "scope-list", defaultListItemLimit: 10, - isLoading: true, + isLoading: false, onListItemClick: () => null, selection: true, showListItemActions: true diff --git a/apps/console/src/features/oidc-scopes/pages/oidc-scopes.tsx b/apps/console/src/features/oidc-scopes/pages/oidc-scopes.tsx index f18636c5568..fc431caf25f 100644 --- a/apps/console/src/features/oidc-scopes/pages/oidc-scopes.tsx +++ b/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 = ( 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 = ( })); }, [ scopeListFetchRequestError ]); - /** - * Search the scope list. - * - * @param event - Input change event. - */ - const searchScopeList = (event: React.ChangeEvent) => { - setSearchQuery(event.target.value); - }; - /** * Handles sort order change. * @@ -170,6 +144,29 @@ const OIDCScopesPage: FunctionComponent = ( const handleSortStrategyChange = (_event: React.SyntheticEvent, 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) => { + 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 = ( icon="search" iconPosition="left" value={ searchQuery } - onChange={ searchScopeList } + onChange={ (e: React.ChangeEvent) => setSearchQuery(e.target.value) } placeholder={ t("console:manage.features.oidcScopes.list.searchPlaceholder") } floated="right" size="small" + onKeyPress={ (e: React.KeyboardEvent) => handleEnterKeyInSearch(e) } /> ) } @@ -232,7 +230,10 @@ const OIDCScopesPage: FunctionComponent = ( onEmptyListPlaceholderActionClick={ () => setShowWizard(true) } data-testid={ `${ testId }-list` } searchResult={ filteredScopeList?.length } - getOIDCScopesList={ () => setSearchQuery("") } + clearSearchQuery={ () => { + setSearchQuery(""); + setFilteredScopeList(undefined); + } } /> { showWizard && ( diff --git a/modules/i18n/src/translations/en-US/portals/console.ts b/modules/i18n/src/translations/en-US/portals/console.ts index 82e213b463c..92e2b0c96a0 100644 --- a/modules/i18n/src/translations/en-US/portals/console.ts +++ b/modules/i18n/src/translations/en-US/portals/console.ts @@ -9291,7 +9291,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." diff --git a/modules/i18n/src/translations/fr-FR/portals/console.ts b/modules/i18n/src/translations/fr-FR/portals/console.ts index 07c607a0b2e..782daa5f1d6 100755 --- a/modules/i18n/src/translations/fr-FR/portals/console.ts +++ b/modules/i18n/src/translations/fr-FR/portals/console.ts @@ -7547,7 +7547,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." diff --git a/modules/i18n/src/translations/si-LK/portals/console.ts b/modules/i18n/src/translations/si-LK/portals/console.ts index e07bc661de3..f12ccb75219 100755 --- a/modules/i18n/src/translations/si-LK/portals/console.ts +++ b/modules/i18n/src/translations/si-LK/portals/console.ts @@ -7388,7 +7388,7 @@ export const console: ConsoleNS = { title: "නව OIDC විෂය පථයක් එක් කරන්න" }, emptySearch: { - action: "සියල්ල බලන්න", + action: "සෙවුම් විමසුම හිස් කරන්න", subtitles: { 0: "ඔබ සෙවූ විෂය පථය අපට සොයාගත නොහැකි විය.", 1: "කරුණාකර වෙනත් නමක් උත්සාහ කරන්න."