fix hidden layout on refresh (#29641)

* update react resizable panels, add panel ids

* try default size

* try with hidden instead of conditional rendering

apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -95,6 +95,7 @@ const ProjectLayout = ({
       (selectedProject.status === PROJECT_STATUS.COMING_UP &&
         router.pathname.includes('/project/[ref]/settings'))
     : true
+
   const ignorePausedState =
     router.pathname === '/project/[ref]' || router.pathname.includes('/project/[ref]/settings')
   const showPausedState = isPaused && !ignorePausedState
@@ -125,24 +126,27 @@ const ProjectLayout = ({
             direction="horizontal"
             autoSaveId="project-layout"
           >
-            {showProductMenu && productMenu && (
-              <>
-                <ResizablePanel
-                  className={cn(resizableSidebar ? 'min-w-64 max-w-[32rem]' : 'min-w-64 max-w-64')}
-                  defaultSize={0} // forces panel to smallest width possible, at w-64
-                >
-                  <MenuBarWrapper
-                    isLoading={isLoading}
-                    isBlocking={isBlocking}
-                    productMenu={productMenu}
-                  >
-                    <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
-                  </MenuBarWrapper>
-                </ResizablePanel>
-                <ResizableHandle withHandle disabled={resizableSidebar ? false : true} />
-              </>
-            )}
-            <ResizablePanel className="h-full flex flex-col">
+            <ResizablePanel
+              id="panel-left"
+              className={cn(resizableSidebar ? 'min-w-64 max-w-[32rem]' : 'min-w-64 max-w-64', {
+                hidden: !showProductMenu || !productMenu,
+              })}
+              defaultSize={0} // forces panel to smallest width possible, at w-64
+            >
+              <MenuBarWrapper
+                isLoading={isLoading}
+                isBlocking={isBlocking}
+                productMenu={productMenu}
+              >
+                <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
+              </MenuBarWrapper>
+            </ResizablePanel>
+            <ResizableHandle
+              className={cn({ hidden: !showProductMenu || !productMenu })}
+              withHandle
+              disabled={resizableSidebar ? false : true}
+            />
+            <ResizablePanel id="panel-right" className="h-full flex flex-col">
               {!navLayoutV2 && !hideHeader && IS_PLATFORM && <LayoutHeader />}
               <main className="h-full flex flex-col flex-1 w-full overflow-x-hidden">
                 {showPausedState ? (

package-lock.json

@@ -35292,9 +35292,9 @@
       }
     },
     "node_modules/react-resizable-panels": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.0.19.tgz",
-      "integrity": "sha512-v3E41kfKSuCPIvJVb4nL4mIZjjKIn/gh6YqZF/gDfQDolv/8XnhJBek4EiV2gOr3hhc5A3kOGOayk3DhanpaQw==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.4.tgz",
+      "integrity": "sha512-kzue8lsoSBdyyd2IfXLQMMhNujOxRoGVus+63K95fQqleGxTfvgYLTzbwYMOODeAHqnkjb3WV/Ks7f5+gDYZuQ==",
       "peerDependencies": {
         "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
@@ -43596,7 +43596,7 @@
         "react-intersection-observer": "^9.8.2",
         "react-markdown": "^8.0.3",
         "react-medium-image-zoom": "^5.2.4",
-        "react-resizable-panels": "^2.0.13",
+        "react-resizable-panels": "^2.1.4",
         "react-syntax-highlighter": "^15.5.0",
         "react-tooltip": "^4.2.17",
         "react-use": "^17.5.0",
@@ -43620,7 +43620,6 @@
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.21.4",
         "@ctrl/tinycolor": "^3.4.0",
-        "@jest/types": "^29.6.0",
         "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^14.0.0",
         "@tokens-studio/sd-transforms": "^0.8.5",
@@ -43634,11 +43633,8 @@
         "config": "*",
         "copyfiles": "^2.4.1",
         "glob": "^8.1.0",
-        "jest-environment-jsdom": "^29.7.0",
-        "next": "*",
         "sql-formatter": "^12.2.0",
         "style-dictionary": "^3.7.1",
-        "ts-jest": "^29.1.1",
         "tsconfig": "*",
         "tsconfig-paths-webpack-plugin": "^4.0.1",
         "typescript": "~5.5.0",

packages/ui/package.json

@@ -75,7 +75,7 @@
     "react-intersection-observer": "^9.8.2",
     "react-markdown": "^8.0.3",
     "react-medium-image-zoom": "^5.2.4",
-    "react-resizable-panels": "^2.0.13",
+    "react-resizable-panels": "^2.1.4",
     "react-syntax-highlighter": "^15.5.0",
     "react-tooltip": "^4.2.17",
     "react-use": "^17.5.0",