Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue with OIDC scope list search #4349

Merged
merged 3 commits into from
Oct 26, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/large-bees-camp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@wso2is/console": patch
"@wso2is/i18n": patch
---

Fix issue with OIDC scope list search
Original file line number Diff line number Diff line change
@@ -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
59 changes: 30 additions & 29 deletions apps/console/src/features/oidc-scopes/pages/oidc-scopes.tsx
Original file line number Diff line number Diff line change
@@ -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 && (
2 changes: 1 addition & 1 deletion modules/i18n/src/translations/en-US/portals/console.ts
Original file line number Diff line number Diff line change
@@ -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."
2 changes: 1 addition & 1 deletion modules/i18n/src/translations/fr-FR/portals/console.ts
Original file line number Diff line number Diff line change
@@ -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."
2 changes: 1 addition & 1 deletion modules/i18n/src/translations/si-LK/portals/console.ts
Original file line number Diff line number Diff line change
@@ -7379,7 +7379,7 @@ export const console: ConsoleNS = {
title: "නව OIDC විෂය පථයක් එක් කරන්න"
},
emptySearch: {
action: "සියල්ල බලන්න",
action: "සෙවුම් විමසුම හිස් කරන්න",
subtitles: {
0: "ඔබ සෙවූ විෂය පථය අපට සොයාගත නොහැකි විය.",
1: "කරුණාකර වෙනත් නමක් උත්සාහ කරන්න."
Loading