Applied configuration detail

src/common/hooks/use-api.js

@@ -10,6 +10,7 @@ export const getData = async (method, url, options) => {
     const { telemetrySpan, telemetryWebTracer, ...restOptions } = options
 
     if (telemetryWebTracer && telemetrySpan) {
+        console.log('TU')
         const singleSpan = telemetryWebTracer.startSpan(telemetrySpan)
 
         return context.with(
@@ -72,7 +73,7 @@ export const useStreamApi = (url, options = {}) => {
                 }
             })()
         },
-        [url, refreshIndex] // eslint-disable-line
+        [url, refreshIndex, requestActive] // eslint-disable-line
     )
 
     return {

src/common/hooks/useStreamVersionData.ts

@@ -0,0 +1,82 @@
+import { useEffect, useMemo, useState } from 'react'
+import chunk from 'lodash/chunk'
+
+import { withTelemetry } from '../services/opentelemetry'
+import { streamApi } from '../services'
+import { StreamApiReturnType } from '../types/API.types'
+
+type Options = {
+    chunkSize?: number
+    ids: { id: string; version: string }[]
+    requestActive?: boolean
+    telemetrySpan: string
+    unauthorizedCallback?: () => void
+    url: string
+}
+
+const defaultOptions: Partial<Options> = {
+    requestActive: true,
+    chunkSize: 50,
+}
+
+export const useStreamVersionData = <T>(options: Options): StreamApiReturnType<T> => {
+    const { url, ids, requestActive, chunkSize, unauthorizedCallback, telemetrySpan } = { ...defaultOptions, ...options }
+    const chunks = useMemo(() => chunk(ids, chunkSize), [ids, chunkSize])
+
+    const [state, setState] = useState<{
+        error: any
+        data: any
+        loading: boolean
+    }>({
+        error: null,
+        data: null,
+        loading: !!requestActive,
+    })
+    const [refreshIndex, setRefreshIndex] = useState(0)
+
+    useEffect(() => {
+        try {
+            if (requestActive) {
+                setState((prevState) => ({
+                    ...prevState,
+                    loading: true,
+                }))
+
+                Promise.all(
+                    chunks.map((ids) => {
+                        const versionFilter = ids.map((id) => `httpIdFilter=${id.id}/${id.version}`).join('&')
+                        return withTelemetry(
+                            () =>
+                                streamApi(`${url}?${versionFilter}`, {
+                                    method: 'GET',
+                                    unauthorizedCallback,
+                                }),
+                            `${telemetrySpan}-${versionFilter}`
+                        )
+                    })
+                ).then((dataChunks) => {
+                    setState((prevState) => ({
+                        ...prevState,
+                        data: dataChunks.map((dataChunk) => dataChunk.data).flat(),
+                        loading: false,
+                    }))
+                })
+            }
+        } catch (error) {
+            setState((prevState) => ({
+                ...prevState,
+                loading: false,
+                error,
+            }))
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [url, unauthorizedCallback, refreshIndex, requestActive])
+
+    return {
+        ...state,
+        updateData: (updatedData: any) => {
+            setState((prevState) => ({ ...prevState, data: updatedData }))
+        },
+        refresh: () => setRefreshIndex((prevState) => prevState + 1),
+    }
+}

src/common/types/API.types.ts

@@ -0,0 +1,7 @@
+export type StreamApiReturnType<T> = {
+    data: T | null
+    updateData: (data: T) => void
+    loading: boolean
+    error: string | null
+    refresh: () => void
+}

src/components/Atomic/TableNew/Table.tsx

@@ -196,7 +196,7 @@ const Table: FC<Props> = (props) => {
             const num = page.length < pageSize ? page.length : pageSize
 
             return {
-                height: num * rowHeight - HEADER_HEIGHT,
+                height: num * rowHeight + HEADER_HEIGHT,
             }
         }
     }

src/components/Organisms/ResourceToggleCreator/ResourceToggleCreator.tsx

@@ -24,7 +24,7 @@ import TimeoutControl from '../../Atomic/TimeoutControl'
 import IconArrowDetail from '../../Atomic/Icon/components/IconArrowDetail'
 
 const ResourceToggleCreator: FC<Props> = (props) => {
-    const { className, dataTestId, defaultOpen, i18n, readOnly, id, resourceData, onUpdate, responsive } = props
+    const { className, dataTestId, defaultOpen, i18n, readOnly, id, resourceData, onUpdate, responsive, statusTag } = props
 
     const [show, setShow] = useState(defaultOpen ?? false)
     const [touched, setTouched] = useState(false)
@@ -180,7 +180,10 @@ const ResourceToggleCreator: FC<Props> = (props) => {
     return (
         <div className={className} css={styles.creator} data-test-id={dataTestId} id={id}>
             <div css={styles.header} onClick={() => setShow(!show)}>
-                <div css={styles.title}>{resourceData.href || ''}</div>
+                <div css={styles.title}>
+                    {resourceData.href || ''}
+                    {statusTag && <Spacer type='ml-2'>{statusTag}</Spacer>}
+                </div>
                 <div css={styles.right}>
                     {isFunction(props.onDeleted) && (
                         <>

src/components/Organisms/ResourceToggleCreator/ResourceToggleCreator.types.ts

@@ -1,12 +1,20 @@
+import { ReactNode } from 'react'
+
 export type ResourceContentType = object | string | number | boolean
 
 export type ResourceType = {
     href: string
     timeToLive: string
     content: ResourceContentType
     resourceUpdated?: {
+        auditContext: {
+            correlationId: string
+            owner: string
+        }
         content: ResourceContentType
+        status: string
     }
+    status?: string
 }
 
 export type Props = {
@@ -40,4 +48,5 @@ export type Props = {
     readOnly?: boolean
     resourceData: ResourceType
     responsive?: boolean
+    statusTag?: ReactNode
 }