Integrate a feature flag in the CustomViewsSelector component (#3282)

* refactor(application-components): adjusts tests

* refactor(application-components): adjusts tests

* refactor(application-shell): remove unnecessary mock for custom views

* chore: changesets added

.changeset/nine-pears-brush.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': minor
+---
+
+Update `CustomViewsSelector` component to be aware of the feature flags we will be using to roll out the custom views feature.

.changeset/six-jars-admire.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-shell': minor
+'@commercetools-frontend/constants': minor
+---
+
+Moved feature flags constants from `@commercetools-frontend/application-components` package to `@commercetools-frontend/constants` one.

packages/application-components/package.json

@@ -54,6 +54,7 @@
     "@commercetools-uikit/utils": "^16.7.3",
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
+    "@flopflip/react-broadcast": "13.1.5",
     "@react-hook/latest": "1.0.3",
     "@react-hook/resize-observer": "1.2.6",
     "@types/history": "^4.7.11",

packages/application-components/src/components/custom-views/custom-views-selector/use-custom-views-connector.ts

@@ -1,7 +1,9 @@
+import { useFeatureToggle } from '@flopflip/react-broadcast';
 import { useMcQuery } from '@commercetools-frontend/application-shell-connectors';
 import {
   CustomViewData,
   GRAPHQL_TARGETS,
+  featureFlags,
 } from '@commercetools-frontend/constants';
 import {
   TFetchCustomViewsByLocatorQuery,
@@ -21,6 +23,10 @@ type TUseCustomViewsFetcher = (props: TUseCustomViewsFetcherParams) => {
 export const useCustomViewsConnector: TUseCustomViewsFetcher = ({
   customViewLocatorCode,
 }) => {
+  const areCustomViewsEnabled =
+    useFeatureToggle(featureFlags.CUSTOM_VIEWS) &&
+    process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
+
   const { data, error, loading } = useMcQuery<
     TFetchCustomViewsByLocatorQuery,
     TFetchCustomViewsByLocatorQueryVariables
@@ -31,6 +37,7 @@ export const useCustomViewsConnector: TUseCustomViewsFetcher = ({
     context: {
       target: GRAPHQL_TARGETS.SETTINGS_SERVICE,
     },
+    skip: !areCustomViewsEnabled,
   });
 
   return {

packages/application-components/src/test-utils/test-utils.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { ApolloClient, type NormalizedCacheObject } from '@apollo/client';
 import { ApolloProvider } from '@apollo/client/react';
+import { TestProviderFlopFlip } from '@flopflip/react-broadcast';
 import type { RenderOptions } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import { createMemoryHistory, type MemoryHistory } from 'history';
@@ -11,6 +12,7 @@ import {
   ApplicationContextProvider,
   type TApplicationContext,
 } from '@commercetools-frontend/application-shell-connectors';
+import { featureFlags } from '@commercetools-frontend/constants';
 import type { TProjectGraphql } from '../../../../test-data/project';
 import * as ProjectMock from '../../../../test-data/project';
 
@@ -51,21 +53,26 @@ const customRender = (
   }: Partial<CustomRenderOptions> = {}
 ) => {
   const client = apolloClient ?? createApolloClient();
+  const flags = {
+    [featureFlags.CUSTOM_VIEWS]: true,
+  };
 
   return {
     ...render(
-      <ApolloProvider client={client}>
-        <ApplicationContextProvider
-          environment={environment}
-          project={ProjectMock.random()
-            .key(projectKey)
-            .buildGraphql<TProjectGraphql>()}
-        >
-          <IntlProvider locale={locale}>
-            <Router history={history}>{node}</Router>
-          </IntlProvider>
-        </ApplicationContextProvider>
-      </ApolloProvider>,
+      <TestProviderFlopFlip flags={flags}>
+        <ApolloProvider client={client}>
+          <ApplicationContextProvider
+            environment={environment}
+            project={ProjectMock.random()
+              .key(projectKey)
+              .buildGraphql<TProjectGraphql>()}
+          >
+            <IntlProvider locale={locale}>
+              <Router history={history}>{node}</Router>
+            </IntlProvider>
+          </ApplicationContextProvider>
+        </ApolloProvider>
+      </TestProviderFlopFlip>,
       rtlOptions
     ),
     // adding `history` to the returned utilities to allow us

packages/application-shell/src/components/application-shell/application-shell.spec.js

@@ -21,6 +21,7 @@ import {
   SHOW_LOADING,
   HIDE_LOADING,
   STORAGE_KEYS,
+  featureFlags,
 } from '@commercetools-frontend/constants';
 import { useIsAuthorized } from '@commercetools-frontend/permissions';
 import {

packages/application-shell/src/components/setup-flop-flip-provider/setup-flop-flip-provider.tsx

@@ -6,8 +6,10 @@ import ldAdapter from '@flopflip/launchdarkly-adapter';
 import { ConfigureFlopFlip } from '@flopflip/react-broadcast';
 import type { TFlags } from '@flopflip/types';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { FLAGS } from '../../feature-toggles';
+import {
+  GRAPHQL_TARGETS,
+  featureFlags,
+} from '@commercetools-frontend/constants';
 import useAllMenuFeatureToggles from '../../hooks/use-all-menu-feature-toggles';
 import type {
   TAllFeaturesQuery,
@@ -97,7 +99,7 @@ export const SetupFlopFlipProvider = (props: TSetupFlopFlipProviderProps) => {
   const allMenuFeatureToggles = useAllMenuFeatureToggles();
   const flags = useMemo(
     () => ({
-      ...FLAGS,
+      ...featureFlags.FLAGS,
       ...allMenuFeatureToggles.allFeatureToggles,
       ...props.flags,
     }),
@@ -113,7 +115,7 @@ export const SetupFlopFlipProvider = (props: TSetupFlopFlipProviderProps) => {
 
   const defaultFlags = useMemo(
     () => ({
-      ...FLAGS,
+      ...featureFlags.FLAGS,
       ...allMenuFeatureToggles.allFeatureToggles,
       ...props.defaultFlags,
     }),

packages/application-shell/src/feature-toggles.ts → packages/constants/src/feature-toggles.ts

@@ -17,4 +17,8 @@
  *   them to off until fetched).
  */
 
-export const FLAGS = {};
+export const CUSTOM_VIEWS = 'enableCustomViews';
+
+export const FLAGS = {
+  [CUSTOM_VIEWS]: false,
+};

packages/constants/src/index.ts

@@ -1,3 +1,5 @@
 export { default as version } from './version';
 
 export * from './constants';
+
+export * as featureFlags from './feature-toggles';

playground/package.json

@@ -45,6 +45,7 @@
     "@commercetools-uikit/spacings": "16.7.3",
     "@commercetools-uikit/text": "16.7.3",
     "@emotion/react": "11.11.0",
+    "@flopflip/react-broadcast": "13.1.5",
     "apollo-link-rest": "^0.9.0",
     "graphql": "16.8.1",
     "graphql-anywhere": "^4.2.8",

playground/src/components/custom-views/custom-panel-demo.jsx

@@ -24,7 +24,7 @@ function CustomPanelDemo() {
   return (
     <InfoMainPage
       title="Custom Views - Custom Panel"
-      customViewLocatorCode="products.product_details.general"
+      customViewLocatorCode="products.product_variant_details.images"
       onPreviousPathClick={() => false}
     >
       <Spacings.Stack scale="m">

playground/src/components/notifications-playground/notifications-playground.jsx

@@ -84,7 +84,7 @@ const NotificationsPlayground = (props) => {
           <InfoModalPage
             isOpen
             title={`Modal page ${props.level}`}
-            customViewLocatorCode="products.product_details.variants"
+            customViewLocatorCode="products.product_details.general"
             onClose={() => {
               history.push(route.url);
             }}

playground/src/components/state-machines-list/state-machines-list.jsx

@@ -92,7 +92,7 @@ const StateMachinesList = (props) => {
   return (
     <InfoMainPage
       title={intl.formatMessage(messages.title)}
-      customViewLocatorCode="products.product_details.variants"
+      customViewLocatorCode="products.product_details.general"
     >
       <Spacings.Stack scale="m">
         {loading && <LoadingSpinner />}

playground/src/test-utils/index.js

@@ -1,5 +1,6 @@
 import { createApolloClient } from '@commercetools-frontend/application-shell';
 import { renderAppWithRedux } from '@commercetools-frontend/application-shell/test-utils';
+import { featureFlags } from '@commercetools-frontend/constants';
 import { entryPointUriPath } from '../constants';
 
 const mergeWithDefaultOptions = (options = {}) => ({
@@ -12,6 +13,14 @@ const mergeWithDefaultOptions = (options = {}) => ({
 });
 
 const renderApplicationWithRedux = (ui, options = {}) =>
-  renderAppWithRedux(ui, mergeWithDefaultOptions(options));
+  renderAppWithRedux(
+    ui,
+    mergeWithDefaultOptions({
+      ...options,
+      flags: {
+        [featureFlags.CUSTOM_VIEWS]: true,
+      },
+    })
+  );
 
 export { renderApplicationWithRedux };