fix(scheduling): Stop counting published change requests in the badge

frontend/common/services/useChangeRequest.ts

@@ -69,6 +69,23 @@ export const changeRequestService = service
         }),
         transformResponse: (res, _, req) => transformCorePaging(req, res),
       }),
+      getScheduledChangeRequests: builder.query<
+        Res['changeRequests'],
+        Req['getScheduledChangeRequests']
+      >({
+        providesTags: [{ id: 'LIST', type: 'ChangeRequest' }],
+        // Read the time per request, so a refetch after a commit uses the current time
+        query: ({ environmentId, ...rest }) => ({
+          url: `environments/${environmentId}/list-change-requests/?${Utils.toParam(
+            {
+              ...rest,
+              committed: true,
+              live_from_after: new Date().toISOString(),
+            },
+          )}`,
+        }),
+        transformResponse: (res, _, req) => transformCorePaging(req, res),
+      }),
       updateChangeRequest: builder.mutation<
         Res['updateChangeRequest'],
         Req['updateChangeRequest']
@@ -112,6 +129,7 @@ export const {
   useCreateEnvironmentChangeRequestMutation,
   useDeleteChangeRequestMutation,
   useGetChangeRequestsQuery,
+  useGetScheduledChangeRequestsQuery,
   useUpdateChangeRequestMutation,
   // END OF EXPORTS
 } = changeRequestService

frontend/common/types/requests.ts

@@ -700,6 +700,9 @@ export type Req = {
     live_from_after?: string
     committed?: boolean
   }>
+  getScheduledChangeRequests: PagedRequest<{
+    environmentId: string
+  }>
   updateChangeRequest: ChangeRequest
   getGroupSummaries: {
     orgId: number

frontend/e2e/tests/change-request-test.pw.ts

@@ -121,6 +121,11 @@ test.describe('Change Request Tests', () => {
     log('Close modal')
     await closeModal()
 
+    log('Verify the Scheduling link has no badge')
+    await expect(page.getByRole('link', { name: 'Scheduling' })).toHaveText(
+      'Scheduling',
+    )
+
     log('Verify value has NOW changed (change request published)')
     await gotoFeatures()
     await page.reload({ waitUntil: 'domcontentloaded' })

frontend/web/components/navigation/navbars/EnvironmentNavbar.tsx

@@ -1,10 +1,13 @@
-import React, { FC, useRef } from 'react'
+import React, { FC } from 'react'
 import Utils from 'common/utils/utils'
 import Permission from 'common/providers/Permission'
 import classNames from 'classnames'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import SidebarLink from 'components/navigation/SidebarLink'
-import { useGetChangeRequestsQuery } from 'common/services/useChangeRequest'
+import {
+  useGetChangeRequestsQuery,
+  useGetScheduledChangeRequestsQuery,
+} from 'common/services/useChangeRequest'
 import { useExperimentationEnabled } from 'common/hooks/useExperimentationEnabled'
 
 type EnvironmentNavType = {
@@ -20,19 +23,15 @@ const EnvironmentNavbar: FC<EnvironmentNavType> = ({
   mobile,
   projectId,
 }) => {
-  const date = useRef(moment().toISOString())
-
   const { data: environments } = useGetEnvironmentsQuery(
     {
       projectId: `${projectId}`,
     },
     { skip: !projectId },
   )
 
-  const { data: scheduledData } = useGetChangeRequestsQuery({
-    committed: true,
+  const { data: scheduledData } = useGetScheduledChangeRequestsQuery({
     environmentId,
-    live_from_after: date.current,
     page_size: 1,
   })
 

frontend/web/components/pages/ScheduledChangesPage.tsx

@@ -1,6 +1,6 @@
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import moment from 'moment/moment'
-import { useGetChangeRequestsQuery } from 'common/services/useChangeRequest'
+import { useGetScheduledChangeRequestsQuery } from 'common/services/useChangeRequest'
 import { RouterChildContext } from 'react-router'
 import AccountStore from 'common/stores/account-store'
 import { ChangeRequestSummary, User } from 'common/types/responses'
@@ -37,16 +37,15 @@ const ScheduledChangesPage: FC<ScheduledChangesPageType> = ({ match }) => {
   const organisation = OrganisationStore.model as any
   const users = organisation?.users as User[]
 
-  const live_from_after = useMemo(() => {
-    return new Date().toISOString()
-  }, [])
-  const { data: dataScheduled, isLoading } = useGetChangeRequestsQuery({
-    committed: true,
-    environmentId,
-    live_from_after,
-    page,
-    page_size: 50,
-  })
+  const { data: dataScheduled, isLoading } = useGetScheduledChangeRequestsQuery(
+    {
+      environmentId,
+      page,
+      page_size: 50,
+    },
+    // Same args on every visit, so refetch to drop changes that went live meanwhile
+    { refetchOnMountOrArgChange: true },
+  )
   useEffect(() => {
     AppActions.getOrganisation(organisationId)
   }, [organisationId])