Merge pull request #11 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

Author: kris6673

public/version_latest.txt

@@ -1 +1 @@
-5.2.0
+5.2.1

src/components/forms/RFFComponents.jsx

@@ -429,7 +429,12 @@ export const RFFSelectSearch = ({
               {label}
               {refreshFunction && (
                 <CTooltip content="Refresh" placement="right">
-                  <CButton onClick={refreshFunction} variant="ghost" className="ms-1" size="sm">
+                  <CButton
+                    onClick={refreshFunction}
+                    variant="ghost"
+                    className="ms-1 py-0 border-0"
+                    size="sm"
+                  >
                     <FontAwesomeIcon icon="sync" />
                   </CButton>
                 </CTooltip>

src/components/layout/AppSidebarNav.jsx

@@ -65,7 +65,7 @@ export const AppSidebarNav = ({ items }) => {
     )
   }
   const navGroup = (item, index) => {
-    const { component, name, icon, to, ...rest } = item
+    const { component, name, icon, to, items, ...rest } = item
     const Component = component
     const navGroupKey = `${item.name.toLowerCase().replace(' ', '-')}_${index}`
     const navGroupIdx = `${item.section.toLowerCase().replace(' ', '-')}_${item.name
@@ -79,9 +79,7 @@ export const AppSidebarNav = ({ items }) => {
         visible={location.pathname.startsWith(to)}
         {...rest}
       >
-        {item.items?.map((item, index) =>
-          item.items ? navGroup(item, index) : navItem(item, index),
-        )}
+        {items?.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
       </Component>
     )
   }

src/components/tables/CippDatatable.jsx

@@ -6,13 +6,13 @@ import { CippTablePropTypes } from 'src/components/tables/CippTable'
 import { CCallout } from '@coreui/react'
 
 export default function CippDatatable({ path, params, ...rest }) {
-  const [refreshGuid, setRefreshGuid] = React.useState('')
   const [graphFilter, setGraphFilter] = React.useState(params?.Parameters?.$filter)
   const {
     data = [],
     isFetching,
     error,
-  } = useListDatatableQuery({ path, params: { refreshGuid, $filter: graphFilter, ...params } })
+    refetch,
+  } = useListDatatableQuery({ path, params: { $filter: graphFilter, ...params } })
 
   var defaultFilterText = ''
   if (params?.Parameters?.$filter) {
@@ -23,11 +23,12 @@ export default function CippDatatable({ path, params, ...rest }) {
       {data?.Metadata?.Queued && <CCallout color="info">{data?.Metadata?.QueueMessage}</CCallout>}
       <CippTable
         {...rest}
+        endpointName={path}
         data={Array.isArray(data?.Results) ? data?.Results : data}
         isFetching={isFetching}
         error={error}
         defaultFilterText={defaultFilterText}
-        refreshFunction={setRefreshGuid}
+        refreshFunction={() => refetch()}
         graphFilterFunction={setGraphFilter}
       />
     </>

src/components/tables/CippTable.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { ExportCsvButton, ExportPDFButton } from 'src/components/buttons'
 import {
   CSpinner,
@@ -10,9 +10,6 @@ import {
   CDropdownMenu,
   CDropdownItem,
   CButton,
-  CModal,
-  CModalBody,
-  CModalTitle,
   CCallout,
   CFormSelect,
   CAccordion,
@@ -32,15 +29,15 @@ import {
   faFilePdf,
   faSearch,
   faSync,
-  faTasks,
 } from '@fortawesome/free-solid-svg-icons'
 import { cellGenericFormatter } from './CellGenericFormat'
 import { ModalService } from '../utilities'
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
-import { ConfirmModal } from '../utilities/SharedModal'
-import { debounce } from 'lodash-es'
+import { debounce, update } from 'lodash-es'
 import { useSearchParams } from 'react-router-dom'
 import CopyToClipboard from 'react-copy-to-clipboard'
+import { setDefaultColumns } from 'src/store/features/app'
+import { end } from '@popperjs/core'
 
 const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
   <>
@@ -126,6 +123,7 @@ export default function CippTable({
   exportFiltered = false,
   filterlist,
   showFilter = true,
+  endpointName,
   tableProps: {
     keyField = 'id',
     theme = 'cyberdrain',
@@ -150,10 +148,43 @@ export default function CippTable({
 }) {
   const inputRef = useRef('')
   const [loopRunning, setLoopRunning] = React.useState(false)
+  const defaultColumns = useSelector((state) => state.app.defaultColumns[endpointName])
+  const [defaultColumnsSet, setDefaultColumnsSet] = React.useState(false)
   const [massResults, setMassResults] = React.useState([])
   const [filterText, setFilterText] = React.useState(defaultFilterText)
   const [filterviaURL, setFilterviaURL] = React.useState(false)
+  const [originalColumns, setOrginalColumns] = React.useState(columns)
   const [updatedColumns, setUpdatedColumns] = React.useState(columns)
+  if (defaultColumns && defaultColumnsSet === false) {
+    const defaultColumnsArray = defaultColumns.split(',').filter((item) => item)
+
+    const actionsColumn = columns.length > 0 ? columns[columns.length - 1] : null
+
+    let tempColumns = actionsColumn ? columns.slice(0, -1) : [...columns]
+
+    defaultColumnsArray.forEach((columnName) => {
+      if (!tempColumns.find((c) => c.exportSelector === columnName && c?.omit !== true)) {
+        tempColumns.push({
+          name: columnName,
+          selector: (row) => row[columnName],
+          sortable: true,
+          exportSelector: columnName,
+          cell: cellGenericFormatter(),
+        })
+      }
+    })
+
+    if (actionsColumn) {
+      tempColumns.push(actionsColumn)
+    }
+    let newColumns = tempColumns.filter(
+      (column) => defaultColumnsArray.includes(column.exportSelector) || column === actionsColumn,
+    )
+
+    setUpdatedColumns(newColumns)
+    setDefaultColumnsSet(true)
+  }
+
   const [selectedRows, setSelectedRows] = React.useState(false)
   const [genericGetRequest, getResults] = useLazyGenericGetRequestQuery()
   const [genericPostRequest, postResults] = useLazyGenericPostRequestQuery()
@@ -171,6 +202,32 @@ export default function CippTable({
     searchParams.delete('updateTableFilter')
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const addColumn = (columnname) => {
+    let alreadyInArray = updatedColumns.some(
+      (o) => o.exportSelector === columnname && o?.omit !== true,
+    )
+    let newColumns = [...updatedColumns]
+    const actionsColumn = newColumns.length > 0 ? newColumns.pop() : null
+
+    if (!alreadyInArray) {
+      const newColumn = {
+        name: columnname,
+        selector: (row) => row[columnname],
+        sortable: true,
+        exportSelector: columnname,
+        cell: cellGenericFormatter(),
+      }
+      newColumns.push(newColumn)
+    } else {
+      newColumns = newColumns.filter((o) => o.exportSelector !== columnname)
+    }
+    if (actionsColumn) {
+      newColumns.push(actionsColumn)
+    }
+    setUpdatedColumns(newColumns)
+  }
+
   const handleSelectedChange = ({ selectedRows }) => {
     setSelectedRows(selectedRows)
     if (selectedRows.length < 1) {
@@ -272,12 +329,34 @@ export default function CippTable({
   const applyFilter = (e) => {
     setFilterText(e.target.value)
   }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const setColumnDefaultLayout = (endpoint, columns) => {
+    dispatch(setDefaultColumns({ endpoint, columns }))
+  }
 
+  const resetDropdown = () => {
+    setUpdatedColumns(originalColumns)
+    setColumnDefaultLayout(endpointName, null)
+  }
+  const dispatch = useDispatch()
   useEffect(() => {
-    if (columns !== updatedColumns) {
-      setUpdatedColumns(columns)
+    if (columns.length !== updatedColumns.length) {
+      setUpdatedColumns(updatedColumns)
+      setColumnDefaultLayout(
+        endpointName,
+        updatedColumns.map((column) => column.exportSelector).join(','),
+      )
     }
-  }, [columns, updatedColumns])
+  }, [
+    columns,
+    defaultColumns,
+    dispatch,
+    dynamicColumns,
+    originalColumns,
+    endpointName,
+    setColumnDefaultLayout,
+    updatedColumns,
+  ])
 
   createTheme(
     'cyberdrain',
@@ -495,7 +574,7 @@ export default function CippTable({
     }
 
     const executeselectedAction = (item) => {
-      console.log(item)
+      //  console.log(item)
       setModalContent({
         item,
       })
@@ -617,24 +696,6 @@ export default function CippTable({
 
       if (!disablePDFExport) {
         if (dynamicColumns === true) {
-          const addColumn = (columnname) => {
-            var index = columns.length - 1
-            let alreadyInArray = columns.find((o) => o.exportSelector === columnname)
-            if (!alreadyInArray) {
-              columns.splice(index, 0, {
-                name: columnname,
-                selector: (row) => row[columnname],
-                sortable: true,
-                exportSelector: columnname,
-                cell: cellGenericFormatter(),
-              })
-            } else {
-              let indexOfExisting = columns.findIndex((o) => o.exportSelector === columnname)
-              columns = columns.splice(indexOfExisting, 1)
-            }
-            setUpdatedColumns(Date())
-          }
-
           defaultActions.push([
             <CDropdown key={'column-selector'} className="me-2" variant="input-group">
               <CDropdownToggle
@@ -647,13 +708,14 @@ export default function CippTable({
                 <FontAwesomeIcon icon={faColumns} />
               </CDropdownToggle>
               <CDropdownMenu>
+                <CDropdownItem onClick={() => resetDropdown()}>Reset to default</CDropdownItem>
                 {dataKeys() &&
                   dataKeys().map((item, idx) => {
                     return (
                       <CDropdownItem key={idx} onClick={() => addColumn(item)}>
-                        {columns.find((o) => o.exportSelector === item) && (
-                          <FontAwesomeIcon icon={faCheck} />
-                        )}{' '}
+                        {updatedColumns.find(
+                          (o) => o.exportSelector === item && o?.omit !== true,
+                        ) && <FontAwesomeIcon icon={faCheck} />}{' '}
                         {item}
                       </CDropdownItem>
                     )
@@ -778,18 +840,27 @@ export default function CippTable({
       </>
     )
   }, [
+    refreshFunction,
     actions,
-    selectedRows,
     disablePDFExport,
     disableCSVExport,
+    selectedRows,
+    actionsList,
+    showFilter,
     filterText,
     filterlist,
     resetPaginationToggle,
-    data,
+    handleModal,
+    getDrowndownInfo,
+    filteredItems,
     columns,
+    data,
+    dynamicColumns,
     reportName,
-    selectedRows,
-    filteredItems,
+    resetDropdown,
+    updatedColumns,
+    addColumn,
+    setGraphFilter,
   ])
   const tablePageSize = useSelector((state) => state.app.tablePageSize)
   const [codeCopied, setCodeCopied] = useState(false)
@@ -803,7 +874,7 @@ export default function CippTable({
     <div className="ms-n3 me-n3 cipp-tablewrapper">
       {!isFetching && error && <CCallout color="info">Error loading data</CCallout>}
       <div>
-        {(columns.length === updatedColumns.length || !dynamicColumns) && (
+        {(updatedColumns || !dynamicColumns) && (
           <>
             {(massResults.length >= 1 || loopRunning) && (
               <CCallout color="info">
@@ -900,7 +971,7 @@ export default function CippTable({
               responsive={responsive}
               dense={dense}
               striped={striped}
-              columns={columns}
+              columns={updatedColumns}
               data={filteredItems}
               expandableRows={expandableRows}
               expandableRowsComponent={expandableRowsComponent}

src/store/features/app.js

@@ -11,6 +11,7 @@ const initialState = {
   tablePageSize: 25,
   pageSizes: [25, 50, 100, 200, 500],
   TenantListSelector: false,
+  defaultColumns: {},
 }
 
 export const appSlice = createSlice({
@@ -47,6 +48,9 @@ export const appSlice = createSlice({
     setOffboardingDefaults: (state, action) => {
       state.offboardingDefaults = action.payload?.offboardingDefaults
     },
+    setDefaultColumns: (state, action) => {
+      state.defaultColumns[action.payload.endpoint] = action.payload?.columns
+    },
     setUserSettings: (state, action) => {
       //foreach key in the userSettings, set the state key to the value of that setting
       Object.keys(action.payload?.userSettings).forEach((key) => {
@@ -68,6 +72,7 @@ export const {
   setReportImage,
   setOffboardingDefaults,
   setUserSettings,
+  setDefaultColumns,
 } = appSlice.actions
 
 export default persistReducer(

src/views/cipp/CIPPSettings.jsx

@@ -230,12 +230,14 @@ const GeneralSettings = () => {
       selector: (row) => row?.GDAPRoles,
       cell: cellTableFormatter('GDAPRoles', false, true),
       omit: showExtendedInfo,
+      exportSelector: 'GDAPRoles',
     },
     {
       name: 'SAM User Roles',
       selector: (row) => row?.SAMUserRoles,
       cell: cellTableFormatter('SAMUserRoles', false, true),
       omit: showExtendedInfo,
+      exportSelector: 'SAMUserRoles',
     },
   ]
 

src/views/email-exchange/administration/ContactsList.jsx

@@ -80,6 +80,7 @@ const columns = [
     selector: (row) => row['id'],
     name: 'id',
     omit: true,
+    exportSelector: 'id',
   },
   {
     selector: (row) => row['onPremisesSyncEnabled'],

src/views/email-exchange/transport/TransportRules.jsx

@@ -100,11 +100,13 @@ const columns = [
     name: 'description',
     selector: (row) => row['Description'],
     omit: true,
+    exportSelector: 'Description',
   },
   {
     name: 'GUID',
     selector: (row) => row['Guid'],
     omit: true,
+    exportSelector: 'Guid',
   },
   {
     name: 'Actions',