Merge branch 'KelvinTegelaar:main' into master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "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.7.0
+5.8.0

src/_nav.jsx

@@ -75,6 +75,11 @@ const _nav = [
         name: 'Roles',
         to: '/identity/administration/roles',
       },
+      {
+        component: CNavItem,
+        name: 'JIT Admin',
+        to: '/identity/administration/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

@@ -253,6 +253,54 @@ RFFCFormInputArray.propTypes = {
   ...sharedPropTypes,
 }
 
+export const RFFCFormInputList = ({ name, label, className = 'mb-3' }) => {
+  return (
+    <>
+      <FieldArray name={name}>
+        {({ fields }) => (
+          <div>
+            <div className="mb-2">
+              {label && (
+                <CFormLabel className="me-2" htmlFor={name}>
+                  {label}
+                </CFormLabel>
+              )}
+              <CButton
+                onClick={() => fields.push({ Key: '', Value: '' })}
+                className="circular-button"
+                title={'+'}
+              >
+                <FontAwesomeIcon icon={'plus'} />
+              </CButton>
+            </div>
+            {fields.map((name, index) => (
+              <div key={name} className={className}>
+                <div>
+                  <Field name={`${name}`} component="input">
+                    {({ input, meta }) => {
+                      return <CFormInput placeholder="Value" {...input} className="mb-2" />
+                    }}
+                  </Field>
+                </div>
+                <CButton
+                  onClick={() => fields.remove(index)}
+                  className={`circular-button`}
+                  title={'-'}
+                >
+                  <FontAwesomeIcon icon={'minus'} />
+                </CButton>
+              </div>
+            ))}
+          </div>
+        )}
+      </FieldArray>
+    </>
+  )
+}
+RFFCFormInputList.propTypes = {
+  ...sharedPropTypes,
+}
+
 export const RFFCFormRadio = ({
   name,
   label,
@@ -293,7 +341,6 @@ export const RFFCFormRadioList = ({
   name,
   options,
   className = 'mb-3',
-  disabled = false,
   onClick,
   inline = false,
 }) => {
@@ -312,7 +359,6 @@ export const RFFCFormRadioList = ({
                       onChange={input.onChange}
                       type="radio"
                       {...option}
-                      disabled={disabled}
                       onClick={onClick}
                       inline={inline}
                     />
@@ -465,10 +511,10 @@ export const RFFSelectSearch = ({
   isLoading = false,
   allowCreate = false,
   refreshFunction,
-  props,
+  ...props
 }) => {
   const [inputText, setInputText] = useState('')
-  const selectSearchvalues = values.map((val) => ({
+  const selectSearchValues = values.map((val) => ({
     value: val.value,
     label: val.name,
     ...val.props,
@@ -492,12 +538,33 @@ export const RFFSelectSearch = ({
   return (
     <Field name={name} validate={validate}>
       {({ meta, input }) => {
-        const handleChange = onChange
-          ? (e) => {
-              input.onChange(e)
-              onChange(e)
-            }
-          : input.onChange
+        const handleChange = (e) => {
+          if (onChange) {
+            onChange(e)
+          }
+          input.onChange(e)
+        }
+
+        const selectProps = {
+          classNamePrefix: 'react-select',
+          ...input,
+          name,
+          id: name,
+          disabled,
+          options: selectSearchValues,
+          placeholder,
+          isMulti: multi,
+          inputValue: inputText,
+          isLoading,
+          onChange: handleChange,
+          onInputChange: setOnInputChange,
+          ...props,
+          //merge className from props into the default className
+          className: props.className
+            ? `${props.className} react-select-container`
+            : 'react-select-container',
+        }
+
         return (
           <div>
             <CFormLabel htmlFor={name}>
@@ -515,81 +582,16 @@ export const RFFSelectSearch = ({
                 </CTooltip>
               )}
             </CFormLabel>
-            {!allowCreate && onChange && (
-              <Select
-                className="react-select-container"
-                classNamePrefix="react-select"
-                {...input}
-                isClearable={false}
-                name={name}
-                id={name}
-                disabled={disabled}
-                options={selectSearchvalues}
-                placeholder={placeholder}
-                isMulti={multi}
-                onChange={handleChange}
-                onInputChange={debounceOnInputChange}
-                inputValue={inputText}
-                isLoading={isLoading}
-                {...props}
-              />
-            )}
-            {!allowCreate && !onChange && (
-              <Select
-                className="react-select-container"
-                classNamePrefix="react-select"
-                {...input}
-                isClearable={true}
-                name={name}
-                id={name}
-                disabled={disabled}
-                options={selectSearchvalues}
-                placeholder={placeholder}
-                onInputChange={setOnInputChange}
-                isMulti={multi}
-                inputValue={inputText}
-                isLoading={isLoading}
-                {...props}
-              />
-            )}
-            {allowCreate && onChange && (
-              <Creatable
-                className="react-select-container"
-                classNamePrefix="react-select"
-                {...input}
-                isClearable={false}
-                name={name}
-                id={name}
-                disabled={disabled}
-                options={selectSearchvalues}
-                placeholder={placeholder}
-                isMulti={multi}
-                onChange={handleChange}
-                onInputChange={debounceOnInputChange}
-                inputValue={inputText}
-                isLoading={isLoading}
-                {...props}
-              />
+            {allowCreate ? (
+              <Creatable {...selectProps} isClearable={true} />
+            ) : (
+              <Select {...selectProps} isClearable={!onChange} />
             )}
-            {allowCreate && !onChange && (
-              <Creatable
-                className="react-select-container"
-                classNamePrefix="react-select"
-                {...input}
-                isClearable={true}
-                name={name}
-                id={name}
-                disabled={disabled}
-                options={selectSearchvalues}
-                placeholder={placeholder}
-                onInputChange={setOnInputChange}
-                isMulti={multi}
-                inputValue={inputText}
-                isLoading={isLoading}
-                {...props}
-              />
+            {meta.error && meta.touched && (
+              <span className="text-danger">
+                {typeof meta.error === 'object' ? Object.values(meta.error).join('') : meta.error}
+              </span>
             )}
-            {meta.error && meta.touched && <span className="text-danger">{meta.error}</span>}
           </div>
         )
       }}

src/components/forms/index.js

@@ -10,6 +10,7 @@ import {
   RFFCFormSelect,
   RFFSelectSearch,
   RFFCFormInputArray,
+  RFFCFormInputList,
 } from 'src/components/forms/RFFComponents'
 
 export {
@@ -24,4 +25,5 @@ export {
   RFFCFormSelect,
   RFFSelectSearch,
   RFFCFormInputArray,
+  RFFCFormInputList,
 }

src/components/tables/CippTable.jsx

@@ -414,6 +414,7 @@ export default function CippTable({
     (modalMessage, modalUrl, modalType = 'GET', modalBody, modalInput, modalDropdown) => {
       if (modalType === 'GET') {
         ModalService.confirm({
+          getData: () => inputRef.current?.value,
           body: (
             <div style={{ overflow: 'visible' }}>
               <div>{modalMessage}</div>
@@ -466,6 +467,18 @@ export default function CippTable({
           title: 'Confirm',
           onConfirm: async () => {
             const resultsarr = []
+            const selectedValue = inputRef.current.value
+            let additionalFields = {}
+            if (inputRef.current.nodeName === 'SELECT') {
+              const selectedItem = dropDownInfo.data.find(
+                (item) => item[modalDropdown.valueField] === selectedValue,
+              )
+              if (selectedItem && modalDropdown.addedField) {
+                Object.keys(modalDropdown.addedField).forEach((key) => {
+                  additionalFields[key] = selectedItem[modalDropdown.addedField[key]]
+                })
+              }
+            }
             for (const row of selectedRows) {
               setLoopRunning(true)
               const urlParams = new URLSearchParams(modalUrl.split('?')[1])
@@ -492,26 +505,13 @@ export default function CippTable({
                 }
               }
               const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
-              const selectedValue = inputRef.current.value
-              let additionalFields = {}
-              if (inputRef.current.nodeName === 'SELECT') {
-                const selectedItem = dropDownInfo.data.find(
-                  (item) => item[modalDropdown.valueField] === selectedValue,
-                )
-                if (selectedItem && modalDropdown.addedField) {
-                  Object.keys(modalDropdown.addedField).forEach((key) => {
-                    additionalFields[key] = selectedItem[modalDropdown.addedField[key]]
-                  })
-                }
-              }
-
               const results = await genericPostRequest({
                 path: NewModalUrl,
                 values: {
                   ...modalBody,
                   ...newModalBody,
                   ...additionalFields,
-                  ...{ input: inputRef.current.value },
+                  ...{ input: selectedValue },
                 },
               })
               resultsarr.push(results)

src/components/utilities/CippFuzzySearch.jsx

@@ -4,7 +4,7 @@ import Fuse from 'fuse.js'
 function CippfuzzySearch(options) {
   const fuse = new Fuse(options, {
     keys: ['name', 'groupName', 'items.name'],
-    threshold: 0.5,
+    threshold: 0.3,
     location: 0,
     ignoreLocation: true,
     useExtendedSearch: true,
@@ -15,8 +15,8 @@ function CippfuzzySearch(options) {
     if (!value.length) {
       return options
     }
-
-    return fuse.search(value).map((_ref) => {
+    const search = fuse.search(value)
+    return search.map((_ref) => {
       let { item } = _ref
       return item
     })

src/components/utilities/CippListOffcanvas.jsx

@@ -38,7 +38,7 @@ CippListOffcanvas.propTypes = {
   hideFunction: PropTypes.func.isRequired,
 }
 
-export function OffcanvasListSection({ title, items }) {
+export function OffcanvasListSection({ title, items, showCardTitle = true }) {
   //console.log(items)
   const mappedItems = items.map((item, key) => ({ value: item.content, label: item.heading }))
   return (
@@ -48,7 +48,11 @@ export function OffcanvasListSection({ title, items }) {
         <CCard className="content-card">
           <CCardHeader className="d-flex justify-content-between align-items-center">
             <CCardTitle>
-              <FontAwesomeIcon icon={faGlobe} className="mx-2" /> Extended Information
+              {showCardTitle && (
+                <>
+                  <FontAwesomeIcon icon={faGlobe} className="mx-2" /> Extended Information
+                </>
+              )}
             </CCardTitle>
           </CCardHeader>
           <CCardBody>
@@ -62,4 +66,5 @@ export function OffcanvasListSection({ title, items }) {
 OffcanvasListSection.propTypes = {
   title: PropTypes.string,
   items: PropTypes.array,
+  showCardTitle: PropTypes.bool,
 }