[Feat][WRS-1761] Support "displayValues" for list variable items (#163)

chili-publish · Jun 26, 2024 · d079147 · d079147
1 parent 2519bd7
commit d079147
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
         "jest-mock-extended": "^3.0.4",
         "prettier": "^2.8.8",
         "pretty-quick": "^3.1.3",
+        "react-select-event": "^5.5.1",
         "ts-jest": "^29.1.0",
         "typescript": "*",
         "vite": "^4.3.9",

diff --git a/src/App.tsx b/src/App.tsx
@@ -143,6 +143,9 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
 
     useEffect(() => {
         const sdk = new StudioSDK({
+            enableNextSubscribers: {
+                onVariableListChanged: true,
+            },
             async onAuthExpired(request) {
                 try {
                     if (request.type === AuthRefreshTypeEnum.grafxToken) {

diff --git a/src/components/variables/VariablesList.tsx b/src/components/variables/VariablesList.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { ListVariable, Variable, VariableType } from '@chili-publish/studio-sdk';
+import { Variable, VariableType } from '@chili-publish/studio-sdk';
+import { ListVariable } from '@chili-publish/studio-sdk/lib/src/next';
 import { Option, useMobileSize } from '@chili-publish/grafx-shared-components';
 import VariablesComponents from '../variablesComponents/VariablesComponents';
 import { ComponentWrapper, VariablesListWrapper, VariablesPanelTitle } from './VariablesPanel.styles';
@@ -37,9 +38,15 @@ function VariablesList({ variables, onMobileOptionListToggle, isDocumentLoaded }
                         !listVariableOpen || (listVariableOpen && variable.id === listVariableOpen.id);
                     if (isListVariable(variable) && isListVariabledDisplayed) {
                         const variableItem = listVariableOpen || variable;
-                        const options = variableItem.items.map((item) => ({ label: item, value: item }));
+                        const options = variableItem.items.map((item) => ({
+                            label: item.displayValue || item.value,
+                            value: item.value,
+                        }));
                         const selectedValue = variableItem.selected
-                            ? { label: variableItem.selected, value: variableItem.selected }
+                            ? {
+                                  label: variableItem.selected.displayValue || variableItem.selected.value,
+                                  value: variableItem.selected.value,
+                              }
                             : ('' as unknown as Option);
                         return (
                             <ComponentWrapper

diff --git a/src/tests/VariablesList.test.tsx b/src/tests/VariablesList.test.tsx
@@ -1,7 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { UiThemeProvider } from '@chili-publish/grafx-shared-components';
+import selectEvent from 'react-select-event';
 import VariablesList from '../components/variables/VariablesList';
 import { variables } from './mocks/mockVariables';
+import { getDataTestIdForSUI } from '../utils/dataIds';
 
 jest.mock('../components/variablesComponents/imageVariable/useVariableConnector', () => ({
     useVariableConnector: () => ({
@@ -42,4 +44,27 @@ describe('Variables List', () => {
         expect(shortVariable1).toBeInTheDocument();
         expect(longVariable1).not.toBeInTheDocument();
     });
+
+    it('List variable should use "displayValue" for labels', async () => {
+        const { getByTestId } = render(
+            <UiThemeProvider theme="platform">
+                <VariablesList variables={variables} isDocumentLoaded />
+            </UiThemeProvider>,
+        );
+
+        const selectIndicator = getByTestId(getDataTestIdForSUI(`dropdown-10`)).getElementsByClassName(
+            'grafx-drop-down__dropdown-indicator',
+        )[0];
+        expect(selectIndicator).toBeInTheDocument();
+
+        act(() => {
+            selectEvent.openMenu(selectIndicator as unknown as HTMLElement);
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('List')).toBeInTheDocument();
+            expect(screen.getByText('Val 1')).toBeInTheDocument();
+            expect(screen.getByText('val 2')).toBeInTheDocument();
+        });
+    });
 });
diff --git a/src/tests/mocks/mockVariables.ts b/src/tests/mocks/mockVariables.ts
@@ -7,6 +7,7 @@ import {
     Variable,
     VariableType,
 } from '@chili-publish/studio-sdk';
+import { ListVariable } from '@chili-publish/studio-sdk/lib/src/next';
 
 export const variables: Variable[] = [
     <ImageVariable>(<unknown>{
@@ -75,4 +76,16 @@ export const variables: Variable[] = [
         isReadonly: false,
         isRequired: false,
     },
+    <ListVariable>{
+        id: '10',
+        name: 'List',
+        label: 'Test List',
+        type: VariableType.list,
+        occurrences: 0,
+        isVisible: true,
+        parentId: '7',
+        items: [{ value: 'val 1', displayValue: 'Val 1' }, { value: 'val 2' }],
+        isReadonly: false,
+        isRequired: false,
+    },
 ];
diff --git a/yarn.lock b/yarn.lock
@@ -1144,6 +1144,20 @@
   resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
   integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
 
+"@testing-library/dom@>=7":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.1.0.tgz#2d073e49771ad614da999ca48f199919e5176fb6"
+  integrity sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.3.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.5.0"
+    pretty-format "^27.0.2"
+
 "@testing-library/dom@^9.0.0":
   version "9.3.3"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"
@@ -1583,7 +1597,7 @@ [email protected]:
   dependencies:
     deep-equal "^2.0.5"
 
-aria-query@^5.0.0, aria-query@^5.3.0:
+aria-query@5.3.0, aria-query@^5.0.0, aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -4562,6 +4576,13 @@ react-onclickoutside@^6.13.0:
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz#1f5e0241c08784b6e65745d91aca0d700c548a89"
   integrity sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==
 
+react-select-event@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/react-select-event/-/react-select-event-5.5.1.tgz#d67e04a6a51428b1534b15ecb1b82afbe5edddcb"
+  integrity sha512-goAx28y0+iYrbqZA2FeRTreHHs/ZtSuKxtA+J5jpKT5RHPCbVZJ4MqACfPnWyFXsEec+3dP5bCrNTxIX8oYe9A==
+  dependencies:
+    "@testing-library/dom" ">=7"
+
 react-select@^5.6.1:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"