libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

small fix to prevent empty dialog (#2522)

Browse source 
* small fix to prevent empty dialog

this also makes the re-render better

fixes: #2521

* simplified using useMemo
This commit is contained in:
Erik Jan de Wit 2022-04-29 12:44:49 +02:00 committed by GitHub
parent ee6f2f4a7d
commit cf6e7b5bb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/clients/scopes/AddScopeDialog.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
Button, Button,
@ -55,7 +55,7 @@ enum ProtocolType {
} }
export const AddScopeDialog = ({ export const AddScopeDialog = ({
clientScopes, clientScopes: scopes,
clientName, clientName,
open, open,
toggleDialog, toggleDialog,
@ -67,8 +67,6 @@ export const AddScopeDialog = ({
const [rows, setRows] = useState<ClientScopeRepresentation[]>([]); const [rows, setRows] = useState<ClientScopeRepresentation[]>([]);
const [filterType, setFilterType] = useState(FilterType.Name); const [filterType, setFilterType] = useState(FilterType.Name);
const [protocolType, setProtocolType] = useState(ProtocolType.All); const [protocolType, setProtocolType] = useState(ProtocolType.All);
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
const [isFilterTypeDropdownOpen, toggleIsFilterTypeDropdownOpen] = const [isFilterTypeDropdownOpen, toggleIsFilterTypeDropdownOpen] =
useToggle(); useToggle();
@ -76,19 +74,14 @@ export const AddScopeDialog = ({
const [isProtocolTypeDropdownOpen, toggleIsProtocolTypeDropdownOpen] = const [isProtocolTypeDropdownOpen, toggleIsProtocolTypeDropdownOpen] =
useToggle(false); useToggle(false);
useEffect(() => { const clientScopes = useMemo(() => {
refresh();
}, [filterType, protocolType]);
const loader = async () => {
if (protocolType === ProtocolType.OpenIDConnect) { if (protocolType === ProtocolType.OpenIDConnect) {
return clientScopes.filter((item) => item.protocol === "openid-connect"); return scopes.filter((item) => item.protocol === "openid-connect");
} else if (protocolType === ProtocolType.SAML) { } else if (protocolType === ProtocolType.SAML) {
return clientScopes.filter((item) => item.protocol === "saml"); return scopes.filter((item) => item.protocol === "saml");
} }
return scopes;
return clientScopes; }, [scopes, filterType, protocolType]);
};
const action = (scope: ClientScopeType) => { const action = (scope: ClientScopeType) => {
const scopes = rows.map((row) => { const scopes = rows.map((row) => {
@ -104,6 +97,7 @@ export const AddScopeDialog = ({
setFilterType(FilterType.Protocol); setFilterType(FilterType.Protocol);
} else if (filterType === FilterType.Protocol) { } else if (filterType === FilterType.Protocol) {
setFilterType(FilterType.Name); setFilterType(FilterType.Name);
setProtocolType(ProtocolType.All);
} }
toggleIsFilterTypeDropdownOpen(); toggleIsFilterTypeDropdownOpen();
@ -207,11 +201,12 @@ export const AddScopeDialog = ({
} }
> >
<KeycloakDataTable <KeycloakDataTable
loader={loader} loader={clientScopes}
ariaLabelKey="client-scopes:chooseAMapperType" ariaLabelKey="client-scopes:chooseAMapperType"
searchPlaceholderKey={ searchPlaceholderKey={
filterType === FilterType.Name ? "client-scopes:searchFor" : undefined filterType === FilterType.Name ? "client-scopes:searchFor" : undefined
} }
isSearching={filterType !== FilterType.Name}
searchTypeComponent={ searchTypeComponent={
<Dropdown <Dropdown
onSelect={() => { onSelect={() => {
@ -241,7 +236,6 @@ export const AddScopeDialog = ({
]} ]}
/> />
} }
key={key}
toolbarItem={ toolbarItem={
filterType === FilterType.Protocol && ( filterType === FilterType.Protocol && (
<> <>