[pull] dev from KelvinTegelaar:dev

src/components/forms/RFFComponents.jsx

@@ -193,7 +193,7 @@ export const RFFCFormInput = ({
 }
 RFFCFormInput.propTypes = {
   ...sharedPropTypes,
-  type: PropTypes.oneOf(['color', 'file', 'text', 'password']),
+  type: PropTypes.oneOf(['color', 'file', 'text', 'password', 'number']),
   placeholder: PropTypes.string,
 }
 

src/components/tables/CellTable.jsx

@@ -39,7 +39,6 @@ export default function cellTable(
 
   const handleTable = ({ columnProp }) => {
     const QueryColumns = []
-
     const columns = Object.keys(columnProp[0]).map((key) => {
       QueryColumns.push({
         name: key,

src/components/tables/CippTable.jsx

@@ -277,47 +277,45 @@ export default function CippTable({
       debounceSetGraphFilter(query)
       return data
     } else if (filterText.startsWith('Complex:')) {
-      // Split conditions by ';' and 'or', and trim spaces
-      const conditions = filterText
+      // Split conditions by ';' for AND
+      const conditionGroups = filterText
         .slice(9)
-        .split(/\s*or\s*|\s*;\s*/i) // Split by 'or' or ';', case insensitive, with optional spaces
-        .map((condition) => condition.trim())
+        .split(/\s*;\s*/)
+        .map((group) => group.trim().split(/\s+or\s+/i)) // Split each group by 'or' for OR
 
       return data.filter((item) => {
-        // Check if any condition is met for the item
-        return conditions.some((condition) => {
-          const match = condition.match(/(\w+)\s*(eq|ne|like|notlike|gt|lt)\s*(.+)/)
-
-          if (!match) return false
-
-          let [property, operator, value] = match.slice(1)
-          value = escapeRegExp(value) // Escape special characters
-
-          const actualKey = Object.keys(item).find(
-            (key) => key.toLowerCase() === property.toLowerCase(),
-          )
-
-          if (!actualKey) {
-            console.error(`FilterError: Property "${property}" not found.`)
-            return false
-          }
-
-          switch (operator) {
-            case 'eq':
-              return String(item[actualKey]).toLowerCase() === value.toLowerCase()
-            case 'ne':
-              return String(item[actualKey]).toLowerCase() !== value.toLowerCase()
-            case 'like':
-              return String(item[actualKey]).toLowerCase().includes(value.toLowerCase())
-            case 'notlike':
-              return !String(item[actualKey]).toLowerCase().includes(value.toLowerCase())
-            case 'gt':
-              return parseFloat(item[actualKey]) > parseFloat(value)
-            case 'lt':
-              return parseFloat(item[actualKey]) < parseFloat(value)
-            default:
-              return false // Should not reach here normally
-          }
+        // Check if all condition groups are met for the item (AND logic)
+        return conditionGroups.every((conditions) => {
+          // Check if any condition within a group is met for the item (OR logic)
+          return conditions.some((condition) => {
+            const match = condition.match(/(\w+)\s*(eq|ne|like|notlike|gt|lt)\s*(.+)/)
+            if (!match) return false
+            let [property, operator, value] = match.slice(1)
+            value = escapeRegExp(value) // Escape special characters
+            const actualKey = Object.keys(item).find(
+              (key) => key.toLowerCase() === property.toLowerCase(),
+            )
+            if (!actualKey) {
+              console.error(`FilterError: Property "${property}" not found.`)
+              return false
+            }
+            switch (operator) {
+              case 'eq':
+                return String(item[actualKey]).toLowerCase() === value.toLowerCase()
+              case 'ne':
+                return String(item[actualKey]).toLowerCase() !== value.toLowerCase()
+              case 'like':
+                return String(item[actualKey]).toLowerCase().includes(value.toLowerCase())
+              case 'notlike':
+                return !String(item[actualKey]).toLowerCase().includes(value.toLowerCase())
+              case 'gt':
+                return parseFloat(item[actualKey]) > parseFloat(value)
+              case 'lt':
+                return parseFloat(item[actualKey]) < parseFloat(value)
+              default:
+                return false // Should not reach here normally
+            }
+          })
         })
       })
     } else {

src/components/utilities/CippTenantOffcanvas.jsx

@@ -58,6 +58,10 @@ function CippTenantOffcanvas({ tenant, buildingIcon = false }) {
             label: 'Display Name',
             value: tenantProperty(tenantDetails, 'displayName'),
           },
+          {
+            label: 'Tenant ID',
+            value: tenantProperty(tenantDetails, 'id'),
+          },
           {
             label: 'Business Phones',
             value: tenantProperty(tenantDetails, 'businessPhones'),

src/components/utilities/TenantSelector.jsx

@@ -13,6 +13,7 @@ import CippTenantOffcanvas from './CippTenantOffcanvas'
 import CippfuzzySearch from './CippFuzzySearch'
 
 const TenantSelector = ({ action, showAllTenantSelector = true, NavSelector = false }) => {
+  const [refreshState, setRefreshState] = React.useState(false)
   const currentTenant = useSelector((state) => state.app.currentTenant)
   const {
     data: tenants = [
@@ -23,9 +24,10 @@ const TenantSelector = ({ action, showAllTenantSelector = true, NavSelector = fa
       },
     ],
     isLoading,
+    isFetching,
     isSuccess,
     error,
-  } = useListTenantsQuery({ showAllTenantSelector })
+  } = useListTenantsQuery({ showAllTenantSelector, Refresh: refreshState })
 
   const dispatch = useDispatch()
   const navigate = useNavigate()
@@ -90,10 +92,10 @@ const TenantSelector = ({ action, showAllTenantSelector = true, NavSelector = fa
               <FontAwesomeIcon icon={faBuilding} />
             </CButton>
           )}
-          <div className="flex-grow-1 my-auto mx-2">
+          <div className="flex-grow-1 my-auto d-flex align-items-center">
             <SelectSearch
               search
-              className={'select-search tenantDropdown'}
+              className="select-search tenantDropdown"
               onChange={activated}
               filterOptions={CippfuzzySearch}
               placeholder={placeholder}
@@ -104,6 +106,16 @@ const TenantSelector = ({ action, showAllTenantSelector = true, NavSelector = fa
                 name: `${displayName} (${defaultDomainName})`,
               }))}
             />
+            <CButton
+              onClick={() =>
+                //set a random number to force a refresh
+                setRefreshState(Math.random())
+              }
+              variant="ghost"
+              className="ml-2"
+            >
+              <FontAwesomeIcon icon={'refresh'} spin={isFetching} />
+            </CButton>
           </div>
         </>
       )}

src/components/utilities/Toasts.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
 import { useDispatch, useSelector } from 'react-redux'
 import { CToast, CToastBody, CToaster, CToastHeader, CCollapse, CButton } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExpandAlt, faCompressAlt, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { closeToast } from 'src/store/features/toasts'
+import ReactTimeAgo from 'react-time-ago'
 
 const Toasts = () => {
   const dispatch = useDispatch()
@@ -32,15 +33,18 @@ const Toast = ({ message, title, onClose, error }) => {
 
   return (
     <CToast
-      autohide={true}
-      delay={3000}
+      autohide={false}
+      delay={5000}
       visible={true}
       className="align-items-center"
       onClose={onClose}
     >
-      <CToastHeader className="d-flex justify-content-between">
-        <div>{title}</div>
-        <FontAwesomeIcon size="2x" icon={faTimes} onClick={onClose} />
+      <CToastHeader>
+        <div className="fw-bold me-auto">{title}</div>
+        <small className="me-3">Just Now</small>
+        <div className="me-3">
+          <FontAwesomeIcon size="2x" icon={faTimes} onClick={onClose} />
+        </div>
       </CToastHeader>
       <CToastBody>
         <div className="d-flex justify-content-between align-items-center text-danger">

src/components/utilities/index.js

@@ -18,6 +18,7 @@ import PageSizeSwitcher from 'src/components/utilities/PageSizeSwitcher'
 import Toasts from 'src/components/utilities/Toasts'
 import UsageLocation from 'src/components/utilities/UsageLocation'
 import CippTableOffcanvas from './CippTableOffcanvas'
+import validateAlphabeticalSort from './validateAlphabeticalSort'
 
 export {
   CippActionsOffcanvas,
@@ -43,4 +44,5 @@ export {
   PageSizeSwitcher,
   Toasts,
   UsageLocation,
+  validateAlphabeticalSort,
 }

src/components/utilities/validateAlphabeticalSort.jsx

@@ -0,0 +1,23 @@
+export default function validateAlphabeticalSort(data, sortKeys) {
+  if (!sortKeys || sortKeys.length === 0) return data
+  try {
+    if (!data) return data
+    const newList = data.filter((element) => {
+      return sortKeys.every((key) => {
+        return (element) => element[key] != null && element[key] != undefined
+      })
+    })
+    return newList.sort((a, b) => {
+      try {
+        return sortKeys.reduce((acc, key) => {
+          if (acc !== 0) return acc
+          return (a[key] ?? '').toString().localeCompare(b[key] ?? '')
+        }, 0)
+      } catch (error) {
+        return 0
+      }
+    })
+  } catch (error) {
+    return data
+  }
+}

src/store/middleware/errorMiddleware.js

@@ -39,7 +39,7 @@ export const errorMiddleware =
 
       dispatch(
         showToast({
-          title: 'An Error Has Occurred',
+          title: 'An error has occurred',
           message: message,
           toastError,
         }),

src/views/cipp/UserSettings.jsx

@@ -216,6 +216,8 @@ const UserSettings = () => {
                             multi={true}
                             values={_nav
                               .reduce((acc, val) => acc.concat(val.items), [])
+                              //only map if 'name' property is not null
+                              .filter((item) => item?.name)
                               .map((item) =>
                                 // console.log(item),
                                 ({

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { CNav, CNavItem, CTabContent, CTabPane } from '@coreui/react'
 import { CippPage } from 'src/components/layout'
 import { CippLazy } from 'src/components/utilities'
-
+import { useNavigate } from 'react-router-dom'
 import { SettingsGeneral } from './SettingsGeneral.jsx'
 import { SettingsTenants } from 'src/views/cipp/app-settings/SettingsTenants.jsx'
 import { SettingsBackend } from 'src/views/cipp/app-settings/SettingsBackend.jsx'
@@ -12,14 +12,28 @@ import { SettingsExtensions } from 'src/views/cipp/app-settings/SettingsExtensio
 import { SettingsMaintenance } from 'src/views/cipp/app-settings/SettingsMaintenance.jsx'
 import { SettingsExtensionMappings } from 'src/views/cipp/app-settings/SettingsExtensionMappings.jsx'
 import { SettingsPartner } from 'src/views/cipp/app-settings/SettingsPartner.jsx'
+import useQuery from 'src/hooks/useQuery.jsx'
+import { SettingsSuperAdmin } from './SettingsSuperAdmin.jsx'
+import { useLoadClientPrincipalQuery } from 'src/store/api/auth.js'
 
 /**
  * This function returns the settings page content for CIPP.
  *
  * @returns {JSX.Element} The settings page content.
  */
 export default function CIPPSettings() {
-  const [active, setActive] = useState(1)
+  const queryString = useQuery()
+  const navigate = useNavigate()
+
+  const tab = queryString.get('tab')
+  const [active, setActiveTab] = useState(tab ? parseInt(tab) : 1)
+  const { data: profile, isFetching } = useLoadClientPrincipalQuery()
+  const setActive = (tab) => {
+    setActiveTab(tab)
+    queryString.set('tab', tab.toString())
+    navigate(`${location.pathname}?${queryString}`)
+  }
+  const superAdmin = profile?.clientPrincipal?.userRoles?.includes('superadmin')
   return (
     <CippPage title="Settings" tenantSelector={false}>
       <CNav variant="tabs" role="tablist">
@@ -50,6 +64,11 @@ export default function CIPPSettings() {
         <CNavItem active={active === 9} onClick={() => setActive(9)} href="#">
           Extension Mappings
         </CNavItem>
+        {superAdmin && (
+          <CNavItem active={active === 10} onClick={() => setActive(10)} href="#">
+            SuperAdmin Settings
+          </CNavItem>
+        )}
       </CNav>
       <CTabContent>
         <CTabPane visible={active === 1} className="mt-3">
@@ -95,6 +114,11 @@ export default function CIPPSettings() {
             <SettingsExtensionMappings />
           </CippLazy>
         </CTabPane>
+        <CTabPane visible={active === 10} className="mt-3">
+          <CippLazy visible={active === 10}>
+            <SettingsSuperAdmin />
+          </CippLazy>
+        </CTabPane>
       </CTabContent>
     </CippPage>
   )