Add Filtering to Users on Policy Details (#833)

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

@@ -27,13 +27,19 @@ import { Button, LinearProgress } from "@material-ui/core";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import { User } from "../Users/types";
 import api from "../../../common/api";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import { Link } from "react-router-dom";
 import { setErrorSnackMessage } from "../../../actions";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import history from "../../../history";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import SearchIcon from "@material-ui/icons/Search";
+import {
+  actionsTray,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";
+import TextField from "@material-ui/core/TextField";
 
 interface IPolicyDetailsProps {
   classes: any;
@@ -85,9 +91,6 @@ const styles = (theme: Theme) =>
         margin: "5px 0px",
       },
     },
-    actionsTray: {
-      textAlign: "right",
-    },
     updateButton: {
       backgroundColor: "transparent",
       border: 0,
@@ -148,6 +151,8 @@ const styles = (theme: Theme) =>
       textDecoration: "none",
       color: "black",
     },
+    ...actionsTray,
+    ...searchField,
     ...modalBasic,
     ...containerForHeader(theme.spacing(4)),
   });
@@ -160,13 +165,15 @@ const PolicyDetails = ({
 }: IPolicyDetailsProps) => {
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const [policy, setPolicy] = useState<Policy | null>(null);
-  const [userList, setUserList] = useState<User[]>([]);
+  const [userList, setUserList] = useState<string[]>([]);
   const [addLoading, setAddLoading] = useState<boolean>(false);
   const [policyName, setPolicyName] = useState<string>(
     match.params["policyName"]
   );
   const [policyDefinition, setPolicyDefinition] = useState<string>("");
   const [loadingPolicy, setLoadingPolicy] = useState<boolean>(true);
+  const [filterUsers, setFilterUsers] = useState<string>("");
+  const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
 
   const saveRecord = (event: React.FormEvent) => {
     event.preventDefault();
@@ -191,14 +198,18 @@ const PolicyDetails = ({
 
   useEffect(() => {
     const loadUsersForPolicy = () => {
-      api
-        .invoke("GET", `/api/v1/policies/${policyName}/users`)
-        .then((result: any) => {
-          setUserList(result);
-        })
-        .catch((err) => {
-          console.log("Error in loading users");
-        });
+      if (loadingUsers) {
+        api
+          .invoke("GET", `/api/v1/policies/${policyName}/users`)
+          .then((result: any) => {
+            setUserList(result);
+            setLoadingUsers(false);
+          })
+          .catch((err) => {
+            setErrorSnackMessage(err);
+            setLoadingUsers(false);
+          });
+      }
     };
     const loadPolicyDetails = () => {
       if (loadingPolicy) {
@@ -214,7 +225,8 @@ const PolicyDetails = ({
             setLoadingPolicy(false);
           })
           .catch((err) => {
-            console.log("Error in loading policy");
+            setErrorSnackMessage(err);
+            setLoadingPolicy(false);
           });
       }
     };
@@ -223,7 +235,16 @@ const PolicyDetails = ({
       loadPolicyDetails();
       loadUsersForPolicy();
     }
-  }, [policyName, loadingPolicy]);
+  }, [
+    policyName,
+    loadingPolicy,
+    loadingUsers,
+    setErrorSnackMessage,
+    setUserList,
+    setPolicyDefinition,
+    setPolicy,
+    setLoadingUsers,
+  ]);
 
   const resetForm = () => {
     setPolicyName("");
@@ -237,6 +258,10 @@ const PolicyDetails = ({
   };
   const userTableActions = [{ type: "view", onClick: userViewAction }];
 
+  const filteredUsers = userList.filter((elementItem) =>
+    elementItem.includes(filterUsers)
+  );
+
   return (
     <React.Fragment>
       <PageHeader
@@ -249,86 +274,106 @@ const PolicyDetails = ({
           </Fragment>
         }
       />
-      <Grid container>
-        <Grid item xs={12} className={classes.container}>
-          <Grid item xs={12}>
-            <Tabs
-              value={selectedTab}
-              indicatorColor="primary"
-              textColor="primary"
-              onChange={(_, newValue: number) => {
-                setSelectedTab(newValue);
-              }}
-              aria-label="policy-tabs"
-            >
-              <Tab label="Details" />
-              <Tab label="Users" />
-            </Tabs>
-          </Grid>
-          <Grid item xs={12}>
-            {selectedTab === 0 && (
-              <Paper className={classes.paperContainer}>
-                <form
-                  noValidate
-                  autoComplete="off"
-                  onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                    saveRecord(e);
-                  }}
-                >
-                  <Grid container>
-                    <Grid item xs={12} className={classes.formScrollable}>
-                      <CodeMirrorWrapper
-                        label={`${policy ? "Edit" : "Write"} Policy`}
-                        value={policyDefinition}
-                        onBeforeChange={(editor, data, value) => {
-                          setPolicyDefinition(value);
-                        }}
-                      />
-                    </Grid>
-                    <Grid item xs={12} className={classes.buttonContainer}>
-                      {!policy && (
-                        <button
-                          type="button"
-                          color="primary"
-                          className={classes.clearButton}
-                          onClick={() => {
-                            resetForm();
-                          }}
-                        >
-                          Clear
-                        </button>
-                      )}
-
-                      <Button
-                        type="submit"
-                        variant="contained"
-                        color="primary"
-                        disabled={addLoading || !validSave}
-                      >
-                        Save
-                      </Button>
-                    </Grid>
-                    {addLoading && (
-                      <Grid item xs={12}>
-                        <LinearProgress />
-                      </Grid>
-                    )}
-                  </Grid>
-                </form>
-              </Paper>
-            )}
-            {selectedTab === 1 && (
-              <TableWrapper
-                itemActions={userTableActions}
-                columns={[{ label: "Name", elementKey: "name" }]}
-                isLoading={false}
-                records={userList}
-                entityName="Users"
-                idField="name"
-              />
-            )}
-          </Grid>
+      <Grid item xs={12} className={classes.container}>
+        <Grid item xs={12}>
+          <Tabs
+            value={selectedTab}
+            indicatorColor="primary"
+            textColor="primary"
+            onChange={(_, newValue: number) => {
+              setSelectedTab(newValue);
+            }}
+            aria-label="policy-tabs"
+          >
+            <Tab label="Details" />
+            <Tab label="Users" />
+          </Tabs>
         </Grid>
+        {selectedTab === 0 && (
+          <Paper className={classes.paperContainer}>
+            <form
+              noValidate
+              autoComplete="off"
+              onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                saveRecord(e);
+              }}
+            >
+              <Grid container>
+                <Grid item xs={12} className={classes.formScrollable}>
+                  <CodeMirrorWrapper
+                    label={`${policy ? "Edit" : "Write"} Policy`}
+                    value={policyDefinition}
+                    onBeforeChange={(editor, data, value) => {
+                      setPolicyDefinition(value);
+                    }}
+                  />
+                </Grid>
+                <Grid item xs={12} className={classes.buttonContainer}>
+                  {!policy && (
+                    <button
+                      type="button"
+                      color="primary"
+                      className={classes.clearButton}
+                      onClick={() => {
+                        resetForm();
+                      }}
+                    >
+                      Clear
+                    </button>
+                  )}
+
+                  <Button
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                    disabled={addLoading || !validSave}
+                  >
+                    Save
+                  </Button>
+                </Grid>
+                {addLoading && (
+                  <Grid item xs={12}>
+                    <LinearProgress />
+                  </Grid>
+                )}
+              </Grid>
+            </form>
+          </Paper>
+        )}
+        {selectedTab === 1 && (
+          <Grid container>
+            <Grid item xs={12} className={classes.actionsTray}>
+              <TextField
+                placeholder="Search Users"
+                className={classes.searchField}
+                id="search-resource"
+                label=""
+                onChange={(val) => {
+                  setFilterUsers(val.target.value);
+                }}
+                InputProps={{
+                  disableUnderline: true,
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Grid>
+            <Grid item xs={12} className={classes.actionsTray}>
+              <br />
+            </Grid>
+            <TableWrapper
+              itemActions={userTableActions}
+              columns={[{ label: "Name", elementKey: "name" }]}
+              isLoading={loadingUsers}
+              records={filteredUsers}
+              entityName="Users"
+              idField="name"
+            />
+          </Grid>
+        )}
       </Grid>
     </React.Fragment>
   );