Merge branch 'main' of github-cp.com:chili-publish/studio-ui into tas…

…k/WRS-2189

.github/workflows/bundle-size-update.yml

@@ -44,5 +44,5 @@ jobs:
                   git config --global user.name 'github-actions[bot]'
                   git config --global user.email user.email 'github-actions[bot]@users.noreply.github.com'
                   git add bundle-size.json
-                  git commit -m "Update bundle size"
+                  git commit -m "Update bundle size [skip ci]"
                   git push origin main --follow-tags

bundle-size.json

@@ -1 +1 @@
-{ "bundle_size": 1028558 }
+{ "bundle_size": 1029654 }

package.json

@@ -1,7 +1,7 @@
 {
     "name": "studio-ui",
     "private": true,
-    "version": "1.18.0-11",
+    "version": "1.19.0-1",
     "type": "module",
     "description": "The Studio UI for CHILI GraFx",
     "main": "src/main.tsx",
@@ -27,7 +27,7 @@
     },
     "dependencies": {
         "@chili-publish/grafx-shared-components": "https://stgrafxstudiodevpublic.blob.core.windows.net/grafx-shared-components/dev-shared-components/466/grafx-shared-components.tgz",
-        "@chili-publish/studio-sdk": "^1.17.2-rc.2",
+        "@chili-publish/studio-sdk": "^1.18.0",
         "@babel/preset-env": "^7.25.3",
         "@fortawesome/fontawesome-svg-core": "^6.7.1",
         "@fortawesome/pro-light-svg-icons": "^6.7.1",

src/MainContent.tsx

@@ -23,6 +23,7 @@ import {
 import LeftPanel from './components/layout-panels/leftPanel/LeftPanel';
 import Navbar from './components/navbar/Navbar';
 import StudioNavbar from './components/navbar/studioNavbar/StudioNavbar';
+import Pages from './components/pagesPanel/Pages';
 import MobileVariablesTray from './components/variables/MobileVariablesTray';
 import AppProvider from './contexts/AppProvider';
 import { useAuthToken } from './contexts/AuthTokenProvider';
@@ -31,7 +32,6 @@ import { useSubscriberContext } from './contexts/Subscriber';
 import { UiConfigContextProvider } from './contexts/UiConfigContext';
 import { VariablePanelContextProvider } from './contexts/VariablePanelContext';
 import { SuiCanvas } from './MainContent.styles';
-import Pages from './components/pagesPanel/Pages';
 import { Project, ProjectConfig } from './types/types';
 import { APP_WRAPPER_ID } from './utils/constants';
 import { getDataIdForSUI, getDataTestIdForSUI } from './utils/dataIds';
@@ -338,7 +338,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                                 {projectConfig.sandboxMode ? (
                                     <UiThemeProvider theme="studio" mode="dark">
                                         <StudioNavbar
-                                            projectName={projectConfig?.projectName || currentProject?.name}
+                                            projectName={currentProject?.name || projectConfig.projectName}
                                             goBack={projectConfig?.onUserInterfaceBack}
                                             projectConfig={projectConfig}
                                             undoStackState={undoStackState}
@@ -347,7 +347,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                                     </UiThemeProvider>
                                 ) : (
                                     <Navbar
-                                        projectName={projectConfig?.projectName || currentProject?.name}
+                                        projectName={currentProject?.name || projectConfig.projectName}
                                         goBack={projectConfig?.onUserInterfaceBack}
                                         projectConfig={projectConfig}
                                         undoStackState={undoStackState}

src/components/navbar/Navbar.tsx

@@ -1,17 +1,19 @@
 import { useTheme } from '@chili-publish/grafx-shared-components';
 import { css } from 'styled-components';
 import { getDataIdForSUI, getDataTestIdForSUI } from '../../utils/dataIds';
-import { StyledNavbar, NavbarItem } from './Navbar.styles';
+import { NavbarItem, StyledNavbar } from './Navbar.styles';
 import { INavbar } from './Navbar.types';
 import DownloadPanel from './downloadPanel/DownloadPanel';
-import useNavbar from './useNavbar';
 import useDownloadPanel from './useDownloadPanel';
+import useNavbar from './useNavbar';
 
 function Navbar(props: INavbar) {
     const { projectName, goBack, projectConfig, zoom, undoStackState } = props;
 
-    const { isDownloadPanelVisible, showDownloadPanel, hideDownloadPanel, handleDownload } =
-        useDownloadPanel(projectConfig);
+    const { isDownloadPanelVisible, showDownloadPanel, hideDownloadPanel, handleDownload } = useDownloadPanel(
+        projectConfig,
+        projectName,
+    );
 
     const { navbarItems } = useNavbar({
         projectName,

src/components/navbar/Navbar.types.ts

@@ -3,7 +3,7 @@ import { CSSProp } from 'styled-components';
 import { ProjectConfig } from '../../types/types';
 
 export interface INavbar {
-    projectName?: string;
+    projectName: string;
     goBack?: () => void;
     zoom: number;
     undoStackState: { canRedo: boolean; canUndo: boolean };

src/components/navbar/studioNavbar/StudioNavbar.tsx

@@ -1,8 +1,8 @@
 import { useTheme } from '@chili-publish/grafx-shared-components';
 import { css } from 'styled-components';
 import { getDataIdForSUI, getDataTestIdForSUI } from '../../../utils/dataIds';
-import { NavbarItem, STUDIO_NAVBAR_HEIGHT, StyledNavbar } from '../Navbar.styles';
 import DownloadPanel from '../downloadPanel/DownloadPanel';
+import { NavbarItem, STUDIO_NAVBAR_HEIGHT, StyledNavbar } from '../Navbar.styles';
 import { INavbar } from '../Navbar.types';
 import useDownloadPanel from '../useDownloadPanel';
 import useStudioNavbar from './useStudioNavbar';
@@ -11,8 +11,10 @@ function StudioNavbar(props: INavbar) {
     const { projectName, goBack, projectConfig, zoom, undoStackState } = props;
 
     const { panel, mode } = useTheme();
-    const { isDownloadPanelVisible, showDownloadPanel, hideDownloadPanel, handleDownload } =
-        useDownloadPanel(projectConfig);
+    const { isDownloadPanelVisible, showDownloadPanel, hideDownloadPanel, handleDownload } = useDownloadPanel(
+        projectConfig,
+        projectName,
+    );
 
     const { navbarItems } = useStudioNavbar({
         projectName,

src/components/navbar/studioNavbar/useStudioNavbar.tsx

@@ -1,18 +1,18 @@
-import { useCallback, useMemo } from 'react';
 import { useTheme } from '@chili-publish/grafx-shared-components';
-import useNavbarDownloadBtn from '../navbarItems/useNavbarDownloadBtn';
-import useNavbarUndoRedoItems from '../navbarItems/useNavbarUndoRedo';
-import useNavbarZoom from '../navbarItems/useNavbarZoom';
-import { NavbarItemType } from '../Navbar.types';
+import { useCallback, useMemo } from 'react';
+import { ProjectConfig } from '../../../types/types';
+import { SESSION_USER_INTEFACE_ID_KEY } from '../../../utils/constants';
 import { NavbarGroup, NavbarText } from '../Navbar.styles';
+import { NavbarItemType } from '../Navbar.types';
+import useNavbarDownloadBtn from '../navbarItems/useNavbarDownloadBtn';
 import useNavbarMenu from '../navbarItems/useNavbarMenu';
 import useNavbarModeToggle from '../navbarItems/useNavbarModeToggle';
+import useNavbarUndoRedoItems from '../navbarItems/useNavbarUndoRedo';
+import useNavbarZoom from '../navbarItems/useNavbarZoom';
 import useUserInterfaceSelector from '../navbarItems/useUserInterfaceSelector';
-import { ProjectConfig } from '../../../types/types';
-import { SESSION_USER_INTEFACE_ID_KEY } from '../../../utils/constants';
 
 interface INavbar {
-    projectName: string | undefined;
+    projectName: string;
     projectConfig: ProjectConfig;
     zoom: number;
     undoStackState: { canRedo: boolean; canUndo: boolean };
@@ -49,7 +49,7 @@ const useStudioNavbar = ({
             content: (
                 <NavbarGroup>
                     <NavbarText aria-label={`Project: ${projectName}`} mode={mode}>
-                        {decodeURI(projectName || '')}
+                        {decodeURI(projectName)}
                     </NavbarText>
                 </NavbarGroup>
             ),

src/components/navbar/useDownloadPanel.ts

@@ -3,11 +3,11 @@ import { DownloadFormats } from '@chili-publish/studio-sdk';
 import axios from 'axios';
 import { Dispatch, useState } from 'react';
 import { ProjectConfig } from 'src/types/types';
+import { useAuthToken } from '../../contexts/AuthTokenProvider';
 import { useNotificationManager } from '../../contexts/NotificantionManager/NotificationManagerContext';
 import { useVariablePanelContext } from '../../contexts/VariablePanelContext';
-import { useAuthToken } from '../../contexts/AuthTokenProvider';
 
-const useDownloadPanel = (projectConfig: ProjectConfig) => {
+const useDownloadPanel = (projectConfig: ProjectConfig, projectName: string) => {
     const { authToken } = useAuthToken();
     const [isDownloadPanelVisible, setIsDownloadPanelVisible] = useState(false);
 
@@ -58,7 +58,7 @@ const useDownloadPanel = (projectConfig: ProjectConfig) => {
             const a = Object.assign(document.createElement('a'), {
                 href: objectUrl,
                 style: 'display: none',
-                download: `export.${extension}`,
+                download: `${projectName}.${extension}`,
             });
             document.body.appendChild(a);
             a.click();

src/tests/VariablesComponents.test.tsx

@@ -52,7 +52,7 @@ describe('Variable Component', () => {
                 ,
             </UiThemeProvider>,
         );
-        const variable = await waitFor(() => screen.getByText(variables[0].label));
+        const variable = await waitFor(() => screen.getByText(variables[0].label!));
         expect(variable).toBeInTheDocument();
     });
 

src/tests/components/dataSource/DataSourceModal.test.tsx

@@ -86,7 +86,8 @@ describe('DataSourceModal test', () => {
         expect(screen.getByDisplayValue('3 | Mary | 17')).toBeInTheDocument();
     });
 
-    it('Should be able to navigate with arrow key in the data source table', async () => {
+    // TODO: Re-enable this test in scope of https://github.com/chili-publish/studio-ui/pull/247
+    it.skip('Should be able to navigate with arrow key in the data source table', async () => {
         render(
             <UiThemeProvider theme="platform">
                 <div id={APP_WRAPPER_ID}>
@@ -107,12 +108,12 @@ describe('DataSourceModal test', () => {
             expect(dataRowsTable).toBeInTheDocument();
         });
 
-        expect(screen.getByText('Row 1')).toBeInTheDocument();
-        expect(screen.getByDisplayValue('1 | Joe | 15')).toBeInTheDocument();
-
         await act(async () => {
             await user.keyboard('[ArrowDown]');
         });
+
+        expect(screen.getByText('Row 1')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('1 | Joe | 15')).toBeInTheDocument();
         await act(async () => {
             await user.keyboard('[Enter]');
         });

src/tests/components/variablesComponents/booleanVariable/BooleanVariable.test.tsx

@@ -23,7 +23,7 @@ describe('BooleanVariable', () => {
             </UiThemeProvider>,
         );
 
-        const variableLabel = screen.queryByText(booleanVar.label);
+        const variableLabel = screen.queryByText(booleanVar.label!);
         // the label is empty string won't be rendered
         expect(variableLabel).toBeNull();
     });
@@ -38,7 +38,7 @@ describe('BooleanVariable', () => {
             </UiThemeProvider>,
         );
 
-        expect(screen.getByText(booleanVar.label)).toBeInTheDocument();
+        expect(screen.getByText(booleanVar.label!)).toBeInTheDocument();
     });
     it('should display label as variable name if label does not exist', () => {
         const booleanVar = {

src/tests/navbar/Navbar.test.tsx

@@ -1,12 +1,12 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { UiThemeProvider, getDataTestId } from '@chili-publish/grafx-shared-components';
 import { DownloadFormats, LayoutIntent } from '@chili-publish/studio-sdk';
 import { mockOutputSetting } from '@mocks/mockOutputSetting';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Navbar from '../../components/navbar/Navbar';
-import { getDataTestIdForSUI } from '../../utils/dataIds';
-import { ProjectConfig, defaultOutputSettings, defaultPlatformUiOptions } from '../../types/types';
 import * as UiConfigContext from '../../contexts/UiConfigContext';
+import { ProjectConfig, defaultOutputSettings, defaultPlatformUiOptions } from '../../types/types';
 import { APP_WRAPPER_ID } from '../../utils/constants';
+import { getDataTestIdForSUI } from '../../utils/dataIds';
 
 describe('Navbar', () => {
     let prjConfig: ProjectConfig;
@@ -31,6 +31,7 @@ describe('Navbar', () => {
                 <div id={APP_WRAPPER_ID}>
                     <UiThemeProvider theme="platform">
                         <Navbar
+                            projectName=""
                             projectConfig={prjConfig}
                             zoom={100}
                             undoStackState={{
@@ -63,6 +64,7 @@ describe('Navbar', () => {
             <UiConfigContext.UiConfigContextProvider projectConfig={config} layoutIntent={LayoutIntent.digitalAnimated}>
                 <UiThemeProvider theme="platform">
                     <Navbar
+                        projectName=""
                         projectConfig={config}
                         zoom={100}
                         undoStackState={{
@@ -100,6 +102,7 @@ describe('Navbar', () => {
             <UiConfigContext.UiConfigContextProvider projectConfig={config} layoutIntent={LayoutIntent.digitalAnimated}>
                 <UiThemeProvider theme="platform">
                     <Navbar
+                        projectName=""
                         projectConfig={config}
                         zoom={100}
                         undoStackState={{
@@ -132,6 +135,7 @@ describe('Navbar', () => {
                 <div id={APP_WRAPPER_ID}>
                     <UiThemeProvider theme="platform">
                         <Navbar
+                            projectName=""
                             projectConfig={prjConfig}
                             zoom={100}
                             undoStackState={{
@@ -193,6 +197,7 @@ describe('Navbar', () => {
                 <div id={APP_WRAPPER_ID}>
                     <UiThemeProvider theme="platform">
                         <Navbar
+                            projectName=""
                             projectConfig={prjConfig}
                             zoom={100}
                             undoStackState={{

yarn.lock

@@ -1311,10 +1311,10 @@
   version "0.88.9"
   resolved "https://stgrafxstudiodevpublic.blob.core.windows.net/grafx-shared-components/dev-shared-components/466/grafx-shared-components.tgz#3291b20d794f934a49d5059a58a6b0015cf1150f"
 
-"@chili-publish/studio-sdk@^1.17.2-rc.2":
-  version "1.17.2-rc.2"
-  resolved "https://npm.pkg.github.com/download/@chili-publish/studio-sdk/1.17.2-rc.2/83fb011c4f7d955f6f4911f43fc7328436b638ed#83fb011c4f7d955f6f4911f43fc7328436b638ed"
-  integrity sha512-w/tf3DilXLJKadsVkQGLePZshVOEjC+CvIAmwZYb1lWMuTFOBG619zH5PX5RTGfetcjJOahW79qVOCBiA9o/Lg==
+"@chili-publish/studio-sdk@^1.18.0":
+  version "1.18.0"
+  resolved "https://npm.pkg.github.com/download/@chili-publish/studio-sdk/1.18.0/d55d0a038e48eecb47030fc02794f0d1142a24fc#d55d0a038e48eecb47030fc02794f0d1142a24fc"
+  integrity sha512-evIpPdr/eesqpdxKnkXKQ6khgx9NhZkYisortacFAEQfnuWUNlroNOMZA3DbxaDo9Dkd7gS6MMuF/HqXeFvDCg==
   dependencies:
     penpal "6.1.0"