From cf6e7b5bb211dca2d4cd7d551240f876a5d3c7b1 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Fri, 29 Apr 2022 12:44:49 +0200
Subject: [PATCH] small fix to prevent empty dialog (#2522)

* small fix to prevent empty dialog

this also makes the re-render better

fixes: #2521

* simplified using useMemo
---
 src/clients/scopes/AddScopeDialog.tsx | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

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