Skip to content

Commit

Permalink
Merge pull request KelvinTegelaar#1858 from johnduprey/dev
Browse files Browse the repository at this point in the history 
Frontend tweaks
  • Loading branch information
@KelvinTegelaar
KelvinTegelaar committed Nov 13, 2023
2 parents 0e62433 + 668f06e commit 173a7cf
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 73 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"start-swa": "swa start --swa-config-location .vscode http://127.0.0.1:3000 --api-location http://localhost:7071",
"start-swa": "swa start --swa-config-location .vscode http://127.0.0.1:3000 --api-location http://127.0.0.1:7071",
"prepare": "husky install"
},
"config": {
Expand Down
182 changes: 111 additions & 71 deletions src/views/cipp/CIPPSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,18 @@ import { TableModalButton } from 'src/components/buttons'
import { cellTableFormatter } from 'src/components/tables/CellTable'
import { cellGenericFormatter } from 'src/components/tables/CellGenericFormat'

function Lazy({ visible, children }) {
const rendered = useRef(visible)

if (visible && !rendered.current) {
rendered.current = true
}

if (!rendered.current) return null

return <div style={{ display: visible ? 'block' : 'none' }}>{children}</div>
}

const CIPPSettings = () => {
const [active, setActive] = useState(1)
return (
Expand Down Expand Up @@ -119,28 +131,43 @@ const CIPPSettings = () => {
</CNav>
<CTabContent>
<CTabPane visible={active === 1} className="mt-3">
<GeneralSettings />
<Lazy visible={active === 1}>
<GeneralSettings />
</Lazy>
</CTabPane>
<CTabPane visible={active === 2} className="mt-3">
<ExcludedTenantsSettings />
<Lazy visible={active === 2}>
<ExcludedTenantsSettings />
</Lazy>
</CTabPane>
<CTabPane visible={active === 3} className="mt-3">
<SecuritySettings />
<Lazy visible={active === 3}>
<SecuritySettings />
</Lazy>
</CTabPane>
<CTabPane visible={active === 4} className="mt-3">
<Lazy visible={active === 4}></Lazy>
<NotificationsSettings />
</CTabPane>
<CTabPane visible={active === 5} className="mt-3">
<LicenseSettings />
<Lazy visible={active === 5}>
<LicenseSettings />
</Lazy>
</CTabPane>
<CTabPane visible={active === 6} className="mt-3">
<Maintenance />
<Lazy visible={active === 6}>
<Maintenance />
</Lazy>
</CTabPane>
<CTabPane visible={active === 7} className="mt-3">
<ExtensionsTab />
<Lazy visible={active === 7}>
<ExtensionsTab />
</Lazy>
</CTabPane>
<CTabPane visible={active === 8} className="mt-3">
<MappingsTab />
<Lazy visible={active === 8}>
<MappingsTab />
</Lazy>
</CTabPane>
</CTabContent>
</CippPage>
Expand Down Expand Up @@ -346,17 +373,16 @@ const GeneralSettings = () => {
</CCol>
</CRow>
<CRow className="mb-3">
<CCol className="mb-3">
<CCol className="mb-3" xl={6} md={12}>
<CCard>
<CCardHeader>
<CCardTitle>Permissions Check</CCardTitle>
</CCardHeader>
<CCardHeader></CCardHeader>
<CCardBody>
<CRow>Click the button below to start a permissions check.</CRow>
<h3 className="underline mb-5">Permissions Check</h3>
<p>Click the button below to start a permissions check.</p>
<CButton
onClick={() => checkPermissions()}
disabled={permissionsResult.isFetching}
className="mt-3"
className="mb-3 me-2"
>
{permissionsResult.isFetching && (
<FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
Expand All @@ -365,6 +391,22 @@ const GeneralSettings = () => {
</CButton>
{permissionsResult.isSuccess && (
<>
{permissionsResult.data.Results?.AccessTokenDetails?.Name !== '' && (
<>
<CButton className="mb-3" onClick={() => setTokenOffcanvasVisible(true)}>
Details
</CButton>
<CippListOffcanvas
title="Details"
placement="end"
visible={tokenOffcanvasVisible}
groups={getTokenOffcanvasProps({
tokenResults: permissionsResult.data.Results,
})}
hideFunction={() => setTokenOffcanvasVisible(false)}
/>
</>
)}
<CCallout
color={permissionsResult.data.Results?.Success === true ? 'success' : 'danger'}
>
Expand Down Expand Up @@ -394,44 +436,45 @@ const GeneralSettings = () => {
</>
)}
</CCallout>
{permissionsResult.data.Results?.AccessTokenDetails?.Name !== '' && (
<>
<CButton className="me-3" onClick={() => setTokenOffcanvasVisible(true)}>
Details
</CButton>
<CippListOffcanvas
title="Details"
placement="end"
visible={tokenOffcanvasVisible}
groups={getTokenOffcanvasProps({
tokenResults: permissionsResult.data.Results,
})}
hideFunction={() => setTokenOffcanvasVisible(false)}
/>
</>
)}
</>
)}
</CCardBody>
</CCard>
</CCol>
<CCol md={6} className="mb-3">
<CCol xl={6} md={12} className="mb-3">
<CCard>
<CCardHeader>
<CCardTitle>GDAP Check</CCardTitle>
</CCardHeader>
<CCardHeader></CCardHeader>
<CCardBody>
<CRow>Click the button below to start a check for general GDAP settings.</CRow>
<h3 className="underline mb-5">GDAP Check</h3>
<p>Click the button below to start a check for general GDAP settings.</p>
<CButton
onClick={() => checkGDAP({ path: '/api/ExecAccessChecks?GDAP=true' })}
disabled={GDAPResult.isFetching}
className="mt-3"
className="mb-3 me-2"
>
{GDAPResult.isFetching && (
<FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
)}
Run GDAP Check
</CButton>
{GDAPResult.isSuccess && (
<>
<TableModalButton
className="mb-3 me-2"
data={GDAPResult.data.Results?.Memberships?.filter(
(p) => p['@odata.type'] == '#microsoft.graph.group',
)}
title="Groups"
/>
<TableModalButton
className="mb-3"
data={GDAPResult.data.Results?.Memberships?.filter(
(p) => p['@odata.type'] == '#microsoft.graph.directoryRole',
)}
title="Roles"
/>
</>
)}
<CRow>
<CCol>
{GDAPResult.isSuccess && GDAPResult.data.Results.GDAPIssues?.length > 0 && (
Expand All @@ -440,6 +483,12 @@ const GeneralSettings = () => {
reportName="none"
columns={checkGDAPColumns}
data={GDAPResult.data.Results.GDAPIssues}
filterlist={[
{ filterName: 'Errors', filter: 'Complex: Type eq Error' },
{ filterName: 'Warnings', filter: 'Complex: Type eq Warning' },
]}
defaultFilterText="Complex: Type eq Error"
isModal={true}
/>
)}
{GDAPResult.isSuccess && GDAPResult.data.Results.GDAPIssues?.length === 0 && (
Expand All @@ -448,23 +497,6 @@ const GeneralSettings = () => {
Tenant Access Check if you are experiencing issues.
</CCallout>
)}
{GDAPResult.isSuccess && (
<>
<TableModalButton
className="me-3"
data={GDAPResult.data.Results?.Memberships?.filter(
(p) => p['@odata.type'] == '#microsoft.graph.group',
)}
title="Groups"
/>
<TableModalButton
data={GDAPResult.data.Results?.Memberships?.filter(
(p) => p['@odata.type'] == '#microsoft.graph.directoryRole',
)}
title="Roles"
/>
</>
)}
</CCol>
</CRow>
</CCardBody>
Expand All @@ -474,10 +506,9 @@ const GeneralSettings = () => {
<CRow className="mb-3">
<CCol>
<CCard>
<CCardHeader>
<CCardTitle>Tenant Access Check</CCardTitle>
</CCardHeader>
<CCardHeader></CCardHeader>
<CCardBody>
<h3 className="underline mb-5">Tenant Access Check</h3>
<CRow className="mb-3">
<CCol>
<div className="mb-3">
Expand Down Expand Up @@ -770,9 +801,19 @@ const ExcludedTenantsSettings = () => {
},
],
},
isModal: true,
filterlist: [
{ filterName: 'Excluded Tenants', filter: '"Excluded":true' },
{ filterName: 'Included Tenants', filter: '"Excluded":false' },
{ filterName: 'Excluded Tenants', filter: 'Complex: Excluded eq true' },
{ filterName: 'Included Tenants', filter: 'Complex: Excluded eq false' },
{
filterName: 'GDAP & DAP',
filter:
'Complex: delegatedPrivilegeStatus eq delegatedAndGranularDelegetedAdminPrivileges',
},
{
filterName: 'GDAP Only',
filter: 'Complex: delegatedPrivilegeStatus eq granularDelegatedAdminPrivileges',
},
],
keyField: 'id',
columns,
Expand Down Expand Up @@ -1368,15 +1409,13 @@ const DNSSettings = () => {
{getDnsConfigResult.isUninitialized && getDnsConfig()}
{getDnsConfigResult.isSuccess && (
<CCard className="h-100">
<CCardHeader>
<CCardTitle>Application Settings</CCardTitle>
</CCardHeader>
<CCardHeader></CCardHeader>
<CCardBody>
<CRow>
<CCol>
<CCol xl={4} md={12}>
<PasswordSettings />
</CCol>
<CCol>
<CCol xl={4} md={12}>
<h3 className="underline mb-5">DNS Resolver</h3>
<CButtonGroup role="group" aria-label="Resolver" className="my-3">
{resolvers.map((r, index) => (
Expand All @@ -1400,18 +1439,18 @@ const DNSSettings = () => {
</CCallout>
)}
</CCol>
<CCol>
<CCol xl={4} md={12}>
<h3 className="underline mb-5">Frontend Version</h3>
<StatusIcon
type="negatedboolean"
status={isSuccessVersion && versions.OutOfDateCIPP}
/>
<div>Latest: {isSuccessVersion ? versions.RemoteCIPPVersion : <Skeleton />}</div>
<div>Current: {isSuccessVersion ? versions.LocalCIPPVersion : <Skeleton />}</div>
<div className="mb-3">
Current: {isSuccessVersion ? versions.LocalCIPPVersion : <Skeleton />}
</div>
</CCol>
</CRow>
<CRow>
<CCol>
<CCol xl={4} md={12} className="mb-3">
<h3 className="underline mb-5">Clear Caches</h3>
<CButton
className="me-2 mb-2"
Expand All @@ -1437,8 +1476,7 @@ const DNSSettings = () => {
<div className="me-3">{clearCacheResult.data?.Results}</div>
)}
</CCol>

<CCol>
<CCol xl={4} md={12} className="mb-3">
<h3 className="underline mb-5">Settings Backup</h3>
<CButton
className="me-2 mb-2"
Expand Down Expand Up @@ -1485,14 +1523,16 @@ const DNSSettings = () => {
</>
)}
</CCol>
<CCol>
<CCol xl={4} md={12}>
<h3 className="underline mb-5">Backend API Version</h3>
<StatusIcon
type="negatedboolean"
status={isSuccessVersion && versions.OutOfDateCIPPAPI}
/>
<div>Latest: {isSuccessVersion ? versions.RemoteCIPPAPIVersion : <Skeleton />}</div>
<div>Current: {isSuccessVersion ? versions.LocalCIPPAPIVersion : <Skeleton />}</div>
<div className="mb-3">
Current: {isSuccessVersion ? versions.LocalCIPPAPIVersion : <Skeleton />}
</div>
</CCol>
</CRow>
</CCardBody>
Expand Down
2 changes: 1 addition & 1 deletion src/views/email-exchange/tools/MailboxRestoreWizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ const MailboxRestoreWizard = () => {
</div>
<hr className="my-4" />
</CippWizard.Page>
<CippWizard.Page title="Restore Request Options" description="">
<CippWizard.Page title="Restore Request Options" description="Select Mailbox Restore Options">
<center>
<h3 className="text-primary">Step 3</h3>
<h5>Enter Restore Request Options</h5>
Expand Down

0 comments on commit 173a7cf

Please sign in to comment.