[Fix][WRS-2298] Read connector options from linked variable

package.json

@@ -81,7 +81,7 @@
         "react-select-event": "^5.5.1",
         "resize-observer-polyfill": "^1.5.1",
         "ts-jest": "^29.1.0",
-        "typescript": "*",
+        "typescript": "^5.7.3",
         "vite": "^4.3.9",
         "vite-plugin-environment": "^1.1.3"
     },

src/components/pagesPanel/Pages.tsx

@@ -1,18 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Page } from '@chili-publish/studio-sdk';
 import {
     PreviewCard,
     PreviewCardVariant,
     PreviewType,
     ScrollbarWrapper,
     useMobileSize,
 } from '@chili-publish/grafx-shared-components';
-import { ScrollableContainer, Card, Container } from './Pages.styles';
-import { BORDER_SIZE, PAGES_CONTAINER_HEIGHT, PREVIEW_FALLBACK } from '../../utils/constants';
+import { Page } from '@chili-publish/studio-sdk';
+import { useCallback, useEffect, useState } from 'react';
+import { useUiConfigContext } from '../../contexts/UiConfigContext';
 import { PageSnapshot } from '../../types/types';
+import { BORDER_SIZE, PAGES_CONTAINER_HEIGHT, PREVIEW_FALLBACK } from '../../utils/constants';
+import { Card, Container, ScrollableContainer } from './Pages.styles';
 import { PreviewCardBadge } from './PreviewCardBadge';
 import { useAttachArrowKeysListener } from './useAttachArrowKeysListener';
-import { useUiConfigContext } from '../../contexts/UiConfigContext';
 
 interface PagesProps {
     pages: Page[];
@@ -83,7 +83,7 @@
         return () => {
             clearTimeout(timeoutId);
         };
     }, [pagesToRefresh, setPagesToRefresh, getPagesSnapshot]);
 
     if (uiOptions.widgets?.bottomBar?.visible === false) return null;
 
@@ -105,7 +105,9 @@
                                         path={
                                             pageSnapshots[index] &&
                                             URL.createObjectURL(
-                                                new Blob([pageSnapshots[index].snapshot.buffer], { type: 'image/png' }),
+                                                new Blob([pageSnapshots[index].snapshot.buffer as BlobPart], {
+                                                    type: 'image/png',
+                                                }),
                                             )
                                         }
                                         type={PreviewType.IMAGE}

src/components/variablesComponents/imageVariable/useMediaDetails.ts

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
 import { ConnectorMappingDirection, ConnectorStateType, Media } from '@chili-publish/studio-sdk';
+import { useCallback, useEffect, useState } from 'react';
 import { useVariablePanelContext } from '../../../contexts/VariablePanelContext';
 import { useVariablesChange } from '../../../core/hooks/useVariablesChange';
+import { fromLinkToVariableId, isLinkToVariable } from '../../../utils/connectors';
 
 export const useMediaDetails = (connectorId: string | undefined, mediaAssetId: string | undefined) => {
     const { connectorCapabilities, getCapabilitiesForConnector } = useVariablePanelContext();
@@ -47,11 +48,13 @@ export const useMediaDetails = (connectorId: string | undefined, mediaAssetId: s
             if (!connectorId || mediaConnectorState === null) {
                 return;
             }
-            const mappings = await window.StudioUISDK.connector.getMappings(connectorId);
+            const mappings = await window.StudioUISDK.connector.getMappings(
+                connectorId,
+                ConnectorMappingDirection.engineToConnector,
+            );
             const variableIds = mappings.parsedData
-                ?.filter((m) => m.direction === ConnectorMappingDirection.engineToConnector)
-                .filter((m) => typeof m.value === 'string' && m.value.startsWith('var.'))
-                .map((m) => (m.value as string).replace('var.', ''));
+                ?.filter((m) => isLinkToVariable(m))
+                .map((m) => fromLinkToVariableId(m.value));
             setVariableIdsInMapping(variableIds ?? []);
         })();
     }, [connectorId, mediaConnectorState]);

src/tests/components/variablesComponents/imageVariable/useMediaDetails.test.ts

@@ -105,7 +105,12 @@ describe('"useMediaDetails" hook', () => {
 
         expect(window.StudioUISDK.connector.waitToBeReady).not.toHaveBeenCalledWith('grafx-media');
 
-        await waitFor(() => expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith('grafx-media'));
+        await waitFor(() =>
+            expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith(
+                'grafx-media',
+                ConnectorMappingDirection.engineToConnector,
+            ),
+        );
         await waitFor(() => expect(getCapabilitiesForConnector).toHaveBeenCalledWith('grafx-media'));
 
         expect(window.StudioUISDK.mediaConnector.query).not.toHaveBeenCalled();
@@ -127,7 +132,12 @@ describe('"useMediaDetails" hook', () => {
 
         await waitFor(() => expect(window.StudioUISDK.connector.getState).toHaveBeenCalledWith('grafx-media'));
 
-        await waitFor(() => expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith('grafx-media'));
+        await waitFor(() =>
+            expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith(
+                'grafx-media',
+                ConnectorMappingDirection.engineToConnector,
+            ),
+        );
 
         expect(getCapabilitiesForConnector).not.toHaveBeenCalledWith('grafx-media');
         expect(window.StudioUISDK.mediaConnector.query).not.toHaveBeenCalled();
@@ -150,7 +160,12 @@ describe('"useMediaDetails" hook', () => {
         renderHook(() => useMediaDetails('grafx-media', 'media-asset-id'));
 
         await waitFor(() => expect(window.StudioUISDK.connector.getState).toHaveBeenCalledWith('grafx-media'));
-        await waitFor(() => expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith('grafx-media'));
+        await waitFor(() =>
+            expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith(
+                'grafx-media',
+                ConnectorMappingDirection.engineToConnector,
+            ),
+        );
 
         const variableChange = { id: '7377E97A-5FD9-46B1-A8CF-0C7C776C7DC2', value: '1234' } as unknown as Variable;
         mockSubscriber.emit('onVariableListChanged', [variableChange]);
@@ -176,7 +191,12 @@ describe('"useMediaDetails" hook', () => {
         renderHook(() => useMediaDetails('grafx-media', 'media-asset-id'));
 
         await waitFor(() => expect(window.StudioUISDK.connector.getState).toHaveBeenCalledWith('grafx-media'));
-        await waitFor(() => expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith('grafx-media'));
+        await waitFor(() =>
+            expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith(
+                'grafx-media',
+                ConnectorMappingDirection.engineToConnector,
+            ),
+        );
 
         const variableChange = { id: '2', value: '1234' } as unknown as Variable;
         mockSubscriber.emit('onVariableListChanged', [variableChange]);
@@ -202,7 +222,12 @@ describe('"useMediaDetails" hook', () => {
         const { result } = renderHook(() => useMediaDetails('grafx-media', 'media-asset-id'));
 
         await waitFor(() => expect(window.StudioUISDK.connector.getState).toHaveBeenCalledWith('grafx-media'));
-        await waitFor(() => expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith('grafx-media'));
+        await waitFor(() =>
+            expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith(
+                'grafx-media',
+                ConnectorMappingDirection.engineToConnector,
+            ),
+        );
 
         const variableChange = { id: '8A59BB89-898D-4BAC-9C8F-F40F6C83479E', value: '1234' } as unknown as Variable;
         mockSubscriber.emit('onVariableListChanged', [variableChange]);
@@ -233,7 +258,12 @@ describe('"useMediaDetails" hook', () => {
         const { result } = renderHook(() => useMediaDetails('grafx-media', 'media-asset-id'));
 
         await waitFor(() => expect(window.StudioUISDK.connector.getState).toHaveBeenCalledWith('grafx-media'));
-        await waitFor(() => expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith('grafx-media'));
+        await waitFor(() =>
+            expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith(
+                'grafx-media',
+                ConnectorMappingDirection.engineToConnector,
+            ),
+        );
 
         const variableChange = { id: '8A59BB89-898D-4BAC-9C8F-F40F6C83479E', value: '1234' } as unknown as Variable;
         mockSubscriber.emit('onVariableListChanged', [variableChange]);
@@ -271,7 +301,12 @@ describe('"useMediaDetails" hook', () => {
         const { result } = renderHook(() => useMediaDetails('grafx-media', 'media-asset-id'));
 
         await waitFor(() => expect(window.StudioUISDK.connector.getState).toHaveBeenCalledWith('grafx-media'));
-        await waitFor(() => expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith('grafx-media'));
+        await waitFor(() =>
+            expect(window.StudioUISDK.connector.getMappings).toHaveBeenCalledWith(
+                'grafx-media',
+                ConnectorMappingDirection.engineToConnector,
+            ),
+        );
 
         const variableChange = { id: '8A59BB89-898D-4BAC-9C8F-F40F6C83479E', value: '1234' } as unknown as Variable;
         await act(() => {

src/tests/utils/connectors.test.ts

@@ -1,8 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import EditorSDK from '@chili-publish/studio-sdk';
+import EditorSDK, { ConnectorMappingDirection } from '@chili-publish/studio-sdk';
 import axios from 'axios';
 import { mock } from 'jest-mock-extended';
-import { getRemoteConnector, isAuthenticationRequired, verifyAuthentication } from '../../utils/connectors';
+import {
+    getConnectorConfigurationOptions,
+    getRemoteConnector,
+    isAuthenticationRequired,
+    verifyAuthentication,
+} from '../../utils/connectors';
 
 jest.mock('axios');
 
@@ -18,6 +23,8 @@ describe('utils connectors', () => {
         },
     });
     mockSDK.mediaConnector.query = jest.fn();
+    mockSDK.variable.getById = jest.fn();
+    mockSDK.connector.getMappings = jest.fn();
 
     window.StudioUISDK = mockSDK;
 
@@ -74,4 +81,52 @@ describe('utils connectors', () => {
 
         expect(mockSDK.mediaConnector.query).toHaveBeenCalledWith('connectorId', {});
     });
+
+    it('should "getConnectorConfigurationOptions" correctly', async () => {
+        (mockSDK.variable.getById as jest.Mock)
+            .mockResolvedValueOnce({
+                parsedData: {
+                    value: 'text',
+                },
+            })
+            .mockResolvedValueOnce({
+                parsedData: {
+                    value: false,
+                },
+            });
+
+        (mockSDK.connector.getMappings as jest.Mock).mockResolvedValueOnce({
+            parsedData: [
+                {
+                    name: 'option-1',
+                    value: 'plain-text',
+                },
+                {
+                    name: 'option-2',
+                    value: 'var.var1',
+                },
+                {
+                    name: 'option-3',
+                    value: true,
+                },
+                {
+                    name: 'option-4',
+                    value: 'var.var2',
+                },
+            ],
+        });
+
+        const options = await getConnectorConfigurationOptions('connector-1');
+
+        expect(mockSDK.connector.getMappings).toHaveBeenCalledWith(
+            'connector-1',
+            ConnectorMappingDirection.engineToConnector,
+        );
+        expect(options).toEqual({
+            'option-1': 'plain-text',
+            'option-2': 'text',
+            'option-3': true,
+            'option-4': false,
+        });
+    });
 });

src/tests/utils/documentExportHelper.test.tsx

@@ -127,9 +127,11 @@ describe('"getDownloadLink', () => {
             );
         });
 
-        it('should skip sending data source output type is not "Batch"', async () => {
+        it('should skip sending data source if output setting does not have "dataSourceEnabled"', async () => {
             (axios.get as jest.Mock).mockResolvedValue({
-                data: {},
+                data: {
+                    dataSourceEnabled: false,
+                },
             });
             await getDownloadLink(DownloadFormats.PDF, '', 'Token', '1', 'projectId', 'outputId', false);
 

src/utils/connectors.ts

@@ -1,4 +1,9 @@
-import { ConnectorMappingDirection } from '@chili-publish/studio-sdk';
+import {
+    BooleanVariable,
+    ConnectorMappingDirection,
+    EngineToConnectorMapping,
+    ShortTextVariable,
+} from '@chili-publish/studio-sdk';
 import {
     ConnectorGrafxRegistration,
     ConnectorInstance,
@@ -68,16 +73,44 @@ export function getEnvId(connector: ConnectorInstance) {
     return connector.source.id;
 }
 
+export type TextEngineToConnectorMapping = Omit<EngineToConnectorMapping, 'value'> & { value: string };
+
+type LinkedVariable = ShortTextVariable | BooleanVariable;
+
+export function isLinkToVariable(mapping: EngineToConnectorMapping): mapping is TextEngineToConnectorMapping {
+    return typeof mapping.value === 'string' && mapping.value.startsWith('var.');
+}
+
+export function linkToVariable(variableId: string) {
+    return `var.${variableId}`;
+}
+
+export function fromLinkToVariableId(value: string) {
+    return value.replace('var.', '');
+}
+
 export async function getConnectorConfigurationOptions(connectorId: string) {
     const { parsedData } = await window.StudioUISDK.connector.getMappings(
         connectorId,
         ConnectorMappingDirection.engineToConnector,
     );
-    return (
-        parsedData?.reduce((config, mapping) => {
-            // eslint-disable-next-line no-param-reassign
-            config[mapping.name] = mapping.value;
-            return config;
-        }, {} as Record<string, string | boolean>) ?? null
+    if (!parsedData) {
+        return null;
+    }
+    const mappingValues = await Promise.all(
+        parsedData.map((m) => {
+            if (isLinkToVariable(m)) {
+                return window.StudioUISDK.variable.getById(fromLinkToVariableId(m.value)).then((v) => ({
+                    name: m.name,
+                    value: (v.parsedData as LinkedVariable).value,
+                }));
+            }
+            return m;
+        }),
     );
+    return mappingValues.reduce((config, mapping) => {
+        // eslint-disable-next-line no-param-reassign
+        config[mapping.name] = mapping.value;
+        return config;
+    }, {} as Record<string, string | boolean>);
 }

yarn.lock

@@ -6262,10 +6262,10 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
-typescript@*:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
-  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
+typescript@^5.7.3:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.3.tgz#919b44a7dbb8583a9b856d162be24a54bf80073e"
+  integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"