2.0: fix licensekey issues (#2683)

### Why does this PR exist? Closes #2681  ### What does this pull request do? There's some issues with the launchdarkly feature flags causing our flags to not be loaded in on initial load. It sounds related to launch darkly itself, so I'm moving all our flags to the more generic `isProUser` check, which works fine. All those flags have long been shipped to all users anyway, so we should've removed these gated feature flags a long time ago, anyway. Also changes cypress tests to be mocked with a valid license instead of relying on feature flags ### Testing this change Start the plugin, immediately click on Manage themes and notice that it will work, compared to the beta build ## Before Notice how it says "PRO" in the bottom but manage themes is disabled ![Image](https://github.com/tokens-studio/figma-plugin/assets/4548309/fb0047e8-257f-429f-8208-e51eda7789e9) ## After <img width="512" alt="CleanShot 2024-04-24 at 22 36 14@2x" src="https://github.com/tokens-studio/figma-plugin/assets/4548309/7d127f4d-73ea-4c3a-99cd-0eb2c0a364e3">
tokens-studio · Apr 26, 2024 · c702b2f · c702b2f
1 parent d36205d
commit c702b2f
Show file tree

Hide file tree

Showing 22 changed files with 162 additions and 121 deletions.
diff --git a/packages/tokens-studio-for-figma/cypress/e2e/branches.cy.js b/packages/tokens-studio-for-figma/cypress/e2e/branches.cy.js
@@ -3,6 +3,7 @@ import {
 } from '@/constants/StorageProviderType';
 import { UpdateMode } from '@/constants/UpdateMode';
 import MockEnv from '../support/mockEnv'
+import { fillTokenForm } from './helpers/utils';
 
 describe('Branch switcher', () => {
   const provider = {
@@ -24,7 +25,7 @@ describe('Branch switcher', () => {
       syncProviders: true,
     },
     localApiProviders: [provider],
-    licenseKey: null,
+    licenseKey: 'valid-license-key',
     settings: {
       width: 800,
       height: 500,
@@ -101,6 +102,13 @@ describe('Branch switcher', () => {
         }],
       },
     });
+    cy.get('[data-testid=tokenlisting-sizing] [data-testid=button-add-new-token]').click({
+      timeout: 1000
+    });
+    fillTokenForm({
+      name: 'sizing.sm',
+      value: '4',
+    });
     cy.get('[data-testid=branch-selector-menu-trigger]').click();
     cy.get('[data-testid=branch-selector-create-new-branch-trigger]').click();
     cy.get('[data-testid=branch-selector-create-new-branch-from-current-change]').click();
@@ -137,6 +145,13 @@ describe('Branch switcher', () => {
         }],
       },
     });
+    cy.get('[data-testid=tokenlisting-sizing] [data-testid=button-add-new-token]').click({
+      timeout: 1000
+    });
+    fillTokenForm({
+      name: 'sizing.sm',
+      value: '4',
+    });
     cy.get('[data-testid=footer-push-button]').click();
     cy.get('[data-testid=push-dialog-commit-message]').type('push changes');
     cy.get('[data-testid=push-dialog-button-push-changes]').click();

diff --git a/packages/tokens-studio-for-figma/cypress/e2e/helpers/utils.js b/packages/tokens-studio-for-figma/cypress/e2e/helpers/utils.js
@@ -0,0 +1,38 @@
+export const fillTokenForm = ({
+  name, value
+}) => {
+  cy.get('input[name=name]').type(name);
+  cy.get('[data-testid=mention-input-value]').type(value);
+  cy.get('[data-testid=mention-input-value]').type('{enter}');
+};
+
+export const fillInputNth = ({
+  submit = false, input, value, nth,
+}) => {
+  cy.get(`[data-testid=mention-input-${input}]`).eq(nth).type(`{selectall}${value}`);
+
+  if (submit) {
+    cy.get(`[data-testid=mention-input-${input}]`).eq(nth).type('{enter}');
+  }
+};
+
+export const fillValueInput = ({
+  submit = false, input, value
+}) => {
+  cy.get(`[data-testid=mention-input-${input}]`).type(`{selectall} ${value}`);
+
+  if (submit) {
+    cy.get(`[data-testid=mention-input-${input}]`).type('{enter}');
+  }
+};
+
+export const fillInput = ({
+  submit = false, input, value
+}) => {
+  cy.get(`input[name=${input}]`).type(`{selectall} ${value}`);
+
+  if (submit) {
+    cy.get(`input[name=${input}]`).type('{enter}');
+  }
+};
+
diff --git a/packages/tokens-studio-for-figma/cypress/e2e/inspector.cy.js b/packages/tokens-studio-for-figma/cypress/e2e/inspector.cy.js
@@ -2,6 +2,7 @@ import {
   StorageProviderType
 } from '@/constants/StorageProviderType';
 import { UpdateMode } from '@/constants/UpdateMode';
+import MockEnv from '../support/mockEnv';
 
 
 describe('Inspector tokens', () => {
@@ -14,7 +15,7 @@ describe('Inspector tokens', () => {
       syncProviders: true,
     },
     localApiProviders: [],
-    licenseKey: null,
+    licenseKey: 'valid-license-key',
     settings: {
       width: 800,
       height: 500,
@@ -52,6 +53,7 @@ describe('Inspector tokens', () => {
       },
     });
     cy.waitForReact(1000);
+    MockEnv();
   });
 
   it('successfully shows tokens applied on the node', () => {

diff --git a/packages/tokens-studio-for-figma/cypress/e2e/manage-themes.cy.js b/packages/tokens-studio-for-figma/cypress/e2e/manage-themes.cy.js
@@ -2,6 +2,7 @@ import {
   StorageProviderType
 } from '@/constants/StorageProviderType';
 import { UpdateMode } from '@/constants/UpdateMode';
+import MockEnv from '../support/mockEnv';
 
 const createTokenSet = ({ name }) => {
   cy.get('[data-testid="button-new-token-set"]').click({ timeout: 1000 })
@@ -19,7 +20,7 @@ describe('TokenListing', () => {
       syncProviders: true,
     },
     localApiProviders: [],
-    licenseKey: null,
+    licenseKey: 'valid-license-key',
     settings: {
       width: 800,
       height: 500,
@@ -56,6 +57,7 @@ describe('TokenListing', () => {
       },
     });
     cy.waitForReact(1000);
+    MockEnv();
   });
 
   it('create token set', () => {

diff --git a/packages/tokens-studio-for-figma/cypress/e2e/themes.cy.js b/packages/tokens-studio-for-figma/cypress/e2e/themes.cy.js
@@ -2,6 +2,7 @@ import {
   StorageProviderType
 } from '@/constants/StorageProviderType';
 import { UpdateMode } from '@/constants/UpdateMode';
+import MockEnv from '../support/mockEnv';
 
 describe('Themes', () => {
   const mockStartupParams = {
@@ -13,7 +14,7 @@ describe('Themes', () => {
       syncProviders: true,
     },
     localApiProviders: [],
-    licenseKey: null,
+    licenseKey: 'valid-license-key',
     settings: {
       width: 800,
       height: 500,
@@ -61,6 +62,7 @@ describe('Themes', () => {
       },
     });
     cy.waitForReact(1000);
+    MockEnv();
   });
 
   it('Can create a new theme', () => {

diff --git a/packages/tokens-studio-for-figma/cypress/e2e/tokens.cy.js b/packages/tokens-studio-for-figma/cypress/e2e/tokens.cy.js
@@ -2,52 +2,8 @@ import {
   StorageProviderType
 } from '@/constants/StorageProviderType';
 import { UpdateMode } from '@/constants/UpdateMode';
-
-const fillTokenForm = ({
-  name,
-  value
-}) => {
-  cy.get('input[name=name]').type(name);
-  cy.get('[data-testid=mention-input-value]').type(value);
-  cy.get('[data-testid=mention-input-value]').type('{enter}');
-};
-
-const fillInput = ({
-  submit = false,
-  input,
-  value
-}) => {
-  cy.get(`input[name=${input}]`).type(`{selectall} ${value}`);
-
-  if (submit) {
-    cy.get(`input[name=${input}]`).type('{enter}');
-  }
-};
-
-const fillValueInput = ({
-  submit = false,
-  input,
-  value
-}) => {
-  cy.get(`[data-testid=mention-input-${input}]`).type(`{selectall} ${value}`);
-
-  if (submit) {
-    cy.get(`[data-testid=mention-input-${input}]`).type('{enter}');
-  }
-};
-
-const fillInputNth = ({
-  submit = false,
-  input,
-  value,
-  nth,
-}) => {
-  cy.get(`[data-testid=mention-input-${input}]`).eq(nth).type(`{selectall}${value}`);
-
-  if (submit) {
-    cy.get(`[data-testid=mention-input-${input}]`).eq(nth).type('{enter}');
-  }
-};
+import MockEnv from '../support/mockEnv';
+import { fillTokenForm, fillInputNth, fillValueInput, fillInput } from './helpers/utils';
 
 describe('TokenListing', () => {
   const mockStartupParams = {
@@ -59,7 +15,7 @@ describe('TokenListing', () => {
       syncProviders: true,
     },
     localApiProviders: [],
-    licenseKey: null,
+    licenseKey: 'valid-license-key',
     settings: {
       width: 800,
       height: 500,
@@ -97,6 +53,7 @@ describe('TokenListing', () => {
       },
     });
     cy.waitForReact(1000);
+    MockEnv();
   });
 
   it('can add a new token', () => {

diff --git a/packages/tokens-studio-for-figma/cypress/support/mockEnv.js b/packages/tokens-studio-for-figma/cypress/support/mockEnv.js
@@ -7,6 +7,30 @@ const MockEnv = () => {
     email: '[email protected]',
   }).as('getUser');
 
+  cy.intercept('POST', `https://api-eu.mixpanel.com/**`, {
+    success: true
+  }).as('mixpanel')
+
+  cy.intercept('GET', `https://api.storyblok.com/**`, {
+    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')
+
+  cy.intercept('GET', `**/validate-license*`, {
+    plan: 'pro'
+  }).as('validateLicense')
+
   cy.intercept('GET', 'http://localhost:58630/six7/repos/122/figma-tokens/collaborators/six7/permission', {
     permission: 'admin',
     role_name: 'admin'

diff --git a/packages/tokens-studio-for-figma/package.json b/packages/tokens-studio-for-figma/package.json
@@ -95,8 +95,8 @@
     "just-safe-get": "^4.0.1",
     "just-safe-set": "^4.0.2",
     "just-split": "^3.0.1",
-    "launchdarkly-js-client-sdk": "^2.22.1",
-    "launchdarkly-react-client-sdk": "^2.26.0",
+    "launchdarkly-js-client-sdk": "^2.24.2",
+    "launchdarkly-react-client-sdk": "^2.28.0",
     "lodash.debounce": "^4.0.8",
     "mixpanel-figma": "^2.0.1",
     "ml-matrix": "^6.9.0",

diff --git a/packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx b/packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx
@@ -20,13 +20,13 @@ import CreateBranchModal from './modals/CreateBranchModal';
 import { Dispatch } from '../store';
 import { BranchSwitchMenuRadioElement } from './BranchSwitchMenuRadioElement';
 import { isGitProvider } from '@/utils/is';
-import { useFlags } from './LaunchDarkly';
 import ProBadge from './ProBadge';
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { StorageTypeCredentials } from '@/types/StorageType';
 import { track } from '@/utils/analytics';
 import { useChangedState } from '@/hooks/useChangedState';
+import { useIsProUser } from '../hooks/useIsProUser';
 
 const BranchSwitchMenuItemElement: React.FC<
 React.PropsWithChildren<
@@ -54,7 +54,7 @@ export default function BranchSelector() {
   const { confirm } = useConfirm();
   const { pullTokens, pushTokens } = useRemoteTokens();
   const dispatch = useDispatch<Dispatch>();
-  const { gitBranchSelector } = useFlags();
+  const isProUser = useIsProUser();
   const { setStorageType } = useStorage();
 
   const branchState = useSelector(branchSelector);
@@ -175,7 +175,7 @@ export default function BranchSelector() {
             <DropdownMenu.Sub>
               <DropdownMenu.SubTrigger
                 data-testid="branch-selector-create-new-branch-trigger"
-                disabled={!gitBranchSelector}
+                disabled={!isProUser}
               >
                 {t('createNewBranch')}
                 <DropdownMenu.TrailingVisual>
@@ -202,7 +202,7 @@ export default function BranchSelector() {
               </DropdownMenu.SubContent>
             </DropdownMenu.Sub>
             <DropdownMenu.Separator />
-            {!gitBranchSelector && (
+            {!isProUser && (
               <>
                 <DropdownMenu.Item css={{ display: 'flex', justifyContent: 'space-between' }}>
                   <span>{t('upgradeToPro', { ns: 'licence' })}</span>
@@ -215,7 +215,7 @@ export default function BranchSelector() {
               {branchState.branches.length > 0
                 && branchState.branches.map((branch, index) => (
                   <BranchSwitchMenuRadioElement
-                    disabled={!gitBranchSelector}
+                    disabled={!isProUser}
                     key={`radio_${seed(index)}`}
                     branch={branch}
                     branchSelected={onBranchSelected}

diff --git a/packages/tokens-studio-for-figma/src/app/components/ColorTokenForm.tsx b/packages/tokens-studio-for-figma/src/app/components/ColorTokenForm.tsx
@@ -21,7 +21,7 @@ import { modifyColor } from '@/utils/modifyColor';
 import { convertModifiedColorToHex } from '@/utils/convertModifiedColorToHex';
 import { ColorPickerTrigger } from './ColorPickerTrigger';
 import ProBadge from './ProBadge';
-import { useFlags } from './LaunchDarkly';
+import { useIsProUser } from '../hooks/useIsProUser';
 
 const defaultValue = '0';
 
@@ -51,7 +51,7 @@ export default function ColorTokenForm({
   const [operationMenuOpened, setOperationMenuOpened] = React.useState(false);
   const [colorSpaceMenuOpened, setColorSpaceMenuOpened] = React.useState(false);
   const [modifyVisible, setModifyVisible] = React.useState(false);
-  const { colorModifier } = useFlags();
+  const isProUser = useIsProUser();
 
   React.useEffect(() => {
     if (internalEditToken?.$extensions?.['studio.tokens']?.modify) {
@@ -235,7 +235,7 @@ export default function ColorTokenForm({
               tooltip={t('addNewModifier')}
               data-testid="button-add-new-modify"
               onClick={addModify}
-              disabled={!colorModifier}
+              disabled={!isProUser}
               icon={<IconPlus />}
               variant="invisible"
             />
@@ -244,15 +244,15 @@ export default function ColorTokenForm({
               tooltip={t('removeModifier')}
               data-testid="button-remove=modify"
               onClick={removeModify}
-              disabled={!colorModifier}
+              disabled={!isProUser}
               icon={<IconMinus />}
               variant="invisible"
             />
           )
         }
       </Box>
       {
-        modifyVisible && colorModifier && (
+        modifyVisible && isProUser && (
           <>
             <Box css={{
               display: 'flex',

diff --git a/...s/tokens-studio-for-figma/src/app/components/ManageStylesAndVariables/ExportThemesTab.tsx b/...s/tokens-studio-for-figma/src/app/components/ManageStylesAndVariables/ExportThemesTab.tsx
@@ -17,7 +17,7 @@ import { LabelledCheckbox } from './LabelledCheckbox';
 export default function ExportThemesTab({ selectedThemes, setSelectedThemes }: { selectedThemes: string[], setSelectedThemes: (themes: string[]) => void }) {
   const { t } = useTranslation(['manageStylesAndVariables']);
   const themes = useSelector(themesListSelector);
-  const isPro = useIsProUser();
+  const isProUser = useIsProUser();
 
   const ThemeGroups = React.useMemo(() => {
     const uniqueGroups: string[] = themes.reduce((unique: string[], theme) => {
@@ -69,7 +69,7 @@ export default function ExportThemesTab({ selectedThemes, setSelectedThemes }: {
       {themes.length === 0 ? (
         <StyledCard>
           <Stack direction="column" align="start" gap={4}>
-            {isPro ? (
+            {isProUser ? (
               <>
                 <Heading size="medium">{t('exportThemesTab.headingPro')}</Heading>
                 <p>{t('exportThemesTab.introPro')}</p>