Merge branch 'KelvinTegelaar:dev' into dev

kris6673 · Aug 19, 2024 · 5b9a833 · 5b9a833
2 parents 4b04d38 + 88fa828
commit 5b9a833
Show file tree

Hide file tree

Showing 17 changed files with 744 additions and 263 deletions.
diff --git a/src/components/contentcards/CippButtonCard.jsx b/src/components/contentcards/CippButtonCard.jsx
@@ -22,15 +22,15 @@ export default function CippButtonCard({
         {isFetching && <Skeleton />}
         {children}
       </CCardBody>
-      <CCardFooter>{CardButton}</CCardFooter>
+      {CardButton && <CCardFooter>{CardButton}</CCardFooter>}
     </CCard>
   )
 }
 
 CippButtonCard.propTypes = {
   title: PropTypes.string.isRequired,
   titleType: PropTypes.string,
-  CardButton: PropTypes.element.isRequired,
+  CardButton: PropTypes.element,
   children: PropTypes.element.isRequired,
   isFetching: PropTypes.bool,
   className: PropTypes.string,

diff --git a/src/components/tables/CellTable.jsx b/src/components/tables/CellTable.jsx
@@ -23,6 +23,15 @@ export default function cellTable(
   if (columnProp === undefined || columnProp === null) {
     columnProp = []
   } else {
+    var objectLength = 1
+    var lengthText = 'Item'
+    if (columnProp instanceof Array) {
+      objectLength = columnProp.length
+      if (objectLength > 1) {
+        lengthText = 'Items'
+      }
+    }
+
     if (!Array.isArray(columnProp) && typeof columnProp === 'object') {
       columnProp = Object.keys(columnProp).map((key) => {
         return {
@@ -93,7 +102,7 @@ export default function cellTable(
       size="sm"
       onClick={() => handleTable({ columnProp })}
     >
-      {columnProp.length} Items
+      {objectLength} {lengthText}
     </CButton>
   )
 }

diff --git a/src/components/tables/CippTable.jsx b/src/components/tables/CippTable.jsx
@@ -63,7 +63,7 @@ const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPr
           {filterlist &&
             filterlist.map((item, idx) => {
               return (
-                <CDropdownItem key={idx} onClick={() => onFilterPreset(item.filter)}>
+                <CDropdownItem key={`filter-${idx}`} onClick={() => onFilterPreset(item.filter)}>
                   {item.filterName}
                 </CDropdownItem>
               )
@@ -722,7 +722,7 @@ export default function CippTable({
                 {dataKeys() &&
                   dataKeys().map((item, idx) => {
                     return (
-                      <CDropdownItem key={idx} onClick={() => addColumn(item)}>
+                      <CDropdownItem key={`select-${idx}`} onClick={() => addColumn(item)}>
                         {updatedColumns.find(
                           (o) => o.exportSelector === item && o?.omit !== true,
                         ) && <FontAwesomeIcon icon={faCheck} />}{' '}
@@ -820,7 +820,7 @@ export default function CippTable({
             <CDropdownMenu>
               {actionsList.map((item, idx) => {
                 return (
-                  <CDropdownItem key={idx} onClick={() => executeselectedAction(item)}>
+                  <CDropdownItem key={`actions-${idx}`} onClick={() => executeselectedAction(item)}>
                     {item.label}
                   </CDropdownItem>
                 )
@@ -885,6 +885,7 @@ export default function CippTable({
     updatedColumns,
     addColumn,
     setGraphFilter,
+    isFetching,
   ])
   const tablePageSize = useSelector((state) => state.app.tablePageSize)
   const [codeCopied, setCodeCopied] = useState(false)
@@ -950,8 +951,8 @@ export default function CippTable({
                     const results = message.data?.Results
                     const displayResults = Array.isArray(results) ? results.join(', ') : results
                     return (
-                      <>
-                        <li key={`message-${idx}`}>
+                      <React.Fragment key={`message-${idx}`}>
+                        <li>
                           {displayResults}
                           <CopyToClipboard text={displayResults} onCopy={() => onCodeCopied()}>
                             <CButton
@@ -968,7 +969,7 @@ export default function CippTable({
                             </CButton>
                           </CopyToClipboard>
                         </li>
-                      </>
+                      </React.Fragment>
                     )
                   })}
                 {loopRunning && (
@@ -1008,11 +1009,12 @@ export default function CippTable({
               progressPending={isFetching}
               progressComponent={<CSpinner color="info" component="div" />}
               paginationRowsPerPageOptions={[25, 50, 100, 200, 500]}
+              keyField={keyField}
               {...rest}
             />
             {selectedRows.length >= 1 && <CCallout>Selected {selectedRows.length} items</CCallout>}
             <CippCodeOffCanvas
-              row={data}
+              row={data ?? {}}
               hideButton={true}
               state={codeOffcanvasVisible}
               hideFunction={() => setCodeOffcanvasVisible(false)}

diff --git a/src/components/utilities/CippActionsOffcanvas.jsx b/src/components/utilities/CippActionsOffcanvas.jsx
@@ -38,11 +38,11 @@ import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { cellGenericFormatter } from '../tables/CellGenericFormat'
 import ReactSelect from 'react-select'
 
-const CippOffcanvasCard = ({ action, key }) => {
+const CippOffcanvasCard = ({ action }) => {
   const [offcanvasVisible, setOffcanvasVisible] = useState(false)
   return (
     <>
-      <CCard key={key} className="border-top-dark border-top-3 mb-3">
+      <CCard className="border-top-dark border-top-3 mb-3">
         <CCardHeader className="d-flex justify-content-between align-items-center">
           <CCardTitle>Report Name: {action.label}</CCardTitle>
         </CCardHeader>
@@ -95,7 +95,6 @@ const CippOffcanvasCard = ({ action, key }) => {
 }
 CippOffcanvasCard.propTypes = {
   action: PropTypes.object,
-  key: PropTypes.object,
 }
 
 export default function CippActionsOffcanvas(props) {