Merge branch 'KelvinTegelaar:main' into master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "5.6.2",
+  "version": "5.7.0",
   "description": "The CyberDrain Improved Partner Portal is a portal to help manage administration for Microsoft Partners.",
   "homepage": "https://cipp.app/",
   "bugs": {

public/GDAPRoles.json

@@ -671,6 +671,22 @@
     "Name": "Virtual Visits Administrator",
     "ObjectId": "e300d9e7-4a2b-4295-9eff-f1c78b36cc98"
   },
+  {
+    "ExtensionData": {},
+    "Description": "Manage and configure all aspects of Microsoft Viva Goals.",
+    "IsEnabled": true,
+    "IsSystem": true,
+    "Name": "Viva Goals Administrator",
+    "ObjectId": "92b086b3-e367-4ef2-b869-1de128fb986e"
+  },
+  {
+    "ExtensionData": {},
+    "Description": "Can manage all settings for Microsoft Viva Pulse app.",
+    "IsEnabled": true,
+    "IsSystem": true,
+    "Name": "Viva Pulse Administrator",
+    "ObjectId": "87761b17-1ed2-4af3-9acd-92a150038160"
+  },
   {
     "ExtensionData": {},
     "Description": "Can provision and manage all aspects of Cloud PCs.",

public/version_latest.txt

@@ -1 +1 @@
-5.6.2
+5.7.0

src/_nav.jsx

@@ -129,14 +129,9 @@ const _nav = [
       },
       {
         component: CNavItem,
-        name: 'Alerts (Classic)',
+        name: 'Alerts',
         to: '/tenant/administration/alertsqueue',
       },
-      {
-        component: CNavItem,
-        name: 'Alert Rules',
-        to: '/tenant/administration/AlertRules',
-      },
       {
         component: CNavItem,
         name: 'Enterprise Applications',
@@ -155,7 +150,7 @@ const _nav = [
       {
         component: CNavItem,
         name: 'Tenant Onboarding',
-        to: '/tenant/administration/tenant-onboarding-wizard',
+        to: '/tenant/administration/tenant-onboarding',
       },
       {
         component: CNavItem,
@@ -707,6 +702,25 @@ const _nav = [
       },
     ],
   },
+  {
+    component: CNavGroup,
+    name: ' Room Management',
+    section: 'Email & Exchange',
+    to: '/rooms/management',
+    icon: <FontAwesomeIcon icon={faToolbox} className="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: 'Rooms',
+        to: '/rooms/management/list-rooms',
+      },
+      {
+        component: CNavItem,
+        name: 'Room Lists',
+        to: '/rooms/management/room-lists',
+      },
+    ],
+  },
   {
     component: CNavGroup,
     name: 'Reports',

src/components/contentcards/CippAccordionItem.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {
+  CAccordionBody,
+  CAccordionHeader,
+  CAccordionItem,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCardTitle,
+} from '@coreui/react'
+import Skeleton from 'react-loading-skeleton'
+import PropTypes from 'prop-types'
+
+export default function CippAccordionItem({
+  title,
+  titleType = 'normal',
+  CardButton,
+  children,
+  isFetching,
+}) {
+  return (
+    <CAccordionItem>
+      <CAccordionHeader>{title}</CAccordionHeader>
+      <CAccordionBody>
+        <CCard>
+          <CCardHeader>
+            <CCardTitle>
+              {titleType === 'big' ? <h3 className="underline mb-3">{title}</h3> : title}
+            </CCardTitle>
+          </CCardHeader>
+          <CCardBody className="my-3">
+            {isFetching && <Skeleton />}
+            {children}
+          </CCardBody>
+          <CCardFooter>{CardButton}</CCardFooter>
+        </CCard>
+      </CAccordionBody>
+    </CAccordionItem>
+  )
+}
+
+CippAccordionItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  titleType: PropTypes.string,
+  CardButton: PropTypes.element.isRequired,
+  children: PropTypes.element.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+}

src/components/contentcards/CippChartCard.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { CCard, CCardBody, CCardFooter, CCardHeader, CCardTitle } from '@coreui/react'
-import Skeleton from 'react-loading-skeleton'
+import { CButton, CCard, CCardBody, CCardHeader, CCardTitle } from '@coreui/react'
 import { CChart } from '@coreui/react-chartjs'
 import { getStyle } from '@coreui/utils'
+import PropTypes from 'prop-types'
 
 export default function CippChartCard({
   title,
@@ -13,23 +13,38 @@ export default function CippChartCard({
   ChartType = 'pie',
   LegendLocation = 'bottom',
   isFetching,
+  refreshFunction,
 }) {
   return (
     <CCard className="h-100 mb-3">
       <CCardHeader>
         <CCardTitle>
           {titleType === 'big' ? <h3 className="underline mb-3">{title}</h3> : title}
+          {refreshFunction ? (
+            <CButton
+              className="position-absolute top-0 end-0 mt-2 me-2"
+              variant="ghost"
+              onClick={refreshFunction}
+              disabled={isFetching}
+            >
+              <FontAwesomeIcon icon="sync" spin={isFetching} />
+            </CButton>
+          ) : (
+            <CButton className="position-absolute top-0 end-0 mt-2 me-2" variant="ghost" disabled>
+              <FontAwesomeIcon icon="sync" spin={isFetching} />
+            </CButton>
+          )}
         </CCardTitle>
       </CCardHeader>
       <CCardBody>
-        {isFetching && <Skeleton />}
-        {!isFetching && (
+        {ChartData && (
           <CChart
             type={ChartType}
             data={{
               labels: ChartLabels,
               datasets: [
                 {
+                  label: title,
                   backgroundColor: [
                     getStyle('--cyberdrain-warning'),
                     getStyle('--cyberdrain-info'),
@@ -59,3 +74,13 @@ export default function CippChartCard({
     </CCard>
   )
 }
+CippChartCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  titleType: PropTypes.oneOf(['normal', 'big']),
+  ChartData: PropTypes.array.isRequired,
+  ChartLabels: PropTypes.array.isRequired,
+  ChartType: PropTypes.oneOf(['pie', 'bar', 'line']),
+  LegendLocation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  isFetching: PropTypes.bool,
+  refreshFunction: PropTypes.func,
+}

src/components/forms/RFFComponents.jsx

@@ -123,7 +123,9 @@ export const RFFCFormSwitch = ({
         >
           <div className={className}>
             <CFormSwitch
-              {...input}
+              onChange={input.onChange}
+              checked={input.checked}
+              value={input.value}
               // @todo revisit this, only shows green when checked
               valid={!meta.error && meta.touched && validate}
               invalid={meta.error && meta.touched && validate}
@@ -265,7 +267,9 @@ export const RFFCFormRadio = ({
       {({ meta, input }) => (
         <div className={className}>
           <CFormCheck
-            {...input}
+            onChange={input.onChange}
+            checked={input.checked}
+            value={input.value}
             valid={!meta.error && meta.touched}
             invalid={meta.error && meta.touched}
             disabled={disabled}
@@ -285,6 +289,49 @@ RFFCFormRadio.propTypes = {
   ...sharedPropTypes,
 }
 
+export const RFFCFormRadioList = ({
+  name,
+  options,
+  className = 'mb-3',
+  disabled = false,
+  onClick,
+  inline = false,
+}) => {
+  return (
+    <>
+      <div className={className}>
+        {options?.map((option, key) => {
+          return (
+            <Field name={name} type="radio" value={option.value} key={key}>
+              {({ input }) => {
+                return (
+                  <>
+                    <CFormCheck
+                      name={input.name}
+                      checked={input.checked}
+                      onChange={input.onChange}
+                      type="radio"
+                      {...option}
+                      disabled={disabled}
+                      onClick={onClick}
+                      inline={inline}
+                    />
+                  </>
+                )
+              }}
+            </Field>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+
+RFFCFormRadioList.propTypes = {
+  ...sharedPropTypes,
+  inline: PropTypes.bool,
+}
+
 export const RFFCFormTextarea = ({
   name,
   label,

src/components/forms/index.js

@@ -5,6 +5,7 @@ import {
   RFFCFormSwitch,
   RFFCFormInput,
   RFFCFormRadio,
+  RFFCFormRadioList,
   RFFCFormTextarea,
   RFFCFormSelect,
   RFFSelectSearch,
@@ -18,6 +19,7 @@ export {
   RFFCFormSwitch,
   RFFCFormInput,
   RFFCFormRadio,
+  RFFCFormRadioList,
   RFFCFormTextarea,
   RFFCFormSelect,
   RFFSelectSearch,

src/components/tables/CellBadge.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { CBadge } from '@coreui/react'
+import { CBadge, CCol, CRow } from '@coreui/react'
 
 export const CellBadge = ({ label = '', color = '', children, ...rest }) => {
   //Create a case select, and return the color based on the label
@@ -19,14 +19,28 @@ export const CellBadge = ({ label = '', color = '', children, ...rest }) => {
       break
     case 'running':
       color = 'primary'
+      break
   }
+  //if a label contains a comma, split it, and return multiple badges, if not, return one badge. force the badges to be on their own line
 
-  return (
-    <CBadge color={color} {...rest}>
-      {label}
-      {children}
-    </CBadge>
-  )
+  if (label.includes(',')) {
+    const labels = label.split(',')
+    return labels.map((label, idx) => (
+      <>
+        <CBadge key={idx} className="me-2" color={color} {...rest}>
+          {label}
+          {children}
+        </CBadge>
+      </>
+    ))
+  } else {
+    return (
+      <CBadge className="me-2" color={color} {...rest}>
+        {label}
+        {children}
+      </CBadge>
+    )
+  }
 }
 
 CellBadge.propTypes = {

src/components/tables/CippTable.jsx

@@ -38,6 +38,7 @@ import { debounce } from 'lodash-es'
 import { useSearchParams } from 'react-router-dom'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import { setDefaultColumns } from 'src/store/features/app'
+import { CippCallout } from '../layout'
 
 const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
   <>
@@ -124,6 +125,7 @@ export default function CippTable({
   filterlist,
   showFilter = true,
   endpointName,
+  defaultSortAsc = true,
   tableProps: {
     keyField = 'id',
     theme = 'cyberdrain',
@@ -614,7 +616,7 @@ export default function CippTable({
             className="m-1"
             size="sm"
           >
-            <FontAwesomeIcon icon={faSync} />
+            <FontAwesomeIcon icon={faSync} spin={isFetching} />
           </CButton>
         </CTooltip>,
       ])
@@ -888,7 +890,7 @@ export default function CippTable({
         {(updatedColumns || !dynamicColumns) && (
           <>
             {(massResults.length >= 1 || loopRunning) && (
-              <CCallout color="info">
+              <CippCallout color="info" dismissible>
                 {massResults[0]?.data?.Metadata?.Heading && (
                   <CAccordion flush>
                     {massResults.map((message, idx) => {
@@ -963,7 +965,7 @@ export default function CippTable({
                     <CSpinner size="sm" />
                   </li>
                 )}
-              </CCallout>
+              </CippCallout>
             )}
             <DataTable
               customStyles={customStyles}
@@ -988,7 +990,7 @@ export default function CippTable({
               expandableRowsComponent={expandableRowsComponent}
               highlightOnHover={highlightOnHover}
               expandOnRowClicked={expandOnRowClicked}
-              defaultSortAsc
+              defaultSortAsc={defaultSortAsc}
               defaultSortFieldId={1}
               sortFunction={customSort}
               paginationPerPage={tablePageSize}
@@ -1049,6 +1051,7 @@ export const CippTablePropTypes = {
   disableCSVExport: PropTypes.bool,
   error: PropTypes.object,
   filterlist: PropTypes.arrayOf(PropTypes.object),
+  defaultSortAsc: PropTypes.bool,
 }
 
 CippTable.propTypes = CippTablePropTypes