More theme fixes/improvements.

package.json

@@ -24,7 +24,7 @@
     "start-api": "swa start --ssl --ssl-cert ./.vscode/cert.crt --ssl-key ./.vscode/key.key --swa-config-location . http://localhost:3000 --api-location http://localhost:7071"
   },
   "config": {
-    "coreui_library_short_version": "4.0"
+    "coreui_library_short_version": "4.1"
   },
   "dependencies": {
     "@coreui/chartjs": "^3.0.0",

src/components/cipp/CippGroupedOffcanvas.js → src/components/cipp/CippActionsOffcanvas.js

@@ -1,25 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  CListGroup,
-  CListGroupItem,
-  COffcanvasTitle,
-  CTable,
-  CTableBody,
-  CTableDataCell,
-  CTableRow,
-} from '@coreui/react'
+import { CListGroup, CListGroupItem, COffcanvasTitle } from '@coreui/react'
 import CippOffcanvas, { CippOffcanvasPropTypes } from './CippOffcanvas'
+import CippOffcanvasTable from './CippOffcanvasTable'
 
-export default function CippGroupedOffcanvas(props) {
-  const extendedInfoContent = props.extendedInfo.map((info, index) => (
-    <>
-      <CTableRow key={index}>
-        <CTableDataCell className="cipp-extendedinfo-label">{info.label}</CTableDataCell>
-        <CTableDataCell>{info.value}</CTableDataCell>
-      </CTableRow>
-    </>
-  ))
+export default function CippActionsOffcanvas(props) {
+  const extendedInfoContent = <CippOffcanvasTable rows={props.extendedInfo} guid={props.id} />
   const actionsContent = props.actions.map((action, index) => (
     <CListGroup layout="horizontal-md" key={index}>
       <CListGroupItem
@@ -42,16 +28,14 @@ export default function CippGroupedOffcanvas(props) {
       hideFunction={props.hideFunction}
     >
       <COffcanvasTitle>Extended Information</COffcanvasTitle>
-      <CTable small borderless responsive align="top" style={{ fontSize: 'smaller' }}>
-        <CTableBody>{extendedInfoContent}</CTableBody>
-      </CTable>
+      {extendedInfoContent}
       {<COffcanvasTitle>Actions</COffcanvasTitle>}
       {actionsContent}
     </CippOffcanvas>
   )
 }
 
-const CippGroupedOffcanvasPropTypes = {
+const CippActionsOffcanvasPropTypes = {
   extendedInfo: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string,
@@ -66,7 +50,8 @@ const CippGroupedOffcanvasPropTypes = {
       color: PropTypes.string,
     }),
   ).isRequired,
+  rowIndex: PropTypes.number,
   ...CippOffcanvasPropTypes,
 }
 
-CippGroupedOffcanvas.propTypes = CippGroupedOffcanvasPropTypes
+CippActionsOffcanvas.propTypes = CippActionsOffcanvasPropTypes

src/components/cipp/CippOffcanvasListGroup.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { useListDatatableQuery } from 'src/store/api/datatable'
+import PropTypes from 'prop-types'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export default function CippDatatable({ path, params, ...rest }) {}
+
+CippDatatable.propTypes = {
+  path: PropTypes.string.isRequired,
+  params: PropTypes.object,
+  ...CippTablePropTypes,
+}

src/components/cipp/CippOffcanvasTable.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CTable, CTableBody, CTableRow, CTableDataCell } from '@coreui/react'
+
+export default function CippOffcanvasTable({ rows }) {
+  const tableRows = rows.map((row, index, guid) => (
+    <CTableRow className="cipp-offcanvastable-row" key={`${guid}-${index}`}>
+      <CTableDataCell className="cipp-offcanvastable-label">{row.label}</CTableDataCell>
+      <CTableDataCell className="cipp-offcanvastable-value">{row.value}</CTableDataCell>
+    </CTableRow>
+  ))
+  return (
+    <CTable small borderless responsive align="top" className="cipp-offcanvastable">
+      <CTableBody>{tableRows}</CTableBody>
+    </CTable>
+  )
+}
+
+CippOffcanvasTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.any,
+    }),
+  ).isRequired,
+  guid: PropTypes.string,
+}

src/components/cipp/CippTable.js

@@ -139,7 +139,6 @@ export default function CippTable({
 
   return (
     <div className="ms-n3 me-n3 cipp-tablewrapper">
-      {isFetching && <CSpinner />}
       {!isFetching && error && <span>Error loading data</span>}
       {!isFetching && !error && (
         <div>
@@ -166,6 +165,8 @@ export default function CippTable({
             defaultSortAsc
             defaultSortFieldId={1}
             paginationPerPage={25}
+            loading={isFetching}
+            progressComponent={<CSpinner size="sm" color="info" component="div" />}
             paginationRowsPerPageOptions={[25, 50, 100, 200, 500]}
             {...rest}
           />

src/components/cipp/index.js

@@ -12,7 +12,8 @@ import TenantSelectorMultiple from './TenantSelectorMultiple'
 import ThemeSwitcher from './ThemeSwitcher'
 import TitleButton from './TitleButton'
 import CippOffcanvas from './CippOffcanvas'
-import CippGroupedOffcanvas from './CippGroupedOffcanvas'
+import CippActionsOffcanvas from './CippActionsOffcanvas'
+import CippOffcanvasTable from './CippOffcanvasTable'
 
 export {
   CellBadge,
@@ -28,7 +29,8 @@ export {
   CippDatatable,
   CippTable,
   CippOffcanvas,
-  CippGroupedOffcanvas,
+  CippActionsOffcanvas,
+  CippOffcanvasTable,
   PdfButton,
   StatusIcon,
   TenantSelector,

src/scss/_custom.scss

@@ -145,6 +145,11 @@
   }
 }
 
+.cipp-offcanvastable {
+  font-size: smaller;
+}
+
+
 .dropdown-item {
   a {
     color: var(--cui-dropdown-link-color);
@@ -192,6 +197,30 @@
 
 /* CIPP Text */
 
+.bg-primary {
+  background-color: var(--cui-primary) !important;
+}
+
+.bg-secondary {
+  background-color: var(--cui-secondary) !important;
+}
+
+.bg-success {
+  background-color: var(--cui-success) !important;
+}
+
+.bg-info {
+  background-color: var(--cui-info) !important;
+}
+
+.bg-warning {
+  background-color: var(--cui-warning) !important;
+}
+
+.bg-danger {
+  background-color: var(--cui-danger) !important;
+}
+
 .text-primary {
   color: var(--cui-primary) !important;
 }

src/scss/_themes.scss

@@ -77,6 +77,7 @@
   --cui-card-cap-color: var(--cyberdrain-light);
   --cui-card-cap-bg: var(--cyberdrain-accent-blue);
   --cui-border-radius: ;
+  --cui-badge-color: var(--cyberdrain-dark);
   // CIPP theme-independent variables.
   --cipp-border-radius: 0;
   --cipp-offcanvas-header-bg: var(--cyberdrain-accent-green);
@@ -239,6 +240,7 @@
   --cui-modal-header-bg: var(--cyberdrain-light);
   --cui-modal-header-border-color: var(--cyberdrain-accent-green);
   --cui-modal-header-color: var(--cyberdrain-dark);
+  --cui-progress-bg: var(--cyberdrain-lighter);
   --cui-nav-link-color: var(--cyberdrain-dark);
   --cui-nav-tabs-link-active-bg: var(--cyberdrain-lighter);
   --cui-nav-tabs-link-active-color: var(--cyberdrain-dark);
@@ -328,6 +330,7 @@
   --cui-modal-header-bg: var(--cyberdrain-dark);
   --cui-modal-header-border-color: var(--cyberdrain-accent-green);
   --cui-modal-header-color: var(--cyberdrain-light);
+  --cui-progress-bg: var(--cyberdrain-darker);
   --cui-nav-link-color: var(--cyberdrain-light);
   --cui-nav-tabs-link-active-bg: var(--cyberdrain-darker);
   --cui-nav-tabs-link-active-color: var(--cyberdrain-light);

src/views/endpoint/applications/ApplicationsList.js

@@ -3,15 +3,8 @@ import { useSelector } from 'react-redux'
 import { CButton } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { CippPageList } from 'src/components'
-import {
-  faCog,
-  faEllipsisV,
-  faGlobe,
-  faGlobeEurope,
-  faPager,
-  faUser,
-} from '@fortawesome/free-solid-svg-icons'
-import { CippOffcanvas } from 'src/components/cipp'
+import { faEllipsisV, faGlobeEurope, faPager, faUser } from '@fortawesome/free-solid-svg-icons'
+import { CippActionsOffcanvas } from 'src/components/cipp'
 
 const Offcanvas = (row, rowIndex, formatExtraData) => {
   const tenant = useSelector((state) => state.app.currentTenant)
@@ -27,7 +20,7 @@ const Offcanvas = (row, rowIndex, formatExtraData) => {
       <CButton size="sm" color="link" onClick={() => setOCVisible(true)}>
         <FontAwesomeIcon icon={faEllipsisV} />
       </CButton>
-      <CippOffcanvas
+      <CippActionsOffcanvas
         title="User information"
         extendedInfo={[
           { label: 'Install as', value: `${row.installExperience.runAsAccount}` },

src/views/identity/administration/Groups.js

@@ -57,7 +57,7 @@ const columns = [
     sortable: true,
   },
   {
-    name: 'Action',
+    name: 'Actions',
     cell: Offcanvas,
   },
 ]

src/views/identity/administration/UserGroups.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { CCard, CCardBody, CCardHeader, CCardTitle, CLink, CSpinner } from '@coreui/react'
-import { CellBoolean, CippDatatable } from '../../../components/cipp'
+import { CellBoolean, CippDatatable } from 'src/components/cipp'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUsers } from '@fortawesome/free-solid-svg-icons'
-import { useListUserGroupsQuery } from '../../../store/api/groups'
+import { useListUserGroupsQuery } from 'src/store/api/groups'
 
 const formatter = (cell) => CellBoolean({ cell })
 
 const columns = [
   {
     name: 'Display Name',
-    selector: 'DisplayName',
+    selector: (row) => row['DisplayName'],
     formatter: (cell, row) => {
       return (
         <CLink
@@ -24,30 +24,30 @@ const columns = [
   },
   {
     name: 'Mail Enabled',
-    selector: 'MailEnabled',
+    selector: (row) => row['MailEnabled'],
     formatter,
   },
   {
     name: 'Email Address',
-    selector: 'Mail',
+    selector: (row) => row['Mail'],
   },
   {
     name: 'Security Group',
-    selector: 'SecurityGroup',
+    selector: (row) => row['SecurityGroup'],
     formatter,
   },
   {
     name: 'Group Types',
-    selector: 'GroupTypes',
+    selector: (row) => row['GroupTypes'],
   },
   {
     name: 'On Premises Sync',
-    selector: 'OnPremisesSync',
+    selector: (row) => row['OnPremisesSync'],
     formatter,
   },
   {
     name: 'Assignable To Role',
-    selector: 'IsAssignableToRole',
+    selector: (row) => row['IsAssignableToRole'],
     formatter,
   },
 ]
@@ -69,13 +69,16 @@ export default function UserGroups({ userId, tenantDomain }) {
         {!isFetching && error && <>Error loading groups</>}
         {!isFetching && !error && (
           <CippDatatable
+            path="/api/ListUserGroups"
+            params={{ tenantFilter: tenantDomain, userId }}
             keyField="id"
             columns={columns}
             data={mapped}
             striped
             bordered={false}
             dense
-            wrapperClasses="table-responsive"
+            responsive={true}
+            disablePDFExport={true}
           />
         )}
       </CCardBody>