Skip to content

Commit

Permalink
Merge pull request #1079 from johnduprey/dev
Browse files Browse the repository at this point in the history 
Tenant List OffCanvas
  • Loading branch information
@KelvinTegelaar
KelvinTegelaar authored Aug 24, 2022
2 parents 9bbd0d7 + 821a47e commit c6695dd
Showing 1 changed file with 140 additions and 131 deletions.
271 changes: 140 additions & 131 deletions src/views/tenant/administration/Tenants.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,153 @@
import React from 'react'
import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import { CButton } from '@coreui/react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faCheckCircle,
faCog,
faEdit,
faEllipsisV,
faExclamationTriangle,
} from '@fortawesome/free-solid-svg-icons'
import { CippPageList } from 'src/components/layout'
import { Link } from 'react-router-dom'
import { CellTip, CellTipIcon } from 'src/components/tables'
import { CippActionsOffcanvas } from 'src/components/utilities'
import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
import Skeleton from 'react-loading-skeleton'

const Offcanvas = (row, rowIndex, formatExtraData) => {
const [getTenantDetails, tenantDetails] = useLazyGenericGetRequestQuery()
const [ocVisible, setOCVisible] = useState(false)

function loadOffCanvasDetails(domainName) {
setOCVisible(true)
getTenantDetails({ path: `api/ListTenantDetails?tenantfilter=${domainName}` })
}

function tenantProperty(tenantDetails, propertyName) {
return (
<>
{tenantDetails.isFetching && <Skeleton count={1} width={150} />}
{!tenantDetails.isFetching &&
tenantDetails.isSuccess &&
(tenantDetails.data[propertyName]?.toString() ?? ' ')}
</>
)
}

return (
<>
<CButton size="sm" color="link" onClick={() => loadOffCanvasDetails(row.defaultDomainName)}>
<FontAwesomeIcon icon={faEllipsisV} />
</CButton>
<CippActionsOffcanvas
title="Tenant Information"
extendedInfo={[
{
label: 'Display Name',
value: tenantProperty(tenantDetails, 'displayName'),
},
{
label: 'Business Phones',
value: tenantProperty(tenantDetails, 'businessPhones'),
},
{
label: 'Technical Emails',
value: tenantProperty(tenantDetails, 'technicalNotificationMails'),
},
{
label: 'Tenant Type',
value: tenantProperty(tenantDetails, 'tenantType'),
},
{
label: 'Created',
value: tenantProperty(tenantDetails, 'createdDateTime'),
},
{
label: 'AD Connect Enabled',
value: tenantProperty(tenantDetails, 'onPremisesSyncEnabled'),
},
{
label: 'AD Connect Sync',
value: tenantProperty(tenantDetails, 'onPremisesLastSyncDateTime'),
},
{
label: 'AD Password Sync',
value: tenantProperty(tenantDetails, 'onPremisesLastPasswordSyncDateTime'),
},
]}
actions={[
{
icon: <FontAwesomeIcon icon={faEdit} className="me-2" />,
label: 'Edit Tenant',
link: `/tenant/administration/tenants/Edit?tenantFilter=${row.defaultDomainName}&customerId=${row.customerId}`,
color: 'warning',
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'M365 Portal',
link: `https://portal.office.com/Partner/BeginClientSession.aspx?CTID=${row.customerId}&CSDEST=o365admincenter`,
external: true,
color: 'info',
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'Exchange Portal',
color: 'info',
external: true,
link: `https://outlook.office365.com/ecp/?rfr=Admin_o365&exsvurl=1&delegatedOrg=${row.defaultDomainName}`,
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'AAD Portal',
color: 'info',
external: true,
link: `https://aad.portal.azure.com/${row.defaultDomainName}`,
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'Teams Portal',
color: 'info',
external: true,
link: `https://admin.teams.microsoft.com/?delegatedOrg=${row.defaultDomainName}`,
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'Azure Portal',
color: 'info',
external: true,
link: `https://portal.azure.com/${row.defaultDomainName}`,
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'MEM (Intune) Portal',
color: 'info',
external: true,
link: `https://endpoint.microsoft.com/${row.defaultDomainName}`,
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'Security Portal (GDAP)',
color: 'info',
external: true,
link: `https://security.microsoft.com/?tid=${row.customerId}`,
},
{
icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
label: 'Sharepoint Admin',
color: 'info',
external: true,
link: `https://${row.defaultDomainName.split('.')[0]}-admin.sharepoint.com`,
},
]}
placement="end"
visible={ocVisible}
id={row.id}
hideFunction={() => setOCVisible(false)}
/>
</>
)
}

function StatusIcon(graphErrorCount) {
if (graphErrorCount > 0) {
Expand Down Expand Up @@ -60,138 +197,10 @@ const columns = [
{
exportSelector: 'customerId',
},
{
name: 'M365 Portal',
selector: (row) => row['customerId'],
center: true,
cell: (row) => (
<a
href={`https://portal.office.com/Partner/BeginClientSession.aspx?CTID=${row.customerId}&CSDEST=o365admincenter`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'Exchange Portal',
selector: (row) => row['defaultDomainName'],
center: true,
cell: (row) => (
<a
href={`https://outlook.office365.com/ecp/?rfr=Admin_o365&exsvurl=1&delegatedOrg=${row.defaultDomainName}`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'AAD Portal',
selector: (row) => row['defaultDomainName'],
center: true,
cell: (row) => (
<a
href={`https://aad.portal.azure.com/${row.defaultDomainName}`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'Teams Portal',
selector: (row) => row['defaultDomainName'],
center: true,
cell: (row) => (
<a
href={`https://admin.teams.microsoft.com/?delegatedOrg=${row.defaultDomainName}`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'Azure Portal',
selector: (row) => row['defaultDomainName'],
center: true,
cell: (row) => (
<a
href={`https://portal.azure.com/${row.defaultDomainName}`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'MEM (Intune) Portal',
selector: (row) => row['defaultDomainName'],
center: true,
cell: (row) => (
<a
href={`https://endpoint.microsoft.com/${row.defaultDomainName}`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'Security Portal (GDAP)',
selector: (row) => row['defaultDomainName'],
center: true,
cell: (row) => (
<a
href={`https://security.microsoft.com/?tid=${row.customerId}`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'Sharepoint Admin',
selector: (row) => row['defaultDomainName'],
center: true,
cell: (row) => (
<a
href={`https://${row.defaultDomainName.split('.')[0]}-admin.sharepoint.com`}
target="_blank"
className="dlink"
rel="noreferrer"
>
<FontAwesomeIcon icon={faCog} className="me-2" />
</a>
),
},
{
name: 'Actions',
center: true,
cell: (row) => (
<Link
to={`/tenant/administration/tenants/Edit?tenantFilter=${row.defaultDomainName}&customerId=${row.customerId}`}
>
<CButton size="sm" variant="ghost" color="warning">
<FontAwesomeIcon icon={faEdit} />
</CButton>
</Link>
),
cell: Offcanvas,
},
]

Expand Down

0 comments on commit c6695dd

Please sign in to comment.