UI Improvements

.eslintrc.json

@@ -16,6 +16,8 @@
     "unicorn/prefer-spread": 0,
     "unicorn/no-array-reduce": 0,
     "unicorn/prevent-abbreviations": 0,
+    "unicorn/prefer-global-this": 0,
+    "unicorn/prefer-logical-operator-over-ternary": 0,
     // TODO: Check these rules later
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": [

README.md

@@ -16,8 +16,13 @@
 - **Visual Management of Keyspaces and Tables:**
   Create, edit, and visualize keyspaces and tables directly from the interface.
 
+  <img src="./.github/assets/keyspace-details.gif" alt="keyspace showcase" width="100%"/>
+  <img src="./.github/assets/table-details.gif" alt="keyspace tableshowcase" width="100%"/>
+  <p>
 - **Integrated Metrics Monitoring:**
   Leverages ScyllaDB's Prometheus and Grafana integrations to display important metrics within the app.
+
+  <img src="./.github/assets/query-ruuner-dashboard.gif" alt="query runner dashboard" width="100%"/>
 
 - **Cluster Connectivity:**
   Easily connect to your local cluster using `https://local.scylladb.studio` or manage cloud-based clusters.

src/app/(main)/keyspace/[keyspace]/_components/keyspace-info.tsx

@@ -58,29 +58,25 @@ export default function KeyspaceInfo({ keyspace }: KeyspaceInfoProperties) {
                   "",
                 )}
               />
-              <div className="flex items-center space-x-3 p-3 bg-white dark:bg-gray-800 rounded-md ">
-                <div className="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
-                  <HashIcon className="w-5 h-5" />
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
-                    Replication Sizes
-                  </p>
-                  <p className="text-lg font-bold text-gray-800 dark:text-gray-200">
-                    {replicationSizes.map(([key, value]) => (
-                      <Badge
-                        variant="secondary"
-                        key={key}
-                        className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-                      >
-                        <span key={key}>
-                          {key}: {value}
-                        </span>
-                      </Badge>
-                    ))}
-                  </p>
-                </div>
-              </div>
+              <KeyspaceInfoItem
+                icon={<HashIcon className="w-5 h-5" />}
+                label="Replication Sizes"
+              >
+                <p className="text-lg font-bold text-gray-800 dark:text-gray-200">
+                  {replicationSizes.map(([key, value]) => (
+                    <Badge
+                      variant="secondary"
+                      key={key}
+                      className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                    >
+                      <span key={key}>
+                        {key}: {value}
+                      </span>
+                    </Badge>
+                  ))}
+                </p>
+              </KeyspaceInfoItem>
+
               <KeyspaceInfoItem
                 icon={<SettingsIcon className="w-5 h-5" />}
                 label="Durable Writes"
@@ -99,27 +95,34 @@ export default function KeyspaceInfo({ keyspace }: KeyspaceInfoProperties) {
   );
 }
 
-function KeyspaceInfoItem({ icon, label, value }: any) {
+function KeyspaceInfoItem({ icon, label, value, children }: any) {
   return (
-    <div className="flex items-center space-x-3 p-3 bg-white dark:bg-gray-800 rounded-md ">
+    <div className="flex items-center space-x-3 p-3 bg-white dark:border dark:border-gray-800 dark:bg-transparent rounded-md ">
       <div className="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
         {icon}
       </div>
       <div>
         <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
           {label}
         </p>
-        <p className="text-lg font-bold text-gray-800 dark:text-gray-200">
-          {value}
-        </p>
+
+        {children ? (
+          children
+        ) : (
+          <p className="text-lg font-bold text-gray-800 dark:text-gray-200">
+            {value}
+          </p>
+        )}
       </div>
     </div>
   );
 }
 
 function KeyspaceCQLTooltip({
   keyspaceInfo,
-}: { keyspaceInfo: KeyspaceDefinition }) {
+}: {
+  keyspaceInfo: KeyspaceDefinition;
+}) {
   const cql = `CREATE KEYSPACE ${keyspaceInfo.name}
 WITH replication = {
     'class': '${keyspaceInfo?.replication?.class}',
@@ -154,12 +157,17 @@ function DeleteKeyspaceButton() {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <button className="flex items-center space-x-2 px-4 py-2 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-md hover:bg-red-200 dark:hover:bg-red-800 transition-colors">
+          <button
+            disabled
+            className="flex items-center space-x-2 px-4 py-2 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-md hover:bg-red-200 dark:hover:bg-red-800 transition-colors"
+          >
             <Trash className="w-5 h-5" />
             <span>Delete Keyspace</span>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="bottom" className="max-w-md p-0"></TooltipContent>
+        <TooltipContent side="bottom" className="max-w-md">
+          Work In Progress
+        </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );

src/app/(main)/keyspace/[keyspace]/_components/keyspace-tables.tsx

@@ -1,3 +1,4 @@
+import { CustomTooltip } from "@scylla-studio/components/composed/custom-tooltip";
 import { Badge } from "@scylla-studio/components/ui/badge";
 import { Button } from "@scylla-studio/components/ui/button";
 import {
@@ -14,12 +15,7 @@ import {
   TableHeader,
   TableRow,
 } from "@scylla-studio/components/ui/table";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@scylla-studio/components/ui/tooltip";
+
 import { KeyspaceDefinition } from "@scylla-studio/lib/cql-parser/keyspace-parser";
 import {
   ArrowDownIcon,
@@ -54,42 +50,41 @@ export default function KeyspaceDefinitions({
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+        <div className=" rounded-lg shadow-lg overflow-hidden">
           <Table>
             <TableHeader>
               <TableRow className="bg-purple-100 dark:bg-purple-900">
-                <TableHead className="font-bold text-purple-700 dark:text-purple-300">
+                <TableHead className="font-bold   px-4 py-3">
                   Table Name
                 </TableHead>
-                <TableHead className="font-bold text-purple-700 dark:text-purple-300">
-                  Keys
-                </TableHead>
-                <TableHead className="font-bold text-purple-700 dark:text-purple-300">
-                  Actions
-                </TableHead>
+                <TableHead className="font-bold  px-4 py-3">Keys</TableHead>
+                <TableHead className="font-bold  px-4 py-3">Actions</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {tables.map(({ name, table }) => (
-                <TableRow
-                  key={table.tableName}
-                  className="hover:bg-purple-50 dark:hover:bg-purple-900/30 transition-colors"
-                >
-                  <TableCell className="font-medium">
-                    <Link
-                      href={`/keyspace/${keyspace.name}/table/${table.tableName}`}
+                <TableRow key={table.tableName} className="">
+                  <TableCell className="font-medium px-4 py-3">
+                    <CustomTooltip
+                      Trigger={
+                        <Link
+                          href={`/keyspace/${keyspace.name}/table/${table.tableName}`}
+                        >
+                          <Badge
+                            variant="secondary"
+                            className="gap-2 bg-cyan-700 text-white dark:bg-cyan-900 "
+                          >
+                            <TableIcon className="w-5 h-5" />
+                            {table.tableName}
+                          </Badge>
+                        </Link>
+                      }
                     >
-                      <Badge
-                        variant="secondary"
-                        className="gap-2 bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200"
-                      >
-                        <TableIcon className="w-5 h-5" />
-                        {table.tableName}
-                      </Badge>
-                    </Link>
+                      View details
+                    </CustomTooltip>
                   </TableCell>
 
-                  <TableCell>
+                  <TableCell className="px-4 py-3">
                     <div className="flex gap-2">
                       <Badge
                         variant="secondary"
@@ -107,44 +102,42 @@ export default function KeyspaceDefinitions({
                       </Badge>
                     </div>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="px-4 py-3">
                     <div className="flex gap-2">
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button variant="outline" size="sm">
-                              <EyeIcon className="w-4 h-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>View Data</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button variant="outline" size="sm">
-                              <LayersIcon className="w-4 h-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Generate MV</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button variant="outline" size="sm">
-                              <TrashIcon className="w-4 h-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Drop Table</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
+                      <CustomTooltip
+                        triggerAsChild
+                        Trigger={
+                          <Button variant="outline" size="sm" disabled>
+                            <EyeIcon className="w-4 h-4" />
+                          </Button>
+                        }
+                      >
+                        <p>View Data</p>
+                      </CustomTooltip>
+
+                      <CustomTooltip
+                        triggerAsChild
+                        Trigger={
+                          <Button variant="outline" size="sm" disabled>
+                            <LayersIcon className="w-4 h-4" />
+                          </Button>
+                        }
+                      >
+                        <p>Generate MV</p>
+                        (Work In Progress)
+                      </CustomTooltip>
+
+                      <CustomTooltip
+                        triggerAsChild
+                        Trigger={
+                          <Button variant="outline" size="sm" disabled>
+                            <TrashIcon className="w-4 h-4" />
+                          </Button>
+                        }
+                      >
+                        <p>Drop Table</p>
+                        (Work In Progress)
+                      </CustomTooltip>
                     </div>
                   </TableCell>
                 </TableRow>

src/app/(main)/keyspace/[keyspace]/table/[table]/_components/table-structure.tsx

@@ -94,7 +94,7 @@ export default function TableStructure({ table }: TableStructureProperties) {
             </TableBody>
           </Table>
         </div>
-        <Card className=" col-span-1 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-900">
+        <Card className=" col-span-1 bg-gradient-to-br from-white to-green-50 dark:from-gray-600 dark:to-gray-900">
           <CardHeader>
             <CardTitle className="text-3xl font-bold flex items-center gap-2 text-green-700 dark:text-green-300">
               <SettingsIcon className="w-8 h-8" />
@@ -118,7 +118,9 @@ export default function TableStructure({ table }: TableStructureProperties) {
               <SettingItem
                 icon={<ClockIcon className="w-4 h-4" />}
                 label="Default TTL"
-                value={`${table.options.defaultTimeToLive} seconds ${table.options.defaultTimeToLive === 0 ? "(disabled)" : ""}`}
+                value={`${table.options.defaultTimeToLive} seconds ${
+                  table.options.defaultTimeToLive === 0 ? "(disabled)" : ""
+                }`}
               />
               <SettingItem
                 icon={<ClockIcon className="w-4 h-4" />}
@@ -148,7 +150,7 @@ function SettingItem({ icon, label, value }: any) {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger className="w-full">
-          <div className="flex items-center space-x-2 p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow">
+          <div className="flex items-center space-x-2 p-3 bg-transparent rounded-md ">
             <div className="bg-green-100 dark:bg-green-900 p-2 rounded-full">
               {icon}
             </div>