fix: reduce amount of "links" requests by calling the env-scoped endpoint

libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts

@@ -84,6 +84,13 @@ export const environments = createQueryKeys('environments', {
       return result.data.results ?? []
     },
   }),
+  listLinks: ({ environmentId }: { environmentId: string }) => ({
+    queryKey: [environmentId],
+    async queryFn() {
+      const result = await environmentApi.listEnvironmentServicesLinks(environmentId)
+      return result.data.results ?? []
+    },
+  }),
   list: ({ projectId }: { projectId: string }) => ({
     queryKey: [projectId],
     async queryFn() {

libs/domains/services/feature/src/index.ts

@@ -17,6 +17,7 @@ export * from './lib/hooks/use-deployment-restrictions/use-deployment-restrictio
 export * from './lib/hooks/use-deployment-status/use-deployment-status'
 export * from './lib/hooks/use-edit-deployment-restriction/use-edit-deployment-restriction'
 export * from './lib/hooks/use-links/use-links'
+export * from './lib/hooks/use-env-links/use-env-links'
 export * from './lib/hooks/use-list-statuses/use-list-statuses'
 export * from './lib/hooks/use-running-status/use-running-status'
 export * from './lib/hooks/use-service-statuses/use-service-statuses'

libs/domains/services/feature/src/lib/hooks/use-env-links/use-env-links.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface useEnvironmentLinksProps {
+  environmentId: string
+  enabled?: boolean
+}
+
+export function useEnvironmentLinks({ environmentId, enabled = true }: useEnvironmentLinksProps) {
+  return useQuery({
+    ...queries.environments.listLinks({
+      environmentId,
+    }),
+    enabled,
+  })
+}

libs/domains/services/feature/src/lib/service-links-popover/service-links-popover.spec.tsx

@@ -12,10 +12,10 @@ jest.mock('../hooks/use-service-type/use-service-type', () => {
 
 const mockUseLinks = jest.fn()
 
-jest.mock('../hooks/use-links/use-links', () => {
+jest.mock('../hooks/use-env-links/use-env-links', () => {
   return {
-    ...jest.requireActual('../hooks/use-links/use-links'),
-    useLinks: () => mockUseLinks(),
+    ...jest.requireActual('../hooks/use-env-links/use-env-links'),
+    useEnvironmentLinks: () => mockUseLinks(),
   }
 })
 

libs/domains/services/feature/src/lib/service-links-popover/service-links-popover.tsx

@@ -12,7 +12,7 @@ import {
   Truncate,
 } from '@qovery/shared/ui'
 import { pluralize } from '@qovery/shared/util-js'
-import { useLinks } from '../hooks/use-links/use-links'
+import { useEnvironmentLinks } from '../hooks/use-env-links/use-env-links'
 import { useServiceType } from '../hooks/use-service-type/use-service-type'
 
 export interface ServiceLinksPopoverProps extends Pick<PopoverContentProps, 'align' | 'side'> {
@@ -33,7 +33,7 @@ export function ServiceLinksPopover({
   side = 'bottom',
 }: ServiceLinksPopoverProps) {
   const { data: serviceType } = useServiceType({ environmentId, serviceId })
-  const { data: links = [] } = useLinks({ serviceId, serviceType })
+  const { data: links = [] } = useEnvironmentLinks({ environmentId })
 
   // Remove default Qovery links
   const filteredLinks = useMemo(

libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ServiceList should match snapshot 1`] = `
 <div>
@@ -244,7 +244,7 @@ exports[`ServiceList should match snapshot 1`] = `
                       aria-controls="radix-:r25:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 ml-3"
+                      class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 hidden ml-3"
                       data-state="closed"
                       type="button"
                     >
@@ -596,7 +596,7 @@ exports[`ServiceList should match snapshot 1`] = `
                       aria-controls="radix-:r2f:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 ml-3"
+                      class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 hidden ml-3"
                       data-state="closed"
                       type="button"
                     >
@@ -1246,7 +1246,7 @@ exports[`ServiceList should match snapshot 1`] = `
                       aria-controls="radix-:r2q:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 ml-3"
+                      class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 hidden ml-3"
                       data-state="closed"
                       type="button"
                     >
@@ -1693,7 +1693,7 @@ exports[`ServiceList should match snapshot 1`] = `
                       aria-controls="radix-:r35:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 ml-3"
+                      class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 hidden ml-3"
                       data-state="closed"
                       type="button"
                     >