feat: Filter resources and IAM roles using projects

visualization_tool/src/App.tsx

@@ -13,6 +13,8 @@ function App() {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [sortAttribute, setSortAttribute] = useState<string>('date');
   const [resources, setResources] = useState<Resource[]>([]);
+  const [projects, setProjects] = useState<string[]>([]);
+  const [allowedProjects, setAllowedProjects] = useState<string[]>(projects);
   const [allowedTypes, setAllowedTypes] = useState<string[]>(
     availableResourceTypes
   );
@@ -22,9 +24,12 @@ function App() {
       <Navbar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
       <ControlMenu
         setResources={setResources}
+        setProjects={setProjects}
         setSortAttribute={setSortAttribute}
         setAllowedTypes={setAllowedTypes}
         setRoles={setRoles}
+        projects={projects}
+        setAllowedProjects={setAllowedProjects}
       />
       <Routes>
         <Route
@@ -35,12 +40,19 @@ function App() {
               searchQuery={searchQuery}
               sortAttribute={sortAttribute}
               allowedTypes={allowedTypes}
+              allowedProjects={allowedProjects}
             />
           }
         />
         <Route
           path="/static/iam-policy"
-          element={<IAMPolicyPage roles={roles} emailQuery={searchQuery} />}
+          element={
+            <IAMPolicyPage
+              roles={roles}
+              emailQuery={searchQuery}
+              allowedProjects={allowedProjects}
+            />
+          }
         />
       </Routes>
     </>

visualization_tool/src/components/ControlMenu/ControlMenu.css

@@ -1,14 +1,16 @@
+.control-menu-container {
+  position: fixed;
+}
+
 .control-menu {
   background-color: #f8f9fc;
   position: fixed;
-  height: 100%;
   width: 350px;
   padding-block: 30px;
   padding-inline: 20px;
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  height: calc(100vh - 70px);
+  overflow-y: auto;
 }
 
 .menu-item {
@@ -41,6 +43,7 @@
 .menu-item h3 {
   font-weight: 400;
   font-size: 18px;
+  margin-bottom: 5px;
 }
 
 .menu-item img {

visualization_tool/src/components/ControlMenu/ControlMenu.tsx

@@ -3,6 +3,7 @@ import {useLocation} from 'react-router-dom';
 import UploadMenu from './partials/UploadMenu';
 import SortMenu from './partials/SortMenu';
 import FilterMenu from './partials/FilterMenu';
+import FilterProjects from './partials/FilterProjects';
 
 import {Resource} from '../../types/resources';
 import {IAMRole} from '../../types/IAMPolicy';
@@ -14,25 +15,42 @@ type ControlMenuProps = {
   setSortAttribute: React.Dispatch<React.SetStateAction<string>>;
   setAllowedTypes: React.Dispatch<React.SetStateAction<string[]>>;
   setRoles: React.Dispatch<React.SetStateAction<IAMRole[]>>;
+  projects: string[];
+  setProjects: React.Dispatch<React.SetStateAction<string[]>>;
+  setAllowedProjects: React.Dispatch<React.SetStateAction<string[]>>;
 };
 
 const ControlMenu = ({
   setResources,
   setSortAttribute,
   setAllowedTypes,
   setRoles,
+  projects,
+  setProjects,
+  setAllowedProjects,
 }: ControlMenuProps) => {
   const location = useLocation();
 
   return (
-    <div className="control-menu">
-      <UploadMenu setResources={setResources} setRoles={setRoles} />
-      {location.pathname === '/static/' && (
-        <>
-          <SortMenu setSortAttribute={setSortAttribute} />
-          <FilterMenu setAllowedTypes={setAllowedTypes} />
-        </>
-      )}
+    <div className="control-menu-container">
+      <div className="control-menu">
+        <UploadMenu
+          setResources={setResources}
+          setRoles={setRoles}
+          setProjects={setProjects}
+          setAllowedProjects={setAllowedProjects}
+        />
+        <FilterProjects
+          projects={projects}
+          setAllowedProjects={setAllowedProjects}
+        />
+        {location.pathname === '/static/' && (
+          <>
+            <SortMenu setSortAttribute={setSortAttribute} />
+            <FilterMenu setAllowedTypes={setAllowedTypes} />
+          </>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,53 @@
+type FilterProjectsProps = {
+  projects: string[];
+  setAllowedProjects: React.Dispatch<React.SetStateAction<string[]>>;
+};
+
+const FilterProjects = ({
+  projects,
+  setAllowedProjects,
+}: FilterProjectsProps) => {
+  return (
+    <div className="menu-item">
+      <div className="menu-item__header">
+        <span>
+          <img src="./icons/filter.png" alt="" />
+        </span>
+        <h3>Projects</h3>
+      </div>
+      {projects.length > 0 && (
+        <div className="menu-item__content">
+          {projects.map(project => {
+            return (
+              <div key={project}>
+                <input
+                  type="checkbox"
+                  name="resource-type"
+                  id={project}
+                  defaultChecked
+                  onChange={e => {
+                    if (e.target.checked) {
+                      setAllowedProjects(prevProjects => [
+                        ...prevProjects,
+                        project,
+                      ]);
+                    } else {
+                      setAllowedProjects(prevProjects => {
+                        return prevProjects.filter(
+                          prevProject => prevProject !== project
+                        );
+                      });
+                    }
+                  }}
+                />
+                <label htmlFor={project}>{project}</label>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FilterProjects;

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

@@ -9,11 +9,23 @@ import {parseData, parseIAMData} from '../Controller';
 type UploadMenuProps = {
   setResources: React.Dispatch<React.SetStateAction<Resource[]>>;
   setRoles: React.Dispatch<React.SetStateAction<IAMRole[]>>;
+  setProjects: React.Dispatch<React.SetStateAction<string[]>>;
+  setAllowedProjects: React.Dispatch<React.SetStateAction<string[]>>;
 };
 
-const UploadMenu = ({setResources, setRoles}: UploadMenuProps) => {
+type File = {
+  name: string;
+  projects: string[];
+};
+
+const UploadMenu = ({
+  setResources,
+  setRoles,
+  setProjects,
+  setAllowedProjects,
+}: UploadMenuProps) => {
   const fileInput = useRef<HTMLInputElement>(null);
-  const [files, setFiles] = useState<string[]>([]);
+  const [files, setFiles] = useState<File[]>([]);
   const [error, setError] = useState<string | null>(null);
   return (
     <div className="menu-item">
@@ -35,7 +47,7 @@ const UploadMenu = ({setResources, setRoles}: UploadMenuProps) => {
             return;
           }
           // check if file is already uploaded
-          if (files.includes(file.name)) {
+          if (files.find(prevFile => prevFile.name === file.name)) {
             setError('File already uploaded');
             return;
           }
@@ -47,6 +59,14 @@ const UploadMenu = ({setResources, setRoles}: UploadMenuProps) => {
 
             try {
               const data = JSON.parse(result);
+              setProjects(prevProjects => [
+                ...prevProjects,
+                ...Object.keys(data.projects),
+              ]);
+              setAllowedProjects(prevProjects => [
+                ...prevProjects,
+                ...Object.keys(data.projects),
+              ]);
               const resources = parseData(data, file.name);
               setResources((prevResources: Resource[]) => [
                 ...prevResources,
@@ -56,7 +76,10 @@ const UploadMenu = ({setResources, setRoles}: UploadMenuProps) => {
               const roles = parseIAMData(data, file.name);
               setRoles((prevRoles: IAMRole[]) => [...prevRoles, ...roles]);
 
-              setFiles([...files, file.name]);
+              setFiles([
+                ...files,
+                {name: file.name, projects: Object.keys(data.projects)},
+              ]);
             } catch (err) {
               setError('Invalid file');
               return;
@@ -85,21 +108,32 @@ const UploadMenu = ({setResources, setRoles}: UploadMenuProps) => {
       {files.length > 0 && (
         <div className="files-list">
           {files.map(file => (
-            <div className="file-item" key={file}>
-              <p>{file}</p>
+            <div className="file-item" key={file.name}>
+              <p>{file.name}</p>
               <button
                 className="remove-button"
                 onClick={() => {
                   setFiles(prevFiles => {
-                    return prevFiles.filter(prevFile => prevFile !== file);
+                    return prevFiles.filter(
+                      prevFile => prevFile.name !== file.name
+                    );
                   });
+
+                  setProjects(prevProjects => {
+                    return prevProjects.filter(
+                      prevProject => !file.projects.includes(prevProject)
+                    );
+                  });
+
                   setResources(prevResources => {
                     return prevResources.filter(
-                      prevResource => prevResource.file !== file
+                      prevResource => prevResource.file !== file.name
                     );
                   });
                   setRoles(prevRoles => {
-                    return prevRoles.filter(prevRole => prevRole.file !== file);
+                    return prevRoles.filter(
+                      prevRole => prevRole.file !== file.name
+                    );
                   });
                 }}
               >

visualization_tool/src/components/ResourcesList/ResourcesList.tsx

@@ -11,19 +11,22 @@ type ResourcesListProps = {
   searchQuery: string;
   sortAttribute: string;
   allowedTypes: string[];
+  allowedProjects: string[];
 };
 
 const ResourcesList = ({
   resources,
   searchQuery,
   sortAttribute,
   allowedTypes,
+  allowedProjects,
 }: ResourcesListProps) => {
   const filteredResources = useFilter(
     resources,
     searchQuery,
     sortAttribute,
-    allowedTypes
+    allowedTypes,
+    allowedProjects
   );
   const [selectedResource, setSelectedResource] = useState<Resource | null>(
     null

visualization_tool/src/components/ResourcesList/useFilter.ts

@@ -6,7 +6,8 @@ export const useFilter = (
   resources: Resource[],
   searchQuery: string,
   sortAttribute: string,
-  allowedTypes: string[]
+  allowedTypes: string[],
+  allowedProjects: string[]
 ) => {
   const [filteredResources, setFilteredResources] =
     useState<Resource[]>(resources);
@@ -18,7 +19,8 @@ export const useFilter = (
           .filter(resource => {
             return (
               allowedTypes.includes(resource.type) &&
-              resource.name.toLowerCase().includes(searchQuery.toLowerCase())
+              resource.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+              allowedProjects.includes(resource.projectId)
             );
           })
           .sort((a, b) => {
@@ -35,7 +37,7 @@ export const useFilter = (
     };
 
     debounce(filterResources, 100)();
-  }, [resources, searchQuery, sortAttribute, allowedTypes]);
+  }, [resources, searchQuery, sortAttribute, allowedTypes, allowedProjects]);
 
   return filteredResources;
 };

visualization_tool/src/components/RolesList/RolesList.tsx

@@ -15,10 +15,11 @@ import './RolesList.css';
 type RolesListProps = {
   roles: IAMRole[];
   emailQuery: string;
+  allowedProjects: string[];
 };
 
-const RolesList = ({roles, emailQuery}: RolesListProps) => {
-  const filteredRoles = useFilter(roles, emailQuery);
+const RolesList = ({roles, emailQuery, allowedProjects}: RolesListProps) => {
+  const filteredRoles = useFilter(roles, emailQuery, allowedProjects);
   // console.log(filteredRoles);
 
   return (

visualization_tool/src/components/RolesList/useFilter.ts

@@ -2,21 +2,27 @@ import {useEffect, useState} from 'react';
 import {IAMRole} from '../../types/IAMPolicy';
 import {debounce} from '@mui/material';
 
-export const useFilter = (roles: IAMRole[], email: string) => {
+export const useFilter = (
+  roles: IAMRole[],
+  email: string,
+  allowedProjects: 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));
+          return (
+            role.members.some(member => member.email.includes(email)) &&
+            allowedProjects.includes(role.projectId)
+          );
         })
       );
     };
 
     debounce(filterRoles, 200)();
-  }, [roles, email]);
+  }, [roles, email, allowedProjects]);
 
   return filteredRoles;
 };