feat: accomodate renderContentAtResultRowEnd in bulk operations results modal

Author: Elessar1802

src/Shared/Components/BulkOperations/BulkOperations.component.tsx

@@ -65,7 +65,7 @@ const BulkOperations = ({
             }
 
             const calls = operationsRef.current.map((op) => async () => {
-                const { operation, name, additionalKeys } = op
+                const { operation, name, additionalKeys, renderContentAtResultRowEnd = null } = op
 
                 if (abortControllerRef.current.signal.aborted) {
                     throw new Error('bulk operations aborted')
@@ -83,9 +83,16 @@ const BulkOperations = ({
 
                     triggerUpdate()
 
-                    await operation(abortControllerRef, data)
+                    const result = await operation(abortControllerRef, data)
 
-                    resultsStoreRef.current.updateResultStatus(id, { status: 'Completed' })
+                    resultsStoreRef.current.updateResultStatus(id, {
+                        status: 'Completed',
+                        ...(renderContentAtResultRowEnd
+                            ? {
+                                  renderContentAtResultRowEnd: () => renderContentAtResultRowEnd(result),
+                              }
+                            : {}),
+                    })
 
                     triggerUpdate()
                 } catch (err) {

src/Shared/Components/BulkOperations/BulkOperationsResultModal.tsx

@@ -159,7 +159,11 @@ const BulkOperationsResultModal = ({
                             {sortedList.map((result, index, arr) => (
                                 <div
                                     className={`dc__grid py-10 fs-13 dc__gap-16 dc__align-items-start ${index === arr.length - 1 ? 'mb-20' : ''}`}
-                                    style={{ gridTemplateColumns }}
+                                    style={{
+                                        gridTemplateColumns: result.renderContentAtResultRowEnd
+                                            ? `${gridTemplateColumns} min-content`
+                                            : gridTemplateColumns,
+                                    }}
                                     key={result.id}
                                 >
                                     <Tooltip content={result.name}>
@@ -179,6 +183,8 @@ const BulkOperationsResultModal = ({
                                     </div>
 
                                     <span className="dc__word-break">{result.message}</span>
+
+                                    {result.renderContentAtResultRowEnd?.()}
                                 </div>
                             ))}
                         </div>

src/Shared/Components/BulkOperations/types.ts

@@ -17,10 +17,11 @@ interface BulkOperationAdditionalKeysType {
 export interface BulkOperation {
     name: string
     /**
-     * Would these keys beside the name
+     * Would show these keys beside the name
      */
     additionalKeys?: BulkOperationAdditionalKeysType[]
-    operation: (abortControllerRef: MutableRefObject<AbortController>, data?: unknown) => Promise<void>
+    operation: (abortControllerRef: MutableRefObject<AbortController>, data?: unknown) => Promise<unknown | void>
+    renderContentAtResultRowEnd?: (data: Awaited<ReturnType<BulkOperation['operation']>>) => ReactNode
 }
 
 export type FailedOperationType = {
@@ -34,6 +35,7 @@ export type OtherStatusOperationType = {
 
 export type BulkOperationResultType = {
     message?: string
+    renderContentAtResultRowEnd?: () => void
 } & (FailedOperationType | OtherStatusOperationType) &
     Pick<BulkOperation, 'name' | 'additionalKeys'>
 
@@ -49,7 +51,8 @@ export interface OperationResultStoreType {
     getSize: () => number
     updateResultStatus: (
         id: number,
-        result: Partial<Pick<BulkOperationResultType, 'message'>> & (FailedOperationType | OtherStatusOperationType),
+        result: Partial<Pick<BulkOperationResultType, 'message' | 'renderContentAtResultRowEnd'>> &
+            (FailedOperationType | OtherStatusOperationType),
     ) => void
     getRetryOperations: () => FailedOperationType['retryOperation'][]
     hasAnyOperationFailed: () => boolean

src/Shared/Hooks/UseDownload/UseDownload.tsx

@@ -21,9 +21,9 @@ import { ServerErrors } from '@Common/ServerError'
 import { getFileNameFromHeaders } from '@Shared/Helpers'
 import { ToastManager, ToastVariantType } from '@Shared/Services'
 import { getDownloadResponse } from './service'
-import { HandleDownloadProps } from './types'
+import { UseDownloadReturnType } from './types'
 
-const useDownload = () => {
+const useDownload = (): UseDownloadReturnType => {
     const [isDownloading, setIsDownloading] = useState<boolean>(false)
 
     /**
@@ -33,13 +33,13 @@ const useDownload = () => {
      * @param showSuccessfulToast - show toast on successful download
      * @param downloadSuccessToastContent - Content to show in toast on successful download
      */
-    const handleDownload = async ({
+    const handleDownload: UseDownloadReturnType['handleDownload'] = async ({
         downloadUrl,
         showFilePreparingToast = false,
         fileName,
         showSuccessfulToast = true,
         downloadSuccessToastContent = 'Downloaded Successfully',
-    }: HandleDownloadProps): Promise<Error | ServerErrors> => {
+    }) => {
         setIsDownloading(true)
         try {
             const response = await getDownloadResponse(downloadUrl)

src/Shared/Hooks/UseDownload/types.tsx

@@ -14,10 +14,17 @@
  * limitations under the License.
  */
 
+import { ServerErrors } from '@Common/ServerError'
+
 export interface HandleDownloadProps {
     downloadUrl: string
     showFilePreparingToast?: boolean
     fileName?: string
     showSuccessfulToast?: boolean
     downloadSuccessToastContent?: string
 }
+
+export interface UseDownloadReturnType {
+    handleDownload: (props: HandleDownloadProps) => Promise<Error | ServerErrors>
+    isDownloading: boolean
+}