Merge pull request #2357 from JohnDuprey/dev

Table Tweaks, Graph Explorer & New page

src/_nav.jsx

@@ -162,6 +162,11 @@ const _nav = [
         name: 'Tenant Offboarding',
         to: '/tenant/administration/tenant-offboarding-wizard',
       },
+      {
+        component: CNavItem,
+        name: 'Partner Relationships',
+        to: '/tenant/administration/partner-relationships',
+      },
     ],
   },
   {

src/components/tables/CippTable.jsx

@@ -16,6 +16,7 @@ import {
   CAccordionHeader,
   CAccordionBody,
   CAccordionItem,
+  CTooltip,
 } from '@coreui/react'
 import DataTable, { createTheme } from 'react-data-table-component'
 import PropTypes from 'prop-types'
@@ -31,13 +32,12 @@ import {
   faSync,
 } from '@fortawesome/free-solid-svg-icons'
 import { cellGenericFormatter } from './CellGenericFormat'
-import { ModalService } from '../utilities'
+import { CippCodeOffCanvas, ModalService } from '../utilities'
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
 import { debounce } from 'lodash-es'
 import { useSearchParams } from 'react-router-dom'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import { setDefaultColumns } from 'src/store/features/app'
-import M365Licenses from 'src/data/M365Licenses'
 
 const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
   <>
@@ -155,6 +155,7 @@ export default function CippTable({
   const [filterviaURL, setFilterviaURL] = React.useState(false)
   const [originalColumns, setOrginalColumns] = React.useState(columns)
   const [updatedColumns, setUpdatedColumns] = React.useState(columns)
+  const [codeOffcanvasVisible, setCodeOffcanvasVisible] = useState(false)
   if (defaultColumns && defaultColumnsSet === false && endpointName) {
     const defaultColumnsArray = defaultColumns.split(',').filter((item) => item)
 
@@ -604,16 +605,18 @@ export default function CippTable({
     }
     if (refreshFunction) {
       defaultActions.push([
-        <CButton
-          key={'refresh-action'}
-          onClick={() => {
-            refreshFunction((Math.random() + 1).toString(36).substring(7))
-          }}
-          className="m-1"
-          size="sm"
-        >
-          <FontAwesomeIcon icon={faSync} />
-        </CButton>,
+        <CTooltip key={'refresh-tooltip'} content="Refresh" placement="top">
+          <CButton
+            key={'refresh-action'}
+            onClick={() => {
+              refreshFunction((Math.random() + 1).toString(36).substring(7))
+            }}
+            className="m-1"
+            size="sm"
+          >
+            <FontAwesomeIcon icon={faSync} />
+          </CButton>
+        </CTooltip>,
       ])
     }
 
@@ -814,6 +817,20 @@ export default function CippTable({
         </>,
       ])
     }
+    defaultActions.push([
+      <CTooltip key={'code-tooltip'} content="View API Response" placement="top">
+        <CButton
+          key={'code-action'}
+          onClick={() => {
+            setCodeOffcanvasVisible(true)
+          }}
+          className="m-1"
+          size="sm"
+        >
+          <FontAwesomeIcon icon="code" />
+        </CButton>
+      </CTooltip>,
+    ])
     return (
       <>
         <div className="w-100 d-flex justify-content-start">
@@ -981,6 +998,13 @@ export default function CippTable({
               {...rest}
             />
             {selectedRows.length >= 1 && <CCallout>Selected {selectedRows.length} items</CCallout>}
+            <CippCodeOffCanvas
+              row={data}
+              hideButton={true}
+              state={codeOffcanvasVisible}
+              hideFunction={() => setCodeOffcanvasVisible(false)}
+              title="API Response"
+            />
           </>
         )}
       </div>

src/importsMap.jsx

@@ -33,6 +33,7 @@ import React from 'react'
   "/identity/reports/azure-ad-connect-report": React.lazy(() => import('./views/identity/reports/AzureADConnectReport')), 
   "/tenant/administration/tenants": React.lazy(() => import('./views/tenant/administration/Tenants')), 
   "/tenant/administration/tenants/edit": React.lazy(() => import('./views/tenant/administration/EditTenant')), 
+  "/tenant/administration/partner-relationships": React.lazy(() => import('./views/tenant/administration/PartnerRelationships')), 
   "/tenant/administration/domains": React.lazy(() => import('./views/tenant/administration/Domains')), 
   "/tenant/administration/alertswizard": React.lazy(() => import('./views/tenant/administration/AlertWizard')), 
   "/tenant/administration/alertrules": React.lazy(() => import('./views/tenant/administration/AlertRules')), 

src/routes.json

@@ -222,6 +222,12 @@
     "component": "views/tenant/administration/EditTenant",
     "allowedRoles": ["admin", "editor", "readonly"]
   },
+  {
+    "path": "/tenant/administration/partner-relationships",
+    "name": "Partner Relationships",
+    "component": "views/tenant/administration/PartnerRelationships",
+    "allowedRoles": ["admin", "editor", "readonly"]
+  },
   {
     "path": "/tenant/administration/domains",
     "name": "Domains",

src/views/tenant/administration/GraphExplorer.jsx

@@ -500,6 +500,11 @@ const GraphExplorer = () => {
                               placeholder="Select the number of rows to return"
                             />
                             <WhenFieldChanges field="reportTemplate" set="$top" />
+                            <RFFCFormSwitch
+                              name="ReverseTenantLookup"
+                              label="Reverse Tenant Lookup"
+                            />
+                            <WhenFieldChanges field="reportTemplate" set="ReverseTenantLookup" />
                           </CCol>
                           <CCol>
                             <RFFCFormInput
@@ -553,6 +558,16 @@ const GraphExplorer = () => {
                               placeholder="Enter OData search query"
                             />
                             <WhenFieldChanges field="reportTemplate" set="$search" />
+                            <RFFCFormInput
+                              type="text"
+                              name="ReverseTenantLookupProperty"
+                              label="Reverse Tenant Lookup Property"
+                              placeholder="Default tenantId"
+                            />
+                            <WhenFieldChanges
+                              field="reportTemplate"
+                              set="ReverseTenantLookupProperty"
+                            />
                           </CCol>
                         </CRow>
                         <CRow className="mb-3">

src/views/tenant/administration/PartnerRelationships.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { CippPageList } from 'src/components/layout'
+import { cellGenericFormatter } from 'src/components/tables/CellGenericFormat'
+
+const PartnerRelationships = () => {
+  const tenant = useSelector((state) => state.app.currentTenant)
+  const [tenantColumnSet, setTenantColumn] = React.useState(false)
+  useEffect(() => {
+    if (tenant.defaultDomainName === 'AllTenants') {
+      setTenantColumn(false)
+    }
+    if (tenant.defaultDomainName !== 'AllTenants') {
+      setTenantColumn(true)
+    }
+  }, [tenant.defaultDomainName, tenantColumnSet])
+
+  const columns = [
+    {
+      name: 'Tenant',
+      selector: (row) => row.Tenant,
+      sortable: true,
+      exportSelector: 'Tenant',
+      omit: tenantColumnSet,
+      cell: cellGenericFormatter(),
+    },
+    {
+      name: 'Partner',
+      selector: (row) => row.TenantInfo?.displayName,
+      sortable: true,
+      exportSelector: 'TenantInfo/displayName',
+      cell: cellGenericFormatter(),
+    },
+    {
+      name: 'Service Provider',
+      selector: (row) => row['isServiceProvider'],
+      sortable: true,
+      exportSelector: 'isServiceProvider',
+      cell: cellGenericFormatter(),
+    },
+    {
+      name: 'Multi Tenant',
+      selector: (row) => row['isInMultiTenantOrganization'],
+      sortable: true,
+      exportSelector: 'isInMultiTenantOrganization',
+      cell: cellGenericFormatter(),
+    },
+    {
+      name: 'Partner Info',
+      selector: (row) => row['TenantInfo'],
+      sortable: true,
+      exportSelector: 'TenantInfo',
+      cell: cellGenericFormatter(),
+    },
+  ]
+  return (
+    <div>
+      <CippPageList
+        capabilities={{ allTenants: true, helpContext: 'https://google.com' }}
+        title="Partner Relationships"
+        tenantSelector={false}
+        datatable={{
+          keyField: 'id',
+          columns,
+          reportName: `Partner-Relationships`,
+          path: '/api/ListGraphRequest',
+          params: {
+            Endpoint: 'policies/crossTenantAccessPolicy/partners',
+            ReverseTenantLookup: true,
+            TenantFilter: tenant.customerId,
+          },
+        }}
+      />
+    </div>
+  )
+}
+
+export default PartnerRelationships