Merge branch 'main' into feature/WRS-2227-Error-Empty-state-handling-…

…for-Data-Source
chili-publish · Jan 13, 2025 · 3974aef · 3974aef
2 parents f79ec69 + 9cb33b0
commit 3974aef
Show file tree

Hide file tree

Showing 41 changed files with 932 additions and 342 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Studio UI
 
-![Coverage](https://img.shields.io/badge/coverage-75.58%25-red.svg)
+![Coverage](https://img.shields.io/badge/coverage-75.42%25-red.svg)
 
 This repository includes the source code for the Studio UI application, which will be used by CHILI GraFx end users.
 This application is intended to be used with CHILI GraFx (My) Projects, which uses a subset of features from the [studio-sdk](https://github.com/chili-publish/studio-sdk).

diff --git a/__mocks__/mockOutputSetting.ts b/__mocks__/mockOutputSetting.ts
@@ -1,4 +1,5 @@
 import { DownloadFormats } from '@chili-publish/studio-sdk';
+import { OutputType } from '../src/utils/ApiTypes';
 
 export const mockOutputSetting = {
     id: '1',
@@ -9,6 +10,7 @@ export const mockOutputSetting = {
     maxFileSizeInKiloBytes: 120,
     scaling: 1.5,
     watermark: true,
+    outputType: OutputType.Single,
 };
 
 export const mockOutputSetting2 = {
@@ -20,4 +22,5 @@ export const mockOutputSetting2 = {
     maxFileSizeInKiloBytes: 120,
     scaling: 1.5,
     watermark: true,
+    outputType: OutputType.Single,
 };
diff --git a/bundle-size.json b/bundle-size.json
@@ -1 +1 @@
-{ "bundle_size": 1038429 }
+{ "bundle_size": 1040601 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "studio-ui",
     "private": true,
-    "version": "1.19.0-7",
+    "version": "1.19.0-9",
     "type": "module",
     "description": "The Studio UI for CHILI GraFx",
     "main": "src/main.tsx",

diff --git a/src/MainContent.tsx b/src/MainContent.tsx
@@ -65,6 +65,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
     const [mediaConnectors, setMediaConnectors] = useState<ConnectorInstance[]>([]);
     const [fontsConnectors, setFontsConnectors] = useState<ConnectorInstance[]>([]);
     const [layoutIntent, setLayoutIntent] = useState<LayoutIntent | null>(null);
+    const [dataSource, setDataSource] = useState<ConnectorInstance>();
 
     const [multiLayoutMode, setMultiLayoutMode] = useState(false);
 
@@ -332,6 +333,10 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                 }
             });
 
+            window.StudioUISDK.dataSource.getDataSource().then((res) => {
+                setDataSource(res.parsedData ?? undefined);
+            });
+
             const layoutIntentData = (await window.StudioUISDK.layout.getSelected()).parsedData?.intent.value || null;
             setLayoutIntent(layoutIntentData);
             zoomToPage();
@@ -341,11 +346,22 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
     }, [fetchedDocument, zoomToPage]);
 
     useEffect(() => {
-        if (!multiLayoutMode) zoomToPage();
-    }, [multiLayoutMode, zoomToPage]);
+        if (!multiLayoutMode && isDocumentLoaded) zoomToPage();
+    }, [multiLayoutMode, isDocumentLoaded, zoomToPage]);
+
+    const navbarProps = useMemo(
+        () => ({
+            projectName: currentProject?.name || projectConfig.projectName,
+            goBack: projectConfig?.onUserInterfaceBack,
+            projectConfig,
+            undoStackState,
+            zoom: currentZoom,
+        }),
+        [currentProject?.name, projectConfig, undoStackState, currentZoom],
+    );
 
     return (
-        <AppProvider isDocumentLoaded={isDocumentLoaded} isAnimationPlaying={animationStatus}>
+        <AppProvider isDocumentLoaded={isDocumentLoaded} isAnimationPlaying={animationStatus} dataSource={dataSource}>
             <ShortcutProvider projectConfig={projectConfig} undoStackState={undoStackState} zoom={currentZoom}>
                 <Container canvas={canvas}>
                     <UiConfigContextProvider projectConfig={projectConfig} layoutIntent={layoutIntent}>
@@ -356,31 +372,19 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                             <div id={APP_WRAPPER_ID} className="app">
                                 {projectConfig.sandboxMode ? (
                                     <UiThemeProvider theme="studio" mode="dark">
-                                        <StudioNavbar
-                                            projectName={currentProject?.name || projectConfig.projectName}
-                                            goBack={projectConfig?.onUserInterfaceBack}
-                                            projectConfig={projectConfig}
-                                            undoStackState={undoStackState}
-                                            zoom={currentZoom}
-                                        />
+                                        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                                        <StudioNavbar {...navbarProps} />
                                     </UiThemeProvider>
                                 ) : (
-                                    <Navbar
-                                        projectName={currentProject?.name || projectConfig.projectName}
-                                        goBack={projectConfig?.onUserInterfaceBack}
-                                        projectConfig={projectConfig}
-                                        undoStackState={undoStackState}
-                                        zoom={currentZoom}
-                                    />
+                                    // eslint-disable-next-line react/jsx-props-no-spreading
+                                    <Navbar {...navbarProps} />
                                 )}
 
                                 <MainContentContainer
                                     sandboxMode={projectConfig.sandboxMode}
                                     fullHeight={projectConfig.uiOptions.widgets?.navBar?.visible === false}
                                 >
-                                    {!isMobileSize && (
-                                        <LeftPanel variables={variables} isDocumentLoaded={isDocumentLoaded} />
-                                    )}
+                                    {!isMobileSize && <LeftPanel variables={variables} />}
                                     <CanvasContainer>
                                         {isMobileSize && (
                                             <MobileVariablesTray
@@ -389,7 +393,6 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                                                 isPagesPanelDisplayed={
                                                     layoutIntent === LayoutIntent.print && pages?.length > 1
                                                 }
-                                                isDocumentLoaded={isDocumentLoaded}
                                             />
                                         )}
                                         {projectConfig.customElement && (

diff --git a/src/components/dataSource/DataSource.tsx b/src/components/dataSource/DataSource.tsx
@@ -6,10 +6,7 @@ import DataSourceInput from './DataSourceInput';
 import DataSourceModal from './DataSourceModal';
 import useDataSource from './useDataSource';
 
-interface DataSourceProps {
-    isDocumentLoaded: boolean;
-}
-function DataSource({ isDocumentLoaded }: DataSourceProps) {
+function DataSource() {
     const { panel } = useTheme();
     const { isDataSourceModalOpen, setIsDataSourceModalOpen } = useAppContext();
 
@@ -28,7 +25,7 @@ function DataSource({ isDocumentLoaded }: DataSourceProps) {
         hasDataConnector,
         requiresUserAuthorizationCheck,
         error,
-    } = useDataSource(isDocumentLoaded);
+    } = useDataSource();
 
     const onDataSourceModalClose = useCallback(() => {
         setIsDataSourceModalOpen(false);

diff --git a/src/components/dataSource/useDataSource.ts b/src/components/dataSource/useDataSource.ts
@@ -1,7 +1,7 @@
 import { ConnectorEvent, ConnectorEventType, ConnectorHttpError, DataItem } from '@chili-publish/studio-sdk';
-import { ConnectorInstance } from '@chili-publish/studio-sdk/lib/src/next';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAsyncMemo } from 'use-async-memo';
+import { useAppContext } from '../../contexts/AppProvider';
 import { useAuthToken } from '../../contexts/AuthTokenProvider';
 import { useSubscriberContext } from '../../contexts/Subscriber';
 import { useUiConfigContext } from '../../contexts/UiConfigContext';
@@ -20,8 +20,8 @@ function getDataSourceErrorText(status?: number) {
     }
 }
 
-const useDataSource = (isDocumentLoaded: boolean) => {
-    const [dataConnector, setDataConnector] = useState<ConnectorInstance | null>(null);
+const useDataSource = () => {
+    const { dataSource, isDocumentLoaded } = useAppContext();
     const [dataRows, setDataRows] = useState<DataItem[]>([]);
     const [continuationToken, setContinuationToken] = useState<string | null>(null);
 
@@ -35,12 +35,12 @@ const useDataSource = (isDocumentLoaded: boolean) => {
     const { authToken } = useAuthToken();
 
     const hasUserAuthorization = useAsyncMemo(async () => {
-        if (!dataConnector) {
+        if (!dataSource) {
             return false;
         }
-        const connector = await getRemoteMediaConnector(graFxStudioEnvironmentApiBaseUrl, dataConnector.id, authToken);
+        const connector = await getRemoteMediaConnector(graFxStudioEnvironmentApiBaseUrl, dataSource.id, authToken);
         return connector.supportedAuthentication.browser.includes('oAuth2AuthorizationCode');
-    }, [dataConnector, authToken, graFxStudioEnvironmentApiBaseUrl]);
+    }, [dataSource, authToken, graFxStudioEnvironmentApiBaseUrl]);
 
     const currentRow: DataItem | undefined = useMemo(() => {
         return dataRows[currentRowIndex];
@@ -101,9 +101,9 @@ const useDataSource = (isDocumentLoaded: boolean) => {
     );
 
     const loadDataRows = useCallback(async () => {
-        if (!dataConnector) return;
-        loadDataRowsByToken(dataConnector.id, continuationToken);
-    }, [dataConnector, continuationToken, loadDataRowsByToken]);
+        if (!dataSource) return;
+        loadDataRowsByToken(dataSource.id, continuationToken);
+    }, [dataSource, continuationToken, loadDataRowsByToken]);
 
     const getPreviousRow = useCallback(() => {
         setCurrentRowIndex((prev) => prev - 1);
@@ -121,19 +121,10 @@ const useDataSource = (isDocumentLoaded: boolean) => {
     }, []);
 
     useEffect(() => {
-        if (!isDocumentLoaded) return;
-        const getDataConnector = async () => {
-            const { parsedData: defaultDataConnector } = await window.StudioUISDK.dataSource.getDataSource();
-            setDataConnector(defaultDataConnector);
-        };
-        getDataConnector();
-    }, [isDocumentLoaded]);
-
-    useEffect(() => {
-        if (dataConnector) {
-            loadDataRowsByToken(dataConnector.id, null);
+        if (dataSource) {
+            loadDataRowsByToken(dataSource.id, null);
         }
-    }, [dataConnector, loadDataRowsByToken]);
+    }, [dataSource, loadDataRowsByToken]);
 
     useEffect(() => {
         (async () => {
@@ -166,14 +157,14 @@ const useDataSource = (isDocumentLoaded: boolean) => {
 
     useEffect(() => {
         const handler = (event: ConnectorEvent) => {
-            if (event.type === ConnectorEventType.reloadRequired && event.id === dataConnector?.id) {
+            if (event.type === ConnectorEventType.reloadRequired && event.id === dataSource?.id) {
                 resetData();
-                loadDataRowsByToken(dataConnector.id, null);
+                loadDataRowsByToken(dataSource.id, null);
             }
         };
         subscriber?.on('onConnectorEvent', handler);
         return () => subscriber?.off('onConnectorEvent', handler);
-    }, [subscriber, dataConnector, resetData, loadDataRowsByToken]);
+    }, [subscriber, dataSource, resetData, loadDataRowsByToken]);
 
     return {
         currentInputRow,
@@ -187,7 +178,7 @@ const useDataSource = (isDocumentLoaded: boolean) => {
         isPrevDisabled,
         isNextDisabled,
         hasMoreRows: !!continuationToken,
-        hasDataConnector: !!dataConnector,
+        hasDataConnector: !!dataSource,
         requiresUserAuthorizationCheck,
         error: error?.message,
     };

diff --git a/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx b/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx
@@ -1,26 +1,26 @@
 import { ITheme } from '@chili-publish/grafx-shared-components';
 import styled from 'styled-components';
+import { BORDER_SIZE, SCROLL_SIZE } from '../../../utils/constants';
 
 export const LeftPanelContainer = styled.div<{ overflowScroll: boolean; panelTheme: ITheme['panel'] }>`
     min-width: 18.75rem;
     width: 18.75rem;
     background-color: ${(props) => props.panelTheme.backgroundColor};
     border-right: 2px solid ${(props) => props.panelTheme.borderColor};
-    ${(props) => props.overflowScroll && 'overflow: scroll'};
     padding-left: 0;
-
-    &::-webkit-scrollbar {
-        width: 0;
-    }
+    scollbar-gutter: stable;
 `;
 
 export const VariablesListContainer = styled.div<{ hidden: boolean }>`
-    padding: 0 1.25rem;
+    padding: 0 0 0 1.25rem;
+    box-sizing: border-box;
+    width: calc(18.75rem - 1.5625rem - ${SCROLL_SIZE} + 1.25rem);
     ${({ hidden }) => hidden && 'display: none;'};
 `;
 
 export const ImagePanelContainer = styled.div<{ hidden: boolean }>`
     padding: 0 0 0 1.25rem;
-    height: 100%;
+    height: calc(100% - ${BORDER_SIZE});
+    width: calc(18.75rem - ${BORDER_SIZE});
     ${({ hidden }) => hidden && 'display: none;'};
 `;
diff --git a/src/components/layout-panels/leftPanel/LeftPanel.tsx b/src/components/layout-panels/leftPanel/LeftPanel.tsx
@@ -1,19 +1,18 @@
+import { ScrollbarWrapper, useTheme } from '@chili-publish/grafx-shared-components';
 import { Variable } from '@chili-publish/studio-sdk';
-import { useTheme } from '@chili-publish/grafx-shared-components';
-import { ImagePanelContainer, LeftPanelContainer, VariablesListContainer } from './LeftPanel.styles';
-import ImagePanel from '../../imagePanel/ImagePanel';
-import VariablesList from '../../variables/VariablesList';
+import { useFeatureFlagContext } from '../../../contexts/FeatureFlagProvider';
 import { useVariablePanelContext } from '../../../contexts/VariablePanelContext';
 import { ContentType } from '../../../contexts/VariablePanelContext.types';
 import DataSource from '../../dataSource/DataSource';
-import { useFeatureFlagContext } from '../../../contexts/FeatureFlagProvider';
+import ImagePanel from '../../imagePanel/ImagePanel';
+import VariablesList from '../../variables/VariablesList';
+import { ImagePanelContainer, LeftPanelContainer, VariablesListContainer } from './LeftPanel.styles';
 
 interface LeftPanelProps {
     variables: Variable[];
-    isDocumentLoaded: boolean;
 }
 
-function LeftPanel({ variables, isDocumentLoaded }: LeftPanelProps) {
+function LeftPanel({ variables }: LeftPanelProps) {
     const { contentType } = useVariablePanelContext();
     const { panel } = useTheme();
     const { featureFlags } = useFeatureFlagContext();
@@ -25,14 +24,16 @@ function LeftPanel({ variables, isDocumentLoaded }: LeftPanelProps) {
             overflowScroll={contentType !== ContentType.IMAGE_PANEL}
             panelTheme={panel}
         >
-            <VariablesListContainer hidden={contentType === ContentType.IMAGE_PANEL}>
-                {featureFlags?.STUDIO_DATA_SOURCE ? <DataSource isDocumentLoaded={isDocumentLoaded} /> : null}
-                <VariablesList variables={variables} isDocumentLoaded={isDocumentLoaded} />
-            </VariablesListContainer>
+            <ScrollbarWrapper>
+                <VariablesListContainer hidden={contentType === ContentType.IMAGE_PANEL}>
+                    {featureFlags?.STUDIO_DATA_SOURCE ? <DataSource /> : null}
+                    <VariablesList variables={variables} />
+                </VariablesListContainer>
 
-            <ImagePanelContainer hidden={contentType !== ContentType.IMAGE_PANEL}>
-                <ImagePanel />
-            </ImagePanelContainer>
+                <ImagePanelContainer hidden={contentType !== ContentType.IMAGE_PANEL}>
+                    <ImagePanel />
+                </ImagePanelContainer>
+            </ScrollbarWrapper>
         </LeftPanelContainer>
     );
 }

diff --git a/src/components/navbar/downloadPanel/DownloadPanel.tsx b/src/components/navbar/downloadPanel/DownloadPanel.tsx
@@ -3,17 +3,21 @@ import {
     Button,
     ButtonVariant,
     Colors,
-    Select,
     Icon,
     Menu,
+    Select,
+    SelectOptions,
     Tray,
     useMobileSize,
     useTheme,
-    SelectOptions,
 } from '@chili-publish/grafx-shared-components';
 import { DownloadFormats } from '@chili-publish/studio-sdk';
-import { css } from 'styled-components';
 import { Dispatch, useMemo, useState } from 'react';
+import { css } from 'styled-components';
+import { UserInterfaceOutputSettings } from '../../../types/types';
+import { APP_WRAPPER_ID } from '../../../utils/constants';
+import { getDataIdForSUI, getDataTestIdForSUI } from '../../../utils/dataIds';
+import StudioMobileDropdown from '../../shared/StudioMobileDropdown/StudioMobileDropdown';
 import {
     BtnContainer,
     ButtonWrapper,
@@ -23,13 +27,9 @@ import {
     DownloadPanelContainer,
     SpinnerContainer,
 } from './DownloadPanel.styles';
-import useDownload from './useDownload';
-import { getDataIdForSUI, getDataTestIdForSUI } from '../../../utils/dataIds';
-import StudioMobileDropdown from '../../shared/StudioMobileDropdown/StudioMobileDropdown';
-import { APP_WRAPPER_ID } from '../../../utils/constants';
-import DropdownOption from './DropdownOption';
 import { outputTypesIcons } from './DownloadPanel.types';
-import { UserInterfaceOutputSettings } from '../../../types/types';
+import DropdownOption from './DropdownOption';
+import useDownload from './useDownload';
 
 type SelectOptionType = SelectOptions & { item: UserInterfaceOutputSettings };
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{ "bundle_size": 1038429 }
		{ "bundle_size": 1040601 }