Merge pull request #1889 from johnduprey/dev

Global Admin modal table

Author: KelvinTegelaar

src/components/buttons/TableModalButton.jsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
 import { cellGenericFormatter } from '../tables/CellGenericFormat'
 
-export default function TableModalButton({ data, title, className }) {
+export default function TableModalButton({ data, title, className, countOnly = false, ...input }) {
   const handleTable = (data) => {
     const QueryColumns = []
     const columns = Object.keys(data[0]).map((key) => {
@@ -31,10 +31,8 @@ export default function TableModalButton({ data, title, className }) {
   const buttonClass = 'btn ' + className
 
   return (
-    <CButton className={buttonClass} onClick={() => handleTable(data)}>
-      <>
-        {title} ({data.length})
-      </>
+    <CButton {...input} className={buttonClass} onClick={() => handleTable(data)}>
+      <>{countOnly == true ? data.length : `${title} (${data.length})`}</>
     </CButton>
   )
 }

src/views/home/Home.jsx

@@ -29,6 +29,7 @@ import { CellDelegatedPrivilege } from 'src/components/tables/CellDelegatedPrivi
 import Portals from 'src/data/portals'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Link } from 'react-router-dom'
+import { TableModalButton } from 'src/components/buttons'
 
 const Home = () => {
   const [visible, setVisible] = useState(false)
@@ -54,6 +55,15 @@ const Home = () => {
     params: { tenantFilter: currentTenant.defaultDomainName },
   })
 
+  const GlobalAdminList = useGenericGetRequestQuery({
+    path: '/api/ListGraphRequest',
+    params: {
+      tenantFilter: currentTenant.defaultDomainName,
+      Endpoint: "/directoryRoles(roleTemplateId='62e90394-69f5-4237-9190-012177145e10')/members",
+      $select: 'displayName,userPrincipalName,accountEnabled',
+    },
+  })
+
   const {
     data: sharepoint,
     isLoading: isLoadingSPQuota,
@@ -192,14 +202,20 @@ const Home = () => {
             </CCol>
             <CCol sm={12} md={6} xl={3} className="mb-3">
               <CippContentCard title="Global Admin Users" icon={faLaptopCode}>
-                <a
-                  href={`https://entra.microsoft.com/${currentTenant.customerId}/#view/Microsoft_AAD_IAM/RoleMenuBlade/~/RoleMembers/objectId/62e90394-69f5-4237-9190-012177145e10/roleName/Global%20Administrator/roleTemplateId/62e90394-69f5-4237-9190-012177145e10/adminUnitObjectId//customRole~/false/resourceScope/%2F?culture=en-us&country=us`}
-                  className="stretched-link"
-                  target="_blank"
-                />
-                <div>
-                  {issuccessUserCounts && !isFetchingUserCount ? dashboard?.Gas : <Skeleton />}
-                </div>
+                {GlobalAdminList.isSuccess ? (
+                  <>
+                    <TableModalButton
+                      className="stretched-link text-decoration-none"
+                      data={GlobalAdminList.data?.Results}
+                      countOnly={true}
+                      component="a"
+                      color="link"
+                      title="Global Admins"
+                    />
+                  </>
+                ) : (
+                  <Skeleton />
+                )}
               </CippContentCard>
             </CCol>
             <CCol sm={12} md={6} xl={3} className="mb-3">