Merge pull request #835 from KelvinTegelaar/dev

Dev to release

.github/workflows/CodeQL_Analyser.yml

@@ -1,8 +1,6 @@
 ---
 name: 'CodeQL'
-on:  # yamllint disable-line rule:truthy
-  push:
-    branches: [master, main, dev, react]
+on: # yamllint disable-line rule:truthy
   pull_request:
     branches: [master, main, dev, react]
   schedule:

.github/workflows/Node_Project_Check.yml

@@ -1,10 +1,6 @@
 ---
 name: NodeJS Project Check
-on:  # yamllint disable-line rule:truthy
-  push:
-    branches:
-      - main
-      - dev
+on: # yamllint disable-line rule:truthy
   pull_request:
     branches:
       - main

.github/workflows/Run_Linters.yml

@@ -1,11 +1,6 @@
 ---
 name: Lint Code Base
-on:  # yamllint disable-line rule:truthy
-  push:
-    branches:
-      - master
-      - main
-      - dev
+on: # yamllint disable-line rule:truthy
   pull_request_target:
     branches:
       - master

.vscode/launch.json

@@ -14,6 +14,21 @@
       "type": "node-terminal",
       "preLaunchTask": "RunAllTasks",
       "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
+    },
+    {
+      "name": "Launch Edge",
+      "request": "launch",
+      "type": "pwa-msedge",
+      "url": "https://localhost:4280",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "Attach to Edge",
+      "port": 9222,
+      "request": "attach",
+      "type": "pwa-msedge",
+      "urlFilter": "https://localhost:4280/*",
+      "webRoot": "${workspaceFolder}"
     }
   ],
   "compounds": [

public/version_latest.txt

@@ -1 +1 @@
-2.2.0
+2.3.0

src/_nav.js

@@ -105,26 +105,40 @@ const _nav = [
       },
       {
         component: CNavItem,
-        name: 'List Licences',
+        name: 'Alerts Wizard',
+        to: '/tenant/administration/alertswizard',
+      },
+
+      {
+        component: CNavItem,
+        name: 'List Scheduled Alerts',
+        to: '/tenant/administration/alertsqueue',
+      },
+    ],
+  },
+  {
+    component: CNavGroup,
+    name: 'Reports',
+    section: 'Reports',
+    to: '/tenant/reports',
+    icon: <FontAwesomeIcon icon={faChartBar} className="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: 'Graph Explorer',
+        to: '/tenant/administration/graph-explorer',
+      },
+      {
+        component: CNavItem,
+        name: 'Licence Report',
         to: '/tenant/administration/list-licenses',
       },
+
       {
         component: CNavItem,
         name: 'Conditional Access Policies',
         to: '/tenant/administration/conditional-access-policies',
       },
-      // Temp removed due to not ready for release
-      //    {
-      //       component: CNavItem,
-      //     name: 'Alerts Wizard',
-      //     to: '/tenant/administration/alertswizard',
-      //    },
-      // Temp removed due to not ready for release
-      //    {
-      //       component: CNavItem,
-      //     name: 'List Scheduled Alerts',
-      //     to: '/tenant/administration/alertsqueue',
-      //    },
     ],
   },
   {

src/components/layout/CippContentCard.js

@@ -7,6 +7,7 @@ export default function CippContentCard({
   title,
   children,
   icon,
+  button,
   bodyClass = null,
   className = null,
 }) {
@@ -15,6 +16,7 @@ export default function CippContentCard({
       <CCardHeader className="d-flex justify-content-between align-items-center">
         <CCardTitle>{title}</CCardTitle>
         {icon ? <FontAwesomeIcon icon={icon} /> : null}
+        {button ? button : null}
       </CCardHeader>
       <CCardBody className={bodyClass}>{children}</CCardBody>
     </CCard>
@@ -25,6 +27,7 @@ CippContentCard.propTypes = {
   title: PropTypes.string.isRequired,
   children: PropTypes.arrayOf(PropTypes.element).isRequired,
   icon: PropTypes.object,
+  button: PropTypes.element,
   bodyClass: PropTypes.string,
   className: PropTypes.string,
 }

src/components/layout/CippMasonry.js

@@ -5,6 +5,11 @@ import { CContainer, CCol } from '@coreui/react'
 
 export function CippMasonryItem({ size, children, className = null }) {
   const columnSizes = {
+    card: {
+      xs: 12,
+      lg: 2,
+      xl: 3,
+    },
     single: {
       xs: 12,
       lg: 6,
@@ -20,6 +25,16 @@ export function CippMasonryItem({ size, children, className = null }) {
       lg: 12,
       xl: 12,
     },
+    full: {
+      xs: 12,
+      lg: 12,
+      xl: 12,
+    },
+    half: {
+      xs: 12,
+      lg: 6,
+      xl: 6,
+    },
   }
 
   return (
@@ -30,12 +45,35 @@ export function CippMasonryItem({ size, children, className = null }) {
 }
 
 CippMasonryItem.propTypes = {
-  size: PropTypes.oneOf(['single', 'double', 'triple']),
+  size: PropTypes.oneOf(['single', 'double', 'triple', 'full', 'half']),
   children: PropTypes.object,
   className: PropTypes.string,
 }
 
-export function CippMasonry({ children, className = null }) {
+export function CippMasonry({ columns = 3, children, className = null }) {
+  const numberOfColumns = {
+    1: {
+      xs: 12,
+      lg: 12,
+      xl: 12,
+    },
+    2: {
+      xs: 12,
+      lg: 6,
+      xl: 6,
+    },
+    3: {
+      xs: 12,
+      lg: 4,
+      xl: 4,
+    },
+    4: {
+      xs: 12,
+      lg: 3,
+      xl: 3,
+    },
+  }
+
   const CippMasonryOptions = {
     transitionDuration: 0,
     percentPosition: true,
@@ -50,14 +88,15 @@ export function CippMasonry({ children, className = null }) {
         options={CippMasonryOptions}
         enableResizableChildren={true}
       >
-        <CCol className="cipp-masonry-sizer" xl={4} lg={6} xs={12}></CCol>
+        <CCol className="cipp-masonry-sizer" {...numberOfColumns[columns]}></CCol>
         {children}
       </Masonry>
     </CContainer>
   )
 }
 
 CippMasonry.propTypes = {
+  columns: PropTypes.oneOf([1, 2, 3]),
   children: PropTypes.array,
   className: PropTypes.string,
 }

src/components/tables/CippTable.js

@@ -34,22 +34,15 @@ const customSort = (rows, selector, direction) => {
     // use the selector to resolve your field names by passing the sort comparitors
     let aField
     let bField
-    if (typeof selector(a) === 'string') {
-      aField = selector(a).toLowerCase()
-    } else {
-      aField = selector(a)
-    }
-    if (typeof selector(b) === 'string') {
-      bField = selector(b).toLowerCase()
-    } else {
-      bField = selector(b)
-    }
+
+    aField = selector(a)
+    bField = selector(b)
 
     let comparison = 0
 
-    if (aField > bField) {
+    if (aField?.toString().localeCompare(bField, 'en', { numeric: true }) > 0) {
       comparison = 1
-    } else if (aField < bField) {
+    } else if (aField?.toString().localeCompare(bField, 'en', { numeric: true }) < 0) {
       comparison = -1
     }
 

src/components/utilities/CippActionsOffcanvas.js

@@ -10,6 +10,9 @@ import { useNavigate } from 'react-router-dom'
 export default function CippActionsOffcanvas(props) {
   const [genericGetRequest, getResults] = useLazyGenericGetRequestQuery()
   const handleLink = useNavigate()
+  const handleExternalLink = (link) => {
+    window.open(link, '_blank')
+  }
   const handleModal = (modalMessage, modalUrl) => {
     ModalService.confirm({
       body: (
@@ -21,28 +24,37 @@ export default function CippActionsOffcanvas(props) {
       onConfirm: () => genericGetRequest({ path: modalUrl }),
     })
   }
-  const handleOnClick = (link, modal, modalMessage, modalUrl) => {
+  const handleOnClick = (link, modal, modalMessage, modalUrl, external) => {
     if (link) {
-      handleLink(link)
+      if (external) {
+        handleExternalLink(link)
+      } else {
+        handleLink(link)
+      }
     } else if (modal) {
       handleModal(modalMessage, modalUrl)
     }
   }
   const extendedInfoContent = <CippOffcanvasTable rows={props.extendedInfo} guid={props.id} />
   const actionsContent = props.actions.map((action, index) => (
-    <CListGroup layout="horizontal-md" key={index}>
-      <CListGroupItem
-        className="cipp-action"
-        component="button"
-        color={action.color}
-        onClick={() =>
-          handleOnClick(action.link, action.modal, action.modalMessage, action.modalUrl)
-        }
-      >
-        {action.icon}
-        {action.label}
-      </CListGroupItem>
-    </CListGroup>
+    <CListGroupItem
+      className="cipp-action"
+      component="button"
+      color={action.color}
+      onClick={() =>
+        handleOnClick(
+          action.link,
+          action.modal,
+          action.modalMessage,
+          action.modalUrl,
+          action.external,
+        )
+      }
+      key={index}
+    >
+      {action.icon}
+      {action.label}
+    </CListGroupItem>
   ))
   return (
     <CippOffcanvas
@@ -64,7 +76,7 @@ export default function CippActionsOffcanvas(props) {
       <COffcanvasTitle>Extended Information</COffcanvasTitle>
       {extendedInfoContent}
       {<COffcanvasTitle>Actions</COffcanvasTitle>}
-      {actionsContent}
+      <CListGroup layout="verical-md">{actionsContent}</CListGroup>
     </CippOffcanvas>
   )
 }
@@ -86,6 +98,7 @@ const CippActionsOffcanvasPropTypes = {
       modal: PropTypes.bool,
       modalUrl: PropTypes.string,
       modalMessage: PropTypes.string,
+      external: PropTypes.bool,
     }),
   ).isRequired,
   rowIndex: PropTypes.number,

src/routes.js

@@ -20,6 +20,7 @@ const MFAReport = React.lazy(() => import('src/views/identity/reports/MFAReport'
 const Tenants = React.lazy(() => import('src/views/tenant/administration/Tenants'))
 const AlertWizard = React.lazy(() => import('src/views/tenant/administration/AlertWizard'))
 const AlertsQueue = React.lazy(() => import('src/views/tenant/administration/ListAlertsQueue'))
+const GraphExplorer = React.lazy(() => import('src/views/tenant/administration/GraphExplorer'))
 
 const Domains = React.lazy(() => import('src/views/tenant/administration/Domains'))
 const EditTenant = React.lazy(() => import('src/views/tenant/administration/EditTenant'))
@@ -103,6 +104,9 @@ const EditContact = React.lazy(() => import('src/views/email-exchange/administra
 const EditMailboxPermissions = React.lazy(() =>
   import('src/views/email-exchange/administration/EditMailboxPermissions'),
 )
+const EditCalendarPermissions = React.lazy(() =>
+  import('src/views/email-exchange/administration/EditCalendarPermissions'),
+)
 const ViewMobileDevices = React.lazy(() =>
   import('src/views/email-exchange/administration/ViewMobileDevices'),
 )
@@ -166,6 +170,11 @@ const routes = [
   { path: '/tenant/administration/domains', name: 'Domains', component: Domains },
   { path: '/tenant/administration/alertswizard', name: 'Alerts Wizard', component: AlertWizard },
   { path: '/tenant/administration/alertsqueue', name: 'Alerts Queue', component: AlertsQueue },
+  {
+    path: '/tenant/administration/graph-explorer',
+    name: 'Graph Explorer',
+    component: GraphExplorer,
+  },
 
   {
     path: '/tenant/administration/conditional-access-policies',
@@ -285,6 +294,11 @@ const routes = [
     path: '/email/administration/edit-mailbox-permissions',
     component: EditMailboxPermissions,
   },
+  {
+    name: 'Edit Calendar Permissions',
+    path: '/email/administration/edit-calendar-permissions',
+    component: EditCalendarPermissions,
+  },
   {
     name: 'View Mobile Devices',
     path: '/email/administration/view-mobile-devices',

src/scss/_custom.scss

@@ -63,7 +63,9 @@
 
   .card-header {
     &:first-child {
-      border-radius: var(--cipp-border-radius);
+      background-clip: border-box;
+      border-radius: 3px 3px 0 0;
+      overflow: hidden;
     }
   }
 
@@ -387,3 +389,9 @@
     margin-left: 1rem;
   }
 }
+
+/* Sidebar */
+
+.sidebar-nav .nav-link {
+  margin: 0.25rem 0;
+}