Merge branch 'KelvinTegelaar:main' into main

public/version_latest.txt

@@ -1 +1 @@
-4.9.1
+5.1.1

src/_nav.jsx

@@ -173,7 +173,7 @@ const _nav = [
       },
       {
         component: CNavItem,
-        name: 'Geo IP Lookup',
+        name: 'IP Database',
         to: '/tenant/tools/geoiplookup',
       },
       {
@@ -239,6 +239,11 @@ const _nav = [
         name: 'Deploy CA Policies',
         to: '/tenant/conditional/deploy',
       },
+      {
+        component: CNavItem,
+        name: 'CA Vacation Mode',
+        to: '/tenant/conditional/deploy-vacation',
+      },
       {
         component: CNavItem,
         name: 'CA Templates',

src/components/forms/RFFComponents.jsx

@@ -137,10 +137,17 @@ export const RFFCFormInput = ({
   disabled = false,
   spellCheck = true,
   autoFocus = false,
+  onChange,
 }) => {
   return (
     <Field name={name} validate={validate}>
       {({ input, meta }) => {
+        const handleChange = onChange
+          ? (e) => {
+              input.onChange(e)
+              onChange(e)
+            }
+          : input.onChange
         return (
           <div className={className}>
             {label && <CFormLabel htmlFor={name}>{label}</CFormLabel>}
@@ -155,6 +162,7 @@ export const RFFCFormInput = ({
               placeholder={placeholder}
               spellCheck={spellCheck}
               autoFocus={autoFocus}
+              onChange={handleChange}
             />
             <RFFCFormFeedback meta={meta} />
           </div>

src/components/layout/AppHeader.jsx

@@ -16,17 +16,8 @@ import {
 } from '@coreui/react'
 import { AppHeaderSearch } from 'src/components/header'
 import { TenantSelector } from '../utilities'
-import cyberdrainlogolight from 'src/assets/images/CIPP.png'
-import cyberdrainlogodark from 'src/assets/images/CIPP_Dark.png'
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faBars,
-  faCaretSquareLeft,
-  faCaretSquareRight,
-  faHamburger,
-  faStroopwafel,
-} from '@fortawesome/free-solid-svg-icons'
+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'

src/components/tables/CellMathFormatter.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { CBadge, CTooltip } from '@coreui/react'
+import CellBoolean from 'src/components/tables/CellBoolean.jsx'
+import cellTable from './CellTable'
+
+export function CellTip(cell, overflow = false) {
+  return (
+    <CTooltip content={String(cell)}>
+      <div className="celltip-content-nowrap">{String(cell)}</div>
+    </CTooltip>
+  )
+}
+export const cellMathFormatter =
+  ({ col } = {}) =>
+  (row) => {
+    const evaluateCalculation = (calculation, row) => {
+      try {
+        const formattedCalculation = calculation.replace(/\b\w+(\.\w+|\[\d+\])*\b/g, (key) => {
+          if (!isNaN(key)) {
+            return parseFloat(key)
+          }
+
+          const path = key.split(/\.|\[(\d+)\]/).filter(Boolean) // Splits keys and array indices
+          let currentObject = row
+          for (const prop of path) {
+            if (currentObject && prop in currentObject) {
+              currentObject = currentObject[prop]
+            } else if (!isNaN(prop)) {
+              // Checks if the prop is an array index
+              currentObject = currentObject[parseInt(prop, 10)]
+            } else {
+              throw new Error(`Property '${prop}' not found in row`)
+            }
+          }
+
+          return parseFloat(currentObject)
+        })
+
+        return Number(eval(formattedCalculation))
+      } catch (e) {
+        console.error(e)
+        return null
+      }
+    }
+
+    const result = evaluateCalculation(col.value, row)
+
+    if (result === null) {
+      return 'N/A'
+    }
+
+    if (col.showAs === 'percentage') {
+      return `${result.toFixed(2)}%`
+    } else {
+      return result.toFixed(2)
+    }
+  }
+
+export default cellMathFormatter

src/components/tables/CippTable.jsx

@@ -25,7 +25,9 @@ import PropTypes from 'prop-types'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faCheck,
+  faClipboard,
   faColumns,
+  faCopy,
   faFileCsv,
   faFilePdf,
   faSearch,
@@ -38,6 +40,7 @@ import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 's
 import { ConfirmModal } from '../utilities/SharedModal'
 import { debounce } from 'lodash-es'
 import { useSearchParams } from 'react-router-dom'
+import CopyToClipboard from 'react-copy-to-clipboard'
 
 const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
   <>
@@ -571,6 +574,14 @@ export default function CippTable({
       }
       filtered = filtered.map((item) => flatten(item))
 
+      let dataFlat
+
+      if (Array.isArray(data)) {
+        dataFlat = data.map((item) => flatten(item))
+      } else {
+        dataFlat = []
+      }
+
       if (!disablePDFExport) {
         if (dynamicColumns === true) {
           const addColumn = (columnname) => {
@@ -675,7 +686,7 @@ export default function CippTable({
                     <CDropdownItem>
                       <ExportCsvButton
                         key="export-csv-action-all"
-                        csvData={data}
+                        csvData={dataFlat}
                         reportName={reportName}
                         nameText="Export All Columns"
                       />
@@ -748,6 +759,12 @@ export default function CippTable({
     filteredItems,
   ])
   const tablePageSize = useSelector((state) => state.app.tablePageSize)
+  const [codeCopied, setCodeCopied] = useState(false)
+
+  const onCodeCopied = () => {
+    setCodeCopied(true)
+    setTimeout(() => setCodeCopied(false), 2000)
+  }
 
   return (
     <div className="ms-n3 me-n3 cipp-tablewrapper">
@@ -777,6 +794,20 @@ export default function CippTable({
                             {message.data?.Metadata?.Heading}
                           </CAccordionHeader>
                           <CAccordionBody>
+                            <CopyToClipboard text={results} onCopy={() => onCodeCopied()}>
+                              <CButton
+                                color={codeCopied ? 'success' : 'info'}
+                                className="cipp-code-copy-button"
+                                size="sm"
+                                variant="ghost"
+                              >
+                                {codeCopied ? (
+                                  <FontAwesomeIcon icon={faClipboard} />
+                                ) : (
+                                  <FontAwesomeIcon icon={faCopy} />
+                                )}
+                              </CButton>
+                            </CopyToClipboard>
                             {results.map((line, i) => {
                               return <li key={i}>{line}</li>
                             })}
@@ -790,7 +821,27 @@ export default function CippTable({
                   massResults.map((message, idx) => {
                     const results = message.data?.Results
                     const displayResults = Array.isArray(results) ? results.join(', ') : results
-                    return <li key={`message-${idx}`}>{displayResults}</li>
+                    return (
+                      <>
+                        <li key={`message-${idx}`}>
+                          {displayResults}
+                          <CopyToClipboard text={displayResults} onCopy={() => onCodeCopied()}>
+                            <CButton
+                              color={codeCopied ? 'success' : 'info'}
+                              className="cipp-code-copy-button"
+                              size="sm"
+                              variant="ghost"
+                            >
+                              {codeCopied ? (
+                                <FontAwesomeIcon icon={faClipboard} />
+                              ) : (
+                                <FontAwesomeIcon icon={faCopy} />
+                              )}
+                            </CButton>
+                          </CopyToClipboard>
+                        </li>
+                      </>
+                    )
                   })}
                 {loopRunning && (
                   <li>

src/components/utilities/CippActionsOffcanvas.jsx

@@ -15,7 +15,7 @@ import {
   COffcanvasTitle,
   CSpinner,
 } from '@coreui/react'
-import { CippOffcanvas, ModalService } from 'src/components/utilities'
+import { CippCodeBlock, CippOffcanvas, ModalService } from 'src/components/utilities'
 import { CippOffcanvasPropTypes } from 'src/components/utilities/CippOffcanvas'
 import { CippOffcanvasTable } from 'src/components/tables'
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
@@ -38,6 +38,34 @@ export default function CippActionsOffcanvas(props) {
   }
   const handleModal = useCallback(
     (modalMessage, modalUrl, modalType = 'GET', modalBody, modalInput, modalDropdown) => {
+      const handlePostConfirm = () => {
+        const selectedValue = inputRef.current.value
+        console.log(inputRef)
+        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 postRequestBody = {
+          ...modalBody,
+          ...additionalFields,
+          input: selectedValue,
+        }
+        // Send the POST request
+        genericPostRequest({
+          path: modalUrl,
+          values: postRequestBody,
+        })
+      }
+
+      // Modal setup for GET, codeblock, and other types
       if (modalType === 'GET') {
         ModalService.confirm({
           body: (
@@ -82,12 +110,7 @@ export default function CippActionsOffcanvas(props) {
             </div>
           ),
           title: 'Confirm',
-          onConfirm: () => [
-            genericPostRequest({
-              path: modalUrl,
-              values: { ...modalBody, ...{ input: inputRef.current.value } },
-            }),
-          ],
+          onConfirm: handlePostConfirm,
         })
       }
     },
@@ -99,7 +122,6 @@ export default function CippActionsOffcanvas(props) {
       modalContent,
     ],
   )
-
   useEffect(() => {
     if (dropDownInfo.isFetching) {
       handleModal(
@@ -282,14 +304,23 @@ export default function CippActionsOffcanvas(props) {
           <CSpinner>Loading</CSpinner>
         </CCallout>
       )}
-      {postResults.isSuccess && <CCallout color="info">{postResults.data?.Results}</CCallout>}
+      {postResults.isSuccess && (
+        <CippCodeBlock
+          code={postResults.data?.Results}
+          callout={true}
+          calloutCopyValue={getResults.data?.Results}
+        />
+      )}
       {postResults.isError && (
         <CCallout color="danger">Could not connect to API: {postResults.error.message}</CCallout>
       )}
       {getResults.isSuccess && (
-        <CCallout color={getResults.data?.colour ? getResults.data?.colour : 'info'}>
-          {getResults.data?.Results}
-        </CCallout>
+        <CippCodeBlock
+          code={getResults.data?.Results}
+          callout={true}
+          calloutColour={getResults.data?.colour ? getResults.data?.colour : 'info'}
+          calloutCopyValue={getResults.data?.Results}
+        />
       )}
       {getResults.isError && (
         <CCallout color="danger">Could not connect to API: {getResults.error.message}</CCallout>

src/components/utilities/CippCodeBlock.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { CButton } from '@coreui/react'
+import { CButton, CCallout } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCopy, faClipboard } from '@fortawesome/free-regular-svg-icons'
 import SyntaxHighlighter from 'react-syntax-highlighter'
@@ -13,6 +13,9 @@ function CippCodeBlock({
   showLineNumbers = true,
   startingLineNumber,
   wrapLongLines = true,
+  callout = false,
+  calloutColour = 'info',
+  calloutCopyValue = false,
 }) {
   const [codeCopied, setCodeCopied] = useState(false)
 
@@ -23,7 +26,7 @@ function CippCodeBlock({
 
   return (
     <div className="cipp-code">
-      <CopyToClipboard text={code} onCopy={() => onCodeCopied()}>
+      <CopyToClipboard text={calloutCopyValue || code} onCopy={() => onCodeCopied()}>
         <CButton
           color={codeCopied ? 'success' : 'info'}
           className="cipp-code-copy-button"
@@ -33,18 +36,20 @@ function CippCodeBlock({
           {codeCopied ? <FontAwesomeIcon icon={faClipboard} /> : <FontAwesomeIcon icon={faCopy} />}
         </CButton>
       </CopyToClipboard>
-
-      <SyntaxHighlighter
-        language={language}
-        showLineNumbers={showLineNumbers}
-        startingLineNumber={startingLineNumber}
-        wrapLongLines={wrapLongLines}
-        wrapLines={wrapLongLines}
-        style={atomOneDark}
-        className="cipp-code-block"
-      >
-        {code}
-      </SyntaxHighlighter>
+      {callout && <CCallout color={calloutColour}>{code}</CCallout>}
+      {!callout && (
+        <SyntaxHighlighter
+          language={language}
+          showLineNumbers={showLineNumbers}
+          startingLineNumber={startingLineNumber}
+          wrapLongLines={wrapLongLines}
+          wrapLines={wrapLongLines}
+          style={atomOneDark}
+          className="cipp-code-block"
+        >
+          {code}
+        </SyntaxHighlighter>
+      )}
     </div>
   )
 }