[pull] dev from KelvinTegelaar:dev

src/_nav.jsx

@@ -75,6 +75,11 @@ const _nav = [
         name: 'Roles',
         to: '/identity/administration/roles',
       },
+      {
+        component: CNavItem,
+        name: 'JIT Admin',
+        to: '/identity/administration/users/jit-admin',
+      },
       {
         component: CNavItem,
         name: 'Offboarding Wizard',
@@ -771,6 +776,11 @@ const _nav = [
         name: 'Application Settings',
         to: '/cipp/settings',
       },
+      {
+        component: CNavItem,
+        name: 'Extensions Settings',
+        to: '/cipp/extensions',
+      },
       {
         component: CNavItem,
         name: 'User Settings',

src/components/forms/RFFComponents.jsx

@@ -587,7 +587,11 @@ export const RFFSelectSearch = ({
                 {...props}
               />
             )}
-            {meta.error && meta.touched && <span className="text-danger">{meta.error}</span>}
+            {meta.error && meta.touched && (
+              <span className="text-danger">
+                {typeof meta.error === 'object' ? Object.values(meta.error).join('') : meta.error}
+              </span>
+            )}
           </div>
         )
       }}

src/data/Extensions.json

@@ -16,7 +16,8 @@
         "name": "cippapi.Enabled",
         "label": "Enable Integration"
       }
-    ]
+    ],
+    "mappingRequired": false
   },
   {
     "name": "Gradient Integration",
@@ -49,7 +50,8 @@
         "name": "Gradient.Enabled",
         "label": "Enable Integration"
       }
-    ]
+    ],
+    "mappingRequired": false
   },
   {
     "name": "Halo PSA Ticketing Integration",
@@ -105,7 +107,8 @@
         "name": "HaloPSA.Enabled",
         "label": "Enable Integration"
       }
-    ]
+    ],
+    "mappingRequired": true
   },
   {
     "name": "NinjaOne Integration",
@@ -155,6 +158,7 @@
         "name": "NinjaOne.Enabled",
         "label": "Enable Integration"
       }
-    ]
+    ],
+    "mappingRequired": true
   }
 ]

src/importsMap.jsx

@@ -12,6 +12,7 @@ import React from 'react'
   "/identity/administration/users/edit": React.lazy(() => import('./views/identity/administration/EditUser')), 
   "/identity/administration/users/view": React.lazy(() => import('./views/identity/administration/ViewUser')), 
   "/identity/administration/users/InviteGuest": React.lazy(() => import('./views/identity/administration/InviteGuest')), 
+  "/identity/administration/users/jit-admin": React.lazy(() => import('./views/identity/administration/DeployJITAdmin')), 
   "/identity/administration/ViewBec": React.lazy(() => import('./views/identity/administration/ViewBEC')), 
   "/identity/administration/users": React.lazy(() => import('./views/identity/administration/Users')), 
   "/identity/administration/devices": React.lazy(() => import('./views/identity/administration/Devices')), 
@@ -129,6 +130,7 @@ import React from 'react'
   "/security/reports/list-device-compliance": React.lazy(() => import('./views/security/reports/ListDeviceComplianceReport')), 
   "/license": React.lazy(() => import('./views/pages/license/License')), 
   "/cipp/settings": React.lazy(() => import('./views/cipp/app-settings/CIPPSettings')), 
+  "/cipp/extensions": React.lazy(() => import('./views/cipp/Extensions')), 
   "/cipp/setup": React.lazy(() => import('./views/cipp/Setup')), 
   "/tenant/administration/securescore": React.lazy(() => import('./views/tenant/administration/SecureScore')), 
   "/tenant/administration/gdap": React.lazy(() => import('./views/tenant/administration/GDAPWizard')), 

src/routes.json

@@ -76,6 +76,12 @@
     "component": "views/identity/administration/InviteGuest",
     "allowedRoles": ["admin", "editor", "readonly"]
   },
+  {
+    "path": "/identity/administration/users/jit-admin",
+    "name": "JIT Admin",
+    "component": "views/identity/administration/DeployJITAdmin",
+    "allowedRoles": ["admin", "editor", "readonly"]
+  },
   {
     "path": "/identity/administration/ViewBec",
     "name": "View BEC",
@@ -888,6 +894,12 @@
     "component": "views/cipp/app-settings/CIPPSettings",
     "allowedRoles": ["admin"]
   },
+  {
+    "path": "/cipp/extensions",
+    "name": "Extensions Settings",
+    "component": "views/cipp/Extensions",
+    "allowedRoles": ["admin"]
+  },
   {
     "path": "/cipp/setup",
     "name": "Setup",

src/views/cipp/Extensions.jsx

@@ -0,0 +1,173 @@
+import React, { useRef, useState } from 'react'
+import {
+  CButton,
+  CCardText,
+  CCol,
+  CForm,
+  CNav,
+  CNavItem,
+  CRow,
+  CTabContent,
+  CTabPane,
+} from '@coreui/react'
+import { CippPage } from 'src/components/layout'
+import { CippLazy } from 'src/components/utilities'
+import { useNavigate } from 'react-router-dom'
+import useQuery from 'src/hooks/useQuery.jsx'
+import Extensions from 'src/data/Extensions.json'
+import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app.js'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import CippButtonCard from 'src/components/contentcards/CippButtonCard.jsx'
+import { RFFCFormInput, RFFCFormSwitch } from 'src/components/forms/RFFComponents.jsx'
+import { Form } from 'react-final-form'
+import { SettingsExtensionMappings } from './app-settings/SettingsExtensionMappings'
+
+export default function CIPPExtensions() {
+  const [listBackend, listBackendResult] = useLazyGenericGetRequestQuery()
+  const inputRef = useRef(null)
+  const [setExtensionconfig, extensionConfigResult] = useLazyGenericPostRequestQuery()
+  const [execTestExtension, listExtensionTestResult] = useLazyGenericGetRequestQuery()
+  const [execSyncExtension, listSyncExtensionResult] = useLazyGenericGetRequestQuery()
+
+  const onSubmitTest = (integrationName) => {
+    execTestExtension({
+      path: 'api/ExecExtensionTest?extensionName=' + integrationName,
+    })
+  }
+  const onSubmit = (values) => {
+    setExtensionconfig({
+      path: 'api/ExecExtensionsConfig',
+      values: values,
+    })
+  }
+
+  const ButtonGenerate = (integrationType, forceSync) => (
+    <>
+      <CButton className="me-2" form={integrationType} type="submit">
+        {extensionConfigResult.isFetching && (
+          <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
+        )}
+        Set Extension Settings
+      </CButton>
+      <CButton onClick={() => onSubmitTest(integrationType)} className="me-2">
+        {listExtensionTestResult.isFetching && (
+          <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
+        )}
+        Test Extension
+      </CButton>
+      {forceSync && (
+        <CButton
+          onClick={() =>
+            execSyncExtension({
+              path: 'api/ExecExtensionSync?Extension=' + integrationType,
+            })
+          }
+          className="me-2"
+        >
+          {listSyncExtensionResult.isFetching && (
+            <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
+          )}
+          Force Sync
+        </CButton>
+      )}
+    </>
+  )
+  const queryString = useQuery()
+  const navigate = useNavigate()
+
+  const tab = queryString.get('tab')
+  const [active, setActiveTab] = useState(tab ? parseInt(tab) : 0)
+  const setActive = (tab) => {
+    setActiveTab(tab)
+    queryString.set('tab', tab.toString())
+    navigate(`${location.pathname}?${queryString}`)
+  }
+
+  return (
+    <CippPage title="Settings" tenantSelector={false}>
+      {listBackendResult.isUninitialized && listBackend({ path: 'api/ListExtensionsConfig' })}
+      <CNav variant="tabs" role="tablist">
+        {Extensions.map((integration, idx) => (
+          <CNavItem
+            key={`tab-${idx}`}
+            active={active === idx}
+            onClick={() => setActive(idx)}
+            href="#"
+          >
+            {integration.name}
+          </CNavItem>
+        ))}
+      </CNav>
+      <CTabContent>
+        {Extensions.map((integration, idx) => (
+          <CTabPane key={`pane-${idx}`} visible={active === idx} className="mt-3">
+            <CippLazy visible={active === idx}>
+              <CRow className="mb-3">
+                <CCol md={4}>
+                  <CippButtonCard
+                    title={integration.name}
+                    titleType="big"
+                    isFetching={listBackendResult.isFetching}
+                    CardButton={ButtonGenerate(integration.type, integration.forceSync)}
+                    key={idx}
+                  >
+                    <p>{integration.helpText}</p>
+                    <Form
+                      onSubmit={onSubmit}
+                      initialValues={listBackendResult.data}
+                      render={({ handleSubmit, submitting, values }) => {
+                        return (
+                          <CForm id={integration.type} onSubmit={handleSubmit}>
+                            <CCardText>
+                              <CCol className="mb-3">
+                                {integration.SettingOptions.map(
+                                  (integrationOptions, idx) =>
+                                    integrationOptions.type === 'input' && (
+                                      <CCol key={`${idx}-${integrationOptions.name}`}>
+                                        <RFFCFormInput
+                                          type={integrationOptions.fieldtype}
+                                          name={integrationOptions.name}
+                                          label={integrationOptions.label}
+                                          placeholder={integrationOptions.placeholder}
+                                        />
+                                      </CCol>
+                                    ),
+                                )}
+                                {integration.SettingOptions.map(
+                                  (integrationOptions, idx) =>
+                                    integrationOptions.type === 'checkbox' && (
+                                      <CCol key={`${integrationOptions.name}-${idx}`}>
+                                        <RFFCFormSwitch
+                                          name={integrationOptions.name}
+                                          label={integrationOptions.label}
+                                          value={false}
+                                        />
+                                      </CCol>
+                                    ),
+                                )}
+                                <input
+                                  ref={inputRef}
+                                  type="hidden"
+                                  name="type"
+                                  value={integration.type}
+                                />
+                              </CCol>
+                            </CCardText>
+                          </CForm>
+                        )
+                      }}
+                    />
+                  </CippButtonCard>
+                </CCol>
+                <CCol md={8}>
+                  <SettingsExtensionMappings type={integration.type} />
+                </CCol>
+              </CRow>
+            </CippLazy>
+          </CTabPane>
+        ))}
+      </CTabContent>
+    </CippPage>
+  )
+}

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

@@ -58,14 +58,8 @@ export default function CIPPSettings() {
         <CNavItem active={active === 7} onClick={() => setActive(7)} href="#">
           Maintenance
         </CNavItem>
-        <CNavItem active={active === 8} onClick={() => setActive(8)} href="#">
-          Extensions
-        </CNavItem>
-        <CNavItem active={active === 9} onClick={() => setActive(9)} href="#">
-          Extension Mappings
-        </CNavItem>
         {superAdmin && (
-          <CNavItem active={active === 10} onClick={() => setActive(10)} href="#">
+          <CNavItem active={active === 8} onClick={() => setActive(8)} href="#">
             SuperAdmin Settings
           </CNavItem>
         )}
@@ -106,16 +100,6 @@ export default function CIPPSettings() {
         </CTabPane>
         <CTabPane visible={active === 8} className="mt-3">
           <CippLazy visible={active === 8}>
-            <SettingsExtensions />
-          </CippLazy>
-        </CTabPane>
-        <CTabPane visible={active === 9} className="mt-3">
-          <CippLazy visible={active === 9}>
-            <SettingsExtensionMappings />
-          </CippLazy>
-        </CTabPane>
-        <CTabPane visible={active === 10} className="mt-3">
-          <CippLazy visible={active === 10}>
             <SettingsSuperAdmin />
           </CippLazy>
         </CTabPane>