Fixed styles in users policy modal (#139)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx

@@ -19,8 +19,8 @@ import { IconButton } from "@material-ui/core";
 import ViewIcon from "./TableActionIcons/ViewIcon";
 import PencilIcon from "./TableActionIcons/PencilIcon";
 import DeleteIcon from "./TableActionIcons/DeleteIcon";
+import DescriptionIcon from "./TableActionIcons/DescriptionIcon";
 import { Link } from "react-router-dom";
-import DescriptionIcon from "@material-ui/icons/Description";
 
 interface IActionButton {
   type: string;
@@ -41,7 +41,7 @@ const defineIcon = (type: string, selected: boolean) => {
     case "delete":
       return <DeleteIcon active={selected} />;
     case "description":
-      return <DescriptionIcon />;
+      return <DescriptionIcon active={selected} />;
   }
 
   return null;

portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DescriptionIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const PencilIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill={active ? selected : unSelected}
+        d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+      ></path>
+    </svg>
+  );
+};
+
+export default PencilIcon;

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

@@ -18,10 +18,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import {
   Button,
-  FormControlLabel,
   LinearProgress,
   Paper,
-  Switch,
   Table,
   TableBody,
   TableCell,
@@ -30,10 +28,7 @@ import {
   TableRow,
 } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { RadioGroupSelector } from "../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
-import { IElementValue } from "../Configurations/types";
 import { User } from "../Users/types";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import { Policy, PolicyList } from "./types";
@@ -50,6 +45,9 @@ interface ISetPolicyProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
+    buttonContainer: {
+      textAlign: "right",
+    },
   });
 
 const SetPolicy = ({
@@ -59,23 +57,6 @@ const SetPolicy = ({
   open,
 }: ISetPolicyProps) => {
   //Local States
-  const [useConnectionString, setUseConnectionString] = useState<boolean>(
-    false
-  );
-  const [connectionString, setConnectionString] = useState<string>("");
-  const [host, setHostname] = useState<string>("");
-  const [dbName, setDbName] = useState<string>("");
-  const [port, setPort] = useState<string>("");
-  const [user, setUser] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [sslMode, setSslMode] = useState<string>("require");
-
-  const [table, setTable] = useState<string>("");
-  const [format, setFormat] = useState<string>("namespace");
-  const [queueDir, setQueueDir] = useState<string>("");
-  const [queueLimit, setQueueLimit] = useState<string>("");
-  const [comment, setComment] = useState<string>("");
-
   const [records, setRecords] = useState<Policy[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
@@ -175,25 +156,24 @@ const SetPolicy = ({
             </Table>
           </TableContainer>
         </Grid>
-        <Grid item xs={12} className={classes.buttonContainer}>
-          <Button
-            type="submit"
-            variant="contained"
-            color="primary"
-            size={"small"}
-            onClick={() => {
-              closeModalAndRefresh();
-            }}
-          >
-            Cancel
-          </Button>
-        </Grid>
-        {loading && (
-          <Grid item xs={12}>
-            <LinearProgress />
-          </Grid>
-        )}
       </Grid>
+      <Grid item xs={12} className={classes.buttonContainer}>
+        <Button
+          type="submit"
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            closeModalAndRefresh();
+          }}
+        >
+          Cancel
+        </Button>
+      </Grid>
+      {loading && (
+        <Grid item xs={12}>
+          <LinearProgress />
+        </Grid>
+      )}
     </ModalWrapper>
   );
 };

portal-ui/src/screens/Console/Users/Users.tsx

@@ -264,8 +264,8 @@ class Users extends React.Component<IUsersProps, IUsersState> {
     };
 
     const tableActions = [
-      { type: "description", onClick: setPolicyAction },
       { type: "view", onClick: viewAction },
+      { type: "description", onClick: setPolicyAction },
       { type: "delete", onClick: deleteAction },
     ];