@rebasepro/studio 0.0.1-canary.eae7889 → 0.1.0

package/src/components/ApiExplorer/TryItPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect } from "react";
-import { Typography, Button, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { Typography, Button, TextField, IconButton, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
 import { LoaderIcon, SendIcon, PlusIcon, XIcon } from "lucide-react";
 import { useRebaseContext, UserSelectPopover, SelectableUser } from "@rebasepro/core";
 import { AuthSimulationSelector } from "../AuthSimulationSelector";
@@ -233,19 +233,15 @@ time: elapsed });
                         >
                             Request Body
                         </Typography>
-                        <textarea
+                        <TextField
+                            multiline
+                            minRows={10}
                             value={body}
                             onChange={(e) => { setBody(e.target.value); setValidationError(null); }}
-                            rows={10}
                             spellCheck={false}
-                            className={cls(
-                                "w-full font-mono text-xs p-3 rounded-lg resize-y",
-                                "bg-surface-50 dark:bg-surface-900",
-                                validationError ? "border-red-500 focus:ring-red-500/30" : cls("border focus:ring-primary/30 dark:focus:ring-primary-dark/30", defaultBorderMixin),
-                                "text-text-primary dark:text-text-primary-dark",
-                                "focus:outline-none focus:ring-2",
-                                "transition-all"
-                            )}
+                            error={!!validationError}
+                            className="w-full"
+                            inputClassName="font-mono text-xs p-3 resize-y"
                         />
                         {validationError && (
                             <Typography variant="caption" className="text-red-500 mt-1 block text-xs">
@@ -352,21 +348,13 @@ function ParamSection({
                             <code className="text-xs font-mono font-semibold">{p.name}</code>
                             {p.required && <span className="text-red-500 ml-0.5 text-xs">*</span>}
                         </label>
-                        <input
-                            type="text"
+                        <TextField
+                            size="small"
                             placeholder={p.description ?? p.name}
                             value={values[p.name] ?? ""}
                             onChange={(e) => onChange(p.name, e.target.value)}
-                            className={cls(
-                                "flex-1 px-3 py-1.5 text-xs rounded-lg font-mono",
-                                "bg-surface-50 dark:bg-surface-900",
-                                "border",
-                                defaultBorderMixin,
-                                "text-text-primary dark:text-text-primary-dark",
-                                "placeholder:text-text-secondary/50",
-                                "focus:outline-none focus:ring-2 focus:ring-primary/30",
-                                "transition-all"
-                            )}
+                            className="flex-1"
+                            inputClassName="font-mono text-xs"
                         />
                     </div>
                 ))}
@@ -397,55 +385,43 @@ function CustomKeyValueSection({
                 >
                     {title}
                 </Typography>
-                <button
+                <Button
+                    variant="text"
+                    size="small"
+                    color="primary"
                     onClick={onAdd}
-                    className="text-xs text-primary dark:text-primary-dark hover:underline flex items-center gap-1 font-medium"
+                    className="text-xs p-0 min-h-0"
                 >
                     <PlusIcon size={iconSize.small} className="mr-1" /> Add Header
-                </button>
+                </Button>
             </div>
             <div className="space-y-2">
                 {values.map((v, i) => (
                     <div key={i} className="flex items-center gap-2">
-                        <input
-                            type="text"
+                        <TextField
+                            size="small"
                             placeholder="Header name"
                             value={v.key}
                             onChange={(e) => onChange(i, e.target.value, v.value)}
-                            className={cls(
-                                "w-1/3 px-3 py-1.5 text-xs rounded-lg font-mono",
-                                "bg-surface-50 dark:bg-surface-900",
-                                "border",
-                                defaultBorderMixin,
-                                "text-text-primary dark:text-text-primary-dark",
-                                "placeholder:text-text-secondary/50",
-                                "focus:outline-none focus:ring-2 focus:ring-primary/30",
-                                "transition-all"
-                            )}
+                            className="w-1/3"
+                            inputClassName="font-mono text-xs"
                         />
-                        <input
-                            type="text"
+                        <TextField
+                            size="small"
                             placeholder="Value"
                             value={v.value}
                             onChange={(e) => onChange(i, v.key, e.target.value)}
-                            className={cls(
-                                "flex-1 px-3 py-1.5 text-xs rounded-lg font-mono",
-                                "bg-surface-50 dark:bg-surface-900",
-                                "border",
-                                defaultBorderMixin,
-                                "text-text-primary dark:text-text-primary-dark",
-                                "placeholder:text-text-secondary/50",
-                                "focus:outline-none focus:ring-2 focus:ring-primary/30",
-                                "transition-all"
-                            )}
+                            className="flex-1"
+                            inputClassName="font-mono text-xs"
                         />
-                        <button
+                        <IconButton
+                            size="small"
                             onClick={() => onRemove(i)}
-                            className="p-1.5 text-text-secondary hover:text-red-500 rounded transition-colors flex items-center justify-center shrink-0"
+                            className="text-text-secondary hover:text-red-500 shrink-0"
                             title="Remove"
                         >
                             <XIcon size={iconSize.small} />
-                        </button>
+                        </IconButton>
                     </div>
                 ))}
                 {values.length === 0 && (

package/src/components/AuthSimulationSelector.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Typography, cls, iconSize } from "@rebasepro/ui";
+import { Typography, cls, iconSize, Button } from "@rebasepro/ui";
 import { KeyRoundIcon } from "lucide-react";
 import { UserSelectPopover, SelectableUser } from "@rebasepro/core";
 
@@ -31,28 +31,24 @@ export function AuthSimulationSelector({
             >
                 Auth:
             </Typography>
-            <button
+            <Button
+                size="small"
+                variant={authMode === "jwt" ? "outlined" : "outlined"}
+                color={authMode === "jwt" ? "primary" : "neutral"}
                 onClick={() => setAuthMode("jwt")}
-                className={cls(
-                    "px-3 py-1 text-xs rounded-full border transition-all",
-                    authMode === "jwt"
-                        ? "bg-primary/15 text-primary dark:text-primary-dark border-primary/30 font-medium"
-                        : "border-surface-300 dark:border-surface-600 text-text-secondary dark:text-text-secondary-dark hover:border-primary/30"
-                )}
+                className="rounded-full !px-3 !py-1 !text-xs"
             >
                 JWT Token
-            </button>
-            <button
+            </Button>
+            <Button
+                size="small"
+                variant={authMode === "none" ? "outlined" : "outlined"}
+                color={authMode === "none" ? "error" : "neutral"}
                 onClick={() => setAuthMode("none")}
-                className={cls(
-                    "px-3 py-1 text-xs rounded-full border transition-all",
-                    authMode === "none"
-                        ? "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/30 font-medium"
-                        : "border-surface-300 dark:border-surface-600 text-text-secondary dark:text-text-secondary-dark hover:border-red-500/30"
-                )}
+                className="rounded-full !px-3 !py-1 !text-xs"
             >
                 No Auth
-            </button>
+            </Button>
 
             {authMode === "jwt" && (
                 <>

package/src/components/RLSEditor/RLSEditor.tsx

@@ -7,6 +7,18 @@ import { useRebaseContext, useSnackbarController, ErrorView, useTranslation } fr
 import { isPostgresCollection } from "@rebasepro/types";
 import { PolicyEditor } from "./PolicyEditor";
 
+/**
+ * Validates and double-quotes a SQL identifier to prevent injection.
+ * Only allows safe Postgres identifiers (letters, digits, underscores).
+ * Throws if the identifier contains unsafe characters.
+ */
+function sanitizeSqlIdentifier(name: string): string {
+    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
+        throw new Error(`Invalid SQL identifier: "${name}". Only letters, digits, and underscores are allowed.`);
+    }
+    return `"${name}"`;
+}
+
 export interface PostgresPolicy {
     policyname: string;
     tablename: string;
@@ -402,6 +414,35 @@ totalPolicies };
                                                 <Typography variant="body2" className="font-mono text-[13px] font-medium">{rlsStats.totalPolicies}</Typography>
                                             </div>
                                         </div>
+
+                                        {/* Security health indicators */}
+                                        {rlsStats.total - rlsStats.enabled > 0 && (
+                                            <div className={cls("p-2.5 rounded border border-yellow-200 dark:border-yellow-900/50 bg-yellow-50 dark:bg-yellow-900/20 flex items-start gap-2", defaultBorderMixin)}>
+                                                <AlertTriangleIcon size={14} className="text-yellow-600 dark:text-yellow-500 mt-0.5 shrink-0"/>
+                                                <div>
+                                                    <Typography variant="caption" className="text-yellow-800 dark:text-yellow-400 text-[11px] font-semibold block">
+                                                        {rlsStats.total - rlsStats.enabled} table{rlsStats.total - rlsStats.enabled > 1 ? "s" : ""} without RLS
+                                                    </Typography>
+                                                    <Typography variant="caption" className="text-yellow-700 dark:text-yellow-600 text-[10px] block mt-0.5">
+                                                        These tables have no row-level access control. If auth enforcement is disabled, data may be publicly accessible.
+                                                    </Typography>
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {rlsStats.enabled > 0 && rlsStats.enabled - rlsStats.withPolicies > 0 && (
+                                            <div className={cls("p-2.5 rounded border border-blue-200 dark:border-blue-900/50 bg-blue-50 dark:bg-blue-900/20 flex items-start gap-2", defaultBorderMixin)}>
+                                                <ShieldIcon size={14} className="text-blue-600 dark:text-blue-400 mt-0.5 shrink-0"/>
+                                                <div>
+                                                    <Typography variant="caption" className="text-blue-800 dark:text-blue-300 text-[11px] font-semibold block">
+                                                        {rlsStats.enabled - rlsStats.withPolicies} table{rlsStats.enabled - rlsStats.withPolicies > 1 ? "s" : ""} with RLS but no policies
+                                                    </Typography>
+                                                    <Typography variant="caption" className="text-blue-700 dark:text-blue-500 text-[10px] block mt-0.5">
+                                                        RLS is enabled but no permissive policies exist. All access is denied by default (Postgres deny-all).
+                                                    </Typography>
+                                                </div>
+                                            </div>
+                                        )}
                                     </div>
                                 </div>
                             )}
@@ -437,7 +478,7 @@ totalPolicies };
                                                 const action = activeTableData.rlsEnabled ? "DISABLE" : "ENABLE";
                                                 if (!confirm(`Are you sure you want to ${action.toLowerCase()} Row Level Security on "${table}"?`)) return;
                                                 try {
-                                                    await databaseAdmin!.executeSql!(`ALTER TABLE "${table}" ${action} ROW LEVEL SECURITY`);
+                                                    await databaseAdmin!.executeSql!(`ALTER TABLE ${sanitizeSqlIdentifier(table)} ${action} ROW LEVEL SECURITY`);
                                                     snackbarController.open({ type: "success",
 message: `RLS ${action.toLowerCase()}d on ${table}` });
                                                     fetchRLSData();
@@ -476,7 +517,11 @@ message: e instanceof Error ? e.message : String(e) });
                             </div>
                         </div>
 
-                        {error ? (
+                        {isLoading && !activeTableData ? (
+                            <div className="flex-grow flex items-center justify-center h-full">
+                                <CircularProgress size="small"/>
+                            </div>
+                        ) : error ? (
                             <div className="p-6 h-full flex items-center justify-center">
                                 <ErrorView title={t("studio_rls_error")} error={error} onRetry={fetchRLSData}/>
                             </div>
@@ -660,7 +705,7 @@ message: e instanceof Error ? e.message : String(e) });
                                                                         const table = activeTableData!.tableName;
                                                                         if (!confirm(`Drop policy "${policy.policyname}" from table "${table}"?`)) return;
                                                                         try {
-                                                                            await databaseAdmin!.executeSql!(`DROP POLICY "${policy.policyname}" ON "${table}"`);
+                                                                            await databaseAdmin!.executeSql!(`DROP POLICY ${sanitizeSqlIdentifier(policy.policyname)} ON ${sanitizeSqlIdentifier(table)}`);
                                                                             snackbarController.open({ type: "success",
 message: `Policy "${policy.policyname}" dropped` });
                                                                             fetchRLSData();
@@ -680,6 +725,40 @@ message: e instanceof Error ? e.message : String(e) });
                                         </div>
                                     )}
 
+                                    {activeTableData && mergedPolicies.length === 0 && activeTableData.rlsEnabled && (
+                                        <div className="flex flex-col items-center justify-center py-12 text-center">
+                                            <ShieldIcon size={40} className="text-surface-300 dark:text-surface-600 mb-4"/>
+                                            <Typography variant="subtitle2" className="text-text-secondary dark:text-text-secondary-dark mb-2">
+                                                No policies defined
+                                            </Typography>
+                                            <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark max-w-sm mb-4">
+                                                RLS is enabled on this table but no policies exist. All access is denied by default (Postgres deny-all). Create a policy to allow specific access.
+                                            </Typography>
+                                            {activeCollection && (
+                                                <Button
+                                                    size="small"
+                                                    variant="filled"
+                                                    color="primary"
+                                                    onClick={() => setEditingPolicy("new")}
+                                                >
+                                                    {t("studio_rls_create_policy")}
+                                                </Button>
+                                            )}
+                                        </div>
+                                    )}
+
+                                    {activeTableData && mergedPolicies.length === 0 && !activeTableData.rlsEnabled && activeCollection && (
+                                        <div className="flex flex-col items-center justify-center py-12 text-center">
+                                            <AlertTriangleIcon size={40} className="text-yellow-400 dark:text-yellow-600 mb-4"/>
+                                            <Typography variant="subtitle2" className="text-text-secondary dark:text-text-secondary-dark mb-2">
+                                                No access control
+                                            </Typography>
+                                            <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark max-w-sm">
+                                                This table has neither RLS nor policies. Enable RLS and create policies to restrict row-level access.
+                                            </Typography>
+                                        </div>
+                                    )}
+
                                     </div>
                                 </div>
                             </div>

package/src/components/SQLEditor/SQLEditor.tsx

@@ -3,7 +3,7 @@ import { IconForView } from "@rebasepro/core";
 import { useStudioCollectionRegistry, useStudioSideEntityController } from "@rebasepro/core";
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { Button, Paper, Typography, CircularProgress, cls, IconButton, InputLabel, Dialog, DialogContent, DialogActions, DialogTitle, TextField, Tooltip, Alert, Tabs, Tab, defaultBorderMixin, Select, SelectItem, Menu, MenuItem, ResizablePanels, Chip, VirtualTable, VirtualTableColumn , iconSize } from "@rebasepro/ui";
+import { Button, Paper, Typography, CircularProgress, cls, IconButton, InputLabel, Dialog, DialogContent, DialogActions, DialogTitle, TextField, Tooltip, Alert, Tabs, Tab, defaultBorderMixin, Select, SelectItem, Menu, MenuItem, ResizablePanels, Chip, VirtualTable, VirtualTableColumn , iconSize, Checkbox, TextareaAutosize } from "@rebasepro/ui";
 import { DatabaseIcon, TerminalIcon, XIcon, PlusIcon, PencilIcon, MoreVerticalIcon, MenuIcon, PlayIcon } from "lucide-react";
 // VirtualTableInput is conditionally loaded from CMS when available
 let VirtualTableInput: React.ComponentType<any> | null = null;
@@ -122,21 +122,15 @@ const FixedEditorOverlay = ({
                         maxWidth: Math.min(400, windowSize.width - left - 10)
                     }}
                 >
-                    <textarea
+                    <TextareaAutosize
                         className="w-full h-full bg-transparent outline-none border-none ring-0 font-mono text-[13px] text-text-primary dark:text-text-primary-dark px-4 py-1.5 resize-none overflow-y-auto"
                         defaultValue={displayValue}
                         autoFocus
-                        style={{ minHeight: '32px' }}
+                        style={{ minHeight: '32px', maxHeight: resolvedMaxHeight }}
                         onFocus={(e) => {
                             const val = e.target.value;
                             e.target.value = "";
                             e.target.value = val;
-                            e.target.style.height = 'auto';
-                            e.target.style.height = `${Math.min(e.target.scrollHeight, resolvedMaxHeight)}px`;
-                        }}
-                        onChange={(e) => {
-                            e.target.style.height = 'auto';
-                            e.target.style.height = `${Math.min(e.target.scrollHeight, resolvedMaxHeight)}px`;
                         }}
                         onBlur={(e) => {
                             onSave(e.target.value || null);
@@ -1232,7 +1226,7 @@ id: String(ra.entityId) })}
                             </div>
                             <div className="flex shrink-0 items-center justify-end pr-2 gap-1.5">
                                 <Tooltip title={t("studio_sql_format_sql")}>
-                                    <IconButton size="small" onClick={handlePrettify} className="text-text-secondary hover:text-text-primary transition-colors">
+                                    <IconButton size="small" onClick={handlePrettify}>
                                         <MenuIcon size={iconSize.smallest}/>
                                     </IconButton>
                                 </Tooltip>
@@ -1248,15 +1242,19 @@ id: String(ra.entityId) })}
 
                                 <div className="h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1"></div>
 
-                                <div className="flex items-center space-x-2 px-2 cursor-pointer" onClick={() => setAutoLimit(!autoLimit)}>
+                                <div className="flex items-center space-x-2 px-2" onClick={(e) => {
+                                    setAutoLimit(!autoLimit);
+                                    e.stopPropagation();
+                                }}>
                                     <Typography variant="caption" className="text-[11px] text-text-secondary cursor-pointer select-none">{t("studio_sql_limit_1000")}</Typography>
-                                    <input
-                                        type="checkbox"
-                                        checked={autoLimit}
-                                        onChange={(e) => setAutoLimit(e.target.checked)}
-                                        onClick={(e) => e.stopPropagation()}
-                                        className="w-3.5 h-3.5 rounded border-surface-300 text-primary focus:ring-primary cursor-pointer"
-                                    />
+                                    <div onClick={(e) => e.stopPropagation()}>
+                                        <Checkbox
+                                            checked={autoLimit}
+                                            onCheckedChange={setAutoLimit}
+                                            size="smallest"
+                                            padding={false}
+                                        />
+                                    </div>
                                 </div>
 
                                 <div className="h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1"></div>

package/src/components/SQLEditor/SchemaBrowser.tsx

@@ -67,28 +67,26 @@ export const SchemaBrowser = ({
                                             <svg className="w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                             <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark text-xs truncate flex-1 min-w-0">{table.tableName}</Typography>
 
-                                            <div className="flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-950 px-1 gap-1 rounded transition-opacity">
+                                            <div className="flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-800 px-1 gap-1 rounded transition-opacity">
                                                 <IconButton
-                                                    size="smallest"
-                                                    className="transition-colors text-text-secondary hover:text-text-primary pointer-events-auto"
+                                                    size="small"
                                                     onClick={(e) => {
                                                         e.stopPropagation();
                                                         navigator.clipboard.writeText(table.tableName);
                                                     }}
                                                     title="CopyIcon table name"
                                                 >
-                                                    <CopyIcon size={iconSize.smallest}/>
+                                                    <CopyIcon size={iconSize.small}/>
                                                 </IconButton>
 
                                                 <Menu
                                                     trigger={
                                                         <IconButton
-                                                            size={"smallest"}
-                                                            className="transition-colors text-text-secondary hover:text-text-primary pointer-events-auto"
+                                                            size={"small"}
                                                             onClick={(e) => e.stopPropagation()}
                                                             title="Generate SQL templates"
                                                         >
-                                                            <MoreVerticalIcon size={iconSize.smallest}/>
+                                                            <MoreVerticalIcon size={iconSize.small}/>
                                                         </IconButton>
                                                     }
                                                 >
@@ -133,7 +131,7 @@ export const SchemaBrowser = ({
                                                         <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark text-[9px] truncate mr-1 uppercase shrink-0" title={col.dataType}>{col.dataType}</Typography>
                                                         <IconButton
                                                             size="smallest"
-                                                            className="opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-950 transition-colors pointer-events-auto"
+                                                            className="opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-800 transition-colors pointer-events-auto"
                                                             onClick={(e) => {
                                                                 e.stopPropagation();
                                                                 navigator.clipboard.writeText(col.name);

package/src/components/SchemaVisualizer/SchemaVisualizer.tsx

@@ -13,13 +13,16 @@ import {
 import type { Node, Edge, NodeChange, EdgeChange } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import {
-    Typography,
+    Button,
+    SearchBar,
     TextField,
+    Tooltip,
+    Alert,
+    Typography,
     cls,
     defaultBorderMixin,
     CircularProgress,
     ResizablePanels,
-    Tooltip,
     IconButton
 } from "@rebasepro/ui";
 import {
@@ -230,12 +233,11 @@ duration: 400 }
 
                     {/* Search */}
                     <div className="px-2 py-1.5 border-b border-surface-200/40 dark:border-surface-700/40">
-                        <TextField
+                        <SearchBar
                             size="smallest"
                             placeholder="Filter tables…"
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            inputClassName="text-xs"
+                            onTextSearch={(val) => setSearchQuery(val ?? "")}
+                            innerClassName="text-xs"
                         />
                     </div>
 
@@ -443,30 +445,26 @@ duration: 400 }
                             {/* Direction toggle */}
                             <div className="flex items-center bg-surface-100 dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40">
                                 <Tooltip title="Left to right layout">
-                                    <button
+                                    <Button
+                                        size="small"
+                                        variant={direction === "LR" ? "filled" : "text"}
+                                        color={direction === "LR" ? "primary" : "neutral"}
                                         onClick={() => setDirection("LR")}
-                                        className={cls(
-                                            "px-2 py-1 text-[10px] font-mono rounded-l-md transition-colors",
-                                            direction === "LR"
-                                                ? "bg-primary text-white"
-                                                : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-700"
-                                        )}
+                                        className="!rounded-r-none !px-2 !py-1 !text-[10px] !font-mono"
                                     >
                                         LR
-                                    </button>
+                                    </Button>
                                 </Tooltip>
                                 <Tooltip title="Top to bottom layout">
-                                    <button
+                                    <Button
+                                        size="small"
+                                        variant={direction === "TB" ? "filled" : "text"}
+                                        color={direction === "TB" ? "primary" : "neutral"}
                                         onClick={() => setDirection("TB")}
-                                        className={cls(
-                                            "px-2 py-1 text-[10px] font-mono rounded-r-md transition-colors",
-                                            direction === "TB"
-                                                ? "bg-primary text-white"
-                                                : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-700"
-                                        )}
+                                        className="!rounded-l-none !px-2 !py-1 !text-[10px] !font-mono"
                                     >
                                         TB
-                                    </button>
+                                    </Button>
                                 </Tooltip>
                             </div>