From 6e2e3c45c18caee726163f2ca85028750e6176ac Mon Sep 17 00:00:00 2001 From: sebastianm Date: Fri, 10 Jan 2025 17:54:12 +0200 Subject: [PATCH 1/6] [Task][WRS-2189] Change page on arrow key press, scrollbars behaviour (#249) Co-authored-by: sebastian-mereuta --- package.json | 2 +- .../leftPanel/LeftPanel.styles.tsx | 14 ++-- .../layout-panels/leftPanel/LeftPanel.tsx | 18 ++-- src/components/pagesPanel/Pages.styles.ts | 16 ++-- src/components/pagesPanel/Pages.tsx | 24 ++++-- .../pagesPanel/useAttachArrowKeysListener.ts | 83 +++++++++++++++++++ .../variables/MobileVariablesTray.tsx | 3 + src/utils/constants.ts | 4 + yarn.lock | 8 +- 9 files changed, 138 insertions(+), 34 deletions(-) create mode 100644 src/components/pagesPanel/useAttachArrowKeysListener.ts diff --git a/package.json b/package.json index ca21ca5f..f3b000bc 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "validate-versions": "node validate_versions.cjs" }, "dependencies": { - "@chili-publish/grafx-shared-components": "^0.90.0", + "@chili-publish/grafx-shared-components": "^0.90.1", "@chili-publish/studio-sdk": "^1.18.1-rc.4", "@babel/preset-env": "^7.25.3", "@fortawesome/fontawesome-svg-core": "^6.7.1", diff --git a/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx b/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx index c4f36a20..06c67168 100644 --- 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 index a78971bb..99b52959 100644 --- a/src/components/layout-panels/leftPanel/LeftPanel.tsx +++ b/src/components/layout-panels/leftPanel/LeftPanel.tsx @@ -1,5 +1,5 @@ import { Variable } from '@chili-publish/studio-sdk'; -import { useTheme } from '@chili-publish/grafx-shared-components'; +import { ScrollbarWrapper, useTheme } from '@chili-publish/grafx-shared-components'; import { ImagePanelContainer, LeftPanelContainer, VariablesListContainer } from './LeftPanel.styles'; import ImagePanel from '../../imagePanel/ImagePanel'; import VariablesList from '../../variables/VariablesList'; @@ -25,14 +25,16 @@ function LeftPanel({ variables, isDocumentLoaded }: LeftPanelProps) { overflowScroll={contentType !== ContentType.IMAGE_PANEL} panelTheme={panel} > - + + - + + ); } diff --git a/src/components/pagesPanel/Pages.styles.ts b/src/components/pagesPanel/Pages.styles.ts index 8aa4e893..de2c2584 100644 --- a/src/components/pagesPanel/Pages.styles.ts +++ b/src/components/pagesPanel/Pages.styles.ts @@ -1,25 +1,27 @@ import { ITheme } from '@chili-publish/grafx-shared-components'; import styled from 'styled-components'; +import { BORDER_SIZE, PAGES_CONTAINER_HEIGHT, SCROLL_SIZE } from '../../utils/constants'; export const Container = styled.div<{ themeStyles: ITheme; isMobileSize: boolean }>` box-sizing: border-box; display: flex; justify-content: center; max-width: ${({ isMobileSize }) => (!isMobileSize ? 'calc(100vw - 18.875rem)' : '100%')}; - height: 7.5rem; + height: ${PAGES_CONTAINER_HEIGHT}; background: ${({ themeStyles }) => themeStyles.panel.backgroundColor}; - border-top: 2px solid ${({ themeStyles }) => themeStyles.panel.borderColor}; + border-top: ${BORDER_SIZE} solid ${({ themeStyles }) => themeStyles.panel.borderColor}; `; -export const ScrollableContainer = styled.div` + +export const ScrollableContainer = styled.div<{ themeStyles?: ITheme; isMobileSize?: boolean }>` display: flex; - height: 100%; - padding: 0 0.625rem; + height: calc(${PAGES_CONTAINER_HEIGHT} - ${SCROLL_SIZE} - ${BORDER_SIZE}); align-items: center; - overflow-x: auto; width: auto; white-space: nowrap; - overflow-y: hidden; + padding: 0.5rem 0.625rem 0 0.625rem; + scrollbar-gutter: stable; `; + export const Card = styled.div<{ themeStyles: ITheme; selected?: boolean }>` box-sizing: border-box; width: 5rem; diff --git a/src/components/pagesPanel/Pages.tsx b/src/components/pagesPanel/Pages.tsx index dad19dd5..adbe6dd1 100644 --- a/src/components/pagesPanel/Pages.tsx +++ b/src/components/pagesPanel/Pages.tsx @@ -9,9 +9,10 @@ import { useTheme, } from '@chili-publish/grafx-shared-components'; import { ScrollableContainer, Card, Container } from './Pages.styles'; -import { PREVIEW_FALLBACK } from '../../utils/constants'; +import { BORDER_SIZE, PAGES_CONTAINER_HEIGHT, PREVIEW_FALLBACK } from '../../utils/constants'; import { PageSnapshot } from '../../types/types'; import { PreviewCardBadge } from './PreviewCardBadge'; +import { useAttachArrowKeysListener } from './useAttachArrowKeysListener'; import { useUiConfigContext } from '../../contexts/UiConfigContext'; interface PagesProps { @@ -28,10 +29,6 @@ function Pages({ pages, activePageId, pagesToRefresh, setPagesToRefresh }: Pages const [pageSnapshots, setPageSnapshots] = useState([]); const isMobileSize = useMobileSize(); - const handleSelectPage = async (pageId: string) => { - await window.StudioUISDK.page.select(pageId); - }; - const getPagesSnapshot = useCallback(async (ids: string[]) => { const snapArray = ids.map((id) => window.SDK.page.getSnapshot(id).then((snapshot) => ({ @@ -44,6 +41,14 @@ function Pages({ pages, activePageId, pagesToRefresh, setPagesToRefresh }: Pages return awaitedArray as PageSnapshot[]; }, []); + /** + * by attaching listeners here and not in ShortcutProvider.tsx, + * 'pages' prop that gets populated via 'onPagesChanged' subscriber, + * will not trigger rerenders of ShortcutProvider's children, + * causing multiple query refectch in useMediaDetails + */ + const { handleSelectPage } = useAttachArrowKeysListener({ pages, activePageId }); + useEffect(() => { if (pages?.length && !pageSnapshots.length) { getPagesSnapshot(pages.map((i) => i.id)); @@ -86,8 +91,13 @@ function Pages({ pages, activePageId, pagesToRefresh, setPagesToRefresh }: Pages return ( - - + + {!!pages?.length && pages.map((item, index) => ( diff --git a/src/components/pagesPanel/useAttachArrowKeysListener.ts b/src/components/pagesPanel/useAttachArrowKeysListener.ts new file mode 100644 index 00000000..a1acc02d --- /dev/null +++ b/src/components/pagesPanel/useAttachArrowKeysListener.ts @@ -0,0 +1,83 @@ +import { useGetIframeAsync } from '@chili-publish/grafx-shared-components'; +import { Page } from '@chili-publish/studio-sdk'; +import { useCallback, useEffect, useState } from 'react'; + +export const useAttachArrowKeysListener = ({ pages, activePageId }: { pages: Page[]; activePageId: string | null }) => { + const iframe = useGetIframeAsync({ containerId: 'studio-ui-chili-editor' })?.contentWindow; + const [isCalendarPickerOpen, setIsCalendarPickerOpen] = useState(false); + const [selectedPageIndex, setSelectedPageIndex] = useState(-1); + + const calendarPickerElement = document.getElementsByClassName('react-datepicker-popper'); + + const handleSelectPage = async (pageId: string) => { + await window.StudioUISDK.page.select(pageId); + }; + const handleOnArrowKeyDown = useCallback( + async (event: KeyboardEvent) => { + const formElements = ['INPUT', 'TEXTAREA', 'SELECT', 'OPTION']; + if (formElements.includes((event.target as HTMLElement).tagName) || isCalendarPickerOpen) { + return; + } + switch (event.key) { + case 'ArrowLeft': { + let index = selectedPageIndex - 1; + setSelectedPageIndex((prevIndex) => { + index = prevIndex > 0 ? prevIndex - 1 : prevIndex; + return index; + }); + handleSelectPage(pages[index].id); + break; + } + case 'ArrowRight': { + let index = selectedPageIndex + 1; + setSelectedPageIndex((prevIndex) => { + index = prevIndex + 1 < pages.length ? prevIndex + 1 : prevIndex; + return index; + }); + handleSelectPage(pages[index].id); + break; + } + default: + break; + } + }, + [selectedPageIndex, pages, isCalendarPickerOpen], + ); + + useEffect(() => { + const customObserver = new MutationObserver(() => { + if (document.contains(calendarPickerElement[0])) { + setIsCalendarPickerOpen(true); + } else { + setIsCalendarPickerOpen(false); + } + }); + + customObserver.observe(document, { + attributes: false, + childList: true, + characterData: false, + subtree: true, + }); + + const addShortcutListeners = () => { + document.addEventListener('keydown', handleOnArrowKeyDown); + iframe?.addEventListener('keydown', handleOnArrowKeyDown); + }; + + addShortcutListeners(); + + return () => { + document.removeEventListener('keydown', handleOnArrowKeyDown); + iframe?.removeEventListener('keydown', handleOnArrowKeyDown); + customObserver.disconnect(); + }; + }, [handleOnArrowKeyDown, iframe, calendarPickerElement]); + + useEffect(() => { + if (!pages.length || !activePageId) return; + setSelectedPageIndex(pages.findIndex((i) => i.id === activePageId)); + }, [pages, activePageId]); + + return { handleSelectPage }; +}; diff --git a/src/components/variables/MobileVariablesTray.tsx b/src/components/variables/MobileVariablesTray.tsx index 5463e44d..a1f4736b 100644 --- a/src/components/variables/MobileVariablesTray.tsx +++ b/src/components/variables/MobileVariablesTray.tsx @@ -125,6 +125,9 @@ function MobileVariablesPanel(props: VariablesPanelProps) { overflow: ${isVariablesListOpen ? 'auto' : 'hidden'}; ${contentType === ContentType.IMAGE_PANEL && `padding-bottom: 0`}; ${isDataSourcePanelOpen && dataSourceTrayStyles} + &::-webkit-scrollbar { + width: 0; + } `} > diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 4c83c9d3..ebbc4035 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -1,3 +1,7 @@ export const APP_WRAPPER_ID = 'studio-ui-application'; export const PREVIEW_FALLBACK = 'https://studio-cdn.chiligrafx.com/shared/assets/preview-fallback-padded.svg'; export const SESSION_USER_INTEFACE_ID_KEY = 'userInterfaceId'; + +export const PAGES_CONTAINER_HEIGHT = '7.5rem'; +export const BORDER_SIZE = '0.125rem'; // 2px; +export const SCROLL_SIZE = '0.875rem'; diff --git a/yarn.lock b/yarn.lock index 330cb05e..2bba905d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1307,10 +1307,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@chili-publish/grafx-shared-components@^0.90.0": - version "0.90.0" - resolved "https://npm.pkg.github.com/download/@chili-publish/grafx-shared-components/0.90.0/8442f1cd62374903fbb8f19eb488351a2ffa1865#8442f1cd62374903fbb8f19eb488351a2ffa1865" - integrity sha512-1Clj5aN7P8D7Lma/3Nf8TK93WB11fd1dzNwXOmc7s8x+GrMo9UDDsNATLhgPBbzu7wtE73KtxJzgX0JjXWgncQ== +"@chili-publish/grafx-shared-components@^0.90.1": + version "0.90.1" + resolved "https://npm.pkg.github.com/download/@chili-publish/grafx-shared-components/0.90.1/63290a2ce8847de75e1e3feff0874a50b52f6880#63290a2ce8847de75e1e3feff0874a50b52f6880" + integrity sha512-8t2xxGikkmK6I8LEtqhOlVzyKOFi9R18UIqzrhBKfUH8JCkd8iQmiUnmhUndJP+WE7EuVkGl2oci7HWrZgs8oQ== "@chili-publish/studio-sdk@^1.18.1-rc.4": version "1.18.1-rc.4" From ddbf16aaaa532e3d57fb317e23a8fcc02f7d3cb5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 10 Jan 2025 15:55:13 +0000 Subject: [PATCH 2/6] Update bundle size [skip ci] --- bundle-size.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bundle-size.json b/bundle-size.json index 453f23fc..a4769efe 100644 --- a/bundle-size.json +++ b/bundle-size.json @@ -1 +1 @@ -{ "bundle_size": 1038429 } +{ "bundle_size": 1039967 } From f52708ae46335bd0839d05a62685e820ec7fcc0d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 10 Jan 2025 15:56:09 +0000 Subject: [PATCH 3/6] CI: Bump version to 1.19.0-8 [skip ci] --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 11e51cb3..cc3ff341 100644 --- 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-74.34%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/package.json b/package.json index f3b000bc..ffc3e372 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "studio-ui", "private": true, - "version": "1.19.0-7", + "version": "1.19.0-8", "type": "module", "description": "The Studio UI for CHILI GraFx", "main": "src/main.tsx", From 0a720aa4eebe92b6f28072b5ba2d9fc6d1a0bece Mon Sep 17 00:00:00 2001 From: "Pavel.Samusev" Date: Sat, 11 Jan 2025 12:11:11 +0300 Subject: [PATCH 4/6] [Feat][WRS-2182] Run batch output with configured data source (#256) --- __mocks__/mockOutputSetting.ts | 3 + src/MainContent.tsx | 47 ++-- src/components/dataSource/DataSource.tsx | 7 +- src/components/dataSource/useDataSource.ts | 15 +- .../layout-panels/leftPanel/LeftPanel.tsx | 17 +- .../navbar/downloadPanel/DownloadPanel.tsx | 18 +- .../variables/MobileVariablesList.tsx | 14 +- .../variables/MobileVariablesTray.tsx | 6 +- src/components/variables/VariablesList.tsx | 12 +- .../VariablesComponents.tsx | 16 +- .../VariablesComponents.types.ts | 1 - src/contexts/AppProvider.tsx | 12 +- src/contexts/UiConfigContext.tsx | 16 +- src/setupTests.ts | 2 +- src/tests/AppDigitalIntent.test.tsx | 3 +- src/tests/AppPrintIntent.test.tsx | 5 +- src/tests/LeftPanel.test.tsx | 77 ++++--- src/tests/VariablesComponents.test.tsx | 173 +++++++------- src/tests/VariablesList.test.tsx | 17 +- .../components/dataSource/DataSource.test.tsx | 73 +++--- .../dataSource/DataSourceModal.test.tsx | 22 +- .../dataSource/MobileDataSourceTray.test.tsx | 56 +++-- .../dataSource/useDataSource.test.ts | 18 +- src/tests/contexts/ShortcutProvider.test.tsx | 12 +- src/tests/navbar/Navbar.test.tsx | 125 ++++++++++ src/tests/navbar/useDownload.test.tsx | 5 +- src/tests/shared.util/sdk.mock.ts | 1 + src/tests/utils/documentExportHelper.test.tsx | 215 ++++++++++++++++++ src/types/OutputGenerationTypes.ts | 6 + src/types/types.ts | 4 +- src/utils/ApiTypes.ts | 5 + src/utils/connectors.ts | 25 +- src/utils/documentExportHelper.ts | 54 ++++- 33 files changed, 771 insertions(+), 311 deletions(-) create mode 100644 src/tests/utils/documentExportHelper.test.tsx create mode 100644 src/types/OutputGenerationTypes.ts diff --git a/__mocks__/mockOutputSetting.ts b/__mocks__/mockOutputSetting.ts index 87a25274..e74d10c7 100644 --- 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/src/MainContent.tsx b/src/MainContent.tsx index 8e35799d..de9f972f 100644 --- a/src/MainContent.tsx +++ b/src/MainContent.tsx @@ -20,6 +20,7 @@ import { useConnectorAuthentication, useConnectorAuthenticationResult, } from './components/connector-authentication'; +import HtmlRenderer from './components/htmlRenderer/HtmlRenderer'; import LeftPanel from './components/layout-panels/leftPanel/LeftPanel'; import Navbar from './components/navbar/Navbar'; import StudioNavbar from './components/navbar/studioNavbar/StudioNavbar'; @@ -35,7 +36,6 @@ import { SuiCanvas } from './MainContent.styles'; import { Project, ProjectConfig } from './types/types'; import { APP_WRAPPER_ID } from './utils/constants'; import { getDataIdForSUI, getDataTestIdForSUI } from './utils/dataIds'; -import HtmlRenderer from './components/htmlRenderer/HtmlRenderer'; declare global { interface Window { @@ -64,6 +64,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr const [mediaConnectors, setMediaConnectors] = useState([]); const [fontsConnectors, setFontsConnectors] = useState([]); const [layoutIntent, setLayoutIntent] = useState(null); + const [dataSource, setDataSource] = useState(); const [multiLayoutMode, setMultiLayoutMode] = useState(false); @@ -328,6 +329,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(); @@ -337,11 +342,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 ( - + @@ -352,31 +368,19 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
{projectConfig.sandboxMode ? ( - + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + ) : ( - + // eslint-disable-next-line react/jsx-props-no-spreading + )} - {!isMobileSize && ( - - )} + {!isMobileSize && } {isMobileSize && ( 1 } - isDocumentLoaded={isDocumentLoaded} /> )} {projectConfig.customElement && ( diff --git a/src/components/dataSource/DataSource.tsx b/src/components/dataSource/DataSource.tsx index 490ae08a..baec38de 100644 --- 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(); @@ -26,7 +23,7 @@ function DataSource({ isDocumentLoaded }: DataSourceProps) { getPreviousRow, getNextRow, hasDataConnector, - } = useDataSource(isDocumentLoaded); + } = useDataSource(); const onDataSourceModalClose = useCallback(() => { setIsDataSourceModalOpen(false); diff --git a/src/components/dataSource/useDataSource.ts b/src/components/dataSource/useDataSource.ts index 4c38d09e..ab2e2c64 100644 --- a/src/components/dataSource/useDataSource.ts +++ b/src/components/dataSource/useDataSource.ts @@ -1,12 +1,14 @@ import { 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 { useAppContext } from '../../contexts/AppProvider'; import { useSubscriberContext } from '../../contexts/Subscriber'; export const SELECTED_ROW_INDEX_KEY = 'DataSourceSelectedRowIdex'; -const useDataSource = (isDocumentLoaded: boolean) => { - const [dataConnector, setDataConnector] = useState(null); +const useDataSource = () => { + const { dataSource, isDocumentLoaded } = useAppContext(); + const [dataConnector, setDataConnector] = useState(); const [dataRows, setDataRows] = useState([]); const [continuationToken, setContinuationToken] = useState(null); @@ -67,13 +69,8 @@ const useDataSource = (isDocumentLoaded: boolean) => { }, []); useEffect(() => { - if (!isDocumentLoaded) return; - const getDataConnector = async () => { - const { parsedData: defaultDataConnector } = await window.StudioUISDK.dataSource.getDataSource(); - setDataConnector(defaultDataConnector); - }; - getDataConnector(); - }, [isDocumentLoaded]); + setDataConnector(dataSource); + }, [dataSource]); useEffect(() => { if (dataConnector) loadDataRows(); diff --git a/src/components/layout-panels/leftPanel/LeftPanel.tsx b/src/components/layout-panels/leftPanel/LeftPanel.tsx index 99b52959..f1b4604d 100644 --- a/src/components/layout-panels/leftPanel/LeftPanel.tsx +++ b/src/components/layout-panels/leftPanel/LeftPanel.tsx @@ -1,19 +1,18 @@ -import { Variable } from '@chili-publish/studio-sdk'; import { ScrollbarWrapper, 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 { Variable } from '@chili-publish/studio-sdk'; +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(); @@ -27,8 +26,8 @@ function LeftPanel({ variables, isDocumentLoaded }: LeftPanelProps) { >