From 5ca7003b4bc2301e8f191f6a5e50a7cf83c4b5f4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 4 Jan 2024 20:38:20 +0800
Subject: [PATCH] [#1150] fix(UI): Fix details comment error and improve
 components check (#1334)

### What changes were proposed in this pull request?

The error occurred due to the failure to locate the correct variable
object and its properties.

Resolve: use an empty string as a substitute.

Extra:
1. Initialize and reset the tree list when the metalake page is loaded.
2. Improve rendering of components check.

### Why are the changes needed?

Fix: #1150

### Does this PR introduce _any_ user-facing change?

N/A

### How was this patch tested?

N/A

Co-authored-by: CHEYNE <contact@ch3yne.com>
---
 web/app/metalakes/DetailsView.js  |  2 +-
 web/app/metalakes/MetalakeView.js |  4 +---
 web/lib/layout/Layout.js          |  8 ++++----
 web/lib/provider/client.js        | 20 ++++++++++++++++++++
 web/lib/provider/index.js         | 17 ++++++++++-------
 5 files changed, 36 insertions(+), 15 deletions(-)
 create mode 100644 web/lib/provider/client.js

diff --git a/web/app/metalakes/DetailsView.js b/web/app/metalakes/DetailsView.js
index 1fcaaf96e95..55ad76342be 100644
--- a/web/app/metalakes/DetailsView.js
+++ b/web/app/metalakes/DetailsView.js
@@ -36,7 +36,7 @@ const DetailsView = props => {
           <Typography variant='body2' sx={{ mb: 2 }}>
             Comment
           </Typography>
-          <Typography sx={{ fontWeight: 500 }}>{activatedItem.comment}</Typography>
+          <Typography sx={{ fontWeight: 500 }}>{activatedItem?.comment || ''}</Typography>
         </Grid>
 
         <Grid item xs={12} md={6} sx={{ mb: [0, 5] }}>
diff --git a/web/app/metalakes/MetalakeView.js b/web/app/metalakes/MetalakeView.js
index e42d98b2eb1..71ef0f4f1e3 100644
--- a/web/app/metalakes/MetalakeView.js
+++ b/web/app/metalakes/MetalakeView.js
@@ -35,9 +35,7 @@ const MetalakeView = props => {
   useEffect(() => {
     const { metalake, catalog, schema, table } = routeParams
 
-    if (store.metalakeTree.length === 0) {
-      dispatch(initMetalakeTree({ metalake, catalog, schema, table }))
-    }
+    dispatch(initMetalakeTree({ metalake, catalog, schema, table }))
 
     switch (page) {
       case 'metalakes':
diff --git a/web/lib/layout/Layout.js b/web/lib/layout/Layout.js
index b9e49154b3c..ca369c4a286 100644
--- a/web/lib/layout/Layout.js
+++ b/web/lib/layout/Layout.js
@@ -5,9 +5,9 @@
 
 'use client'
 
-import { Suspense } from 'react'
+import dynamic from 'next/dynamic'
 
-import { Box, Fab, CircularProgress } from '@mui/material'
+import { Box, Fab } from '@mui/material'
 
 import Icon from '@/components/Icon'
 
@@ -15,7 +15,6 @@ import AppBar from './AppBar'
 import Footer from './Footer'
 import MainContent from './MainContent'
 import ScrollToTop from './ScrollToTop'
-import { NavigationEvents } from './navigation-events'
 
 const Layout = ({ children, scrollToTop }) => {
   return (
@@ -43,4 +42,5 @@ const Layout = ({ children, scrollToTop }) => {
   )
 }
 
-export default Layout
+// ** use dynamic export instead of export default Layout
+export default dynamic(() => Promise.resolve(Layout), { ssr: false })
diff --git a/web/lib/provider/client.js b/web/lib/provider/client.js
new file mode 100644
index 00000000000..baf6837585b
--- /dev/null
+++ b/web/lib/provider/client.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2023 Datastrato Pvt Ltd.
+ * This software is licensed under the Apache License version 2.
+ */
+
+import { useEffect, useState, Fragment } from 'react'
+
+const ClientOnly = ({ children, ...delegated }) => {
+  const [hasMounted, setHasMounted] = useState(false)
+
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) return null
+
+  return <Fragment {...delegated}>{children}</Fragment>
+}
+
+export default ClientOnly
diff --git a/web/lib/provider/index.js b/web/lib/provider/index.js
index 1bb8815097e..4c77c00ec6e 100644
--- a/web/lib/provider/index.js
+++ b/web/lib/provider/index.js
@@ -5,6 +5,7 @@
 
 'use client'
 
+import ClientOnly from './client'
 import AuthProvider from './session'
 import StoreProvider from './store'
 import EmotionProvider from './emotion'
@@ -12,13 +13,15 @@ import ThemeProvider from './theme'
 
 const Provider = ({ children }) => {
   return (
-    <StoreProvider>
-      <EmotionProvider>
-        <AuthProvider>
-          <ThemeProvider>{children}</ThemeProvider>
-        </AuthProvider>
-      </EmotionProvider>
-    </StoreProvider>
+    <ClientOnly>
+      <StoreProvider>
+        <EmotionProvider>
+          <AuthProvider>
+            <ThemeProvider>{children}</ThemeProvider>
+          </AuthProvider>
+        </EmotionProvider>
+      </StoreProvider>
+    </ClientOnly>
   )
 }