Completed moving globals to dedicated section, and added pagination to exclusions page

ui/src/features/DiscoverTable/Table.js

@@ -8,7 +8,9 @@ import {
   GridOverlay,
   GridToolbarContainer,
   GridToolbarColumnsButton,
-  GridToolbarFilterButton
+  GridToolbarFilterButton,
+  GridToolbarExport,
+  GridCsvExportOptions
 } from "@mui/x-data-grid";
 
 import {
@@ -30,6 +32,7 @@ import Shrug from "../../img/pam/Shrug";
 import { TableContext } from "./TableContext";
 import FilterMenu from "./FilterMenu";
 import ItemDetails from "./Utils/Details";
+import { minWidth } from "@mui/system";
 
 const openStyle = {
   right: 0,
@@ -214,20 +217,23 @@ export default function DiscoverTable(props) {
           justifyContent="center"
           style={{ borderBottom: "1px solid rgba(224, 224, 224, 1)", backgroundColor: selectedRow ? "rgba(25, 118, 210, 0.12)" : "unset" }}
         >
-          <Box width="400px" display="flex" justifyContent="flex-start" alignItems="center">
+          <Box sx={{ minWidth: "300px", display: "flex", justifyContent: "flex-start", alignItems: "center" }}>
             <GridToolbarColumnsButton
               sx={{ ml: 2 }}
             />
             <GridToolbarFilterButton
-              sx={{ ml: 2 }}
+              sx={{ ml: 1 }}
+            />
+            <GridToolbarExport
+              sx={{ ml: 1 }}
             />
           </Box>
-          <Box width="100%" alignSelf="center" textAlign="center">
+          <Box sx={{ width: "100%", alignSelf: "center", textAlign: "center" }}>
             <Typography sx={{ flex: "1 1 100%" }} variant="h6" component="div">
               {selectedRow ? `'${selectedRow.name}' selected` : `${config.title}s`}
             </Typography>
           </Box>
-          <Box width="400px" display="flex" justifyContent="flex-end" alignItems="center">
+          <Box sx={{ minWidth: "300px", display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
             {/* <Tooltip title="Filter">
               <IconButton
                 ref={anchorEl}

ui/src/features/exclusions/exclusions.js

@@ -158,8 +158,10 @@ function GridSection(props) {
           <DataGrid
             disableColumnMenu
             // disableSelectionOnClick
-            hideFooter
-            hideFooterPagination
+            // hideFooter
+            // hideFooterPagination
+            pagination
+            autoPageSize
             hideFooterSelectedRowCount
             density="compact"
             rows={rows}

ui/src/global/globals.js

@@ -0,0 +1,3 @@
+export const UI_APP_ID = process.env.REACT_APP_UI_ID || window['env'].REACT_APP_UI_ID;
+export const ENGINE_APP_ID = process.env.REACT_APP_ENGINE_ID || window['env'].REACT_APP_ENGINE_ID;
+export const TENANT_ID = process.env.REACT_APP_TENANT_ID || window['env'].REACT_APP_TENANT_ID;

ui/src/msal/authConfig.js

@@ -1,37 +1,48 @@
-const UI_APP_ID = process.env.REACT_APP_UI_ID || window['env'].REACT_APP_UI_ID;
-const ENGINE_APP_ID = process.env.REACT_APP_ENGINE_ID || window['env'].REACT_APP_ENGINE_ID;
-const TENANT_ID = process.env.REACT_APP_TENANT_ID || window['env'].REACT_APP_TENANT_ID;
-const AZURE_ENV = process.env.REACT_APP_AZURE_ENV || window['env'].REACT_APP_AZURE_ENV;
+// const UI_APP_ID = process.env.REACT_APP_UI_ID || window['env'].REACT_APP_UI_ID;
+// const ENGINE_APP_ID = process.env.REACT_APP_ENGINE_ID || window['env'].REACT_APP_ENGINE_ID;
+// const TENANT_ID = process.env.REACT_APP_TENANT_ID || window['env'].REACT_APP_TENANT_ID;
+// const AZURE_ENV = process.env.REACT_APP_AZURE_ENV || window['env'].REACT_APP_AZURE_ENV;
 
-const AZURE_ENV_MAP = {
-  AZURE_PUBLIC: {
-    AZURE_AD: "login.microsoftonline.com",
-    AZURE_ARM: "management.azure.com",
-    MS_GRAPH: "graph.microsoft.com"
-  },
-  AZURE_US_GOV: {
-    AZURE_AD: "login.microsoftonline.us",
-    AZURE_ARM: "management.usgovcloudapi.net",
-    MS_GRAPH: "graph.microsoft.us"
-  },
-  AZURE_GERMANY: {
-    AZURE_AD: "login.microsoftonline.de",
-    AZURE_ARM: "management.microsoftazure.de",
-    MS_GRAPH: "graph.microsoft.de"
-  },
-  AZURE_CHINA: {
-    AZURE_AD: "login.chinacloudapi.cn",
-    AZURE_ARM: "management.chinacloudapi.cn",
-    MS_GRAPH: "microsoftgraph.chinacloudapi.cn"
-  }
-};
+// const AZURE_ENV_MAP = {
+//   AZURE_PUBLIC: {
+//     AZURE_AD: "login.microsoftonline.com",
+//     AZURE_ARM: "management.azure.com",
+//     MS_GRAPH: "graph.microsoft.com"
+//   },
+//   AZURE_US_GOV: {
+//     AZURE_AD: "login.microsoftonline.us",
+//     AZURE_ARM: "management.usgovcloudapi.net",
+//     MS_GRAPH: "graph.microsoft.us"
+//   },
+//   AZURE_GERMANY: {
+//     AZURE_AD: "login.microsoftonline.de",
+//     AZURE_ARM: "management.microsoftazure.de",
+//     MS_GRAPH: "graph.microsoft.de"
+//   },
+//   AZURE_CHINA: {
+//     AZURE_AD: "login.chinacloudapi.cn",
+//     AZURE_ARM: "management.chinacloudapi.cn",
+//     MS_GRAPH: "microsoftgraph.chinacloudapi.cn"
+//   }
+// };
 
-const AUTH = AZURE_ENV_MAP[AZURE_ENV] ?? AZURE_ENV_MAP['AZURE_PUBLIC'];
+// const AUTH = AZURE_ENV_MAP[AZURE_ENV] ?? AZURE_ENV_MAP['AZURE_PUBLIC'];
+
+import {
+  ENGINE_APP_ID,
+  UI_APP_ID,
+  TENANT_ID
+} from "../global/globals";
+
+import {
+  AZURE_AD,
+  MS_GRAPH
+} from "../global/azureClouds";
 
 export const msalConfig = {
     auth: {
         clientId: UI_APP_ID,
-        authority: `https://${AUTH.AZURE_AD}/${TENANT_ID}`,
+        authority: `https://${AZURE_AD}/${TENANT_ID}`,
         redirectUri: window.location.origin,
     },
     cache: {
@@ -50,8 +61,8 @@ export const apiRequest = {
 };
 
 export const graphConfig = {
-    graphMeEndpoint: `https://${AUTH.MS_GRAPH}/beta/me`,
-    graphUsersEndpoint: `https://${AUTH.MS_GRAPH}/beta/users`,
-    graphMePhotoEndpoint: `https://${AUTH.MS_GRAPH}/beta/me/photo/$value`,
-    // graphMeEndpoint: `https://${AUTH.MS_GRAPH}/oidc/userinfo`,
+    graphMeEndpoint: `https://${MS_GRAPH}/beta/me`,
+    graphUsersEndpoint: `https://${MS_GRAPH}/beta/users`,
+    graphMePhotoEndpoint: `https://${MS_GRAPH}/beta/me/photo/$value`,
+    // graphMeEndpoint: `https://${MS_GRAPH}/oidc/userinfo`,
 };