Merge branch 'master' into DX-2210

Author: ytkimirti

bun.lockb

@@ -58,7 +58,7 @@
     "zustand": "5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.53.1",
+    "@playwright/test": "^1.56.1",
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

package.json

@@ -14,7 +14,7 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers"
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
-import { IconChevronDown, IconPlus } from "@tabler/icons-react"
+import { IconChevronDown, IconMaximize, IconPlus } from "@tabler/icons-react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -122,7 +122,7 @@ const SortableTab = ({ id }: { id: TabId }) => {
   )
 }
 
-export const DatabrowserTabs = () => {
+export const DatabrowserTabs = ({ onFullScreenClick }: { onFullScreenClick?: () => void }) => {
   const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore()
 
   // Sort tabs with pinned tabs first
@@ -262,6 +262,17 @@ export const DatabrowserTabs = () => {
         <div className="flex items-center gap-1 pl-1">
           {isOverflow && <AddTabButton />}
           {tabs.length > 1 && <TabsListButton tabs={tabs} onSelectTab={selectTab} />}
+          {onFullScreenClick && (
+            <Button
+              aria-label="Toggle fullscreen"
+              variant="secondary"
+              size="icon-sm"
+              onClick={onFullScreenClick}
+              className="flex-shrink-0 bg-blue-100 hover:bg-blue-600 hover:text-white"
+            >
+              <IconMaximize size={16} />
+            </Button>
+          )}
         </div>
       </div>
     </div>

src/components/databrowser/components/databrowser-tabs.tsx

@@ -29,9 +29,17 @@ export const RedisBrowser = ({
   hideTabs,
   storage,
   darkMode = "light",
+  onFullScreenClick,
 }: RedisCredentials & {
   hideTabs?: boolean
 
+  /**
+   * If defined, the databrowser will have a full screen button in the tab bar.
+   * Clicking on the button will call this function.
+   * @returns
+   */
+  onFullScreenClick?: () => void
+
   /**
    * Persistence storage for the Databrowser.
    *
@@ -73,7 +81,11 @@ export const RedisBrowser = ({
         <DarkModeProvider darkMode={darkMode}>
           <DatabrowserProvider storage={storage} rootRef={rootRef}>
             <TooltipProvider>
-              <RedisBrowserRoot hideTabs={hideTabs} rootRef={rootRef} />
+              <RedisBrowserRoot
+                hideTabs={hideTabs}
+                rootRef={rootRef}
+                onFullScreenClick={onFullScreenClick}
+              />
             </TooltipProvider>
           </DatabrowserProvider>
         </DarkModeProvider>
@@ -85,11 +97,14 @@ export const RedisBrowser = ({
 const RedisBrowserRoot = ({
   hideTabs,
   rootRef,
+  onFullScreenClick,
 }: {
   hideTabs?: boolean
   rootRef: React.RefObject<HTMLDivElement>
+  onFullScreenClick?: () => void
 }) => {
   const theme = useDarkMode()
+  
 
   useEffect(() => {
     portalWrapper.classList.add("text-zinc-700")
@@ -104,7 +119,7 @@ const RedisBrowserRoot = ({
       ref={rootRef}
     >
       <div className="flex h-full flex-col text-zinc-700">
-        {!hideTabs && <DatabrowserTabs />}
+        {!hideTabs && <DatabrowserTabs onFullScreenClick={onFullScreenClick} />}
         <DatabrowserInstances />
       </div>
     </div>

src/components/databrowser/index.tsx

@@ -72,6 +72,10 @@ const App = () => {
         <div style={{ height: "800px" }}>
           {credentials ? (
             <RedisBrowser
+              onFullScreenClick={() => {
+                // eslint-disable-next-line no-console
+                console.log("Fullscreen button clicked")
+              }}
               storage={{
                 get: () => localStorage.getItem("redis-browser-data") || "",
                 set: (value) => localStorage.setItem("redis-browser-data", value),