From 6e724eb13e363d9d242e1e2a2bfcf037da0d50d1 Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Fri, 10 May 2024 20:34:28 -0700 Subject: [PATCH 1/4] fixes #348 --- frontend/src/lib/constants.ts | 4 ++++ frontend/src/lib/hooks/api/schemas.ts | 2 ++ frontend/src/lib/hooks/api/topics.ts | 5 +++-- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts index 102b79faa..265f8288f 100644 --- a/frontend/src/lib/constants.ts +++ b/frontend/src/lib/constants.ts @@ -73,6 +73,10 @@ export const QUERY_REFETCH_OFF_OPTIONS = { refetchIntervalInBackground: false, }; +export const QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION = { + refetchOnWindowFocus: false, +}; + // Cluster Form Constants export const AUTH_OPTIONS = [ { value: 'SASL/JAAS', label: 'SASL/JAAS' }, diff --git a/frontend/src/lib/hooks/api/schemas.ts b/frontend/src/lib/hooks/api/schemas.ts index 7082d180a..fb4bf3169 100644 --- a/frontend/src/lib/hooks/api/schemas.ts +++ b/frontend/src/lib/hooks/api/schemas.ts @@ -5,6 +5,7 @@ import { SCHEMA_QUERY_KEY, SCHEMAS_VERSION_QUERY_KEY, } from 'lib/queries'; +import { QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION } from 'lib/constants'; import { CompatibilityLevel, GetAllVersionsBySubjectRequest, @@ -28,6 +29,7 @@ export function useGetLatestSchema(param: GetLatestSchemaRequest) { param.subject, ], queryFn: () => schemasApiClient.getLatestSchema(param), + ...QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION, }); } diff --git a/frontend/src/lib/hooks/api/topics.ts b/frontend/src/lib/hooks/api/topics.ts index b0aac312d..334d9ef62 100644 --- a/frontend/src/lib/hooks/api/topics.ts +++ b/frontend/src/lib/hooks/api/topics.ts @@ -21,6 +21,7 @@ import { TopicFormDataRaw, TopicFormFormattedParams, } from 'lib/interfaces/topic'; +import {QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION} from "../../constants"; export const topicKeys = { all: (clusterName: ClusterName) => @@ -50,10 +51,10 @@ export function useTopics(props: GetTopicsRequest) { ); } export function useTopicDetails(props: GetTopicDetailsRequest) { - return useQuery(topicKeys.details(props), () => api.getTopicDetails(props)); + return useQuery(topicKeys.details(props), () => api.getTopicDetails(props), QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION); } export function useTopicConfig(props: GetTopicDetailsRequest) { - return useQuery(topicKeys.config(props), () => api.getTopicConfigs(props)); + return useQuery(topicKeys.config(props), () => api.getTopicConfigs(props), QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION); } export function useTopicConsumerGroups(props: GetTopicDetailsRequest) { return useQuery(topicKeys.consumerGroups(props), () => From 355de5690d166060ec9e34785c32684b58239cce Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Fri, 10 May 2024 20:51:25 -0700 Subject: [PATCH 2/4] fix linting --- frontend/src/lib/hooks/api/topics.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/src/lib/hooks/api/topics.ts b/frontend/src/lib/hooks/api/topics.ts index 334d9ef62..e730b713c 100644 --- a/frontend/src/lib/hooks/api/topics.ts +++ b/frontend/src/lib/hooks/api/topics.ts @@ -21,7 +21,7 @@ import { TopicFormDataRaw, TopicFormFormattedParams, } from 'lib/interfaces/topic'; -import {QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION} from "../../constants"; +import { QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION } from 'lib/constants'; export const topicKeys = { all: (clusterName: ClusterName) => @@ -51,10 +51,18 @@ export function useTopics(props: GetTopicsRequest) { ); } export function useTopicDetails(props: GetTopicDetailsRequest) { - return useQuery(topicKeys.details(props), () => api.getTopicDetails(props), QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION); + return useQuery( + topicKeys.details(props), + () => api.getTopicDetails(props), + QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION + ); } export function useTopicConfig(props: GetTopicDetailsRequest) { - return useQuery(topicKeys.config(props), () => api.getTopicConfigs(props), QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION); + return useQuery( + topicKeys.config(props), + () => api.getTopicConfigs(props), + QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION + ); } export function useTopicConsumerGroups(props: GetTopicDetailsRequest) { return useQuery(topicKeys.consumerGroups(props), () => From 0151d932363187f4245c316100a7c0460e1ef617 Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Sat, 11 May 2024 13:38:29 -0700 Subject: [PATCH 3/4] make query opts optional parameter (#348) --- frontend/src/components/Schemas/Edit/Edit.tsx | 12 ++++-- .../src/components/Topics/Topic/Edit/Edit.tsx | 15 +++++-- frontend/src/lib/constants.ts | 3 +- .../lib/hooks/api/__tests__/schema.spec.ts | 11 ++++++ .../lib/hooks/api/__tests__/topics.spec.ts | 39 ++++++++++++++----- frontend/src/lib/hooks/api/schemas.ts | 10 +++-- frontend/src/lib/hooks/api/topics.ts | 27 +++++++++---- 7 files changed, 87 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/Schemas/Edit/Edit.tsx b/frontend/src/components/Schemas/Edit/Edit.tsx index 2e6892197..6e8c04230 100644 --- a/frontend/src/components/Schemas/Edit/Edit.tsx +++ b/frontend/src/components/Schemas/Edit/Edit.tsx @@ -4,6 +4,7 @@ import useAppParams from 'lib/hooks/useAppParams'; import PageLoader from 'components/common/PageLoader/PageLoader'; import { useNavigate } from 'react-router-dom'; import { useGetLatestSchema } from 'lib/hooks/api/schemas'; +import { QUERY_REFETCH_LIMITED_OPTIONS } from 'lib/constants'; import Form from './Form'; @@ -14,10 +15,13 @@ const Edit: React.FC = () => { isFetching, isError, data: schema, - } = useGetLatestSchema({ - clusterName, - subject, - }); + } = useGetLatestSchema( + { + clusterName, + subject, + }, + QUERY_REFETCH_LIMITED_OPTIONS + ); useEffect(() => { if (isError) { diff --git a/frontend/src/components/Topics/Topic/Edit/Edit.tsx b/frontend/src/components/Topics/Topic/Edit/Edit.tsx index 598ac5982..1d02bd598 100644 --- a/frontend/src/components/Topics/Topic/Edit/Edit.tsx +++ b/frontend/src/components/Topics/Topic/Edit/Edit.tsx @@ -7,7 +7,10 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { topicFormValidationSchema } from 'lib/yupExtended'; import useAppParams from 'lib/hooks/useAppParams'; import topicParamsTransformer from 'components/Topics/Topic/Edit/topicParamsTransformer'; -import { MILLISECONDS_IN_WEEK } from 'lib/constants'; +import { + MILLISECONDS_IN_WEEK, + QUERY_REFETCH_LIMITED_OPTIONS, +} from 'lib/constants'; import { useTopicConfig, useTopicDetails, @@ -30,8 +33,14 @@ export const TOPIC_EDIT_FORM_DEFAULT_PROPS = { const Edit: React.FC = () => { const { clusterName, topicName } = useAppParams(); - const { data: topic } = useTopicDetails({ clusterName, topicName }); - const { data: topicConfig } = useTopicConfig({ clusterName, topicName }); + const { data: topic } = useTopicDetails( + { clusterName, topicName }, + QUERY_REFETCH_LIMITED_OPTIONS + ); + const { data: topicConfig } = useTopicConfig( + { clusterName, topicName }, + QUERY_REFETCH_LIMITED_OPTIONS + ); const updateTopic = useUpdateTopic({ clusterName, topicName }); const defaultValues = topicParamsTransformer(topic, topicConfig); diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts index 265f8288f..65ab24ee4 100644 --- a/frontend/src/lib/constants.ts +++ b/frontend/src/lib/constants.ts @@ -73,8 +73,9 @@ export const QUERY_REFETCH_OFF_OPTIONS = { refetchIntervalInBackground: false, }; -export const QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION = { +export const QUERY_REFETCH_LIMITED_OPTIONS = { refetchOnWindowFocus: false, + refetchIntervalInBackground: false, }; // Cluster Form Constants diff --git a/frontend/src/lib/hooks/api/__tests__/schema.spec.ts b/frontend/src/lib/hooks/api/__tests__/schema.spec.ts index eea7c94b8..7dbfc8700 100644 --- a/frontend/src/lib/hooks/api/__tests__/schema.spec.ts +++ b/frontend/src/lib/hooks/api/__tests__/schema.spec.ts @@ -5,6 +5,7 @@ import { } from 'lib/testHelpers'; import fetchMock from 'fetch-mock'; import * as hooks from 'lib/hooks/api/schemas'; +import { QUERY_REFETCH_LIMITED_OPTIONS } from 'lib/constants'; import { act } from 'react-dom/test-utils'; import { renderHook, waitFor } from '@testing-library/react'; import { CompatibilityLevelCompatibilityEnum } from 'generated-sources'; @@ -47,6 +48,16 @@ describe('Schema hooks', () => { ); await expectQueryWorks(mock, result); }); + it('returns the correct data with queryOptions', async () => { + const mock = fetchMock.getOnce(schemasAPILatestUrl, schemaVersion); + const { result } = renderQueryHook(() => + hooks.useGetLatestSchema( + { clusterName, subject }, + QUERY_REFETCH_LIMITED_OPTIONS + ) + ); + await expectQueryWorks(mock, result); + }); }); describe('useGetSchemasVersions', () => { diff --git a/frontend/src/lib/hooks/api/__tests__/topics.spec.ts b/frontend/src/lib/hooks/api/__tests__/topics.spec.ts index 6007f3356..1d166aa8a 100644 --- a/frontend/src/lib/hooks/api/__tests__/topics.spec.ts +++ b/frontend/src/lib/hooks/api/__tests__/topics.spec.ts @@ -9,6 +9,7 @@ import fetchMock from 'fetch-mock'; import { externalTopicPayload, topicConfigPayload } from 'lib/fixtures/topics'; import { CreateTopicMessage } from 'generated-sources'; import { TopicFormData, TopicFormDataRaw } from 'lib/interfaces/topic'; +import { QUERY_REFETCH_LIMITED_OPTIONS } from 'lib/constants'; const clusterName = 'test-cluster'; const topicName = 'test-topic'; @@ -30,17 +31,35 @@ describe('Topics hooks', () => { const { result } = renderQueryHook(() => hooks.useTopics({ clusterName })); await expectQueryWorks(mock, result); }); - it('handles useTopicDetails', async () => { - const mock = fetchMock.getOnce(topicPath, externalTopicPayload); - const { result } = renderQueryHook(() => - hooks.useTopicDetails(topicParams) - ); - await expectQueryWorks(mock, result); + describe('useTopicDetails', () => { + it('handles useTopicDetails', async () => { + const mock = fetchMock.getOnce(topicPath, externalTopicPayload); + const { result } = renderQueryHook(() => + hooks.useTopicDetails(topicParams) + ); + await expectQueryWorks(mock, result); + }); + it('handles useTopicDetails with queryOptions', async () => { + const mock = fetchMock.getOnce(topicPath, externalTopicPayload); + const { result } = renderQueryHook(() => + hooks.useTopicDetails(topicParams, QUERY_REFETCH_LIMITED_OPTIONS) + ); + await expectQueryWorks(mock, result); + }); }); - it('handles useTopicConfig', async () => { - const mock = fetchMock.getOnce(`${topicPath}/config`, topicConfigPayload); - const { result } = renderQueryHook(() => hooks.useTopicConfig(topicParams)); - await expectQueryWorks(mock, result); + describe('useTopicConfig', () => { + it('handles useTopicConfig', async () => { + const mock = fetchMock.getOnce(`${topicPath}/config`, topicConfigPayload); + const { result } = renderQueryHook(() => hooks.useTopicConfig(topicParams)); + await expectQueryWorks(mock, result); + }); + it('handles useTopicConfig with queryOptions', async () => { + const mock = fetchMock.getOnce(`${topicPath}/config`, topicConfigPayload); + const { result } = renderQueryHook(() => + hooks.useTopicConfig(topicParams, QUERY_REFETCH_LIMITED_OPTIONS) + ); + await expectQueryWorks(mock, result); + }); }); it('handles useTopicConsumerGroups', async () => { const mock = fetchMock.getOnce(`${topicPath}/consumer-groups`, []); diff --git a/frontend/src/lib/hooks/api/schemas.ts b/frontend/src/lib/hooks/api/schemas.ts index fb4bf3169..1459492c3 100644 --- a/frontend/src/lib/hooks/api/schemas.ts +++ b/frontend/src/lib/hooks/api/schemas.ts @@ -1,11 +1,10 @@ -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import {useMutation, useQuery, useQueryClient, UseQueryOptions} from '@tanstack/react-query'; import { GLOBAL_COMPATIBILITY_SCHEMAS_QUERY_KEY, LATEST_SCHEMA_QUERY_KEY, SCHEMA_QUERY_KEY, SCHEMAS_VERSION_QUERY_KEY, } from 'lib/queries'; -import { QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION } from 'lib/constants'; import { CompatibilityLevel, GetAllVersionsBySubjectRequest, @@ -20,7 +19,10 @@ import { import { schemasApiClient } from 'lib/api'; import { ClusterName } from 'lib/interfaces/cluster'; -export function useGetLatestSchema(param: GetLatestSchemaRequest) { +export function useGetLatestSchema( + param: GetLatestSchemaRequest, + options?: UseQueryOptions +) { return useQuery({ queryKey: [ SCHEMA_QUERY_KEY, @@ -29,7 +31,7 @@ export function useGetLatestSchema(param: GetLatestSchemaRequest) { param.subject, ], queryFn: () => schemasApiClient.getLatestSchema(param), - ...QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION, + ...options, }); } diff --git a/frontend/src/lib/hooks/api/topics.ts b/frontend/src/lib/hooks/api/topics.ts index e730b713c..fb05ee219 100644 --- a/frontend/src/lib/hooks/api/topics.ts +++ b/frontend/src/lib/hooks/api/topics.ts @@ -4,7 +4,12 @@ import { consumerGroupsApiClient, messagesApiClient, } from 'lib/api'; -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { + useMutation, + useQuery, + useQueryClient, + UseQueryOptions, +} from '@tanstack/react-query'; import { CreateTopicMessage, GetTopicDetailsRequest, @@ -12,6 +17,7 @@ import { Topic, TopicConfig, TopicCreation, + TopicDetails, TopicUpdate, } from 'generated-sources'; import { showServerError, showSuccessAlert } from 'lib/errorHandling'; @@ -21,7 +27,6 @@ import { TopicFormDataRaw, TopicFormFormattedParams, } from 'lib/interfaces/topic'; -import { QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION } from 'lib/constants'; export const topicKeys = { all: (clusterName: ClusterName) => @@ -50,18 +55,24 @@ export function useTopics(props: GetTopicsRequest) { { keepPreviousData: true } ); } -export function useTopicDetails(props: GetTopicDetailsRequest) { - return useQuery( +export function useTopicDetails( + props: GetTopicDetailsRequest, + queryOptions?: UseQueryOptions +) { + return useQuery( topicKeys.details(props), () => api.getTopicDetails(props), - QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION + queryOptions ); } -export function useTopicConfig(props: GetTopicDetailsRequest) { - return useQuery( +export function useTopicConfig( + props: GetTopicDetailsRequest, + queryOptions?: UseQueryOptions +) { + return useQuery( topicKeys.config(props), () => api.getTopicConfigs(props), - QUERY_REFETCH_ON_WINDOW_FOCUS_OFF_OPTION + queryOptions ); } export function useTopicConsumerGroups(props: GetTopicDetailsRequest) { From 8b563f1c106a23c62dda23d5a57732405164570a Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Sat, 11 May 2024 13:51:51 -0700 Subject: [PATCH 4/4] fix linting (#348) --- frontend/src/lib/hooks/api/__tests__/topics.spec.ts | 4 +++- frontend/src/lib/hooks/api/schemas.ts | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/hooks/api/__tests__/topics.spec.ts b/frontend/src/lib/hooks/api/__tests__/topics.spec.ts index 1d166aa8a..9085014fd 100644 --- a/frontend/src/lib/hooks/api/__tests__/topics.spec.ts +++ b/frontend/src/lib/hooks/api/__tests__/topics.spec.ts @@ -50,7 +50,9 @@ describe('Topics hooks', () => { describe('useTopicConfig', () => { it('handles useTopicConfig', async () => { const mock = fetchMock.getOnce(`${topicPath}/config`, topicConfigPayload); - const { result } = renderQueryHook(() => hooks.useTopicConfig(topicParams)); + const { result } = renderQueryHook(() => + hooks.useTopicConfig(topicParams) + ); await expectQueryWorks(mock, result); }); it('handles useTopicConfig with queryOptions', async () => { diff --git a/frontend/src/lib/hooks/api/schemas.ts b/frontend/src/lib/hooks/api/schemas.ts index 1459492c3..aeb1ed9a6 100644 --- a/frontend/src/lib/hooks/api/schemas.ts +++ b/frontend/src/lib/hooks/api/schemas.ts @@ -1,4 +1,9 @@ -import {useMutation, useQuery, useQueryClient, UseQueryOptions} from '@tanstack/react-query'; +import { + useMutation, + useQuery, + useQueryClient, + UseQueryOptions, +} from '@tanstack/react-query'; import { GLOBAL_COMPATIBILITY_SCHEMAS_QUERY_KEY, LATEST_SCHEMA_QUERY_KEY,