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>
   )
 }