2701 20 remove update styles option from options dropdown (#2705)

<!--
  Notes for authors:
  - Provide context with minimal words, keep it concise
  - Mark as a draft for work in progress PRs
  - Once ready for review, notify others in #code-reviews
- Remember, the review process is a learning opportunity for both
reviewers and authors, it's a way for us to share knowledge and avoid
silos.
-->

### Why does this PR exist?
Current plugin does need `Update Styles` logic when user tries to
update.

Closes #2701 <!-- link the related issue -->

<!--
Describe the problem you're addressing and the rationale behind this PR.
-->

### What does this pull request do?
Removed `Update Styles` option in option drop down component and removed
its correspondent logic.

<!--
Detailed summary of the changes, including any visual or interactive
updates.
For UI changes, add before/after screenshots. For interactive elements,
consider including a video or an animated gif.
Explain some of the choices you've made in the PR, if they're not
obvious.
-->

### Testing this change

<!--
Describe how this change can be tested. Are there steps required to get
there? Explain what's required so a reviewer can test these changes
locally.

  If you have a review link available, add it here.
-->

### Additional Notes (if any)

<!--
  Add any other context or screenshots about the pull request
-->

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

@@ -72,18 +72,6 @@ describe('SettingsDropdown', () => {
       expect(updateRemoteSpy).toBeCalledTimes(1);
     });
   });
-  it('should call updateStyles', async () => {
-    const updateStylesSpy = jest.spyOn(mockStore.dispatch.settings, 'setUpdateStyles');
-    const result = renderStore();
-
-    const trigger = await result.getByTestId('bottom-bar-settings');
-    waitFor(async () => {
-      await userEvent.click(trigger);
-      const updateChanges = result.getByTestId('update-styles');
-      await userEvent.click(updateChanges, { pointerEventsCheck: 0 });
-      expect(updateStylesSpy).toBeCalledTimes(1);
-    });
-  });
 
   it('should call swapStyles', async () => {
     const shouldSwapStylesSpy = jest.spyOn(mockStore.dispatch.settings, 'setShouldSwapStyles');

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

@@ -15,11 +15,11 @@ export default function SettingsDropdown() {
   const { t } = useTranslation(['tokens']);
 
   const {
-    updateRemote, updateOnChange, updateStyles, shouldSwapStyles,
+    updateRemote, updateOnChange, shouldSwapStyles,
   } = useSelector(settingsStateSelector, isEqual);
 
   const {
-    setUpdateOnChange, setUpdateRemote, setUpdateStyles, setShouldSwapStyles,
+    setUpdateOnChange, setUpdateRemote, setShouldSwapStyles,
   } = useDispatch<Dispatch>().settings;
 
   const handleUpdateOnChange = React.useCallback(() => {
@@ -30,10 +30,6 @@ export default function SettingsDropdown() {
     setUpdateRemote(!updateRemote);
   }, [updateRemote, setUpdateRemote]);
 
-  const handleUpdateStyles = React.useCallback(() => {
-    setUpdateStyles(!updateStyles);
-  }, [updateStyles, setUpdateStyles]);
-
   const handleShouldSwapStyles = React.useCallback(() => {
     setShouldSwapStyles(!shouldSwapStyles);
   }, [shouldSwapStyles, setShouldSwapStyles]);
@@ -74,19 +70,6 @@ export default function SettingsDropdown() {
               </Box>
             </DropdownMenu.CheckboxItem>
           ) : null}
-          <DropdownMenu.CheckboxItem
-            data-testid="update-styles"
-            checked={updateStyles}
-            onCheckedChange={handleUpdateStyles}
-          >
-            <DropdownMenu.ItemIndicator>
-              <CheckIcon />
-            </DropdownMenu.ItemIndicator>
-            {t('update.styles.title')}
-            <Box css={{ color: '$fgMuted', fontSize: '$xxsmall' }}>
-              {t('update.styles.description')}
-            </Box>
-          </DropdownMenu.CheckboxItem>
           <DropdownMenu.CheckboxItem
             data-testid="swap-styles"
             checked={shouldSwapStyles}

packages/tokens-studio-for-figma/src/app/store/models/settings.test.tsx

@@ -33,7 +33,6 @@ describe('settings', () => {
             updateMode: UpdateMode.PAGE,
             updateRemote: true,
             updateOnChange: true,
-            updateStyles: true,
             tokenType: 'object',
             ignoreFirstPartForStyles: false,
             prefixStylesWithThemeName: false,
@@ -65,7 +64,6 @@ describe('settings', () => {
       updateMode: UpdateMode.PAGE,
       updateRemote: true,
       updateOnChange: true,
-      updateStyles: true,
       tokenType: 'object',
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,
@@ -101,11 +99,6 @@ describe('settings', () => {
     });
   });
 
-  it('should be able to set update styles', () => {
-    store.dispatch.settings.setUpdateStyles(true);
-    expect(store.getState().settings.updateStyles).toBe(true);
-  });
-
   it('should be able to set UI settings', () => {
     store.dispatch.settings.setUISettings({
       uiWindow: {
@@ -116,7 +109,6 @@ describe('settings', () => {
       updateMode: UpdateMode.DOCUMENT,
       updateRemote: false,
       updateOnChange: false,
-      updateStyles: true,
       tokenType: 'object',
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,
@@ -131,7 +123,6 @@ describe('settings', () => {
       updateMode: UpdateMode.DOCUMENT,
       updateRemote: false,
       updateOnChange: false,
-      updateStyles: true,
       tokenType: 'object',
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,
@@ -150,7 +141,6 @@ describe('settings', () => {
       updateMode: UpdateMode.PAGE,
       updateRemote: true,
       updateOnChange: true,
-      updateStyles: true,
       tokenType: 'object',
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,
@@ -166,7 +156,6 @@ describe('settings', () => {
       updateMode: UpdateMode.PAGE,
       updateRemote: true,
       updateOnChange: true,
-      updateStyles: true,
       tokenType: 'object',
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,

packages/tokens-studio-for-figma/src/app/store/models/settings.tsx

@@ -25,7 +25,6 @@ export interface SettingsState {
   updateMode: UpdateMode;
   updateRemote: boolean;
   updateOnChange?: boolean;
-  updateStyles?: boolean;
   tokenType?: TokenModeType;
   inspectDeep: boolean;
   shouldSwapStyles: boolean;
@@ -72,7 +71,6 @@ export const settings = createModel<RootModel>()({
     updateMode: UpdateMode.SELECTION,
     updateRemote: true,
     updateOnChange: false,
-    updateStyles: true,
     tokenType: 'object',
     ignoreFirstPartForStyles: false,
     prefixStylesWithThemeName: false,
@@ -184,12 +182,6 @@ export const settings = createModel<RootModel>()({
         updateOnChange: payload,
       };
     },
-    setUpdateStyles(state, payload: boolean) {
-      return {
-        ...state,
-        updateStyles: payload,
-      };
-    },
     setShouldSwapStyles(state, payload: boolean) {
       return {
         ...state,
@@ -228,9 +220,6 @@ export const settings = createModel<RootModel>()({
         height: payload.isMinimized ? 50 : payload.height,
       });
     },
-    setUpdateStyles: (payload, rootState) => {
-      setUI(rootState.settings);
-    },
     setShouldSwapStyles: (payload, rootState) => {
       setUI(rootState.settings);
     },

packages/tokens-studio-for-figma/src/i18n/lang/en/tokens.json

@@ -54,10 +54,6 @@
       "title": "Update remote",
       "description": "Updates JSONBin whenever you make a change"
     },
-    "styles": {
-      "title": "Update styles",
-      "description": "Updates the value of local styles and variables when names match"
-    },
     "swapStyles": {
       "title": "Swap styles",
       "description": "Swap themes by just changing styles, requires Themes"

packages/tokens-studio-for-figma/src/i18n/lang/es/tokens.json

@@ -52,10 +52,6 @@
       "title": "Actualizar control remoto",
       "description": "Actualiza JSONBin cada vez que realiza un cambio"
     },
-    "styles": {
-      "title": "Actualizar estilos",
-      "description": "Actualiza el valor de los estilos locales cuando los nombres coinciden"
-    },
     "swapStyles": {
       "title": "Intercambiar estilos",
       "description": "Intercambiar temas simplemente cambiando estilos, requiere Temas"

packages/tokens-studio-for-figma/src/i18n/lang/fr/tokens.json

@@ -52,10 +52,6 @@
       "title": "Mettre à jour la télécommande",
       "description": "Met à jour JSONBin chaque fois que vous apportez une modification"
     },
-    "styles": {
-      "title": "Mettre à jour les styles",
-      "description": "Met à jour la valeur des styles locaux lorsque les noms correspondent"
-    },
     "swapStyles": {
       "title": "Permuter les styles",
       "description": "Échangez des thèmes en changeant simplement de style, nécessite Thèmes"

packages/tokens-studio-for-figma/src/i18n/lang/hi/tokens.json

@@ -52,10 +52,6 @@
       "title": "रिमोट अपडेट करें",
       "description": "जब भी आप कोई परिवर्तन करते हैं तो JSONBin को अपडेट करता है"
     },
-    "styles": {
-      "title": "शैलियाँ अद्यतन करें",
-      "description": "नाम मेल खाने पर स्थानीय शैलियों का मान अद्यतन करता है"
-    },
     "swapStyles": {
       "title": "शैलियों की अदला-बदली करें",
       "description": "केवल शैलियों को बदलकर थीम बदलें, थीम की आवश्यकता है"

packages/tokens-studio-for-figma/src/i18n/lang/nl/tokens.json

@@ -52,10 +52,6 @@
       "title": "Afstandsbediening updaten",
       "description": "Werkt JSONBin bij wanneer u een wijziging aanbrengt"
     },
-    "styles": {
-      "title": "Stijlen bijwerken",
-      "description": "Werkt de waarde van lokale stijlen bij wanneer namen overeenkomen"
-    },
     "swapStyles": {
       "title": "Wissel stijlen af",
       "description": "Verwissel thema's door gewoon van stijl te veranderen, vereist thema's"

packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/__tests__/update.test.ts

@@ -56,7 +56,6 @@ describe('update', () => {
       updateMode: UpdateMode.PAGE,
       updateOnChange: false,
       updateRemote: true,
-      updateStyles: true,
       shouldSwapStyles: true,
       baseFontSize: '16',
       aliasBaseFontSize: '16',

packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/setUi.ts

@@ -15,7 +15,6 @@ export const setUi: AsyncMessageChannelHandlers[AsyncMessageTypes.SET_UI] = asyn
     language: msg.language,
     updateRemote: msg.updateRemote,
     updateOnChange: msg.updateOnChange,
-    updateStyles: msg.updateStyles,
     ignoreFirstPartForStyles: msg.ignoreFirstPartForStyles,
     createStylesWithVariableReferences: msg.createStylesWithVariableReferences,
     prefixStylesWithThemeName: msg.prefixStylesWithThemeName,

packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/update.ts

@@ -3,14 +3,12 @@ import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { updateLocalTokensData } from '@/utils/figma';
 import { updateNodes } from '../updateNodes';
 import { NodeManagerNode, defaultNodeManager } from '../NodeManager';
-import updateStyles from '../updateStyles';
 import { swapStyles } from './swapStyles';
 import { getThemeReferences } from './getThemeReferences';
 import { defaultTokenValueRetriever } from '../TokenValueRetriever';
 import { TokenFormatOptions } from '../TokenFormatStoreClass';
 
 export const update: AsyncMessageChannelHandlers[AsyncMessageTypes.UPDATE] = async (msg) => {
-  let receivedStyleIds: Record<string, string> = {};
   let allWithData: NodeManagerNode[] = [];
   if (msg.tokenValues && msg.updatedAt) {
     await updateLocalTokensData({
@@ -36,9 +34,6 @@ export const update: AsyncMessageChannelHandlers[AsyncMessageTypes.UPDATE] = asy
       ignoreFirstPartForStyles: msg.settings.ignoreFirstPartForStyles,
       createStylesWithVariableReferences: msg.settings.createStylesWithVariableReferences,
     });
-    if (msg.settings.updateStyles) {
-      receivedStyleIds = await updateStyles(msg.tokens, msg.settings, false);
-    }
     allWithData = await defaultNodeManager.findBaseNodesWithData({
       updateMode: msg.settings.updateMode,
     });
@@ -50,7 +45,6 @@ export const update: AsyncMessageChannelHandlers[AsyncMessageTypes.UPDATE] = asy
   }
 
   return {
-    styleIds: receivedStyleIds,
     nodes: allWithData.length,
   };
 };

packages/tokens-studio-for-figma/src/types/AsyncMessages.ts

@@ -224,7 +224,6 @@ export type UpdateAsyncMessage = AsyncMessage<AsyncMessageTypes.UPDATE, {
   tokenFormat: TokenFormatOptions;
 }>;
 export type UpdateAsyncMessageResult = AsyncMessage<AsyncMessageTypes.UPDATE, {
-  styleIds: Record<string, string>;
   nodes: number
 }>;