diff --git a/.changeset/orange-vans-turn.md b/.changeset/orange-vans-turn.md new file mode 100644 index 0000000000..685847496e --- /dev/null +++ b/.changeset/orange-vans-turn.md @@ -0,0 +1,5 @@ +--- +"@commercetools-frontend/application-shell": patch +--- + +Remove usage of query to load menu feature toggles. diff --git a/@types-extensions/graphql-proxy/index.d.ts b/@types-extensions/graphql-proxy/index.d.ts index 19b56d7019..021f1cf201 100644 --- a/@types-extensions/graphql-proxy/index.d.ts +++ b/@types-extensions/graphql-proxy/index.d.ts @@ -1,14 +1,6 @@ /* THIS IS A GENERATED FILE */ /* eslint-disable import/no-duplicates */ -declare module '*/fetch-all-menu-feature-toggles.proxy.graphql' { - import { DocumentNode } from 'graphql'; - const defaultDocument: DocumentNode; - export const FetchAllMenuFeatureToggles: DocumentNode; - - export default defaultDocument; -} - declare module '*/fetch-applications-menu.proxy.graphql' { import { DocumentNode } from 'graphql'; const defaultDocument: DocumentNode; diff --git a/packages/application-shell/src/components/application-shell/application-shell.spec.js b/packages/application-shell/src/components/application-shell/application-shell.spec.js index 9c5ac3e61b..098d486b1e 100644 --- a/packages/application-shell/src/components/application-shell/application-shell.spec.js +++ b/packages/application-shell/src/components/application-shell/application-shell.spec.js @@ -191,11 +191,6 @@ const getDefaultMockResolvers = (mocks = {}) => { }) ) ), - graphql - .link(`${window.location.origin}/api/graphql`) - .query('FetchAllMenuFeatureToggles', (req, res, ctx) => - res(ctx.data({ allFeatureToggles: [] })) - ), ]; }; const mockServer = setupServer( @@ -1344,11 +1339,6 @@ describe('navbar menu links interactions', () => { }) ) ), - graphql - .link(`${window.location.origin}/api/graphql`) - .query('FetchAllMenuFeatureToggles', (req, res, ctx) => - res(ctx.data({ allFeatureToggles: [] })) - ), ...getDefaultMockResolvers() ); }); diff --git a/packages/application-shell/src/components/setup-flop-flip-provider/setup-flop-flip-provider.tsx b/packages/application-shell/src/components/setup-flop-flip-provider/setup-flop-flip-provider.tsx index 2ac9a45077..663e456d08 100644 --- a/packages/application-shell/src/components/setup-flop-flip-provider/setup-flop-flip-provider.tsx +++ b/packages/application-shell/src/components/setup-flop-flip-provider/setup-flop-flip-provider.tsx @@ -16,7 +16,6 @@ import { GRAPHQL_TARGETS, featureFlags, } from '@commercetools-frontend/constants'; -import useAllMenuFeatureToggles from '../../hooks/use-all-menu-feature-toggles'; import type { TAllFeaturesQuery, TFetchLoggedInUserQuery, @@ -122,7 +121,6 @@ export const SetupFlopFlipProvider = (props: TSetupFlopFlipProviderProps) => { TAdditionalEnvironmentProperties['enableLongLivedFeatureFlags'], TAdditionalEnvironmentProperties >((context) => context.environment.enableLongLivedFeatureFlags); - const allMenuFeatureToggles = useAllMenuFeatureToggles(); const flags = useMemo( () => ({ ...featureFlags.FLAGS, @@ -141,10 +139,9 @@ export const SetupFlopFlipProvider = (props: TSetupFlopFlipProviderProps) => { const defaultFlags = useMemo( () => ({ ...featureFlags.DEFAULT_FLAGS, - ...allMenuFeatureToggles.allFeatureToggles, ...props.defaultFlags, }), - [allMenuFeatureToggles.allFeatureToggles, props.defaultFlags] + [props.defaultFlags] ); const adapterArgs = useMemo( @@ -222,7 +219,7 @@ export const SetupFlopFlipProvider = (props: TSetupFlopFlipProviderProps) => { shouldDeferAdapterConfiguration={ typeof props.shouldDeferAdapterConfiguration === 'boolean' ? props.shouldDeferAdapterConfiguration - : !props.user || allMenuFeatureToggles.isLoading + : !props.user } > {props.children} diff --git a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/fetch-all-menu-feature-toggles.proxy.graphql b/packages/application-shell/src/hooks/use-all-menu-feature-toggles/fetch-all-menu-feature-toggles.proxy.graphql deleted file mode 100644 index be28e8981c..0000000000 --- a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/fetch-all-menu-feature-toggles.proxy.graphql +++ /dev/null @@ -1,3 +0,0 @@ -query FetchAllMenuFeatureToggles { - allFeatureToggles -} diff --git a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/index.ts b/packages/application-shell/src/hooks/use-all-menu-feature-toggles/index.ts deleted file mode 100644 index e3e1d8a2ad..0000000000 --- a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './use-all-menu-feature-toggles'; diff --git a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/use-all-menu-feature-toggles.spec.js b/packages/application-shell/src/hooks/use-all-menu-feature-toggles/use-all-menu-feature-toggles.spec.js deleted file mode 100644 index 18ba63ff8a..0000000000 --- a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/use-all-menu-feature-toggles.spec.js +++ /dev/null @@ -1,109 +0,0 @@ -import { reportErrorToSentry } from '@commercetools-frontend/sentry'; -import { screen, renderApp, waitFor } from '../../test-utils'; -import FetchAllMenuFeatureToggles from './fetch-all-menu-feature-toggles.proxy.graphql'; -import useAllMenuFeatureToggles from './use-all-menu-feature-toggles'; - -jest.mock('@commercetools-frontend/sentry'); - -const TestComponent = () => { - const { isLoading, allFeatureToggles } = useAllMenuFeatureToggles(); - - if (!isLoading) { - return ( - <> -

Number of toggles: {Object.keys(allFeatureToggles).length}

- - - ); - } - - return
{'Loading'}
; -}; - -const mockRequests = { - withoutError: { - request: { - query: FetchAllMenuFeatureToggles, - }, - result: { - data: { - allFeatureToggles: ['flagA', 'flagB'], - }, - }, - }, - withError: { - request: { - query: FetchAllMenuFeatureToggles, - }, - result: { - errors: [ - { - message: 'There has been an error.', - }, - ], - }, - }, -}; - -const render = ({ mocks, environment }) => - renderApp(, { - disableRoutePermissionCheck: true, - mocks, - environment, - }); - -describe('when served by proxy', () => { - describe('without error', () => { - it('should be loading and return any feature toggles', async () => { - render({ - environment: { - servedByProxy: true, - }, - mocks: [mockRequests.withoutError], - }); - - await screen.findByText('Loading'); - await screen.findByText(/Number of toggles: 2/i); - await screen.findByText(/Toggle: flagA is disabled/i); - await screen.findByText(/Toggle: flagB is disabled/i); - }); - }); - - describe('with error', () => { - it('should be loading and return no feature toggles and report to sentry', async () => { - render({ - environment: { - servedByProxy: true, - }, - mocks: [mockRequests.withError], - }); - - await screen.findByText('Loading'); - await screen.findByText(/Number of toggles: 0/i); - - await waitFor(() => { - expect(reportErrorToSentry).toHaveBeenCalled(); - }); - }); - }); -}); - -describe('when not served proxy', () => { - it('should not be loading and not return any feature toggles', async () => { - render({ - mocks: [mockRequests.withoutError], - }); - - expect(screen.queryByText('Loading')).not.toBeInTheDocument(); - - await screen.findByText(/Number of toggles: 0/i); - }); -}); diff --git a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/use-all-menu-feature-toggles.ts b/packages/application-shell/src/hooks/use-all-menu-feature-toggles/use-all-menu-feature-toggles.ts deleted file mode 100644 index aa3a5fa43f..0000000000 --- a/packages/application-shell/src/hooks/use-all-menu-feature-toggles/use-all-menu-feature-toggles.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { - useApplicationContext, - useMcQuery, -} from '@commercetools-frontend/application-shell-connectors'; -import { reportErrorToSentry } from '@commercetools-frontend/sentry'; -import useIsServedByProxy from '../../hooks/use-is-served-by-proxy'; -import type { - TFetchAllMenuFeatureTogglesQuery, - TFetchAllMenuFeatureTogglesQueryVariables, -} from '../../types/generated/proxy'; -import { FetchAllMenuFeatureToggles } from './fetch-all-menu-feature-toggles.proxy.graphql'; - -type TAdditionalEnvironmentProperties = { - mcProxyApiUrl?: string; -}; - -const defaultApiUrl = window.location.origin; - -const getDefaultedFeatureToggles = (allFeatureToggles: string[]) => - allFeatureToggles.reduce<{ [key: string]: boolean }>( - (previouslyDefaultedFeatureToggles, nextFeatureToggle) => ({ - ...previouslyDefaultedFeatureToggles, - [nextFeatureToggle]: false, - }), - {} - ); - -const useAllMenuFeatureToggles = () => { - const servedByProxy = useIsServedByProxy(); - const mcProxyApiUrl = useApplicationContext< - TAdditionalEnvironmentProperties['mcProxyApiUrl'], - TAdditionalEnvironmentProperties - >((applicationContext) => applicationContext.environment.mcProxyApiUrl); - - const { data, refetch, loading } = useMcQuery< - TFetchAllMenuFeatureTogglesQuery, - TFetchAllMenuFeatureTogglesQueryVariables - >(FetchAllMenuFeatureToggles, { - fetchPolicy: 'cache-and-network', - skip: !servedByProxy, - onError: reportErrorToSentry, - context: { - uri: `${mcProxyApiUrl || defaultApiUrl}/api/graphql`, - skipGraphQlTargetCheck: true, - }, - }); - - return { - isLoading: loading, - refetch, - allFeatureToggles: - (data && getDefaultedFeatureToggles(data.allFeatureToggles)) || {}, - }; -}; - -export default useAllMenuFeatureToggles; diff --git a/packages/application-shell/src/types/generated/proxy.ts b/packages/application-shell/src/types/generated/proxy.ts index 7b692c7ac4..946d83a9af 100644 --- a/packages/application-shell/src/types/generated/proxy.ts +++ b/packages/application-shell/src/types/generated/proxy.ts @@ -79,11 +79,8 @@ export type TQuery = { applicationsMenu: TApplicationsMenu; }; -export type TFetchAllMenuFeatureTogglesQueryVariables = Exact<{ [key: string]: never; }>; -export type TFetchAllMenuFeatureTogglesQuery = { __typename?: 'Query', allFeatureToggles: Array }; - export type TFetchApplicationsMenuQueryVariables = Exact<{ [key: string]: never; }>;