Merge branch 'KelvinTegelaar:main' into main

Author: jtorSEVENP

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "4.5.5",
+  "version": "5.2.1",
   "description": "The CyberDrain Improved Partner Portal is a portal to help manage administration for Microsoft Partners.",
   "homepage": "https://cipp.app/",
   "bugs": {
@@ -31,11 +31,11 @@
     "@coreui/react": "^4.11.0",
     "@coreui/react-chartjs": "^2.1.3",
     "@coreui/utils": "^1.3.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.5.2",
     "@popperjs/core": "^2.10.2",
     "@reduxjs/toolkit": "^1.9.7",

package.json

@@ -1 +1 @@
-5.2.1
+5.3.0

public/version_latest.txt

@@ -1,5 +1,6 @@
 import React from 'react'
-const CIPPSettings = React.lazy(() => import('src/views/cipp/CIPPSettings'))
+
+const CIPPSettings = React.lazy(() => import('src/views/cipp/app-settings/CIPPSettings'))
 const Setup = React.lazy(() => import('src/views/cipp/Setup'))
 const ApplyStandard = React.lazy(() => import('src/views/tenant/standards/ListStandards'))
 const GDAPStatus = React.lazy(() => import('src/views/tenant/administration/ListGDAPQueue'))
@@ -25,7 +26,11 @@ const adminRoutes = [
   { path: '/cipp/setup', name: 'Setup', component: Setup },
 
   { path: '/tenant/administration/gdap', name: 'GDAP Wizard', component: GDAP },
-  { path: '/tenant/administration/gdap-invite', name: 'GDAP Invite Wizard', component: GDAPInvite },
+  {
+    path: '/tenant/administration/gdap-invite',
+    name: 'GDAP Invite Wizard',
+    component: GDAPInvite,
+  },
   {
     path: '/tenant/administration/gdap-role-wizard',
     name: 'GDAP Role Wizard',
@@ -41,9 +46,21 @@ const adminRoutes = [
     name: 'GDAP Relationships',
     component: GDAPRelationships,
   },
-  { path: '/tenant/administration/appapproval', name: 'App Approval', component: appapproval },
-  { path: '/tenant/administration/gdap-status', name: 'GDAP Status', component: GDAPStatus },
-  { path: '/tenant/standards/list-standards', name: 'List Standard', component: ApplyStandard },
+  {
+    path: '/tenant/administration/appapproval',
+    name: 'App Approval',
+    component: appapproval,
+  },
+  {
+    path: '/tenant/administration/gdap-status',
+    name: 'GDAP Status',
+    component: GDAPStatus,
+  },
+  {
+    path: '/tenant/standards/list-standards',
+    name: 'List Standard',
+    component: ApplyStandard,
+  },
   {
     path: '/tenant/administration/tenant-offboarding-wizard',
     name: 'Tenant Offboarding',

src/adminRoutes.js

@@ -138,10 +138,11 @@ export const RFFCFormInput = ({
   disabled = false,
   spellCheck = true,
   autoFocus = false,
+  hiddenValue,
   onChange,
 }) => {
   return (
-    <Field name={name} validate={validate}>
+    <Field initialValue={hiddenValue} name={name} validate={validate}>
       {({ input, meta }) => {
         const handleChange = onChange
           ? (e) => {
@@ -429,7 +430,12 @@ export const RFFSelectSearch = ({
               {label}
               {refreshFunction && (
                 <CTooltip content="Refresh" placement="right">
-                  <CButton onClick={refreshFunction} variant="ghost" className="ms-1" size="sm">
+                  <CButton
+                    onClick={refreshFunction}
+                    variant="ghost"
+                    className="ms-1 py-0 border-0"
+                    size="sm"
+                  >
                     <FontAwesomeIcon icon="sync" />
                   </CButton>
                 </CTooltip>

src/components/forms/RFFComponents.jsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { toggleSwitcher } from 'src/store/features/switcher'
-import { CButton } from '@coreui/react'
+import { CButton, CTooltip } from '@coreui/react'
 import { useDispatch } from 'react-redux'
 
 const AppHeaderSearch = () => {
@@ -12,9 +12,11 @@ const AppHeaderSearch = () => {
   }, [dispatch])
   return (
     <>
-      <CButton variant="ghost" onClick={handleFastSwitcher}>
-        <FontAwesomeIcon icon={faSearch} size="lg" />
-      </CButton>
+      <CTooltip content="Search" placement="bottom">
+        <CButton variant="ghost" onClick={handleFastSwitcher}>
+          <FontAwesomeIcon icon={faSearch} size="lg" />
+        </CButton>
+      </CTooltip>
     </>
   )
 }

src/components/header/AppHeaderSearch.jsx

@@ -3,24 +3,25 @@ import { useSelector, useDispatch } from 'react-redux'
 import {
   CAlert,
   CAlertLink,
-  CContainer,
-  CCollapse,
   CHeader,
   CHeaderNav,
   CNavItem,
   CHeaderToggler,
-  CImage,
-  CSidebarBrand,
   CButton,
   CFormSwitch,
+  CTooltip,
 } from '@coreui/react'
 import { AppHeaderSearch } from 'src/components/header'
-import { TenantSelector } from '../utilities'
+import { CippActionsOffcanvas, TenantSelector } from '../utilities'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
 import { setCurrentTheme, setUserSettings, toggleSidebarShow } from 'src/store/features/app'
 import { useMediaPredicate } from 'react-media-hook'
-import { useGenericGetRequestQuery, useLoadAlertsDashQuery } from 'src/store/api/app'
+import {
+  useGenericGetRequestQuery,
+  useLazyGenericGetRequestQuery,
+  useLoadAlertsDashQuery,
+} from 'src/store/api/app'
 import { useLocation } from 'react-router-dom'
 
 const AppHeader = () => {
@@ -31,6 +32,11 @@ const AppHeader = () => {
   const sidebarShow = useSelector((state) => state.app.sidebarShow)
   const currentTheme = useSelector((state) => state.app.currentTheme)
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+  const [cippQueueExtendedInfo, setCippQueueExtendedInfo] = useState([])
+  const [cippQueueVisible, setCippQueueVisible] = useState(false)
+  const [cippQueueRefresh, setCippQueueRefresh] = useState(
+    (Math.random() + 1).toString(36).substring(7),
+  )
   const { data: dashboard } = useLoadAlertsDashQuery()
   const {
     data: userSettings,
@@ -54,6 +60,49 @@ const AppHeader = () => {
     userSettings,
   ])
 
+  const [getCippQueueList, cippQueueList] = useLazyGenericGetRequestQuery()
+
+  function loadCippQueue() {
+    setCippQueueVisible(true)
+    getCippQueueList({ path: 'api/ListCippQueue', params: { refresh: cippQueueRefresh } })
+  }
+
+  function refreshCippQueue() {
+    setCippQueueRefresh((Math.random() + 1).toString(36).substring(7))
+    loadCippQueue()
+  }
+
+  useEffect(() => {
+    if (cippQueueList.isFetching || cippQueueList.isLoading) {
+      setCippQueueExtendedInfo([
+        {
+          label: 'Fetching recent jobs',
+          value: 'Please wait',
+          timestamp: 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,
+        })),
+      )
+    } else {
+      setCippQueueExtendedInfo([
+        { label: 'No jobs to display', value: '', timpestamp: Date(), link: '#' },
+      ])
+    }
+  }, [cippQueueList])
+
   const SwitchTheme = () => {
     let targetTheme = preferredTheme
     if (isDark) {
@@ -89,14 +138,23 @@ const AppHeader = () => {
               target="_blank"
               href={`https://docs.cipp.app/user-documentation${location.pathname}`}
             >
-              <CButton variant="ghost">
-                <FontAwesomeIcon icon={'question'} size="lg" />
-              </CButton>
+              <CTooltip content="Documentation" placement="bottom">
+                <CButton variant="ghost">
+                  <FontAwesomeIcon icon={'question'} size="lg" />
+                </CButton>
+              </CTooltip>
             </a>
           </CNavItem>
           <CNavItem>
             <AppHeaderSearch />
           </CNavItem>
+          <CNavItem>
+            <CTooltip content="Recent Jobs" placement="bottom">
+              <CButton variant="ghost" onClick={() => loadCippQueue()} className="me-1">
+                <FontAwesomeIcon icon={'history'} size="lg" />
+              </CButton>
+            </CTooltip>
+          </CNavItem>
           <CNavItem>
             <div className="custom-switch-wrapper primary">
               <CFormSwitch
@@ -134,6 +192,26 @@ const AppHeader = () => {
             </div>
           ))}
       </div>
+      <CippActionsOffcanvas
+        title="Recent Jobs"
+        extendedInfo={[]}
+        cards={cippQueueExtendedInfo}
+        refreshFunction={refreshCippQueue}
+        actions={[
+          {
+            label: 'Clear History',
+            color: 'info',
+            modal: true,
+            modalUrl: `/api/RemoveCippQueue`,
+            modalMessage: 'Are you sure you want clear the history?',
+            icon: <FontAwesomeIcon icon="trash" className="me-2" />,
+          },
+        ]}
+        placement="end"
+        visible={cippQueueVisible}
+        id="cipp-queue"
+        hideFunction={() => setCippQueueVisible(false)}
+      />
     </>
   )
 }

src/components/layout/AppHeader.jsx

@@ -65,7 +65,7 @@ export const AppSidebarNav = ({ items }) => {
     )
   }
   const navGroup = (item, index) => {
-    const { component, name, icon, to, ...rest } = item
+    const { component, name, icon, to, items, ...rest } = item
     const Component = component
     const navGroupKey = `${item.name.toLowerCase().replace(' ', '-')}_${index}`
     const navGroupIdx = `${item.section.toLowerCase().replace(' ', '-')}_${item.name
@@ -79,9 +79,7 @@ export const AppSidebarNav = ({ items }) => {
         visible={location.pathname.startsWith(to)}
         {...rest}
       >
-        {item.items?.map((item, index) =>
-          item.items ? navGroup(item, index) : navItem(item, index),
-        )}
+        {items?.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
       </Component>
     )
   }

src/components/layout/AppSidebarNav.jsx

@@ -0,0 +1,28 @@
+.cipp-callout {
+  --cui-callout-padding-x: 1rem;
+  --cui-callout-padding-y: 1rem;
+  --cui-callout-border-width: var(--cui-border-width);
+  --cui-callout-border-color: var(--cui-border-color);
+  --cui-callout-border-left-width: calc(var(--cui-border-width) * 4);
+  --cui-callout-border-radius: var(--cui-border-radius);
+  border: var(--cui-callout-border-width) solid var(--cui-callout-border-color);
+  border-radius: var(--cui-callout-border-radius);
+  margin-bottom: 16px;
+  padding: var(--cui-callout-padding-y) var(--cui-callout-padding-x);
+}
+
+html:not([dir=rtl]) .cipp-callout {
+  border-left-color: var(--cui-callout-border-left-color);
+}
+
+html:not([dir=rtl]) .cipp-callout {
+  border-left-width: var(--cui-callout-border-left-width);
+}
+
+html:not([dir=rtl]) .cipp-callout-dismissible .btn {
+  right: 0;
+}
+
+.cipp-callout-dismissible .btn {
+  cursor: pointer;
+}

src/components/layout/CippCallout.css

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { CAlert, CCallout } from '@coreui/react'
+import PropTypes from 'prop-types'
+import './CippCallout.css'
+import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+export function CippCallout({
+  dismissible = false,
+  color = 'primary',
+  children = null,
+  className = '',
+  style = {},
+  ...rest
+}) {
+  const [open, setOpen] = useState(true)
+
+  if (!open) {
+    return null
+  }
+
+  return (
+    <div
+      className={classNames(className, 'cipp-callout', `callout-${color}`, {
+        'cipp-callout-dismissible': dismissible,
+      })}
+      color={color}
+      style={{
+        backgroundColor: 'rgb(var(--cui-body-color-rgb))',
+        color: 'var(--cui-body-color)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        ...style,
+      }}
+      {...rest}
+    >
+      <div>{children}</div>
+      {dismissible && (
+        <button
+          type="button"
+          className="btn"
+          aria-label="Close"
+          onClick={() => setOpen(false)}
+          style={{ padding: 0, margin: 0 }}
+        >
+          <FontAwesomeIcon icon={faXmark} size={'xl'} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+CippCallout.propTypes = {
+  dismissible: PropTypes.bool,
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'light',
+    'dark',
+  ]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+}