add warning icon when base table is missing

Author: emrberk

packages/browser-tests/cypress/commands.js

@@ -248,6 +248,19 @@ Cypress.Commands.add("dropTable", (name) => {
   });
 });
 
+Cypress.Commands.add("dropTableIfExists", (name) => {
+  const authHeader = localStorage.getItem("basic.auth.header");
+  cy.request({
+    method: "GET",
+    url: `${baseUrl}/exec?query=${encodeURIComponent(
+      `DROP TABLE IF EXISTS ${name};`
+    )}`,
+    headers: {
+      Authorization: authHeader,
+    },
+  });
+});
+
 Cypress.Commands.add("dropMaterializedView", (name) => {
   const authHeader = localStorage.getItem("basic.auth.header");
   cy.request({
@@ -345,6 +358,14 @@ Cypress.Commands.add("expandMatViews", () => {
   });
 });
 
+Cypress.Commands.add("collapseMatViews", () => {
+  cy.get("body").then((body) => {
+    if (body.find('[data-hook="collapse-materialized-views"]').length > 0) {
+      cy.get('[data-hook="collapse-materialized-views"]').click();
+    }
+  });
+});
+
 Cypress.Commands.add("getEditorTabs", () => {
   return cy.get(".chrome-tab");
 });

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

@@ -227,10 +227,15 @@ describe("materialized views", () => {
     cy.refreshSchema();
   });
 
+  afterEach(() => {
+    cy.collapseTables();
+    cy.collapseMatViews();
+  });
+
   it("should create materialized views", () => {
     cy.getByDataHook("expand-tables").contains(`Tables (${tables.length})`);
     cy.getByDataHook("expand-materialized-views").contains(
-      `Materialized Views (${materializedViews.length})`
+      `Materialized views (${materializedViews.length})`
     );
 
     cy.expandTables();
@@ -240,19 +245,39 @@ describe("materialized views", () => {
   });
 
   it("should show the base table and copy DDL for a materialized view", () => {
-    cy.collapseTables();
+    cy.expandMatViews();
     cy.getByDataHook("schema-table-title").contains("btc_trades_mv").click();
-    cy.getByDataHook("schema-info-title").contains("DDL").should("exist");
+    cy.getByDataHook("schema-info-title").contains("Query").should("exist");
     cy.getByDataHook("copyable-value").should("exist").and("be.visible");
     cy.getByDataHook("copy-value").should("exist").click({ force: true });
 
-    cy.window()
-      .its("navigator.clipboard")
-      .invoke("readText")
-      .should(
-        "match",
-        /^CREATE MATERIALIZED VIEW.*'btc_trades_mv' WITH BASE 'btc_trades'/
-      );
+    if (Cypress.isBrowser("electron")) {
+      cy.window()
+        .its("navigator.clipboard")
+        .invoke("readText")
+        .should(
+          "match",
+          /^CREATE MATERIALIZED VIEW.*'btc_trades_mv' WITH BASE 'btc_trades'/
+        );
+    }
+  });
+
+  it("should show a warning icon when base table is dropped", () => {
+    cy.dropTable("btc_trades");
+    cy.wait(1000);
+    cy.refreshSchema();
+
+    cy.expandMatViews();
+    cy.getByDataHook("schema-table-title").contains("btc_trades_mv").click();
+
+    cy.get('[data-hook="base-table-warning"]')
+      .should("exist")
+      .trigger("mouseover");
+
+    cy.getByDataHook("tooltip").should(
+      "contain",
+      "Base table has been dropped"
+    );
   });
 
   after(() => {
@@ -263,7 +288,7 @@ describe("materialized views", () => {
     });
 
     tables.forEach((table) => {
-      cy.dropTable(table);
+      cy.dropTableIfExists(table);
     });
   });
 });

packages/web-console/src/components/CopyButton/index.tsx

@@ -26,6 +26,7 @@ export const CopyButton = ({
   return (
     <StyledButton
       skin="secondary"
+      data-hook="copy-value"
       onClick={(e) => {
         navigator.clipboard.writeText(text)
         e.stopPropagation()

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

@@ -33,7 +33,6 @@ import * as QuestDB from "../../../utils/questdb"
 import Highlighter from "react-highlight-words"
 import { TableIcon } from "../table-icon"
 import { Box } from "@questdb/react-components"
-import { CopyButton } from '../../../components/CopyButton'
 import { Text, TransitionDuration, IconWithTooltip, spinAnimation } from "../../../components"
 import type { TextProps } from "../../../components"
 import { color } from "../../../utils"
@@ -64,9 +63,12 @@ type Props = Readonly<{
   selected?: boolean
   onSelectToggle?: (table_name: string) => void
   copyable?: boolean
+  suffix?: React.ReactNode
 }>
 
 const Type = styled(Text)`
+  display: flex;
+  align-items: center;
   margin-right: 1rem;
   flex: 0;
   transition: opacity ${TransitionDuration.REG}ms;
@@ -165,22 +167,8 @@ const ValueWrapper = styled.div`
   gap: 0.5rem;
   max-width: 200px;
   flex: 1;
-`
-
-const CopyButtonWrapper = styled.div`
-  flex: 1;
-  display: flex;
-
-  button {
-    border: 0;
-    flex: 1;
-    height: 100%;
-    padding: 0.3rem 0.3rem;
-
-    svg {
-      height: 1.3rem;
-    }
-  }
+  justify-content: flex-end;
+  width: 100%;
 `
 
 const TruncatedBox = styled(Box)`
@@ -191,6 +179,7 @@ const TruncatedBox = styled(Box)`
   cursor: default;
   font-style: italic;
   color: ${color("gray2")};
+  text-align: right;
 `
 
 const Loader = styled(Loader4)`
@@ -199,6 +188,15 @@ const Loader = styled(Loader4)`
   ${spinAnimation};
 `
 
+const ValueText = styled(Text)`
+  font-style: italic;
+  color: ${color("gray2")};
+  flex: 1;
+  text-align: right;
+  overflow: hidden;
+  white-space: nowrap;
+`
+
 const Row = ({
   className,
   designatedTimestamp,
@@ -220,6 +218,7 @@ const Row = ({
   selected,
   onSelectToggle,
   copyable,
+  suffix,
 }: Props) => {
   const { query } = useContext(SchemaContext)
   const [showLoader, setShowLoader] = useState(false)
@@ -330,23 +329,19 @@ const Row = ({
           )}
 
           {kind === 'info' && value && (
-            copyable ? (
-              <ValueWrapper>
+            <ValueWrapper>
+              {copyable ? (
                 <PopperHover
                   placement="top"
                   trigger={<TruncatedBox data-hook="copyable-value">{value}</TruncatedBox>}
                 >
                   <Tooltip>{value}</Tooltip>
                 </PopperHover>
-                <CopyButtonWrapper>
-                  <CopyButton text={value} iconOnly={true} />
-                </CopyButtonWrapper>
-              </ValueWrapper>
-            ) : (
-              <Type _style="italic" color="gray2">
-                {value}
-              </Type>
-            )
+              ) : (
+                <ValueText>{value}</ValueText>
+              )}
+              {suffix}
+            </ValueWrapper>
           )}
 
           {walTableData?.suspended && kind === "table" && (
@@ -367,7 +362,7 @@ const Row = ({
             />
           )}
         </FlexRow>
-        {!tooltip && !copyable && <Text color="comment">{description}</Text>}
+        {!tooltip && kind !== 'info' && <Text color="comment">{description}</Text>}
       </Box>
     </Wrapper>
   )

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

@@ -24,6 +24,7 @@
 
 import React, { useContext, useEffect, useState } from "react"
 import styled from "styled-components"
+import { ErrorWarning } from '@styled-icons/remix-line'
 import { Tree, collapseTransition } from "../../../components"
 import { TreeNode, TreeNodeRenderParams, Text } from "../../../components"
 import { ContextMenuTrigger } from "../../../components/ContextMenu"
@@ -34,6 +35,8 @@ import { useSelector, useDispatch } from "react-redux"
 import { actions, selectors } from "../../../store"
 import { QuestContext } from "../../../providers"
 import { NotificationType } from "../../../types"
+import { CopyButton } from '../../../components/CopyButton'
+import { IconWithTooltip } from '../../../components'
 
 type Props = QuestDB.Table &
   Readonly<{
@@ -46,6 +49,7 @@ type Props = QuestDB.Table &
     onChange: (name: string) => void
     walTableData?: QuestDB.WalTable
     matViewData?: QuestDB.MaterializedView
+    baseTableExists?: boolean
     selected: boolean
     selectOpen: boolean
     onSelectToggle: (table_name: string) => void
@@ -55,6 +59,7 @@ const Wrapper = styled.div`
   position: relative;
   display: flex;
   margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   align-items: stretch;
   flex-direction: column;
   overflow: hidden;
@@ -90,6 +95,27 @@ const Columns = styled.div`
   }
 `
 
+const SuffixWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  button {
+    border: 0;
+    height: 100%;
+    padding: 0.3rem 0.3rem;
+
+    svg {
+      height: 1.3rem;
+    }
+  }
+`
+
+const WarningIcon = styled(ErrorWarning)`
+  color: ${color("orange")};
+  height: 1.9rem;
+`
+
 const columnRender =
   ({
     table_id,
@@ -130,6 +156,7 @@ const Table = ({
   selectOpen,
   onSelectToggle,
   matView,
+  baseTableExists,
 }: Props) => {
   const { quest } = useContext(QuestContext)
   const [columns, setColumns] = useState<QuestDB.Column[]>()
@@ -244,6 +271,15 @@ const Table = ({
                 kind="info"
                 name="Base table"
                 value={matViewData?.base_table_name}
+                suffix={!baseTableExists && (
+                  <SuffixWrapper data-hook="base-table-warning">
+                    <IconWithTooltip
+                      icon={<WarningIcon />}
+                      placement="top"
+                      tooltip="Base table has been dropped"
+                    />
+                  </SuffixWrapper>
+                )}
               />
             )
           })
@@ -259,6 +295,11 @@ const Table = ({
                   name="Query"
                   value={response.data[0].ddl}
                   copyable={true}
+                  suffix={
+                    <SuffixWrapper>
+                      <CopyButton text={response.data[0].ddl} iconOnly={true} />
+                    </SuffixWrapper>
+                  }
                 />
               )
             })

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

@@ -26,7 +26,7 @@ type VirtualTablesProps = {
 const SectionHeader = styled.div`
   padding: 1rem;
   font-weight: bold;
-  background: ${color("backgroundDarker")};
+  background: ${color("selectionDarker")};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -163,10 +163,17 @@ export const VirtualTables: FC<VirtualTablesProps> = ({
           return null
         }
         const table = allTables[index]
-        
+        const matViewData = materializedViews?.find(
+          (mv) => mv.view_name === table.table_name,
+        )
+        const baseTableExists = table.matView && matViewData
+          ? tables.some(t => t.table_name === matViewData.base_table_name)
+          : false
+
         return (
           <Table
             matView={table.matView}
+            baseTableExists={baseTableExists}
             designatedTimestamp={table.designatedTimestamp}
             expanded={table.table_name === opened}
             key={table.table_name}
@@ -180,9 +187,7 @@ export const VirtualTables: FC<VirtualTablesProps> = ({
             walTableData={walTables?.find(
               (wt) => wt.name === table.table_name,
             )}
-            matViewData={materializedViews?.find(
-              (mv) => mv.view_name === table.table_name,
-            )}
+            matViewData={matViewData}
             dedup={table.dedup}
             selectOpen={selectOpen}
             selected={selectedTables.includes(table.table_name)}