feat(web-console): show table icon description in the tooltip

packages/browser-tests/cypress/integration/console/schema.spec.js

@@ -73,6 +73,24 @@ describe("questdb schema with working tables", () => {
     });
   });
 
+  it("should show the table icon description in the tooltip", () => {
+    cy.getByDataHook("schema-table-title")
+      .contains("btc_trades")
+      .getByDataHook("table-icon")
+      .realHover();
+
+    cy.wait(1200);
+
+    cy.getByDataHook("tooltip").should(
+      "contain",
+      `WAL-based table, partitioned by "day", ordered on "timestamp" column.`
+    );
+    cy.getByDataHook("tooltip").should(
+      "contain",
+      "WAL-based tables are the current and most up-to-date table format. This format supports advanced data recovery, replication and high-throughput ingestion. This is the recommended format if your table contains time-series data that has a designated timestamp."
+    );
+  })
+
   it("should filter the table with input field", () => {
     // Table name search
     cy.get('input[name="table_filter"]').type("btc_trades");

packages/web-console/src/scenes/Schema/Row/index.tsx

@@ -432,7 +432,8 @@ const Row = ({
           >
             {isTableKind && (
               <TableIcon
-                isPartitioned={partitionBy && partitionBy !== "NONE"}
+                designatedTimestamp={designatedTimestamp}
+                partitionBy={partitionBy}
                 walEnabled={walEnabled}
                 isMaterializedView={kind === "matview"}
               />

packages/web-console/src/scenes/Schema/VirtualTables/index.tsx

@@ -375,6 +375,7 @@ const VirtualTables: FC<VirtualTablesProps> = ({
                   navigateInTree={navigateInTree}
                   partitionBy={item.partitionBy}
                   walEnabled={item.walEnabled}
+                  designatedTimestamp={item.designatedTimestamp}
                   id={item.id}
                   errors={[
                     ...(item.matViewData?.view_status === 'invalid' ? 

packages/web-console/src/scenes/Schema/VirtualTables/utils.ts

@@ -100,6 +100,7 @@ export const createTableNode = (
     isExpanded: getSectionExpanded(tableId),
     partitionBy: table.partitionBy,
     walEnabled: table.walEnabled,
+    designatedTimestamp: table.designatedTimestamp,
     walTableData,
     children: [
       {

packages/web-console/src/scenes/Schema/table-icon.tsx

@@ -1,11 +1,15 @@
 import React, { FC } from "react"
 import styled from "styled-components"
 import { Table } from "@styled-icons/remix-line"
+import { PopperHover } from "../../components/PopperHover"
+import { Tooltip } from "../../components/Tooltip"
 import { color } from '../../utils'
+import * as QuestDB from "../../utils/questdb"
 
 type TableIconProps = {
   walEnabled?: boolean
-  isPartitioned?: boolean
+  partitionBy?: QuestDB.PartitionBy
+  designatedTimestamp?: string
   isMaterializedView?: boolean
 }
 
@@ -59,15 +63,41 @@ export const MaterializedViewIcon = ({ height = "14px", width = "14px" }) => (
   </svg>
 )
 
-export const TableIcon: FC<TableIconProps> = ({ walEnabled, isPartitioned, isMaterializedView }) => (
-  <Root>
-    {isMaterializedView ? (
-      <MaterializedViewIcon height="14px" width="14px" />
-    ) : (
-      <>
-        {!walEnabled && <Asterisk>*</Asterisk>}
-        {isPartitioned ? <Table size="14px" /> : <NonPartitionedTableIcon height="14px" />}
-      </>
-    )}
-  </Root>
-)
+export const TableIcon: FC<TableIconProps> = ({ walEnabled, partitionBy, designatedTimestamp, isMaterializedView }) => {
+  const isPartitioned = partitionBy && partitionBy !== "NONE"
+  const partitionText = isPartitioned ? `partitioned by \"${partitionBy.toLowerCase()}\"` : "unpartitioned"
+  const timestampText = !!designatedTimestamp ? `ordered on \"${designatedTimestamp}\" column` : "unordered"
+  const walText = walEnabled ? "WAL-based table" : "Legacy table format"
+  const fullHeader = `${walText}, ${partitionText}, ${timestampText}.`
+  const description = walEnabled
+    ? "WAL-based tables are the current and most up-to-date table format. This format supports advanced data recovery, replication and high-throughput ingestion. This is the recommended format if your table contains time-series data that has a designated timestamp."
+    : "Legacy table format, without WAL (write-ahead-log). This table format should only be used when table does not have timestamp column and generally not a time series. These tables are not replicated and could be slower to ingress data into."
+
+  if (isMaterializedView) {
+    return (
+      <Root data-hook="table-icon">
+        <MaterializedViewIcon height="14px" width="14px" />
+      </Root>
+    )
+  }
+
+  return (
+    <PopperHover
+      trigger={
+        <Root data-hook="table-icon">
+          {!walEnabled && <Asterisk>*</Asterisk>}
+          {isPartitioned ? <Table size="14px" /> : <NonPartitionedTableIcon height="14px" />}
+        </Root>
+      }
+      delay={1000}
+      placement="bottom"
+    >
+      <Tooltip>
+        {fullHeader}
+        <br />
+        <br />
+        {description}
+      </Tooltip>
+    </PopperHover>
+  )
+}