fix(explore): rendering regression on standalone (apache#24177)

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -418,7 +418,11 @@ const ExploreChartPanel = ({
  if (!bodyClasses.includes(standaloneClass)) {
  document.body.className += ` ${standaloneClass}`;
  }
- return standaloneChartBody;
+ return (
+ <div id="app" data-test="standalone-app" ref={resizeObserverRef}>
+ {standaloneChartBody}
+ </div>
+ );
  }
 
  return (

superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx

@@ -94,14 +94,19 @@ fetchMock.get('glob:*/api/v1/explore/form_data*', {});
 fetchMock.get('glob:*/api/v1/chart/favorite_status*', {
  result: [{ value: true }],
 });
+fetchMock.get('glob:*/api/v1/chart/*', {
+ result: {},
+});
 
 const defaultPath = '/explore/';
 const renderWithRouter = ({
  search = '',
  overridePathname,
+ initialState = reduxState,
 }: {
  search?: string;
  overridePathname?: string;
+ initialState?: object;
 } = {}) => {
  const path = overridePathname ?? defaultPath;
  Object.defineProperty(window, 'location', {
@@ -115,7 +120,7 @@ const renderWithRouter = ({
  <ExploreViewContainer />
  </Route>
  </MemoryRouter>,
- { useRedux: true, initialState: reduxState },
+ { useRedux: true, initialState },
  );
 };
 
@@ -143,6 +148,16 @@ test('generates a new form_data param when none is available', async () => {
  replaceState.mockRestore();
 });
 
+test('renders chart in standalone mode', () => {
+ const { queryByTestId } = renderWithRouter({
+ initialState: {
+ ...reduxState,
+ explore: { ...reduxState.explore, standalone: true },
+ },
+ });
+ expect(queryByTestId('standalone-app')).toBeTruthy();
+});
+
 test('generates a different form_data param when one is provided and is mounting', async () => {
  const replaceState = jest.spyOn(window.history, 'replaceState');
  await waitFor(() => renderWithRouter({ search: SEARCH }));