Merge branch 'main' into config-diff-navigation

Author: shivani170

package.json

@@ -121,7 +121,9 @@
         "workbox-window": "7.0.0",
         "workbox-core": "^7.0.0",
         "workbox-precaching": "^7.0.0",
-        "workbox-routing": "^7.0.0"
+        "workbox-routing": "^7.0.0",
+        "workbox-navigation-preload": "7.0.0",
+        "workbox-strategies": "7.0.0"
     },
     "jest": {
         "collectCoverageFrom": [

src/App.tsx

@@ -47,6 +47,8 @@ export default function App() {
     const updateToastRef = useRef(null)
     const [errorPage, setErrorPage] = useState<boolean>(false)
     const isOnline = useOnline()
+    const refreshing = useRef(false)
+    const [bgUpdated, setBGUpdated] = useState(false)
     const [validating, setValidating] = useState(true)
     const [approvalToken, setApprovalToken] = useState<string>('')
     const [approvalType, setApprovalType] = useState<APPROVAL_MODAL_TYPE>(APPROVAL_MODAL_TYPE.CONFIG)
@@ -129,7 +131,22 @@ export default function App() {
         }
     }
 
+    function handleControllerChange() {
+        if (refreshing.current) {
+            return
+        }
+        if (document.visibilityState === 'visible') {
+            window.location.reload()
+            refreshing.current = true
+        } else {
+            setBGUpdated(true)
+        }
+    }
+
     useEffect(() => {
+        if (navigator.serviceWorker) {
+            navigator.serviceWorker.addEventListener('controllerchange', handleControllerChange)
+        }
         // If not K8S_CLIENT then validateToken otherwise directly redirect
         if (!window._env_.K8S_CLIENT) {
             // By Passing validations for direct email approval notifications
@@ -142,6 +159,9 @@ export default function App() {
             setValidating(false)
             defaultRedirection()
         }
+        return () => {
+          navigator.serviceWorker.removeEventListener('controllerchange', handleControllerChange)
+        }
     }, [])
 
     const {
@@ -150,9 +170,20 @@ export default function App() {
     } = useRegisterSW({
         onRegisteredSW(swUrl, r) {
             console.log(`Service Worker at: ${swUrl}`)
-            if (r) {
-                r.update()
-            }
+            r &&
+                setInterval(async () => {
+                    if (!(!r.installing && navigator)) return
+                    if ('connection' in navigator && !navigator.onLine) return
+                    const resp = await fetch(swUrl, {
+                        cache: 'no-store',
+                        headers: {
+                            cache: 'no-store',
+                            'cache-control': 'no-cache',
+                        },
+                    })
+
+                    if (resp?.status === 200) await r.update()
+                }, 1000 * 60)
         },
         onRegisterError(error) {
             console.log('SW registration error', error)
@@ -169,10 +200,11 @@ export default function App() {
         if (window.isSecureContext && navigator.serviceWorker) {
             // check for sw updates on page change
             navigator.serviceWorker.getRegistrations().then((regs) => regs.forEach((reg) => reg.update()))
-            if (!needRefresh) {
-                return
+            if (needRefresh) {
+                update()
+            } else if (toast.isActive(updateToastRef.current)) {
+                toast.dismiss(updateToastRef.current)
             }
-            update()
         }
     }, [location])
 
@@ -200,6 +232,24 @@ export default function App() {
         }
     }, [needRefresh])
 
+    useEffect(() => {
+        if (!bgUpdated) {
+            return
+        }
+        const bgUpdatedToastBody = (
+            <UpdateToast
+                onClick={() => window.location.reload()}
+                text="This page has been updated. Please save any unsaved changes and refresh."
+                buttonText="Reload"
+            />
+        )
+        if (toast.isActive(updateToastRef.current)) {
+            toast.update(updateToastRef.current, { render: bgUpdatedToastBody })
+        } else {
+            updateToastRef.current = toast.info(bgUpdatedToastBody, { autoClose: false, closeButton: false })
+        }
+    }, [bgUpdated])
+
     return (
         <Suspense fallback={null}>
             {validating ? (

src/Pages/GlobalConfigurations/Authorization/authorization.service.ts

@@ -36,12 +36,16 @@ export const getUserById = async (userId: User['id']): Promise<User> => {
     }
 }
 
-export const createOrUpdateUser = (data: UserCreateOrUpdatePayload) => {
-    const isUpdate = !!data.id
+export const createOrUpdateUser = ({ emailId, ...data }: UserCreateOrUpdatePayload) => {
+    const _data: UserDto = {
+        ...data,
+        email_id: emailId,
+    }
+    const isUpdate = !!_data.id
     const options: APIOptions = {
         timeout: window._env_.CONFIGURABLE_TIMEOUT ? parseInt(window._env_.CONFIGURABLE_TIMEOUT, 10) : null,
     }
-    return isUpdate ? put(Routes.USER, data, options) : post(Routes.USER, data, options)
+    return isUpdate ? put(Routes.USER, _data, options) : post(Routes.USER, _data, options)
 }
 
 export const deleteUser = (userId: User['id']) => trash(`${Routes.USER}/${userId}`)
@@ -56,7 +60,9 @@ export const getUserList = async (
     try {
         const {
             result: { users, totalCount },
-        } = (await get(getUrlWithSearchParams(Routes.USER, queryParams ?? {}), { signal })) as ResponseType<{
+        } = (await get(getUrlWithSearchParams(`${Routes.USER}/${Routes.API_VERSION_V2}`, queryParams ?? {}), {
+            signal,
+        })) as ResponseType<{
             users: UserDto[]
             totalCount: number
         }>
@@ -103,7 +109,10 @@ export const getPermissionGroupList = async (
     try {
         const {
             result: { roleGroups: permissionGroups, totalCount },
-        } = (await get(getUrlWithSearchParams(Routes.USER_ROLE_GROUP, queryParams ?? {}), { signal })) as ResponseType<{
+        } = (await get(
+            getUrlWithSearchParams(`${Routes.USER_ROLE_GROUP}/${Routes.API_VERSION_V2}`, queryParams ?? {}),
+            { signal },
+        )) as ResponseType<{
             roleGroups: PermissionGroupDto[]
             totalCount: number
         }>

src/Pages/GlobalConfigurations/Authorization/types.ts

@@ -50,7 +50,7 @@ export interface UserDto {
     /**
      * Email of the user
      */
-    emailId: string
+    email_id: string
     /**
      * Status of the user
      *
@@ -87,14 +87,15 @@ export interface UserDto {
     roleGroups?: Pick<PermissionGroup, 'id' | 'name' | 'description'>
 }
 
-export interface User extends Omit<UserDto, 'timeoutWindowExpression'> {
+export interface User extends Omit<UserDto, 'timeoutWindowExpression' | 'email_id'> {
     /**
      * Time until which the user is active
      * Note: Only a user with status 'active' can have 'timeToLive'
      *
      * @default ''
      */
     timeToLive?: string
+    emailId: UserDto['email_id']
 }
 
 export type UserCreateOrUpdatePayload = Pick<

src/Pages/GlobalConfigurations/Authorization/utils.ts

@@ -5,10 +5,11 @@ import { PermissionGroup, User, UserDto } from './types'
 import { LAST_LOGIN_TIME_NULL_STATE } from './UserPermissions/constants'
 
 export const transformUserResponse = (_user: UserDto): User => {
-    const { lastLoginTime, timeoutWindowExpression, ...user } = _user
+    const { lastLoginTime, timeoutWindowExpression, email_id: emailId, ...user } = _user
 
     return {
         ...user,
+        emailId,
         lastLoginTime:
             lastLoginTime === ZERO_TIME_STRING || !lastLoginTime
                 ? LAST_LOGIN_TIME_NULL_STATE

src/prompt-sw.ts

@@ -0,0 +1,52 @@
+import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
+import { NavigationRoute, registerRoute, Route } from 'workbox-routing'
+import * as navigationPreload from 'workbox-navigation-preload'
+import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
+import { clientsClaim } from 'workbox-core'
+
+declare let self: ServiceWorkerGlobalScope
+
+self.addEventListener('message', (event) => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+        // eslint-disable-next-line no-void
+        void self.skipWaiting()
+    }
+})
+
+clientsClaim()
+
+// Precache the manifest
+precacheAndRoute(self.__WB_MANIFEST)
+
+// clean old assets
+cleanupOutdatedCaches()
+
+// Enable navigation preload
+navigationPreload.enable()
+
+// Create a new navigation route that uses the Network-first, falling back to
+// cache strategy for navigation requests with its own cache. This route will be
+// handled by navigation preload. The NetworkOnly strategy will work as well.
+const navigationRoute = new NavigationRoute(
+    new NetworkFirst({
+        cacheName: 'navigations',
+    }),
+)
+
+// Register the navigation route
+registerRoute(navigationRoute)
+
+// Create a route for image, script, or style requests that use a
+// stale-while-revalidate strategy. This route will be unaffected
+// by navigation preload.
+const staticAssetsRoute = new Route(
+    ({ request }) => {
+        return ['image', 'script', 'style'].includes(request.destination)
+    },
+    new StaleWhileRevalidate({
+        cacheName: 'static-assets',
+    }),
+)
+
+// Register the route handling static assets
+registerRoute(staticAssetsRoute)

src/service-worker.ts

@@ -62,7 +62,7 @@ export default defineConfig(({ mode }) => {
             }),
             VitePWA({
                 srcDir: 'src',
-                filename: 'prompt-sw.ts',
+                filename: 'service-worker.ts',
                 strategies: 'injectManifest',
             }),
         ],
@@ -95,11 +95,6 @@ export default defineConfig(({ mode }) => {
         baseConfig['define'] = {
             global: 'globalThis',
         }
-    // } else {
-    //     baseConfig['define'] = {
-    //         __BASE_URL__: '/dashboard/',
-    //         __ORCHESTRATOR_ROOT__: '/orchestrator',
-    //     }
     }
 
     return baseConfig