Merge pull request KelvinTegelaar#2401 from KelvinTegelaar/dev

Dev to hotfix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "description": "The CyberDrain Improved Partner Portal is a portal to help manage administration for Microsoft Partners.",
   "homepage": "https://cipp.app/",
   "bugs": {
@@ -64,6 +64,7 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^2.0.0",
     "react-bootstrap": "^1.6.5",
+    "react-circular-progressbar": "^2.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-data-table-component": "^7.4.5",
     "react-datepicker": "^4.10.0",

public/version_latest.txt

@@ -1 +1 @@
-5.6.1
+5.6.2

src/components/contentcards/CippButtonCard.jsx

@@ -1,7 +1,7 @@
 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 PropTypes from 'prop-types'
 
 export default function CippButtonCard({
   title,
@@ -25,3 +25,11 @@ export default function CippButtonCard({
     </CCard>
   )
 }
+
+CippButtonCard.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

@@ -0,0 +1,61 @@
+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 { CChart } from '@coreui/react-chartjs'
+import { getStyle } from '@coreui/utils'
+
+export default function CippChartCard({
+  title,
+  titleType = 'normal',
+  ChartData,
+  ChartLabels,
+  ChartType = 'pie',
+  LegendLocation = 'bottom',
+  isFetching,
+}) {
+  return (
+    <CCard className="h-100 mb-3">
+      <CCardHeader>
+        <CCardTitle>
+          {titleType === 'big' ? <h3 className="underline mb-3">{title}</h3> : title}
+        </CCardTitle>
+      </CCardHeader>
+      <CCardBody>
+        {isFetching && <Skeleton />}
+        {!isFetching && (
+          <CChart
+            type={ChartType}
+            data={{
+              labels: ChartLabels,
+              datasets: [
+                {
+                  backgroundColor: [
+                    getStyle('--cyberdrain-warning'),
+                    getStyle('--cyberdrain-info'),
+                    getStyle('--cyberdrain-success'),
+                    getStyle('--cyberdrain-danger'),
+                    getStyle('--cyberdrain-primary'),
+                    getStyle('--cyberdrain-secondary'),
+                  ],
+                  data: ChartData,
+                  borderWidth: 3,
+                },
+              ],
+            }}
+            options={{
+              plugins: {
+                legend: {
+                  position: LegendLocation,
+                  labels: {
+                    color: getStyle('--cui-body-color'),
+                  },
+                },
+              },
+            }}
+          />
+        )}
+      </CCardBody>
+    </CCard>
+  )
+}

src/components/contentcards/CippPrettyCard.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { CCard, CCardBody, CCardFooter, CCardHeader, CCardTitle, CCol, CRow } from '@coreui/react'
+import Skeleton from 'react-loading-skeleton'
+import { CircularProgressbar } from 'react-circular-progressbar'
+import 'react-circular-progressbar/dist/styles.css'
+
+export default function CippPrettyCard({
+  title,
+  titleType = 'normal',
+  percentage,
+  topLabel,
+  smallLabel,
+  ringcolor = '#f89226',
+  isFetching,
+}) {
+  return (
+    <CCard className="h-100 mb-3">
+      <CCardHeader>
+        <CCardTitle>
+          {titleType === 'big' ? <h3 className="underline mb-3">{title}</h3> : title}
+        </CCardTitle>
+      </CCardHeader>
+      <CCardBody>
+        {isFetching && <Skeleton />}
+        {!isFetching && (
+          <CRow>
+            <CCol>
+              <div style={{ width: '50%', height: '50%' }}>
+                <CircularProgressbar
+                  styles={{ path: { stroke: ringcolor }, text: { fill: ringcolor } }}
+                  strokeWidth={3}
+                  value={percentage}
+                  text={`${percentage}%`}
+                />
+              </div>
+            </CCol>
+            <CCol className="m-2">
+              <h4>{topLabel}</h4>
+              <small className="text-medium-emphasis">{smallLabel}</small>
+            </CCol>
+          </CRow>
+        )}
+      </CCardBody>
+    </CCard>
+  )
+}

src/components/tables/CellTable.jsx

@@ -20,20 +20,24 @@ export default function cellTable(
     columnProp = column
   }
 
-  if (!Array.isArray(columnProp) && typeof columnProp === 'object') {
-    columnProp = Object.keys(columnProp).map((key) => {
-      return {
-        Key: key,
-        Value: columnProp[key],
-      }
-    })
+  if (columnProp === undefined || columnProp === null) {
+    columnProp = []
   } else {
-    if (Array.isArray(columnProp) && typeof columnProp[0] !== 'object') {
-      columnProp = columnProp.map((row) => {
+    if (!Array.isArray(columnProp) && typeof columnProp === 'object') {
+      columnProp = Object.keys(columnProp).map((key) => {
         return {
-          Value: row,
+          Key: key,
+          Value: columnProp[key],
         }
       })
+    } else {
+      if (Array.isArray(columnProp) && typeof columnProp[0] !== 'object') {
+        columnProp = columnProp.map((row) => {
+          return {
+            Value: row,
+          }
+        })
+      }
     }
   }
 

src/components/utilities/CippCopyToClipboard.jsx

@@ -14,7 +14,7 @@ function CippCopyToClipboard({ text }) {
     <CopyToClipboard text={text} onCopy={() => onCodeCopied()}>
       <CButton
         color={codeCopied ? 'success' : 'info'}
-        className="cipp-code-copy-button"
+        className="cipp-code-copy-button ms-1"
         size="sm"
         variant="ghost"
       >

src/views/cipp/app-settings/SettingsNotifications.jsx

@@ -44,11 +44,20 @@ export function SettingsNotifications() {
             </CButton>
             <CButton
               className="me-2"
-              onClick={() => generateTestAlert({ text: 'Test Alert', Severity: 'Alert' })}
+              onClick={() =>
+                generateTestAlert({ text: 'Manually Generated Test Alert', Severity: 'Alert' })
+              }
               disabled={generateAlertResult.isFetching}
             >
-              {generateAlertResult.isFetching && <CSpinner size="sm" className="me-2" />}
-              {generateAlertResult.isSuccess && <FontAwesomeIcon icon={'check'} className="me-2" />}
+              {generateAlertResult.isFetching ? (
+                <CSpinner size="sm" className="me-2" />
+              ) : (
+                <>
+                  {generateAlertResult.isSuccess && (
+                    <FontAwesomeIcon icon={'check'} className="me-2" />
+                  )}
+                </>
+              )}
               Generate Test Alert
             </CButton>
           </>

src/views/email-exchange/tools/MailTest.jsx

@@ -40,22 +40,22 @@ const MailTest = () => {
     },
     {
       name: 'SPF',
-      selector: (row) => row?.AuthResult.filter((x) => x?.Name === 'spf')[0]?.Status == 'pass',
+      selector: (row) => row?.AuthResult?.find((x) => x?.Name === 'spf')?.Status == 'pass',
       cell: cellBooleanFormatter(),
     },
     {
       name: 'DKIM',
-      selector: (row) => row?.AuthResult.filter((x) => x?.Name === 'dkim')[0]?.Status == 'pass',
+      selector: (row) => row?.AuthResult?.find((x) => x?.Name === 'dkim')?.Status == 'pass',
       cell: cellBooleanFormatter(),
     },
     {
       name: 'DMARC',
-      selector: (row) => row?.AuthResult.filter((x) => x?.Name === 'dmarc')[0]?.Status == 'pass',
+      selector: (row) => row?.AuthResult?.find((x) => x?.Name === 'dmarc')?.Status == 'pass',
       cell: cellBooleanFormatter(),
     },
     {
       name: 'Comp Auth',
-      selector: (row) => row?.AuthResult.filter((x) => x?.Name === 'compauth')[0]?.Status == 'pass',
+      selector: (row) => row?.AuthResult?.find((x) => x?.Name === 'compauth')?.Status == 'pass',
       cell: cellBooleanFormatter(),
     },
     {

src/views/home/Home.jsx

@@ -37,7 +37,7 @@ import { CChart } from '@coreui/react-chartjs'
 import { getStyle } from '@coreui/utils'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Link } from 'react-router-dom'
-import { useMediaPredicate } from 'react-media-hook'
+import CippPrettyCard from 'src/components/contentcards/CippPrettyCard'
 
 const TenantDashboard = () => {
   const [visible, setVisible] = useState(false)
@@ -333,7 +333,7 @@ const TenantDashboard = () => {
                     options={{
                       plugins: {
                         legend: {
-                          position: 'bottom',
+                          position: 'left',
                           labels: {
                             color: getStyle('--cui-body-color'),
                           },
@@ -422,14 +422,20 @@ const TenantDashboard = () => {
                   <CChart
                     type="pie"
                     data={{
-                      labels: ['Used', 'Free'],
+                      labels: [
+                        `Used (${sharepoint.GeoUsedStorageMB}MB)`,
+                        `Free (${sharepoint.TenantStorageMB - sharepoint.GeoUsedStorageMB}MB)`,
+                      ],
                       datasets: [
                         {
                           backgroundColor: [
                             getStyle('--cyberdrain-warning'),
                             getStyle('--cyberdrain-info'),
                           ],
-                          data: [sharepoint.GeoUsedStorageMB, sharepoint.TenantStorageMB],
+                          data: [
+                            sharepoint.GeoUsedStorageMB,
+                            sharepoint.TenantStorageMB - sharepoint.GeoUsedStorageMB,
+                          ],
                           borderWidth: 3,
                         },
                       ],

src/views/identity/administration/Users.jsx

@@ -480,6 +480,7 @@ const Users = (row) => {
             'id,accountEnabled,businessPhones,city,createdDateTime,companyName,country,department,displayName,faxNumber,givenName,isResourceAccount,jobTitle,mail,mailNickname,mobilePhone,onPremisesDistinguishedName,officeLocation,onPremisesLastSyncDateTime,otherMails,postalCode,preferredDataLocation,preferredLanguage,proxyAddresses,showInAddressList,state,streetAddress,surname,usageLocation,userPrincipalName,userType,assignedLicenses,onPremisesSyncEnabled',
           $count: true,
           $orderby: 'displayName',
+          $top: 999,
         },
         tableProps: {
           keyField: 'id',