From 0c475aeaa2b3a9dcd77c4ce4bd7e1c4091d8b130 Mon Sep 17 00:00:00 2001
From: Maciej Bodek <maciej.bodek@gmail.com>
Date: Tue, 19 Nov 2024 11:43:39 +0100
Subject: [PATCH] support disabled tables

---
 .../src/scenes/Editor/Metrics/metric.tsx      | 15 ++++++-----
 .../scenes/Editor/Metrics/table-selector.tsx  | 25 +++++++++++++------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
index 6b40bd9ce..0e31747c4 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
+++ b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
@@ -173,14 +173,13 @@ export const Metric = ({
       beforeLabel={
         <TableSelector
           loading={loading}
-          options={tables
-            .filter((t) => t.walEnabled)
-            .map((t) => {
-              return {
-                label: t.table_name,
-                value: t.id.toString(),
-              }
-            })}
+          options={tables.map((t) => {
+            return {
+              label: t.table_name,
+              value: t.id.toString(),
+              disabled: !t.walEnabled,
+            }
+          })}
           placeholder="Select table"
           onSelect={(value) => onTableChange(metric, parseInt(value as string))}
           defaultValue={metric.tableId && tableName ? tableName : ""}
diff --git a/packages/web-console/src/scenes/Editor/Metrics/table-selector.tsx b/packages/web-console/src/scenes/Editor/Metrics/table-selector.tsx
index fbdde68d8..a589453b1 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/table-selector.tsx
+++ b/packages/web-console/src/scenes/Editor/Metrics/table-selector.tsx
@@ -8,6 +8,7 @@ import { useKeyPress } from "../../../components"
 type Option = {
   label: string
   value: string
+  disabled: boolean
 }
 type Props = {
   defaultValue: string
@@ -55,17 +56,21 @@ const Options = styled.ul`
   border-radius: 0.4rem;
 `
 
-const Item = styled.li<{ active: boolean }>`
+const Item = styled.li<{ active: boolean; disabled: boolean }>`
   display: flex;
   align-items: center;
   height: 3rem;
-  cursor: pointer;
   padding: 0 1rem;
 
   ${({ active, theme }) => `
     background: ${active ? theme.color.selection : "transparent"};
   `}
 
+  ${({ disabled, theme }) => `
+    color: ${disabled ? theme.color.gray1 : theme.color.foreground};
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+  `}
+
   .highlight {
     background-color: #7c804f;
     color: ${({ theme }) => theme.color.foreground};
@@ -131,6 +136,7 @@ export const TableSelector = ({
   useEffect(() => {
     if (enterPress && filteredOptions.length > 0) {
       if (keyIndex !== -1) {
+        if (filteredOptions[keyIndex].disabled) return
         onSelect(filteredOptions[keyIndex].value)
         setHasFocus(false)
         setQuery(filteredOptions[keyIndex].label)
@@ -183,14 +189,17 @@ export const TableSelector = ({
             <Item
               active={keyIndex === filteredOptions.indexOf(option)}
               key={option.value}
-              onClick={() => {
-                inputRef.current!.value = option.label
-                onSelect(option.value)
-                setQuery(option.label)
-                setHasFocus(false)
-              }}
               onMouseEnter={() => setKeyIndex(index)}
               onMouseLeave={() => setKeyIndex(-1)}
+              disabled={option.disabled}
+              {...(!option.disabled && {
+                onClick: () => {
+                  inputRef.current!.value = option.label
+                  onSelect(option.value)
+                  setQuery(option.label)
+                  setHasFocus(false)
+                },
+              })}
             >
               <Highlighter
                 highlightClassName="highlight"