[pull] main from KelvinTegelaar:main

public/version_latest.txt

@@ -1 +1 @@
-5.0.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',
       },
       {

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'
@@ -304,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>
   )
 }

src/components/utilities/CippListOffcanvas.jsx

@@ -1,7 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { CListGroup, CListGroupItem } from '@coreui/react'
+import {
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCardTitle,
+  CListGroup,
+  CListGroupItem,
+} from '@coreui/react'
 import { CippOffcanvas } from '.'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { CippOffcanvasTable } from '../tables'
 
 export default function CippListOffcanvas(props) {
   return (
@@ -13,7 +23,7 @@ export default function CippListOffcanvas(props) {
       hideFunction={props.hideFunction}
     >
       {props.groups.map((group, key) => (
-        <OffcanvasListSection title={group.title} items={group.items} key={key} />
+        <OffcanvasListSection items={group.items} key={key} />
       ))}
     </CippOffcanvas>
   )
@@ -29,18 +39,22 @@ CippListOffcanvas.propTypes = {
 }
 
 export function OffcanvasListSection({ title, items }) {
+  console.log(items)
+  const mappedItems = items.map((item, key) => ({ value: item.content, label: item.heading }))
   return (
     <>
       <h4 className="mt-4">{title}</h4>
       {items.length > 0 && (
-        <CListGroup className="my-3">
-          {items.map((item, key) => (
-            <CListGroupItem className="d-flex justify-content-between align-items-center" key={key}>
-              {item.heading && <h6 className="w-50 mb-0">{item.heading}</h6>}
-              {item.content}
-            </CListGroupItem>
-          ))}
-        </CListGroup>
+        <CCard className="content-card">
+          <CCardHeader className="d-flex justify-content-between align-items-center">
+            <CCardTitle>
+              <FontAwesomeIcon icon={faGlobe} className="mx-2" /> Extended Information
+            </CCardTitle>
+          </CCardHeader>
+          <CCardBody>
+            <CippOffcanvasTable rows={mappedItems} />
+          </CCardBody>
+        </CCard>
       )}
     </>
   )