Skip to content

Frontend tweaks #1858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 13, 2023
Merged

Frontend tweaks #1858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0cfadea
Add missing description
JohnDuprey Nov 9, 2023
429bcc7
Merge remote-tracking branch 'upstream/dev' into dev
JohnDuprey Nov 9, 2023
b7d87d4
Update CIPPSettings.js
JohnDuprey Nov 9, 2023
ad814dd
Update MailboxRestoreWizard.js
JohnDuprey Nov 9, 2023
3f56c8d
Force ipv4 start-swa
JohnDuprey Nov 9, 2023
eb2c6ff
Settings improvements
JohnDuprey Nov 11, 2023
668f06e
Tweak table filters
JohnDuprey Nov 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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