Adding groups tab to Policy Details page (#837)

* parent 58efbbbf60
author Adam Stafford <adam@minio.io> 1624473190 -0700
committer Adam Stafford <adam@minio.io> 1624569868 -0700

policy groups

* restoring old commit files

Co-authored-by: Adam Stafford <adam@minio.io>
Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>
Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/screens/Console/Policies/PolicyDetails.tsx

@@ -166,6 +166,7 @@ const PolicyDetails = ({
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const [policy, setPolicy] = useState<Policy | null>(null);
   const [userList, setUserList] = useState<string[]>([]);
+  const [groupList, setGroupList] = useState<string[]>([]);
   const [addLoading, setAddLoading] = useState<boolean>(false);
   const [policyName, setPolicyName] = useState<string>(
     match.params["policyName"]
@@ -174,6 +175,8 @@ const PolicyDetails = ({
   const [loadingPolicy, setLoadingPolicy] = useState<boolean>(true);
   const [filterUsers, setFilterUsers] = useState<string>("");
   const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
+  const [filterGroups, setFilterGroups] = useState<string>("");
+  const [loadingGroups, setLoadingGroups] = useState<boolean>(true);
 
   const saveRecord = (event: React.FormEvent) => {
     event.preventDefault();
@@ -211,6 +214,20 @@ const PolicyDetails = ({
           });
       }
     };
+    const loadGroupsForPolicy = () => {
+      if (loadingGroups) {
+        api
+          .invoke("GET", `/api/v1/policies/${policyName}/groups`)
+          .then((result: any) => {
+            setGroupList(result);
+            setLoadingGroups(false);
+          })
+          .catch((err) => {
+            setErrorSnackMessage(err);
+            setLoadingGroups(false);
+          });
+      }
+    };
     const loadPolicyDetails = () => {
       if (loadingPolicy) {
         api
@@ -234,16 +251,20 @@ const PolicyDetails = ({
     if (loadingPolicy) {
       loadPolicyDetails();
       loadUsersForPolicy();
+      loadGroupsForPolicy();
     }
   }, [
     policyName,
     loadingPolicy,
     loadingUsers,
+    loadingGroups,
     setErrorSnackMessage,
     setUserList,
+    setGroupList,
     setPolicyDefinition,
     setPolicy,
     setLoadingUsers,
+    setLoadingGroups,
   ]);
 
   const resetForm = () => {
@@ -262,6 +283,10 @@ const PolicyDetails = ({
     elementItem.includes(filterUsers)
   );
 
+  const filteredGroups = groupList.filter((elementItem) =>
+    elementItem.includes(filterGroups)
+  );
+
   return (
     <React.Fragment>
       <PageHeader
@@ -287,6 +312,7 @@ const PolicyDetails = ({
           >
             <Tab label="Details" />
             <Tab label="Users" />
+            <Tab label="Groups" />
           </Tabs>
         </Grid>
         {selectedTab === 0 && (
@@ -374,6 +400,40 @@ const PolicyDetails = ({
             />
           </Grid>
         )}
+        {selectedTab === 2 && (
+          <Grid container>
+            <Grid item xs={12} className={classes.actionsTray}>
+              <TextField
+                placeholder="Search Groups"
+                className={classes.searchField}
+                id="search-resource"
+                label=""
+                onChange={(val) => {
+                  setFilterGroups(val.target.value);
+                }}
+                InputProps={{
+                  disableUnderline: true,
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Grid>
+            <Grid item xs={12} className={classes.actionsTray}>
+              <br />
+            </Grid>
+            <TableWrapper
+              itemActions={[]}
+              columns={[{ label: "Name", elementKey: "name" }]}
+              isLoading={loadingGroups}
+              records={filteredGroups}
+              entityName="Groups"
+              idField="name"
+            />
+          </Grid>
+        )}
       </Grid>
     </React.Fragment>
   );