Merge pull request #2837 from KelvinTegelaar/dev

Dev

Author: KelvinTegelaar

Tools/Start-CippDevEmulators.ps1

@@ -1,4 +1,12 @@
-Write-Host "Starting CIPP Dev Emulators"
+Write-Host 'Starting CIPP Dev Emulators'
+Get-Process node -ErrorAction SilentlyContinue | Stop-Process -ErrorAction SilentlyContinue
 $Path = (Get-Item $PSScriptRoot).Parent.Parent.FullName
-wt --title CIPP`; new-tab --title 'Azurite' -d $Path pwsh -c azurite`; new-tab --title 'FunctionApp' -d $Path\CIPP-API pwsh -c func start`; new-tab --title 'CIPP Frontend' -d $Path\CIPP pwsh -c npm run start`; new-tab --title 'SWA' -d $Path\CIPP pwsh -c npm run start-swa
+
+$Process = Read-Host -Prompt 'Start Process Function (y/N)?'
+
+if ($Process -eq 'y') {
+    wt --title CIPP`; new-tab --title 'Azurite' -d $Path pwsh -c azurite`; new-tab --title 'FunctionApp' -d $Path\CIPP-API pwsh -c func start`; new-tab --title 'CIPP Frontend' -d $Path\CIPP pwsh -c npm run start`; new-tab --title 'SWA' -d $Path\CIPP pwsh -c npm run start-swa`; new-tab --title 'CIPP-API-Processor' -d $Path\CIPP-API-Processor pwsh -c func start --port 7072
+} else {
+    wt --title CIPP`; new-tab --title 'Azurite' -d $Path pwsh -c azurite`; new-tab --title 'FunctionApp' -d $Path\CIPP-API pwsh -c func start`; new-tab --title 'CIPP Frontend' -d $Path\CIPP pwsh -c npm run start`; new-tab --title 'SWA' -d $Path\CIPP pwsh -c npm run start-swa
+}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "6.2.2",
+  "version": "6.3.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 @@
-6.2.2
+6.3.0

src/components/contentcards/CippButtonCard.jsx

@@ -8,7 +8,7 @@ export default function CippButtonCard({
   titleType = 'normal',
   CardButton,
   children,
-  isFetching,
+  isFetching = false,
   className = 'h-100',
 }) {
   return (
@@ -22,16 +22,16 @@ 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.isRequired,
+  isFetching: PropTypes.bool,
   className: PropTypes.string,
 }

src/components/forms/RFFComponents.jsx

@@ -516,6 +516,7 @@ export const RFFSelectSearch = ({
   retainInput = true,
   isLoading = false,
   allowCreate = false,
+  onCreateOption,
   refreshFunction,
   ...props
 }) => {
@@ -589,7 +590,7 @@ export const RFFSelectSearch = ({
               )}
             </CFormLabel>
             {allowCreate ? (
-              <Creatable {...selectProps} isClearable={true} />
+              <Creatable {...selectProps} isClearable={true} onCreateOption={onCreateOption} />
             ) : (
               <Select {...selectProps} isClearable={!onChange} />
             )}
@@ -612,6 +613,9 @@ RFFSelectSearch.propTypes = {
   onInputChange: PropTypes.func,
   isLoading: PropTypes.bool,
   refreshFunction: PropTypes.func,
+  allowCreate: PropTypes.bool,
+  onCreateOption: PropTypes.func,
+  retainInput: PropTypes.bool,
   values: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, name: PropTypes.string }))
     .isRequired,
 }

src/components/tables/CellGenericFormat.jsx

@@ -24,13 +24,17 @@ function nocolour(iscolourless, content) {
 export function CellTip(cell, overflow = false) {
   return (
     <CTooltip content={String(cell)}>
-      <div className="celltip-content-nowrap">{String(cell)}</div>
+      {overflow ? (
+        <div className="celltip-content">{String(cell)}</div>
+      ) : (
+        <div className="celltip-content-nowrap">{String(cell)}</div>
+      )}
     </CTooltip>
   )
 }
 
 export const cellGenericFormatter =
-  ({ warning = false, reverse = false, colourless = true, noDataIsFalse } = {}) =>
+  ({ warning = false, reverse = false, colourless = true, noDataIsFalse, wrap = false } = {}) =>
   // eslint-disable-next-line react/display-name
   (row, index, column, id) => {
     const cell = column.selector(row)
@@ -51,6 +55,10 @@ export const cellGenericFormatter =
           </a>
         )
       }
+
+      if (wrap) {
+        return CellTip(cell, true)
+      }
       return CellTip(cell)
     }
     if (typeof cell === 'number') {

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>
   )
 }

src/components/tables/CellTip.jsx

@@ -23,11 +23,11 @@ export const CellTipButton = (value, display) => {
   )
 }
 
-export const CellTip = (value, overflow = false) => {
+export const CellTip = (value, wrap = false) => {
   if (!value) {
     return <div />
   }
-  if (!overflow) {
+  if (!wrap) {
     return (
       <CTooltip content={value}>
         <div className="celltip-content-nowrap">{String(value)}</div>

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)}

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) {