Merge branch '440-fix-ui-configuration-tab' into 'master'

fix: Configuration tab ui updates for platform (#440)

Closes #440

See merge request postgres-ai/database-lab!631

Author: agneum

ui/packages/platform/src/components/IndexPage.js

@@ -92,7 +92,7 @@ const styles = () => ({
       paddingTop: '40px'
     },
     'position': 'absolute',
-    'min-width': drawerWidth,
+    'width': drawerWidth,
     'background-color': colors.consoleMenuBackground,
     'border-right-color': colors.consoleStroke,
     '& hr': {
@@ -140,6 +140,7 @@ const styles = () => ({
   },
   toolbar: theme.mixins.toolbar,
   topToolbar: {
+    color: '#fff',
     minHeight: 40,
     height: 40,
     paddingLeft: 14,

ui/packages/platform/src/pages/Instance/index.tsx

@@ -47,9 +47,9 @@ export const Instance = () => {
 
   const api = {
     getInstance,
-    refreshInstance,
     getSnapshots,
     destroyClone,
+    refreshInstance,
     resetClone,
     getWSToken,
   }
@@ -77,6 +77,7 @@ export const Instance = () => {
     <InstancePage
       title={`Database Lab instance #${params.instanceId}`}
       instanceId={params.instanceId}
+      hideInstanceTabs
       routes={routes}
       api={api}
       callbacks={callbacks}

ui/packages/shared/pages/Instance/Tabs/index.tsx

@@ -37,12 +37,16 @@ const useStyles = makeStyles({
       color: colors.pgaiDarkGray,
     },
   },
+  tabHidden: {
+    display: 'none',
+  },
 })
 
 type Props = {
   value: number
   handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void
   hasLogs: boolean
+  hideInstanceTabs?: boolean
 }
 
 export const Tabs = (props: Props) => {
@@ -67,14 +71,14 @@ export const Tabs = (props: Props) => {
         label="Logs"
         disabled={!hasLogs}
         classes={{
-          root: classes.tabRoot,
+          root: props.hideInstanceTabs ? classes.tabHidden : classes.tabRoot,
         }}
         value={1}
       />
       <TabComponent
         label="Configuration"
         classes={{
-          root: classes.tabRoot,
+          root: props.hideInstanceTabs ? classes.tabHidden : classes.tabRoot,
         }}
         value={2}
       />

ui/packages/shared/pages/Instance/context.ts

@@ -26,6 +26,7 @@ export type Host = {
     breadcrumbs: React.ReactNode
   },
   wsHost?: string
+  hideInstanceTabs?: boolean
 }
 
 // Host context.

ui/packages/shared/pages/Instance/index.tsx

@@ -49,6 +49,7 @@ const useStyles = makeStyles((theme) => ({
     marginTop: '16px',
     position: 'relative',
     flex: '1 1 100%',
+    height: "100%",
 
     [theme.breakpoints.down('sm')]: {
       flexDirection: 'column',
@@ -91,7 +92,7 @@ export const Instance = observer((props: Props) => {
   const switchTab = (_: React.ChangeEvent<{} | null>, tabID: number) => {
     const contentElement = document.getElementById('content-container')
     setActiveTab(tabID);
-    contentElement.scroll(0, 0)
+    contentElement?.scroll(0, 0)
   };
 
   return (
@@ -118,6 +119,7 @@ export const Instance = observer((props: Props) => {
                 value={activeTab}
                 handleChange={switchTab}
                 hasLogs={api.initWS != undefined}
+                hideInstanceTabs={props?.hideInstanceTabs}
             />
           </SectionTitle>
 
@@ -130,11 +132,13 @@ export const Instance = observer((props: Props) => {
             <div className={classes.content}>
               {!instance || !instance?.state.retrieving?.status && <StubSpinner />}
 
-              {instance && (
+              {instance ? (
                 <>
                   <Clones />
                   <Info />
                 </>
+              ) : (
+                <StubSpinner />
               )}
             </div>
           )}
@@ -149,16 +153,12 @@ export const Instance = observer((props: Props) => {
           </TabPanel>
         </>
 
-        <TabPanel value={activeTab} index={2}>
-          <Configuration 
-              isConfigurationActive={isConfigurationActive}
-              disableConfigModification={instance?.state.engine.disableConfigModification}
-              switchActiveTab={switchTab} 
-              activeTab={activeTab} 
-              reload={() => stores.main.load(props.instanceId)} 
-            />
-        </TabPanel>
-
+          <TabPanel value={activeTab} index={2}>
+            <Configuration
+              switchActiveTab={(id: number) => setActiveTab(id)}
+              activeTab={activeTab}
+              reload={() => stores.main.load(props.instanceId)} />
+          </TabPanel>
       </StoresProvider>
     </HostProvider>
   )
@@ -174,9 +174,12 @@ function TabPanel(props: PropTypes.InferProps<any>) {
           hidden={value !== index}
           id={`scrollable-auto-tabpanel-${index}`}
           aria-labelledby={`scrollable-auto-tab-${index}`}
+          style={{height: "100%"}}
           {...other}
       >
-        <Box p={3}>{children}</Box>
+        <Box p={3}sx={{ height: '100%' }}>
+          {children}
+        </Box>
       </Typography>
   );
 }

ui/packages/shared/pages/Logs/hooks/useWsScroll.tsx

@@ -3,10 +3,10 @@ import { wsSnackbar } from '@postgres.ai/shared/pages/Logs/wsSnackbar'
 
 export const useWsScroll = () => {
   const snackbarTag = document.createElement('div')
-  const contentElement = document.getElementById('content-container')
+  const contentElement = document.getElementById('content-container') as HTMLElement
 
   useEffect(() => {
-    const targetNode = document.getElementById('logs-container')
+    const targetNode = document.getElementById('logs-container') as HTMLElement
     contentElement.addEventListener(
       'scroll',
       () => {

ui/packages/shared/pages/Logs/index.tsx

@@ -29,7 +29,7 @@ export const Logs = ({ api }: { api: Api }) => {
 
   useEffect(() => {
     const config = { attributes: false, childList: true, subtree: true }
-    const targetNode = document.getElementById('logs-container')
+    const targetNode = document.getElementById('logs-container') as HTMLElement
 
     if (isLoading && targetNode.querySelectorAll('p').length === 1) {
       setIsLoading(false)