Offcanvas tweaks - Profile and Domain

src/components/CippProfile.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+ CRow,
+ CCol,
+ CCard,
+ CCardImage,
+ CCardTitle,
+ CCardBody,
+ CListGroup,
+ CListGroupItem,
+ CSpinner,
+} from '@coreui/react'
+import avatar0 from './../assets/images/avatars/0.jpg'
+import { useLoadClientPrincipalQuery } from '../store/api/auth'
+import ThemeSwitcher from 'src/components/cipp/ThemeSwitcher'
+
+const CippProfile = () => {
+ const { data: profile, isFetching, isLoading } = useLoadClientPrincipalQuery()
+
+ return (
+ <>
+ <CRow xs={{ gutter: 3 }}>
+ <CCol>
+ <CCard>
+ {(isFetching || isLoading) && <CSpinner />}
+ {!isLoading && (
+ <>
+ <CCardImage orientation="top" src={avatar0} />
+ <CCardBody>
+ <CCardTitle>{profile.clientPrincipal.userDetails}</CCardTitle>
+ </CCardBody>
+ <CListGroup flush>
+ <CListGroupItem>
+ Identity Provider: {profile.clientPrincipal.identityProvider}
+ </CListGroupItem>
+ <CListGroupItem>User ID: {profile.clientPrincipal.userId}</CListGroupItem>
+ <CListGroupItem>
+ Roles ({profile.clientPrincipal.userRoles.length})
+ <ul>
+ {profile.clientPrincipal.userRoles.map((r, index) => (
+ <li key={index}>{r}</li>
+ ))}
+ </ul>
+ </CListGroupItem>
+ </CListGroup>
+ </>
+ )}
+ </CCard>
+ </CCol>
+ <CCol>
+ <ThemeSwitcher />
+ </CCol>
+ </CRow>
+ </>
+ )
+}
+
+export default CippProfile

src/components/header/AppHeaderDropdown.js

@@ -1,31 +1,52 @@
-import React from 'react'
-import { CAvatar, CDropdown, CDropdownHeader, CDropdownMenu, CDropdownToggle } from '@coreui/react'
-import { faUser, faBook } from '@fortawesome/free-solid-svg-icons'
+import React, { useState } from 'react'
+import {
+ CAvatar,
+ CDropdown,
+ CDropdownHeader,
+ CDropdownMenu,
+ CDropdownToggle,
+ CLink,
+} from '@coreui/react'
+import { faUser, faBook, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Link } from 'react-router-dom'
 import { authApi } from '../../store/api/auth'
+import CippProfile from '../CippProfile'
+import CippOffcanvas from '../cipp/CippOffcanvas'
 
 const AppHeaderDropdown = () => {
+ const [profileVisible, setProfileVisible] = useState(false)
  const { data: profile } = authApi.endpoints.loadClientPrincipal.useQueryState()
+ const cippProfile = <CippProfile />
  return (
- <CDropdown variant="nav-item">
- <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
- <CAvatar color="primary" textColor="white" size="md">
- {profile.clientPrincipal.userDetails[0].toUpperCase()}
- </CAvatar>
- </CDropdownToggle>
- <CDropdownMenu className="pt-0" placement="bottom-end">
- <CDropdownHeader className="fw-semibold py-2">Settings</CDropdownHeader>
- <Link className="dropdown-item" to="/profile/view">
- <FontAwesomeIcon icon={faUser} className="me-2" />
- Profile
- </Link>
- <Link className="dropdown-item" to="/cipp/logs">
- <FontAwesomeIcon icon={faBook} className="me-2" />
- Logbook
- </Link>
- </CDropdownMenu>
- </CDropdown>
+ <>
+ <CDropdown variant="nav-item">
+ <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
+ <CAvatar color="primary" textColor="white" size="md">
+ {profile.clientPrincipal.userDetails[0].toUpperCase()}
+ </CAvatar>
+ </CDropdownToggle>
+ <CDropdownMenu className="pt-0" placement="bottom-end">
+ <CDropdownHeader className="fw-semibold py-2">Settings</CDropdownHeader>
+ <CLink className="dropdown-item" href="#" onClick={() => setProfileVisible(true)}>
+ <FontAwesomeIcon icon={faUser} className="me-2" />
+ Profile
+ </CLink>
+ <Link className="dropdown-item" to="/cipp/logs">
+ <FontAwesomeIcon icon={faBook} className="me-2" />
+ Logbook
+ </Link>
+ </CDropdownMenu>
+ </CDropdown>
+ <CippOffcanvas
+ id="cipp-profile"
+ visible={profileVisible}
+ hideFunction={() => setProfileVisible(false)}
+ title="Profile"
+ placement="end"
+ children={cippProfile}
+ />
+ </>
  )
 }
 

src/views/tenant/standards/DomainsAnalyser.js

@@ -1,9 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { CButton, CCard, CCardHeader, CCardTitle, CCardBody } from '@coreui/react'
-import { CellBadge, CippDatatable, cellProgressBarFormatter } from '../../../components/cipp'
-import { ModalService } from '../../../components'
+import {
+ CellBadge,
+ CippDatatable,
+ cellProgressBarFormatter,
+ CippOffcanvas,
+} from '../../../components/cipp'
+/*import { ModalService } from '../../../components'*/
 import cellGetProperty from '../../../components/cipp/cellGetProperty'
+import IndividualDomainCheck from './IndividualDomain'
 
 const MoreInfoCard = ({ row }) => {
  return (
@@ -48,12 +54,28 @@ MoreInfoCard.propTypes = {
  row: PropTypes.object.isRequired,
 }
 
+function checkDomain(tenantDomain) {
+ return (
+ <div key={tenantDomain}>
+ <IndividualDomainCheck initialDomain={tenantDomain} readOnly={true} isOffcanvas={true} />
+ </div>
+ )
+}
+checkDomain.propTypes = {
+ tenantDomain: PropTypes.string,
+}
+
 const DomainsAnalyser = () => {
+ const [individualDomainResults, setIndividualDomainResults] = useState()
+ const [domainCheckVisible, setDomainCheckVisible] = useState(false)
+
  const handleMoreInfo = ({ row }) => {
- ModalService.open({
+ /*ModalService.open({
  body: <MoreInfoCard row={row} />,
  title: `${row.Tenant} More Information`,
- })
+ })*/
+ setIndividualDomainResults(checkDomain(row.Domain))
+ setDomainCheckVisible(true)
  }
 
  const columns = [
@@ -226,6 +248,15 @@ const DomainsAnalyser = () => {
  />
  </CCardBody>
  </CCard>
+
+ <CippOffcanvas
+ id="individual-domain"
+ visible={domainCheckVisible}
+ hideFunction={() => setDomainCheckVisible(false)}
+ title="More Info"
+ placement="end"
+ children={individualDomainResults}
+ />
  </div>
  )
 }