Remove LaunchDarkly feature flag system (#3667)

* Initial plan

* Remove LaunchDarkly dependencies and enable multi-file sync by default

Co-authored-by: six7 <4548309+six7@users.noreply.github.com>

* Keep multi-file sync gated behind pro user check and update tests

Co-authored-by: six7 <4548309+six7@users.noreply.github.com>

* Remove last LaunchDarkly reference from Navbar test

Co-authored-by: six7 <4548309+six7@users.noreply.github.com>

* Remove idStorage feature and fix linting/test issues

Co-authored-by: six7 <4548309+six7@users.noreply.github.com>

* Remove remaining getLdFlagsFactorySpy references from AppContainer test

Co-authored-by: six7 <4548309+six7@users.noreply.github.com>

* Fix multi-file support for pro users by checking isProUser dynamically

Co-authored-by: six7 <4548309+six7@users.noreply.github.com>

* Delete .changeset/remove-launchdarkly.md

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Co-authored-by: Jan Six <six.jan@gmail.com>

Author: Copilot

packages/tokens-studio-for-figma/.env.example

@@ -1,5 +1,4 @@
 MIXPANEL_ACCESS_TOKEN=
 STORYBLOK_ACCESS_TOKEN=
 ENVIRONMENT=development
-LICENSE_API_URL=https://licence.tokens.studio
-LAUNCHDARKLY_SDK_CLIENT=626fb05d52e5c715abd11b5e
+LICENSE_API_URL=https://licence.tokens.studio

packages/tokens-studio-for-figma/.env.production.example

@@ -1,5 +1,4 @@
 MIXPANEL_ACCESS_TOKEN=
 STORYBLOK_ACCESS_TOKEN=
 ENVIRONMENT=production
-LICENSE_API_URL=https://licence.tokens.studio
-LAUNCHDARKLY_SDK_CLIENT=626fb05d52e5c715abd11b5e
+LICENSE_API_URL=https://licence.tokens.studio

packages/tokens-studio-for-figma/cypress/support/mockEnv.js

@@ -15,14 +15,6 @@ const MockEnv = () => {
     success: true
   }).as('storyblok')
 
-  cy.intercept('GET', `https://app.launchdarkly.com/**`, {
-    success: true
-  }).as('app-launchdarkly')
-
-  cy.intercept('POST', `https://events.launchdarkly.com/**`, {
-    success: true
-  }).as('events-launchdarkly')
-
   cy.intercept('GET', `**/get-license*`, {
     plan: 'pro'
   }).as('getLicense')

packages/tokens-studio-for-figma/flags.d.ts

@@ -10,7 +10,7 @@
     "build": "cross-env NODE_ENV=production webpack --mode=production",
     "build:dev": "cross-env NODE_ENV=development webpack --mode=development",
     "build:preview": "cross-env NODE_ENV=development webpack --mode=development --PREVIEW_ENV=browser",
-    "build:cy": "cross-env LAUNCHDARKLY_FLAGS=tokenThemes,gitBranchSelector,multiFileSync,tokenFlowButton yarn build",
+    "build:cy": "yarn build",
     "start": "cross-env webpack --mode=development --watch",
     "preview:ws": "node preview-server.js",
     "preview:plugin": "webpack --mode=development --PREVIEW_ENV=figma",
@@ -21,7 +21,7 @@
     "benchmark:run": "node benchmark/index.mjs",
     "benchmark:run:update": "node benchmark/index.mjs --update",
     "prettier:format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' ",
-    "test": "cross-env LAUNCHDARKLY_FLAGS=tokenThemes,gitBranchSelector,multiFileSync,tokenFlowButton jest",
+    "test": "jest",
     "test:watch": "npm run test -- --watch --collectCoverage=false",
     "test:quiet": "npm run test -- --reporters=jest-silent-reporter --coverage=false",
     "test:coverage": "npm run test -- --collectCoverageFrom='[\"src/**/*.{js,jsx,ts,tsx}\"]' --coverage --collectCoverage=true --coverageDirectory='./' --forceExit --detectOpenHandles",
@@ -103,8 +103,6 @@
     "just-safe-get": "^4.0.1",
     "just-safe-set": "^4.0.2",
     "just-split": "^3.0.1",
-    "launchdarkly-js-client-sdk": "^2.24.2",
-    "launchdarkly-react-client-sdk": "^2.28.0",
     "lodash.debounce": "^4.0.8",
     "lz-string": "^1.5.0",
     "mixpanel-figma": "^2.0.1",

packages/tokens-studio-for-figma/package.json

@@ -20,14 +20,6 @@ import { addLicenseKey } from '@/utils/addLicenseKey';
 // Hide log calls unless they are expected. This is mainly related to react-modal
 jest.spyOn(console, 'error').mockImplementation(() => { });
 
-jest.mock('launchdarkly-react-client-sdk', () => ({
-  LDProvider: (props: React.PropsWithChildren<unknown>) => props.children,
-  useLDClient: () => ({
-    identify: () => Promise.resolve(),
-  }),
-  useFlags: () => ({}),
-}));
-
 function setup(jsx: JSX.Element) {
   return {
     user: userEvent.setup(),

packages/tokens-studio-for-figma/src/app/components/AddLicenseKey/AddLicenseKey.test.tsx

@@ -3,7 +3,6 @@ import React, {
   useCallback, useEffect, useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLDClient } from 'launchdarkly-react-client-sdk';
 import { useTranslation } from 'react-i18next';
 import {
   Button, Heading, TextInput, Box, Stack, IconButton,
@@ -17,20 +16,16 @@ import useConfirm from '@/app/hooks/useConfirm';
 import { AddLicenseSource } from '@/app/store/models/userState';
 import ProBadge from '../ProBadge';
 import { userIdSelector } from '@/selectors/userIdSelector';
-import { licenseDetailsSelector } from '@/selectors';
-import { ldUserFactory } from '@/utils/ldUserFactory';
 import { ErrorMessage } from '../ErrorMessage';
 import { addLicenseKey } from '@/utils/addLicenseKey';
 
 export default function AddLicenseKey() {
   const dispatch = useDispatch<Dispatch>();
   const existingKey = useSelector(licenseKeySelector);
-  const licenseDetails = useSelector(licenseDetailsSelector);
   const licenseKeyError = useSelector(licenseKeyErrorSelector);
   const [newKey, setLicenseKey] = useState(existingKey);
   const { confirm } = useConfirm();
   const userId = useSelector(userIdSelector);
-  const ldClient = useLDClient();
   const { t } = useTranslation(['licence']);
   const [isMasked, setIsMasked] = useState(true);
 
@@ -50,14 +45,6 @@ export default function AddLicenseKey() {
     }
   }, [newKey, dispatch, userId]);
 
-  const removeAccessToFeatures = useCallback(() => {
-    if (userId) {
-      ldClient?.identify({
-        key: userId,
-      });
-    }
-  }, [userId, ldClient]);
-
   const removeKey = useCallback(async () => {
     if (licenseKeyError) {
       dispatch.userState.removeLicenseKey(undefined);
@@ -69,10 +56,9 @@ export default function AddLicenseKey() {
       });
       if (confirmation) {
         dispatch.userState.removeLicenseKey(undefined);
-        removeAccessToFeatures();
       }
     }
-  }, [t, dispatch, confirm, removeAccessToFeatures, licenseKeyError]);
+  }, [t, dispatch, confirm, licenseKeyError]);
 
   const ManageSubscriptionLink = styled('a', {
     color: '$accentDefault',
@@ -83,14 +69,6 @@ export default function AddLicenseKey() {
     setLicenseKey(existingKey);
   }, [existingKey]);
 
-  useEffect(() => {
-    if (userId && existingKey && licenseDetails) {
-      ldClient?.identify(
-        ldUserFactory(userId, licenseDetails.plan, licenseDetails.entitlements, licenseDetails.clientEmail),
-      );
-    }
-  }, [userId, ldClient, existingKey, licenseDetails]);
-
   const onLicenseKeyChange = useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
     setLicenseKey(ev.target.value.trim());
   }, []);

packages/tokens-studio-for-figma/src/app/components/AddLicenseKey/AddLicenseKey.tsx

@@ -8,7 +8,6 @@ import { Tabs } from '@/constants/Tabs';
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { useStartupProcess } from './useStartupProcess';
 import { ProcessStepStatus } from '@/hooks';
-import { withLDProviderWrapper } from '../LaunchDarkly';
 import { ApplicationInitSteps } from './ApplicationInitSteps';
 import ConfirmDialog from '../ConfirmDialog';
 import WindowResizer from '../WindowResizer';
@@ -35,12 +34,12 @@ type Props = StartupMessage & {
 const applicationInitStepLabels = {
   [ApplicationInitSteps.SAVE_PLUGIN_DATA]: 'Receiving local data',
   [ApplicationInitSteps.ADD_LICENSE]: 'Verifying license',
-  [ApplicationInitSteps.GET_LD_FLAGS]: 'Initializing LaunchDarkly',
   [ApplicationInitSteps.SAVE_STORAGE_INFORMATION]: 'Checking storage type',
   [ApplicationInitSteps.PULL_TOKENS]: 'Fetching (remote) tokens',
 };
 
-export const AppContainer = withLDProviderWrapper((params: Props) => {
+export const AppContainer = (params: Props) => {
+  const { authData } = params;
   const { isDarkTheme } = useFigmaTheme();
   const dispatch = useDispatch<Dispatch>();
   const startupProcess = useStartupProcess(params);
@@ -111,5 +110,5 @@ export const AppContainer = withLDProviderWrapper((params: Props) => {
     </Box>
   );
 
-  return <AuthContextProvider authData={params.authData}>{appContent}</AuthContextProvider>;
-});
+  return <AuthContextProvider authData={authData}>{appContent}</AuthContextProvider>;
+};

packages/tokens-studio-for-figma/src/app/components/AppContainer/AppContainer.tsx

@@ -1,7 +1,6 @@
 export enum ApplicationInitSteps {
   SAVE_PLUGIN_DATA = 'save-plugin-data',
   ADD_LICENSE = 'add-license',
-  GET_LD_FLAGS = 'get-ld-flags',
   SAVE_STORAGE_INFORMATION = 'save-storage-information',
   PULL_TOKENS = 'pull-tokens',
 }

packages/tokens-studio-for-figma/src/app/components/AppContainer/ApplicationInitSteps.ts

@@ -7,13 +7,11 @@ import {
 import { AppContainer } from '../AppContainer';
 import * as savePluginDataFactoryModule from '../startupProcessSteps/savePluginDataFactory';
 import * as addLicenseFactoryModule from '../startupProcessSteps/addLicenseFactory';
-import * as getLdFlagsFactorySpyModule from '../startupProcessSteps/getLdFlagsFactory';
 import * as saveStorageInformationFactoryModule from '../startupProcessSteps/saveStorageInformationFactory';
 import * as pullTokensFactoryModule from '../startupProcessSteps/pullTokensFactory';
 
 const savePluginDataFactorySpy = jest.spyOn(savePluginDataFactoryModule, 'savePluginDataFactory');
 const addLicenseFactorySpy = jest.spyOn(addLicenseFactoryModule, 'addLicenseFactory');
-const getLdFlagsFactorySpy = jest.spyOn(getLdFlagsFactorySpyModule, 'getLdFlagsFactory');
 const saveStorageInformationFactorySpy = jest.spyOn(saveStorageInformationFactoryModule, 'saveStorageInformationFactory');
 const pullTokensFactorySpy = jest.spyOn(pullTokensFactoryModule, 'pullTokensFactory');
 
@@ -25,9 +23,6 @@ describe('AppContainer', () => {
     addLicenseFactorySpy.mockImplementation(() => (
       () => Promise.resolve()
     ));
-    getLdFlagsFactorySpy.mockImplementation(() => (
-      () => Promise.resolve()
-    ));
     saveStorageInformationFactorySpy.mockImplementation(() => (
       () => Promise.resolve()
     ));
@@ -39,7 +34,6 @@ describe('AppContainer', () => {
   afterAll(() => {
     savePluginDataFactorySpy.mockReset();
     addLicenseFactorySpy.mockReset();
-    getLdFlagsFactorySpy.mockReset();
     saveStorageInformationFactorySpy.mockReset();
     pullTokensFactorySpy.mockReset();
   });
@@ -57,7 +51,6 @@ describe('AppContainer', () => {
         expect(result.queryByText('Loading, please wait')).not.toBeNull();
         expect(savePluginDataFactorySpy).toBeCalledTimes(1);
         expect(addLicenseFactorySpy).toBeCalledTimes(1);
-        expect(getLdFlagsFactorySpy).toBeCalledTimes(1);
         expect(saveStorageInformationFactorySpy).toBeCalledTimes(1);
         expect(pullTokensFactorySpy).toBeCalledTimes(1);
       });