M #-: Dereference deleted rows (#2777)

src/fireedge/src/client/components/Forms/ButtonToTriggerForm.js

@@ -32,7 +32,12 @@ import FormStepper from 'client/components/FormStepper'
 import { Translate } from 'client/components/HOC'
 import { isDevelopment } from 'client/utils'
 
-const ButtonToTriggerForm = ({ buttonProps = {}, options = [] }) => {
+const ButtonToTriggerForm = ({
+  buttonProps = {},
+  options = [],
+  actionAccessor = '',
+  onSelectedRowsChange = () => {},
+}) => {
   const buttonId = buttonProps['data-cy'] ?? 'main-button'
   const moreThanOneOption = options.length > 1
 
@@ -60,6 +65,7 @@ const ButtonToTriggerForm = ({ buttonProps = {}, options = [] }) => {
   const handleTriggerSubmit = async (formData) => {
     try {
       await handleSubmit?.(formData)
+      actionAccessor === 'delete' && onSelectedRowsChange([]) // dereference the deleted rows from the container view
     } catch (error) {
       isDevelopment() && console.error(error)
     } finally {
@@ -174,6 +180,8 @@ export const ButtonToTriggerFormPropTypes = {
       onSubmit: PropTypes.func,
     })
   ),
+  actionAccessor: PropTypes.string,
+  onSelectedRowsChange: PropTypes.func,
 }
 
 ButtonToTriggerForm.propTypes = ButtonToTriggerFormPropTypes

src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js

@@ -54,7 +54,7 @@ import { CreateFormCallback, CreateStepsCallback } from 'client/utils'
  * @property {function(Row[]):object} [useQuery] - Function to get rtk query result
  */
 
-const ActionItem = memo(({ item, selectedRows }) => {
+const ActionItem = memo(({ item, selectedRows, onSelectedRowsChange }) => {
   /** @type {GlobalAction} */
   const {
     accessor,
@@ -116,6 +116,8 @@ const ActionItem = memo(({ item, selectedRows }) => {
   ) : (
     <ButtonToTriggerForm
       buttonProps={buttonProps}
+      actionAccessor={accessor}
+      onSelectedRowsChange={onSelectedRowsChange}
       options={options?.map((option) => {
         const {
           form,
@@ -138,6 +140,7 @@ const ActionItem = memo(({ item, selectedRows }) => {
 ActionItem.propTypes = {
   item: PropTypes.object,
   selectedRows: PropTypes.array,
+  onSelectedRowsChange: PropTypes.func,
 }
 
 ActionItem.displayName = 'ActionItem'

src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js

@@ -40,6 +40,7 @@ import { T } from 'client/constants'
  * @param {GlobalAction[]} props.globalActions - Possible bulk actions
  * @param {UseTableInstanceProps} props.useTableProps - Table props
  * @param {object[]} props.selectedRows - Selected Rows
+ * @param {Function} props.onSelectedRowsChange - Sets the state of the containers selected rows
  * @returns {ReactElement} Component JSX with all actions
  */
 const GlobalActions = ({
@@ -50,6 +51,7 @@ const GlobalActions = ({
   disableRowSelect = false,
   globalActions = [],
   selectedRows,
+  onSelectedRowsChange,
   useTableProps = {},
 }) => {
   /** @type {UseRowSelectInstanceProps} */
@@ -86,7 +88,14 @@ const GlobalActions = ({
 
         const key = item.accessor ?? item.label ?? item.tooltip ?? idx
 
-        return <Action key={key} item={item} selectedRows={selectedRows} />
+        return (
+          <Action
+            key={key}
+            item={item}
+            selectedRows={selectedRows}
+            onSelectedRowsChange={onSelectedRowsChange}
+          />
+        )
       })}
     </Stack>
   )
@@ -101,6 +110,7 @@ GlobalActions.propTypes = {
   globalActions: PropTypes.array,
   useTableProps: PropTypes.object,
   selectedRows: PropTypes.array,
+  onSelectedRowsChange: PropTypes.func,
 }
 
 export default GlobalActions

src/fireedge/src/client/components/Tables/Enhanced/index.js

@@ -261,6 +261,7 @@ const EnhancedTable = ({
           disableRowSelect={disableRowSelect}
           globalActions={globalActions}
           selectedRows={selectedRows}
+          onSelectedRowsChange={onSelectedRowsChange}
           useTableProps={useTableProps}
         />