Merge pull request #404 from devtron-labs/refactor/rb-tabs

refactor: resource browser tabs clean up and add abortControllerRef in fetchInTime

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -192,22 +192,33 @@ function fetchInTime<T = object>(
     options?: APIOptions,
     isMultipartRequest?: boolean,
 ): Promise<ResponseType> {
-    const controller = new AbortController()
-    const { signal } = controller
+    const controller = options?.abortControllerRef?.current ?? new AbortController()
+    const signal = options?.abortControllerRef?.current?.signal || options?.signal || controller.signal
     const timeoutPromise: Promise<ResponseType> = new Promise((resolve, reject) => {
         const requestTimeout = (window as any)?._env_?.GLOBAL_API_TIMEOUT || FALLBACK_REQUEST_TIMEOUT
         const timeout = options?.timeout ? options.timeout : requestTimeout
 
         setTimeout(() => {
             controller.abort()
+            if (options?.abortControllerRef?.current) {
+                options.abortControllerRef.current = new AbortController()
+            }
+
             reject({
                 code: 408,
                 errors: [{ code: 408, internalMessage: 'Request cancelled', userMessage: 'Request Cancelled' }],
             })
         }, timeout)
     })
     return Promise.race([
-        fetchAPI(url, type, data, options?.signal || signal, options?.preventAutoLogout || false, isMultipartRequest),
+        fetchAPI(
+            url,
+            type,
+            data,
+            signal,
+            options?.preventAutoLogout || false,
+            isMultipartRequest,
+        ),
         timeoutPromise,
     ]).catch((err) => {
         if (err instanceof ServerErrors) {

src/Common/Api.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, CSSProperties, ReactElement } from 'react'
+import React, { ReactNode, CSSProperties, ReactElement, MutableRefObject } from 'react'
 import { Placement } from 'tippy.js'
 import { UserGroupDTO } from '@Pages/GlobalConfigurations'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
@@ -50,7 +50,11 @@ export interface ResponseType<T = any> {
 
 export interface APIOptions {
     timeout?: number
+    /**
+     * @deprecated Use abortController instead
+     */
     signal?: AbortSignal
+    abortControllerRef?: MutableRefObject<AbortController>
     preventAutoLogout?: boolean
 }
 
@@ -1007,4 +1011,4 @@ export interface WidgetEventDetails {
     count: number
     age: string
     lastSeen: string
-}
+}

src/Common/Types.ts

@@ -748,36 +748,108 @@ export interface CustomRoleAndMeta {
 }
 
 interface CommonTabArgsType {
+    /**
+     * Name for the tab.
+     *
+     * Note: Used for the title
+     */
     name: string
     kind?: string
+    /**
+     * URL for the tab
+     */
     url: string
+    /**
+     * If true, the tab is selected
+     */
     isSelected: boolean
+    /**
+     * Title for the tab
+     */
     title?: string
     isDeleted?: boolean
-    position: number
+    /**
+     * Type for the tab
+     *
+     * Note: Fixed tabs are always places before dynamic tabs
+     */
+    type: 'fixed' | 'dynamic'
+    /**
+     * Path of the icon for the tab
+     *
+     * @default ''
+     */
     iconPath?: string
+    /**
+     * Dynamic title for the tab
+     *
+     * @default ''
+     */
     dynamicTitle?: string
+    /**
+     * Whether to show the tab name when selected
+     *
+     * @default false
+     */
     showNameOnSelect?: boolean
     /**
+     * Would remove the title/name from tab heading, but that does not mean name is not required, since it is used in other calculations
      * @default false
      */
     hideName?: boolean
+    /**
+     * Indicates if showNameOnSelect tabs have been selected once
+     *
+     * @default false
+     */
     isAlive?: boolean
     lastSyncMoment?: Dayjs
     componentKey?: string
+    /**
+     * Custom tippy config for the tab
+     *
+     * This overrides the tippy being computed from tab title
+     */
     tippyConfig?: {
         title: string
         descriptions: {
             info: string
             value: string
         }[]
     }
-}
-
-export interface InitTabType extends CommonTabArgsType {
-    idPrefix: string
-}
+    /**
+     * If true, the fixed tab remains mounted on initial load of the component
+     *
+     * Note: Not for dynamic tabs atm
+     *
+     * @default false
+     */
+    shouldRemainMounted?: boolean
+}
+
+export type InitTabType = Omit<CommonTabArgsType, 'type'> &
+    (
+        | {
+              type: 'fixed'
+              /**
+               * Unique identifier for the fixed tab
+               *
+               * Note: Shouldn't contain '-'
+               */
+              id: string
+              idPrefix?: never
+          }
+        | {
+              type: 'dynamic'
+              id?: never
+              idPrefix: string
+          }
+    )
 
 export interface DynamicTabType extends CommonTabArgsType {
     id: string
+    /**
+     * Id of the last active tab before switching to current tab
+     */
+    lastActiveTabId: string | null
 }