feat(web): hide consumption toggle behind ff (#7314)

* feat(web): hide consumption toggle behind ff * tests(web): update cypress tests to have atom context
electricitymaps · Oct 14, 2024 · c7c7d0d · c7c7d0d
1 parent 95e31f1
commit c7c7d0d
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 94 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -8,15 +8,18 @@ import { AppStoreBanner } from 'components/AppStoreBanner';
 import LoadingOverlay from 'components/LoadingOverlay';
 import { OnboardingModal } from 'components/modals/OnboardingModal';
 import ErrorComponent from 'features/error-boundary/ErrorBoundary';
+import { useFeatureFlag } from 'features/feature-flags/api';
 import Header from 'features/header/Header';
 import UpdatePrompt from 'features/service-worker/UpdatePrompt';
 import { useDarkMode } from 'hooks/theme';
 import { useGetCanonicalUrl } from 'hooks/useGetCanonicalUrl';
+import { useSetAtom } from 'jotai';
 import { lazy, ReactElement, Suspense, useEffect, useLayoutEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import trackEvent from 'utils/analytics';
-import { metaTitleSuffix, TrackEvent } from 'utils/constants';
+import { metaTitleSuffix, Mode, TrackEvent } from 'utils/constants';
+import { productionConsumptionAtom } from 'utils/state/atoms';
 
 const MapWrapper = lazy(async () => import('features/map/MapWrapper'));
 const LeftPanel = lazy(async () => import('features/panels/LeftPanel'));
@@ -46,6 +49,14 @@ export default function App(): ReactElement {
   const shouldUseDarkMode = useDarkMode();
   const { t, i18n } = useTranslation();
   const canonicalUrl = useGetCanonicalUrl();
+  const setConsumptionAtom = useSetAtom(productionConsumptionAtom);
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
+
+  useEffect(() => {
+    if (isConsumptionOnlyMode) {
+      setConsumptionAtom(Mode.CONSUMPTION);
+    }
+  }, [isConsumptionOnlyMode, setConsumptionAtom]);
 
   // Update classes on theme change
   useLayoutEffect(() => {

diff --git a/web/src/features/map-controls/MapControls.cy.tsx b/web/src/features/map-controls/MapControls.cy.tsx
@@ -1,49 +1,66 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { I18nextProvider } from 'react-i18next';
 import i18n from 'translation/i18n';
 
 import MapControls from './MapControls';
 
-it('can change language', () => {
-  cy.viewport(800, 500);
-  cy.mount(
-    <I18nextProvider i18n={i18n}>
-      <MapControls />
-    </I18nextProvider>
-  );
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('English').click();
-  cy.contains('country');
-  cy.contains('zone');
-  cy.contains('production');
-  cy.contains('consumption');
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('Deutsch').click();
-  cy.contains('Produktion');
-  cy.contains('Verbrauch');
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('Svenska').click();
-  cy.contains('produktion');
-  cy.contains('konsumtion');
-  cy.contains('land');
-  cy.contains('zon');
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('English').click();
-});
+describe('MapControls', () => {
+  const queryClient = new QueryClient();
 
-it('can change theme', () => {
-  cy.viewport(800, 500);
-  cy.mount(<MapControls />);
-  cy.get('[data-test-id=theme-selector-open-button]').click();
-  cy.contains('System');
-  cy.contains('Light')
-    .click()
-    .should(() => {
-      expect(localStorage.getItem('theme')).to.eq('"light"');
-    });
-  cy.get('[data-test-id=theme-selector-open-button]').click();
-  cy.contains('Dark')
-    .click()
-    .should(() => {
-      expect(localStorage.getItem('theme')).to.eq('"dark"');
+  beforeEach(() => {
+    cy.intercept('/feature-flags', {
+      body: { 'consumption-only': false },
     });
+  });
+
+  it('can change language', () => {
+    cy.viewport(800, 500);
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <I18nextProvider i18n={i18n}>
+          <MapControls />
+        </I18nextProvider>
+      </QueryClientProvider>
+    );
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('English').click();
+    cy.contains('country');
+    cy.contains('zone');
+    cy.contains('production');
+    cy.contains('consumption');
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('Deutsch').click();
+    cy.contains('Produktion');
+    cy.contains('Verbrauch');
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('Svenska').click();
+    cy.contains('produktion');
+    cy.contains('konsumtion');
+    cy.contains('land');
+    cy.contains('zon');
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('English').click();
+  });
+
+  it('can change theme', () => {
+    cy.viewport(800, 500);
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <MapControls />
+      </QueryClientProvider>
+    );
+    cy.get('[data-test-id=theme-selector-open-button]').click();
+    cy.contains('System');
+    cy.contains('Light')
+      .click()
+      .should(() => {
+        expect(localStorage.getItem('theme')).to.eq('"light"');
+      });
+    cy.get('[data-test-id=theme-selector-open-button]').click();
+    cy.contains('Dark')
+      .click()
+      .should(() => {
+        expect(localStorage.getItem('theme')).to.eq('"dark"');
+      });
+  });
 });
diff --git a/web/src/features/map-controls/MapControls.tsx b/web/src/features/map-controls/MapControls.tsx
@@ -1,3 +1,4 @@
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { useAtom, useAtomValue } from 'jotai';
 import { EyeOff, Sun, Wind } from 'lucide-react';
 import { useTransition } from 'react';
@@ -112,10 +113,12 @@ function DesktopMapControls() {
     trackEvent(TrackEvent.COLORBLIND_MODE_TOGGLED);
   };
 
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
+
   return (
     <div className="pointer-events-none absolute right-3 top-2 z-20 hidden flex-col items-end md:flex">
       <div className="pointer-events-auto mb-16 flex flex-col items-end space-y-2">
-        <ConsumptionProductionToggle />
+        {!isConsumptionOnlyMode && <ConsumptionProductionToggle />}
         <SpatialAggregatesToggle />
       </div>
       <div className="mt-5 space-y-2">

diff --git a/web/src/features/map-controls/ZoomControls.tsx b/web/src/features/map-controls/ZoomControls.tsx
@@ -1,12 +1,15 @@
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { ReactElement } from 'react';
 import { NavigationControl } from 'react-map-gl/maplibre';
 
 export default function ZoomControls(): ReactElement {
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
+  const marginTop = isConsumptionOnlyMode ? 54 : 98;
   return (
     <NavigationControl
       style={{
         marginRight: 12,
-        marginTop: 98,
+        marginTop: marginTop,
         width: '33px',
         boxShadow: '0px 1px 1px  rgb(0 0 0 / 0.1)',
         border: 0,

diff --git a/web/src/features/modals/SettingsModal.cy.tsx b/web/src/features/modals/SettingsModal.cy.tsx
@@ -1,55 +1,64 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { I18nextProvider } from 'react-i18next';
 
 import i18n from '../../translation/i18n';
 import { SettingsModalContent } from './SettingsModal';
 
-it('can change language', () => {
-  cy.viewport(500, 500);
-  cy.mount(
-    <I18nextProvider i18n={i18n}>
-      <SettingsModalContent />
-    </I18nextProvider>
-  );
-  cy.contains('Wind data is currently unavailable');
-  cy.contains('Solar data is currently unavailable');
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('English').click();
-  cy.contains('country');
-  cy.contains('zone');
-  cy.contains('production');
-  cy.contains('consumption');
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('Deutsch').click();
-  cy.contains('Produktion');
-  cy.contains('Verbrauch');
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('Svenska').click();
-  cy.contains('produktion');
-  cy.contains('konsumtion');
-  cy.contains('land');
-  cy.contains('zon');
-  cy.get('[data-test-id=language-selector-open-button]').click();
-  cy.contains('English').click();
-});
+describe('SettingsModalContent', () => {
+  const queryClient = new QueryClient();
+
+  it('can change language', () => {
+    cy.viewport(500, 500);
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <I18nextProvider i18n={i18n}>
+          <SettingsModalContent />
+        </I18nextProvider>
+      </QueryClientProvider>
+    );
+    cy.contains('Wind data is currently unavailable');
+    cy.contains('Solar data is currently unavailable');
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('English').click();
+    cy.contains('country');
+    cy.contains('zone');
+    cy.contains('production');
+    cy.contains('consumption');
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('Deutsch').click();
+    cy.contains('Produktion');
+    cy.contains('Verbrauch');
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('Svenska').click();
+    cy.contains('produktion');
+    cy.contains('konsumtion');
+    cy.contains('land');
+    cy.contains('zon');
+    cy.get('[data-test-id=language-selector-open-button]').click();
+    cy.contains('English').click();
+  });
 
-it('can change theme', () => {
-  cy.viewport(500, 500);
-  cy.mount(
-    <I18nextProvider i18n={i18n}>
-      <SettingsModalContent />
-    </I18nextProvider>
-  );
-  cy.get('[data-test-id=theme-selector-open-button]').click();
-  cy.contains('System');
-  cy.contains('Light')
-    .click()
-    .should(() => {
-      expect(localStorage.getItem('theme')).to.eq('"light"');
-    });
-  cy.get('[data-test-id=theme-selector-open-button]').click();
-  cy.contains('Dark')
-    .click()
-    .should(() => {
-      expect(localStorage.getItem('theme')).to.eq('"dark"');
-    });
+  it('can change theme', () => {
+    cy.viewport(500, 500);
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <I18nextProvider i18n={i18n}>
+          <SettingsModalContent />
+        </I18nextProvider>
+      </QueryClientProvider>
+    );
+    cy.get('[data-test-id=theme-selector-open-button]').click();
+    cy.contains('System');
+    cy.contains('Light')
+      .click()
+      .should(() => {
+        expect(localStorage.getItem('theme')).to.eq('"light"');
+      });
+    cy.get('[data-test-id=theme-selector-open-button]').click();
+    cy.contains('Dark')
+      .click()
+      .should(() => {
+        expect(localStorage.getItem('theme')).to.eq('"dark"');
+      });
+  });
 });
diff --git a/web/src/features/modals/SettingsModal.tsx b/web/src/features/modals/SettingsModal.tsx
@@ -1,5 +1,6 @@
 import { Button } from 'components/Button';
 import Modal from 'components/Modal';
+import { useFeatureFlag } from 'features/feature-flags/api';
 import ConsumptionProductionToggle from 'features/map-controls/ConsumptionProductionToggle';
 import { LanguageSelector } from 'features/map-controls/LanguageSelector';
 import { weatherButtonMap } from 'features/map-controls/MapControls';
@@ -67,12 +68,12 @@ export function SettingsModalContent() {
   const areWeatherLayersAllowed = useAtomValue(areWeatherLayersAllowedAtom);
   const [isColorblindModeEnabled, setIsColorblindModeEnabled] =
     useAtom(colorblindModeAtom);
-
+  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
   const { t } = useTranslation();
   return (
     <div className="flex flex-col items-center space-y-2">
       <div className="rounded-full bg-gray-500">
-        <ConsumptionProductionToggle />
+        {!isConsumptionOnlyMode && <ConsumptionProductionToggle />}
       </div>
       <div className="rounded-full bg-gray-500">
         <SpatialAggregatesToggle />