Merge branch '456-snackbar-display-logic' into 'master'

fix: Snackbar display logic for Logs tab (#456)

Closes #456

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

Author: Adrinlol

ui/packages/shared/package.json

@@ -30,6 +30,7 @@
     "mobx": "^6.3.5",
     "mobx-react-lite": "^3.2.1",
     "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-countdown-hook": "^1.1.0",
     "react-scripts": "^5.0.0",

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

@@ -24,7 +24,6 @@ import { useStores } from '@postgres.ai/shared/pages/Instance/context'
 import { FormValues, useForm } from './useForm'
 import { Spinner } from '@postgres.ai/shared/components/Spinner'
 import styles from './styles.module.scss'
-import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
 import { ResponseMessage } from './ResponseMessage'
 import { uniqueDatabases } from './utils'
 import { ExternalIcon } from '@postgres.ai/shared/icons/External'
@@ -448,14 +447,6 @@ export const Configuration = observer(
             theme="vs-light"
             options={{ domReadOnly: true, readOnly: true }}
           />
-          <SimpleModalControls
-            items={[
-              {
-                text: 'Close',
-                onClick: () => setIsOpen(false),
-              },
-            ]}
-          />
         </Modal>
       </div>
     )

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

@@ -30,6 +30,7 @@ const useStyles = makeStyles(
       width: 0,
       flex: '1 1 100%',
       marginRight: '40px',
+      height: "100%",
 
       [theme.breakpoints.down('sm')]: {
         width: '100%',

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

@@ -50,7 +50,7 @@ const useStyles = makeStyles(
       marginTop: '16px',
       position: 'relative',
       flex: '1 1 100%',
-      height: '100%',
+      height: "100%",
 
       [theme.breakpoints.down('sm')]: {
         flexDirection: 'column',
@@ -160,7 +160,9 @@ export const Instance = observer((props: Props) => {
         <TabPanel value={activeTab} index={2}>
           <Configuration
             isConfigurationActive={isConfigurationActive}
-            disableConfigModification={instance?.state.engine.disableConfigModification}
+            disableConfigModification={
+              instance?.state.engine.disableConfigModification
+            }
             switchActiveTab={switchTab}
             activeTab={activeTab}
             reload={() => stores.main.load(props.instanceId)}
@@ -181,7 +183,6 @@ 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} sx={{ height: '100%' }}>

ui/packages/shared/pages/Instance/stores/Main.ts

@@ -197,7 +197,9 @@ export class MainStore {
     }
 
     if (error)
-      this.getFullConfigError = await error.json().then((err) => err.message)
+      this.getFullConfigError = await error
+        .json()
+        .then((err: Error) => err.message)
 
     return response
   }

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

@@ -1,29 +1,45 @@
-import { useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { wsSnackbar } from '@postgres.ai/shared/pages/Logs/wsSnackbar'
 
-export const useWsScroll = () => {
-  const snackbarTag = document.createElement('div')
-  const contentElement = document.getElementById(
-    'content-container',
-  ) as HTMLElement
+export const useWsScroll = (isLoading: boolean) => {
+  const [isNewData, setIsNewData] = useState(false)
+  const [isAtBottom, setIsAtBottom] = useState(true)
 
   useEffect(() => {
-    const targetNode = document.getElementById('logs-container') as HTMLElement
-    contentElement?.addEventListener(
-      'scroll',
-      () => {
-        wsSnackbar(contentElement, targetNode, snackbarTag)
-      },
-      false,
-    )
-
-    return () =>
+    !isLoading && wsSnackbar(isAtBottom, isNewData)
+
+    const contentElement = document.getElementById('content-container')
+    const targetNode = document.getElementById('logs-container')
+
+    const clientAtBottom = (element: HTMLElement) =>
+      element.scrollHeight - element.scrollTop - 50 < element.clientHeight
+
+    const handleScroll = (e: Event) => {
+      if (clientAtBottom(e.target as HTMLElement)) {
+        setIsAtBottom(true)
+        setIsNewData(false)
+      } else {
+        setIsAtBottom(false)
+      }
+    }
+
+    const handleInsert = (e: Event | any) => {
+      if (e.srcElement?.tagName !== 'DIV') {
+        isAtBottom && targetNode?.scrollIntoView(false)
+        setIsNewData(true)
+      }
+    }
+
+    contentElement?.addEventListener('scroll', handleScroll, false)
+    contentElement?.addEventListener('DOMNodeInserted', handleInsert, false)
+
+    return () => {
+      contentElement?.removeEventListener('scroll', handleScroll, false)
       contentElement?.removeEventListener(
-        'scroll',
-        () => {
-          wsSnackbar(contentElement, targetNode, snackbarTag)
-        },
+        'DOMNodeInserted',
+        handleInsert,
         false,
       )
-  }, [])
+    }
+  }, [isAtBottom, isNewData, isLoading])
 }

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

@@ -20,9 +20,9 @@ const useStyles = makeStyles(
 )
 
 export const Logs = ({ api }: { api: Api }) => {
-  useWsScroll()
   const classes = useStyles()
   const [isLoading, setIsLoading] = React.useState(true)
+  useWsScroll(isLoading)
 
   useEffect(() => {
     if (api.initWS != undefined) {
@@ -39,15 +39,11 @@ export const Logs = ({ api }: { api: Api }) => {
     }
 
     const callback = (mutationList: MutationRecord[]) => {
-      const isScrolling = !targetNode?.querySelector('.snackbar-tag')
       for (const mutation of mutationList) {
         if (mutation.type === 'childList') {
           setIsLoading(false)
         }
       }
-      if (isScrolling) {
-        targetNode?.scrollIntoView(false)
-      }
     }
 
     const observer = new MutationObserver(callback)

ui/packages/shared/pages/Logs/wsSnackbar.ts

@@ -1,30 +1,26 @@
 const LOGS_NEW_DATA_MESSAGE =
   'New data arrived below - scroll down to see it 👇🏻'
 
-export const wsSnackbar = (
-  contentElement: HTMLElement,
-  targetNode: HTMLElement,
-  snackbarTag: HTMLElement,
-) => {
-  if (
-    contentElement.scrollHeight - contentElement.scrollTop - 50 >
-    contentElement.clientHeight
-  ) {
-    if (!targetNode.querySelector('.snackbar-tag')) {
-      targetNode.appendChild(snackbarTag)
+export const wsSnackbar = (clientAtBottom: boolean, isNewData: boolean) => {
+  const targetNode = document.getElementById('logs-container')
+  const snackbarTag = document.createElement('div')
+
+  if (!clientAtBottom && isNewData) {
+    if (!targetNode?.querySelector('.snackbar-tag')) {
+      targetNode?.appendChild(snackbarTag)
       snackbarTag.classList.add('snackbar-tag')
       if (snackbarTag.childNodes.length === 0) {
         snackbarTag.appendChild(document.createTextNode(LOGS_NEW_DATA_MESSAGE))
       }
       snackbarTag.onclick = () => {
-        targetNode.scrollIntoView({
+        targetNode?.scrollIntoView({
           behavior: 'smooth',
           block: 'end',
           inline: 'end',
         })
       }
     }
   } else {
-    snackbarTag.remove()
+    targetNode?.querySelector('.snackbar-tag')?.remove()
   }
 }

ui/packages/shared/types/api/endpoints/getFullConfig.ts

@@ -1,4 +1,4 @@
 export type GetFullConfig = () => Promise<{
   response: string | null
-  error: Response | null
+  error: Response | any | null
 }>