diff --git a/frontend/common/services/useChangeRequest.ts b/frontend/common/services/useChangeRequest.ts index 472965928441..905b86aa3866 100644 --- a/frontend/common/services/useChangeRequest.ts +++ b/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 diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts index a99864c3f2e8..860e21713e29 100644 --- a/frontend/common/types/requests.ts +++ b/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 diff --git a/frontend/e2e/tests/change-request-test.pw.ts b/frontend/e2e/tests/change-request-test.pw.ts index a4274d3b44b4..a010b9fbb930 100644 --- a/frontend/e2e/tests/change-request-test.pw.ts +++ b/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' }) diff --git a/frontend/web/components/navigation/navbars/EnvironmentNavbar.tsx b/frontend/web/components/navigation/navbars/EnvironmentNavbar.tsx index bd1a4022e13f..cd1e35e0fe40 100644 --- a/frontend/web/components/navigation/navbars/EnvironmentNavbar.tsx +++ b/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,8 +23,6 @@ const EnvironmentNavbar: FC = ({ mobile, projectId, }) => { - const date = useRef(moment().toISOString()) - const { data: environments } = useGetEnvironmentsQuery( { projectId: `${projectId}`, @@ -29,10 +30,8 @@ const EnvironmentNavbar: FC = ({ { skip: !projectId }, ) - const { data: scheduledData } = useGetChangeRequestsQuery({ - committed: true, + const { data: scheduledData } = useGetScheduledChangeRequestsQuery({ environmentId, - live_from_after: date.current, page_size: 1, }) diff --git a/frontend/web/components/pages/ScheduledChangesPage.tsx b/frontend/web/components/pages/ScheduledChangesPage.tsx index 9a4ea1a2c9a2..60100298c199 100644 --- a/frontend/web/components/pages/ScheduledChangesPage.tsx +++ b/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 = ({ 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])