michael-s-molina commented on code in PR #41205:
URL: https://github.com/apache/superset/pull/41205#discussion_r3444197677
##########
superset-frontend/src/views/App.tsx:
##########
@@ -79,42 +84,137 @@ const LocationPathnameLogger = () => {
return <></>;
};
+const CHAT_PANEL_DEFAULT_WIDTH = 400;
+const CHAT_PANEL_MIN_WIDTH = 280;
+
+const RouteSwitch = () => (
+ <Switch>
+ {routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
+ <Route path={path} key={path}>
+ <Suspense fallback={<Fallback />}>
+ <ErrorBoundary
+ css={css`
+ margin: 16px;
+ `}
+ >
+ <Component user={bootstrapData.user} {...props} />
+ </ErrorBoundary>
+ </Suspense>
+ </Route>
+ ))}
+ <Redirect from="/" to="/superset/welcome/" exact />
+ </Switch>
+);
+
+const layoutCss = css`
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+`;
+
+const contentCss = css`
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ overflow-y: auto;
+ position: relative;
+`;
+
+/**
+ * Renders the main content area. When the chat panel is open in panel mode,
+ * wraps <Layout> and <ChatPanelContent> in a Splitter so they sit side-by-side
+ * with a lazy drag bar (blue preview line, resize committed on mouseup).
+ * The full <Layout> tree lives inside the first panel so its internal flex
+ * context is preserved — SQL Lab, Explore, and other pages are unaffected.
+ */
+const AppContent = () => {
+ const isAuthenticated =
+ isUser(bootstrapData.user) && !bootstrapData.user.isAnonymous;
+ const chatExtensionsEnabled =
+ isFeatureEnabled(FeatureFlag.EnableExtensions) && isAuthenticated;
+ const { open: panelOpen, mode, chat } = useChat();
+ const hasChatExtension = chatExtensionsEnabled && !!chat;
+ const isPanelOpen = hasChatExtension && mode === 'panel' && panelOpen;
+
+ const [storedWidth, setStoredWidth] = useStoredSidebarWidth(
+ 'chat:panel',
+ CHAT_PANEL_DEFAULT_WIDTH,
+ );
+
+ const layoutContent = (
+ <Layout css={layoutCss}>
+ <Layout.Content css={contentCss}>
+ <RouteSwitch />
+ </Layout.Content>
+ </Layout>
+ );
+
+ if (!isPanelOpen) {
+ return (
+ <>
+ {layoutContent}
+ {hasChatExtension && <ChatFloatingHost />}
+ </>
+ );
+ }
+
+ return (
+ <Splitter
+ lazy
+ onResizeEnd={sizes => {
+ const chatWidth = sizes[sizes.length - 1];
+ if (
+ typeof chatWidth === 'number' &&
+ chatWidth >= CHAT_PANEL_MIN_WIDTH
+ ) {
+ setStoredWidth(chatWidth);
+ }
+ }}
+ css={css`
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+
+ /*
+ * Splitter.Panel is not a flex container by default, so flex:1 on
+ * children (Layout, ChatPanelHost) has no height effect and
+ * panels collapse. Making them flex columns lets children fill them.
+ */
+ & > .ant-splitter-panel {
+ display: flex !important;
+ flex-direction: column;
+ }
+ `}
+ >
+ <Splitter.Panel>{layoutContent}</Splitter.Panel>
+ <Splitter.Panel size={storedWidth} min={CHAT_PANEL_MIN_WIDTH}>
+ <ChatPanelHost />
+ </Splitter.Panel>
+ </Splitter>
+ );
+};
+
const App = () => (
<Router basename={applicationRoot()}>
<ScrollToTop />
<LocationPathnameLogger />
<RootContextProviders>
- <Menu
- data={bootstrapData.common.menu_data}
- isFrontendRoute={isFrontendRoute}
- />
- <ExtensionsStartup>
- <Switch>
- {routes.map(({ path, Component, props = {}, Fallback = Loading }) =>
(
- <Route path={path} key={path}>
- <Suspense fallback={<Fallback />}>
- <Layout>
- <Layout.Content
- css={css`
- display: flex;
- flex-direction: column;
- `}
- >
- <ErrorBoundary
- css={css`
- margin: 16px;
- `}
- >
- <Component user={bootstrapData.user} {...props} />
- </ErrorBoundary>
- </Layout.Content>
- </Layout>
- </Suspense>
- </Route>
- ))}
- <Redirect from="/" to="/superset/welcome/" exact />
- </Switch>
- </ExtensionsStartup>
+ <div
+ css={css`
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ `}
+ >
Review Comment:
Honestly, not much in this specific case. Since we still need a css prop for
`height: 100vh; overflow: hidden`, we're not eliminating CSS — just moving
`display: flex; flex-direction: column` into the component prop. The result is
arguably the same verbosity.
I'll change it anyway as it's more similar to other pages.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
