Merge pull request #2637 from JohnDuprey/dev

Extension layout
KelvinTegelaar · Jul 6, 2024 · 3b3b758 · 3b3b758
2 parents 1da1cff + 4649af9
commit 3b3b758
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 32 deletions.
diff --git a/src/components/contentcards/CippButtonCard.jsx b/src/components/contentcards/CippButtonCard.jsx
@@ -9,9 +9,10 @@ export default function CippButtonCard({
   CardButton,
   children,
   isFetching,
+  className = 'h-100',
 }) {
   return (
-    <CCard className="h-100 mb-3">
+    <CCard className={`${className} mb-3`}>
       <CCardHeader>
         <CCardTitle>
           {titleType === 'big' ? <h3 className="underline mb-3">{title}</h3> : title}
@@ -32,4 +33,5 @@ CippButtonCard.propTypes = {
   CardButton: PropTypes.element.isRequired,
   children: PropTypes.element.isRequired,
   isFetching: PropTypes.bool.isRequired,
+  className: PropTypes.string,
 }
diff --git a/src/data/Extensions.json b/src/data/Extensions.json
@@ -122,7 +122,7 @@
         "type": "input",
         "fieldtype": "input",
         "name": "NinjaOne.Instance",
-        "label": "Please enter your NinjaOne Instance",
+        "label": "Please enter your NinjaOne Instance hostname",
         "placeholder": "app.ninjarmm.com, eu.ninjarmm.com, oc.ninjarmm.com, ca.ninjarmm.com, us2.ninjarmm.com"
       },
       {
@@ -162,7 +162,8 @@
     ],
     "mappingRequired": true,
     "fieldMapping": true,
-    "autoMapSyncApi": true
+    "autoMapSyncApi": true,
+    "showSyncButton": true
   },
   {
     "name": "Hudu",
@@ -187,8 +188,13 @@
       },
       {
         "type": "checkbox",
-        "name": "Hudu.LicensedUsersOnly",
-        "label": "Only Sync Licensed Users"
+        "name": "Hudu.CreateMissingUsers",
+        "label": "Create missing users in Hudu"
+      },
+      {
+        "type": "checkbox",
+        "name": "Hudu.CreateMissingDevices",
+        "label": "Create missing devices in Hudu"
       },
       {
         "type": "checkbox",
@@ -197,7 +203,8 @@
       }
     ],
     "mappingRequired": true,
-    "fieldMapping": true
+    "fieldMapping": true,
+    "showSyncButton": true
   },
   {
     "name": "PasswordPusher",

diff --git a/src/views/cipp/ExtensionMappings.jsx b/src/views/cipp/ExtensionMappings.jsx
@@ -156,18 +156,32 @@ export default function ExtensionMappings({ type, fieldMappings = false, autoMap
           title={`${type} Organization Mapping`}
           titleType="big"
           isFetching={listMappingBackendResult.isFetching}
+          className="px-0"
           CardButton={
             <>
-              <CButton form={`${type}Org`} className="me-2" type="submit">
-                {extensionConfigResult.isFetching && (
-                  <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
-                )}
-                Set Mappings
+              <CButton
+                form={`${type}Org`}
+                className="me-2"
+                type="submit"
+                disabled={listMappingBackendResult.isFetching}
+              >
+                <FontAwesomeIcon
+                  icon={extensionConfigResult.isFetching ? 'circle-notch' : 'save'}
+                  spin={extensionConfigResult.isFetching}
+                  className="me-2"
+                />
+                Save Mappings
               </CButton>
-              <CButton onClick={() => onOrgsAutomap()} className="me-2">
-                {extensionAutomapResult.isFetching && (
-                  <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
-                )}
+              <CButton
+                onClick={() => onOrgsAutomap()}
+                className="me-2"
+                disabled={listMappingBackendResult.isFetching}
+              >
+                <FontAwesomeIcon
+                  icon={extensionAutomapResult.isFetching ? 'circle-notch' : 'wand-magic-sparkles'}
+                  spin={extensionAutomapResult.isFetching}
+                  className="me-2"
+                />
                 Automap {type} Organizations
               </CButton>
             </>
@@ -311,12 +325,16 @@ export default function ExtensionMappings({ type, fieldMappings = false, autoMap
           title={`${type} Field Mapping`}
           titleType="big"
           isFetching={listFieldsBackendResult.isFetching}
+          className="px-0"
           CardButton={
             <CButton form={`${type}Fields`} className="me-2" type="submit">
-              {extensionFieldsConfigResult.isFetching && (
-                <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
-              )}
-              Set Mappings
+              <FontAwesomeIcon
+                icon={extensionFieldsConfigResult.isFetching ? 'circle-notch' : 'save'}
+                spin={extensionFieldsConfigResult.isFetching}
+                className="me-2"
+                disabled={extensionFieldsConfigResult.isFetching}
+              />
+              Save Mappings
             </CButton>
           }
         >

diff --git a/src/views/cipp/Extensions.jsx b/src/views/cipp/Extensions.jsx
@@ -45,16 +45,20 @@ export default function CIPPExtensions() {
   const ButtonGenerate = (integrationType, forceSync, disabled) => (
     <>
       <CButton disabled={disabled} className="me-2" form={integrationType} type="submit">
-        {extensionConfigResult.isFetching && (
-          <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
-        )}
-        Set Extension Settings
+        <FontAwesomeIcon
+          icon={extensionConfigResult.isFetching ? 'circle-notch' : 'save'}
+          spin={extensionConfigResult.isFetching}
+          className="me-2"
+        />
+        Save
       </CButton>
       <CButton disabled={disabled} onClick={() => onSubmitTest(integrationType)} className="me-2">
-        {listExtensionTestResult.isFetching && (
-          <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
-        )}
-        Test Extension
+        <FontAwesomeIcon
+          icon={listExtensionTestResult.isFetching ? 'circle-notch' : 'flask'}
+          spin={listExtensionTestResult.isFetching}
+          className="me-2"
+        />
+        Test
       </CButton>
       {forceSync && (
         <CButton
@@ -65,9 +69,11 @@ export default function CIPPExtensions() {
           }
           className="me-2"
         >
-          {listSyncExtensionResult.isFetching && (
-            <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
-          )}
+          <FontAwesomeIcon
+            icon={listSyncExtensionResult.isFetching ? 'circle-notch' : 'sync'}
+            spin={listSyncExtensionResult.isFetching}
+            className="me-2"
+          />
           Force Sync
         </CButton>
       )}
@@ -118,10 +124,13 @@ export default function CIPPExtensions() {
                     isFetching={listBackendResult.isFetching}
                     CardButton={ButtonGenerate(
                       integration.type,
-                      integration.forceSync,
-                      (hostedMetaContent === 'true' && integration.disableWhenhosted) || false,
+                      integration.forceSyncButton,
+                      (hostedMetaContent === 'true' && integration.disableWhenhosted) ||
+                        listBackendResult.isFetching ||
+                        false,
                     )}
                     key={idx}
+                    className=""
                   >
                     <p>{integration.helpText}</p>
                     <Form