Merge branch 'KelvinTegelaar:main' into main

package.json

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

public/version_latest.txt

@@ -1 +1 @@
-5.5.0
+5.6.1

src/App.jsx

@@ -1,16 +1,15 @@
 import React, { Suspense } from 'react'
-import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
+import { BrowserRouter, Route, Routes, Navigate, useLocation } from 'react-router-dom'
 import { PrivateRoute, FullScreenLoading, ErrorBoundary } from 'src/components/utilities'
 import 'src/scss/style.scss'
-import { Helmet } from 'react-helmet-async'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import Skeleton from 'react-loading-skeleton'
 import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en.json'
 TimeAgo.addDefaultLocale(en)
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import routes from 'src/routes'
-import { useAuthCheck } from './components/utilities/CippauthCheck'
 import importsMap from './importsMap'
 
 library.add(fas)
@@ -32,59 +31,58 @@ const Logout = React.lazy(() => import('./views/pages/login/Logout'))
 const App = () => {
   return (
     <BrowserRouter>
-      <Suspense fallback={<FullScreenLoading />}>
-        <Helmet>
-          <title>CIPP</title>
-        </Helmet>
-        <Routes>
-          <Route exact path="/LogoutRedirect" name="LogoutRedirect" element={<PageLogOut />} />
-          <Route exact path="/401" name="Page 401" element={<Page401 />} />
-          <Route exact path="/403" name="Page 403" element={<Page403 />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route exact path="/login" name="Login" element={<Login />} />
-          <Route exact path="/logout" name="Logout" element={<Logout />} />
-          <Route
-            path="/"
-            element={
-              <PrivateRoute>
-                <DefaultLayout />
-              </PrivateRoute>
-            }
-          >
-            {routes.map((route, idx) => {
-              const allowedRoles = route.allowedRoles
-              const Routecomponent = dynamicImport(route.path)
-              console.log('route', route)
-              console.log('Routecomponent', Routecomponent)
-              return (
-                route.component && (
-                  <Route
-                    key={`route-${idx}`}
-                    path={route.path}
-                    exact={route.exact}
-                    name={route.name}
-                    element={
-                      <PrivateRoute allowedRoles={allowedRoles}>
-                        <Suspense fallback={<Skeleton />}>
-                          <Helmet>
-                            <title>CIPP - {route.name}</title>
-                          </Helmet>
-                          <ErrorBoundary key={route.name}>
-                            <Routecomponent />
-                          </ErrorBoundary>
-                        </Suspense>
-                      </PrivateRoute>
-                    }
-                  />
+      <HelmetProvider>
+        <Suspense fallback={<FullScreenLoading />}>
+          <Helmet>
+            <title>CIPP</title>
+          </Helmet>
+          <Routes>
+            <Route exact path="/LogoutRedirect" name="LogoutRedirect" element={<PageLogOut />} />
+            <Route exact path="/401" name="Page 401" element={<Page401 />} />
+            <Route exact path="/403" name="Page 403" element={<Page403 />} />
+            <Route exact path="/404" name="Page 404" element={<Page404 />} />
+            <Route exact path="/500" name="Page 500" element={<Page500 />} />
+            <Route exact path="/login" name="Login" element={<Login />} />
+            <Route exact path="/logout" name="Logout" element={<Logout />} />
+            <Route
+              path="/"
+              element={
+                <PrivateRoute>
+                  <DefaultLayout />
+                </PrivateRoute>
+              }
+            >
+              {routes.map((route, idx) => {
+                const allowedRoles = route.allowedRoles
+                const Routecomponent = dynamicImport(route.path)
+                //console.log('route', route)
+                //console.log('Routecomponent', Routecomponent)
+                return (
+                  route.component && (
+                    <Route
+                      key={`route-${idx}`}
+                      path={route.path}
+                      exact={route.exact}
+                      name={route.name}
+                      element={
+                        <PrivateRoute allowedRoles={allowedRoles}>
+                          <Suspense fallback={<Skeleton />}>
+                            <ErrorBoundary key={route.name}>
+                              <Routecomponent />
+                            </ErrorBoundary>
+                          </Suspense>
+                        </PrivateRoute>
+                      }
+                    />
+                  )
                 )
-              )
-            })}
-            <Route path="/" element={<Navigate to="/home" replace={true} />} />
-          </Route>
-          <Route path="*" name="Page 404" element={<Page404 />} />
-        </Routes>
-      </Suspense>
+              })}
+              <Route path="/" element={<Navigate to="/home" replace={true} />} />
+            </Route>
+            <Route path="*" name="Page 404" element={<Page404 />} />
+          </Routes>
+        </Suspense>
+      </HelmetProvider>
     </BrowserRouter>
   )
 }

src/_nav.jsx

@@ -142,6 +142,11 @@ const _nav = [
         name: 'Enterprise Applications',
         to: '/tenant/administration/enterprise-apps',
       },
+      {
+        component: CNavItem,
+        name: 'Secure Score',
+        to: '/tenant/administration/securescore',
+      },
       {
         component: CNavItem,
         name: 'App Consent Requests',
@@ -157,6 +162,11 @@ const _nav = [
         name: 'Tenant Offboarding',
         to: '/tenant/administration/tenant-offboarding-wizard',
       },
+      {
+        component: CNavItem,
+        name: 'Partner Relationships',
+        to: '/tenant/administration/partner-relationships',
+      },
     ],
   },
   {
@@ -603,6 +613,11 @@ const _nav = [
         name: 'Quarantine',
         to: '/email/administration/quarantine',
       },
+      {
+        component: CNavItem,
+        name: 'Tenant Allow/Block Lists',
+        to: '/email/administration/tenant-allow-block-lists',
+      },
     ],
   },
   {

src/components/contentcards/CippButtonCard.jsx

@@ -0,0 +1,27 @@
+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'
+
+export default function CippButtonCard({
+  title,
+  titleType = 'normal',
+  CardButton,
+  children,
+  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 />}
+        {children}
+      </CCardBody>
+      <CCardFooter>{CardButton}</CCardFooter>
+    </CCard>
+  )
+}

src/components/contentcards/DatatableContentCard.jsx

@@ -27,6 +27,7 @@ export default function DatatableContentCard({
           path={path}
           columns={columns}
           params={params}
+          sortable
           {...rest}
         />
       )}

src/components/forms/RFFComponents.jsx

@@ -157,10 +157,11 @@ export const RFFCFormInput = ({
   spellCheck = true,
   autoFocus = false,
   hiddenValue,
+  defaultValue,
   onChange,
 }) => {
   return (
-    <Field initialValue={hiddenValue} name={name} validate={validate}>
+    <Field defaultValue={defaultValue} initialValue={hiddenValue} name={name} validate={validate}>
       {({ input, meta }) => {
         const handleChange = onChange
           ? (e) => {
@@ -193,7 +194,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,
 }
 
@@ -444,6 +445,12 @@ export const RFFSelectSearch = ({
   return (
     <Field name={name} validate={validate}>
       {({ meta, input }) => {
+        const handleChange = onChange
+          ? (e) => {
+              input.onChange(e)
+              onChange(e)
+            }
+          : input.onChange
         return (
           <div>
             <CFormLabel htmlFor={name}>
@@ -473,7 +480,7 @@ export const RFFSelectSearch = ({
                 options={selectSearchvalues}
                 placeholder={placeholder}
                 isMulti={multi}
-                onChange={onChange}
+                onChange={handleChange}
                 onInputChange={debounceOnInputChange}
                 inputValue={inputText}
                 isLoading={isLoading}
@@ -510,7 +517,7 @@ export const RFFSelectSearch = ({
                 options={selectSearchvalues}
                 placeholder={placeholder}
                 isMulti={multi}
-                onChange={onChange}
+                onChange={handleChange}
                 onInputChange={debounceOnInputChange}
                 inputValue={inputText}
                 isLoading={isLoading}

src/components/layout/AppHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   CAlert,
@@ -72,8 +72,29 @@ const AppHeader = () => {
     loadCippQueue()
   }
 
+  function useInterval(callback, delay, state) {
+    const savedCallback = useRef()
+
+    // Remember the latest callback.
+    useEffect(() => {
+      savedCallback.current = callback
+    })
+
+    // Set up the interval.
+    useEffect(() => {
+      function tick() {
+        savedCallback.current()
+      }
+
+      if (delay !== null) {
+        let id = setInterval(tick, delay)
+        return () => clearInterval(id)
+      }
+    }, [delay, state])
+  }
+
   useEffect(() => {
-    if (cippQueueList.isFetching || cippQueueList.isLoading) {
+    if (cippQueueList.isUninitialized && (cippQueueList.isFetching || cippQueueList.isLoading)) {
       setCippQueueExtendedInfo([
         {
           label: 'Fetching recent jobs',
@@ -82,26 +103,41 @@ const AppHeader = () => {
           link: '#',
         },
       ])
-    }
-    if (
-      cippQueueList.isSuccess &&
-      Array.isArray(cippQueueList.data) &&
-      cippQueueList.data.length > 0
-    ) {
-      setCippQueueExtendedInfo(
-        cippQueueList.data?.map((job) => ({
-          label: `${job.Name}`,
-          value: job.Status,
-          link: job.Link,
-          timestamp: job.Timestamp,
-        })),
-      )
     } else {
-      setCippQueueExtendedInfo([
-        { label: 'No jobs to display', value: '', timpestamp: Date(), link: '#' },
-      ])
+      if (
+        cippQueueList.isSuccess &&
+        Array.isArray(cippQueueList.data) &&
+        cippQueueList.data.length > 0
+      ) {
+        setCippQueueExtendedInfo(
+          cippQueueList.data?.map((job) => ({
+            label: `${job.Name}`,
+            value: job.Status,
+            link: job.Link,
+            timestamp: job.Timestamp,
+            percent: job.PercentComplete,
+            progressText: `${job.PercentComplete}%`,
+            detailsObject: job.Tasks,
+          })),
+        )
+      } else {
+        setCippQueueExtendedInfo([
+          { label: 'No jobs to display', value: '', timestamp: Date(), link: '#' },
+        ])
+      }
     }
-  }, [cippQueueList])
+  }, [cippQueueList, setCippQueueExtendedInfo])
+
+  useInterval(
+    async () => {
+      if (cippQueueVisible) {
+        setCippQueueRefresh((Math.random() + 1).toString(36).substring(7))
+        getCippQueueList({ path: 'api/ListCippQueue', params: { refresh: cippQueueRefresh } })
+      }
+    },
+    5000,
+    cippQueueVisible,
+  )
 
   const SwitchTheme = () => {
     let targetTheme = preferredTheme
@@ -197,6 +233,7 @@ const AppHeader = () => {
         extendedInfo={[]}
         cards={cippQueueExtendedInfo}
         refreshFunction={refreshCippQueue}
+        isRefreshing={cippQueueList.isFetching || cippQueueList.isLoading}
         actions={[
           {
             label: 'Clear History',