Fix: Permissions filtering on permissions panel (#2246)

microsoftgraph · Nov 21, 2022 · 3810f6c · 3810f6c
1 parent 3f8bbd0
commit 3810f6c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx
@@ -40,6 +40,7 @@ const PanelList = ({ messages,
   const [permissions, setPermissions] = useState<any []>([]);
   const [groups, setGroups] = useState<IGroup[]>([]);
   const [searchStarted, setSearchStarted] = useState(false);
+  const [searchValue, setSearchValue ] = useState<string>('');
   const permissionsList: any[] = [];
   const tokenPresent = !!authToken.token;
   const loading = scopes.pending.isFullPermissions;
@@ -63,7 +64,6 @@ const PanelList = ({ messages,
     }
   }, [permissions, searchStarted])
 
-
   const dispatch: AppDispatch = useDispatch();
 
   setConsentedStatus(tokenPresent, permissions, consentedScopes);
@@ -77,11 +77,14 @@ const PanelList = ({ messages,
   });
 
   const searchValueChanged = (event: any, value?: string): void => {
+    let valueToSearch = '';
+    valueToSearch = value!;
+    setSearchValue(valueToSearch);
     shouldGenerateGroups.current = true;
     setSearchStarted((search) => !search);
     let filteredPermissions = scopes.data.fullPermissions;
-    if (value) {
-      const keyword = value.toLowerCase();
+    if (valueToSearch) {
+      const keyword = valueToSearch.toLowerCase();
 
       filteredPermissions = fullPermissions.filter((permission: IPermission) => {
         const name = permission.value.toLowerCase();
@@ -141,6 +144,11 @@ const PanelList = ({ messages,
     )
   }
 
+  const clearSearchBox = () => {
+    setSearchValue('');
+    searchValueChanged({},'');
+  }
+
   return (
     <div>
       <Panel
@@ -166,6 +174,8 @@ const PanelList = ({ messages,
               onChange={(event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) =>
                 searchValueChanged(event, newValue)}
               styles={searchBoxStyles}
+              onClear={() => clearSearchBox()}
+              value={searchValue}
             />
             <Announced message={`${permissions.length} search results available.`} />
             <hr />

diff --git a/src/app/views/query-runner/request/permissions/Permission.tsx b/src/app/views/query-runner/request/permissions/Permission.tsx
@@ -61,7 +61,7 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
 
   useEffect(() => {
     getPermissions();
-  },[sampleQuery, scopes.pending.isRevokePermissions, authToken]);
+  },[sampleQuery]);
 
   const handleConsent = async (permission: IPermission): Promise<void> => {
     const consentScopes = [permission.value];