feat: Add Searching in IAM roles using email

visualization_tool/src/App.tsx

@@ -3,7 +3,7 @@ import {useState} from 'react';
 import {Routes, Route} from 'react-router-dom';
 
 import {Resource, availableResourceTypes} from './types/resources';
-import {IAMRole} from './types/IMAPolicy';
+import {IAMRole} from './types/IAMPolicy';
 import ControlMenu from './components/ControlMenu/ControlMenu';
 import ResourcesPage from './pages/ResourcesPage';
 import IAMPolicyPage from './pages/IAMPolicyPage';
@@ -40,7 +40,7 @@ function App() {
         />
         <Route
           path="/static/iam-policy"
-          element={<IAMPolicyPage roles={roles} />}
+          element={<IAMPolicyPage roles={roles} emailQuery={searchQuery} />}
         />
       </Routes>
     </>

visualization_tool/src/components/ControlMenu/ControlMenu.tsx

@@ -5,7 +5,7 @@ import SortMenu from './partials/SortMenu';
 import FilterMenu from './partials/FilterMenu';
 
 import {Resource} from '../../types/resources';
-import {IAMRole} from '../../types/IMAPolicy';
+import {IAMRole} from '../../types/IAMPolicy';
 
 import './ControlMenu.css';
 

visualization_tool/src/components/ControlMenu/Controller.ts

@@ -5,7 +5,7 @@ import {
   availableResourceTypes,
 } from '../../types/resources';
 
-import {IAMRole, IMAPolicyField} from '../../types/IMAPolicy';
+import {IAMRole, IMAPolicyField} from '../../types/IAMPolicy';
 
 const titleCase = (str: string) => {
   return str

visualization_tool/src/components/ControlMenu/partials/UploadMenu.tsx

@@ -3,7 +3,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 
 import {Resource} from '../../../types/resources';
-import {IAMRole} from '../../../types/IMAPolicy';
+import {IAMRole} from '../../../types/IAMPolicy';
 import {parseData, parseIAMData} from '../Controller';
 
 type UploadMenuProps = {

visualization_tool/src/components/Navbar/Navbar.css

@@ -26,13 +26,14 @@ header p {
 .pages-nav {
   position: sticky;
   top: 50px;
-  display: flex;
-  align-items: center;
   padding: 10px 0;
   border-bottom: 2px solid #dadce0;
   background-color: white;
+  width: 100%;
   display: grid;
+  scrollbar-gutter: stable both-edges;
   grid-template-columns: 1fr 0.8fr 1fr;
+  align-items: center;
 }
 
 .links {

visualization_tool/src/components/Navbar/Navbar.tsx

@@ -67,7 +67,11 @@ const Navbar = ({searchQuery, setSearchQuery}: NavbarProps) => {
               type="text"
               name="search-input"
               id="search-input"
-              placeholder="Search"
+              placeholder={
+                location.pathname === '/static/iam-policy'
+                  ? 'Email'
+                  : 'Resources Name'
+              }
               value={searchQuery}
               onChange={e => setSearchQuery(e.target.value)}
             />

visualization_tool/src/components/RolesList/RolesList.tsx

@@ -6,19 +6,25 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import Row from './partials/Row';
-import {IAMRole} from '../../types/IMAPolicy';
+
+import {IAMRole} from '../../types/IAMPolicy';
+import {useFilter} from './useFilter';
 
 import './RolesList.css';
 
 type RolesListProps = {
   roles: IAMRole[];
+  emailQuery: string;
 };
 
-const RolesList = ({roles}: RolesListProps) => {
+const RolesList = ({roles, emailQuery}: RolesListProps) => {
+  const filteredRoles = useFilter(roles, emailQuery);
+  // console.log(filteredRoles);
+
   return (
     <div className="roles-list">
       <h1>{roles.length > 0 ? 'Found Roles' : 'No Roles Found'}</h1>
-      {roles.length > 0 && (
+      {filteredRoles.length > 0 && (
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
             <TableHead>
@@ -40,7 +46,7 @@ const RolesList = ({roles}: RolesListProps) => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {roles.map(role => (
+              {filteredRoles.map(role => (
                 <Row key={role.role} row={role} />
               ))}
             </TableBody>

visualization_tool/src/components/RolesList/partials/Row.tsx

@@ -10,7 +10,7 @@ import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import {IAMRole} from '../../../types/IMAPolicy';
+import {IAMRole} from '../../../types/IAMPolicy';
 
 type RowProps = {
   row: IAMRole;

visualization_tool/src/components/RolesList/useFilter.ts

@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react';
+import {IAMRole} from '../../types/IAMPolicy';
+import {debounce} from '@mui/material';
+
+export const useFilter = (roles: IAMRole[], email: string) => {
+  const [filteredRoles, setFilteredRoles] = useState<IAMRole[]>(roles);
+
+  useEffect(() => {
+    const filterRoles = () => {
+      setFilteredRoles(
+        roles.filter(role => {
+          // check if this email is in the role's members
+          return role.members.some(member => member.email.includes(email));
+        })
+      );
+    };
+
+    debounce(filterRoles, 200)();
+  }, [roles, email]);
+
+  return filteredRoles;
+};

visualization_tool/src/index.css

@@ -6,3 +6,7 @@
   box-sizing: border-box;
   font-family: 'Inter', sans-serif;
 }
+
+html {
+  scrollbar-gutter: stable;
+}

visualization_tool/src/pages/IAMPolicyPage.tsx

@@ -1,12 +1,13 @@
-import {IAMRole} from '../types/IMAPolicy';
+import {IAMRole} from '../types/IAMPolicy';
 import RolesList from '../components/RolesList/RolesList';
 
 type IAMPolicyPageProps = {
   roles: IAMRole[];
+  emailQuery: string;
 };
 
-const IAMPolicyPage = ({roles}: IAMPolicyPageProps) => {
-  return <RolesList roles={roles}></RolesList>;
+const IAMPolicyPage = ({roles, emailQuery}: IAMPolicyPageProps) => {
+  return <RolesList roles={roles} emailQuery={emailQuery}></RolesList>;
 };
 
 export default IAMPolicyPage;

visualization_tool/src/types/resources.ts

@@ -1,4 +1,4 @@
-import {IMAPolicyField} from './IMAPolicy';
+import {IMAPolicyField} from './IAMPolicy';
 
 type ResourceType =
   | 'Compute Instance'