Merge pull request #23 from dolthub/taylor/schemas

Add more to schemas tab

packages/graphql-server/schema.gql

@@ -10,6 +10,7 @@ type Column {
   name: String!
   isPrimaryKey: Boolean!
   type: String!
+  sourceTable: String
   constraints: [ColConstraint!]
 }
 
@@ -226,7 +227,9 @@ type Query {
   docOrDefaultDoc(refName: String!, databaseName: String!, docType: DocType): Doc
   rowDiffs(offset: Int, databaseName: String!, fromCommitId: String!, toCommitId: String!, refName: String, tableName: String!, filterByRowType: DiffRowType): RowDiffList!
   rows(refName: String!, databaseName: String!, tableName: String!, offset: Int): RowList!
+  doltSchemas(databaseName: String!, refName: String!): RowList!
   views(databaseName: String!, refName: String!): RowList!
+  doltProcedures(databaseName: String!, refName: String!): RowList
   schemaDiff(databaseName: String!, fromCommitId: String!, toCommitId: String!, refName: String, tableName: String!): SchemaDiff
   sqlSelect(refName: String!, databaseName: String!, queryString: String!): SqlSelect!
   sqlSelectForCsvDownload(refName: String!, databaseName: String!, queryString: String!): String!

packages/graphql-server/src/columns/column.model.ts

@@ -18,15 +18,19 @@ export class Column {
   @Field()
   type: string;
 
+  @Field({ nullable: true })
+  sourceTable?: string;
+
   @Field(_type => [ColConstraint], { nullable: true })
   constraints?: ColConstraint[];
 }
 
-export function fromDoltRowRes(col: RawRow): Column {
+export function fromDoltRowRes(col: RawRow, tableName: string): Column {
   return {
     name: col.Field,
     isPrimaryKey: col.Key === "PRI",
     type: col.Type,
     constraints: [{ notNull: col.Null === "NO" }],
+    sourceTable: tableName,
   };
 }

packages/graphql-server/src/rowDiffs/rowDiff.model.ts

@@ -58,11 +58,12 @@ export function fromDoltListRowWithColsRes(
   rows: RawRow[],
   cols: RawRow[],
   offset: number,
+  tableName: string,
 ): RowListWithCols {
   return {
     list: rows.slice(0, ROW_LIMIT).map(row.fromDoltRowRes),
     nextOffset: getNextOffset(rows.length, offset),
-    columns: cols.map(columns.fromDoltRowRes),
+    columns: cols.map(c => columns.fromDoltRowRes(c, tableName)),
   };
 }
 

packages/graphql-server/src/rowDiffs/rowDiff.resolver.ts

@@ -93,8 +93,8 @@ export class RowDiffResolver {
         ]);
 
         const colsUnion = unionCols(
-          oldCols.map(column.fromDoltRowRes),
-          newCols.map(column.fromDoltRowRes),
+          oldCols.map(c => column.fromDoltRowRes(c, fromTableName)),
+          newCols.map(c => column.fromDoltRowRes(c, toTableName)),
         );
 
         const diffType = convertToStringForQuery(args.filterByRowType);
@@ -129,5 +129,5 @@ async function getRowsForDiff(query: ParQuery, args: ListRowsArgs) {
     ROW_LIMIT + 1,
     offset,
   ]);
-  return fromDoltListRowWithColsRes(rows, columns, offset);
+  return fromDoltListRowWithColsRes(rows, columns, offset, args.tableName);
 }

packages/graphql-server/src/rows/row.queries.ts

@@ -2,10 +2,13 @@ import { RawRows } from "../utils/commonTypes";
 
 export const getRowsQuery = (
   columns: RawRows,
+  hasWhereCause = false,
 ): { q: string; cols: string[] } => {
   const cols = getPKColsForRowsQuery(columns);
   return {
-    q: `SELECT * FROM ?? ${getOrderByFromCols(cols.length)}LIMIT ? OFFSET ?`,
+    q: `SELECT * FROM ?? ${
+      hasWhereCause ? "WHERE type = ? " : ""
+    }${getOrderByFromCols(cols.length)}LIMIT ? OFFSET ?`,
     cols,
   };
 };

packages/graphql-server/src/rows/row.resolver.ts

@@ -1,4 +1,5 @@
 import { Args, ArgsType, Field, Int, Query, Resolver } from "@nestjs/graphql";
+import { handleTableNotFound } from "src/tables/table.resolver";
 import { DataSourceService } from "../dataSources/dataSource.service";
 import { DoltSystemTable } from "../systemTables/systemTable.enums";
 import { listTablesQuery } from "../tables/table.queries";
@@ -40,11 +41,42 @@ export class RowResolver {
     );
   }
 
+  @Query(_returns => RowList)
+  async doltSchemas(
+    @Args() args: RefArgs,
+    type?: string,
+  ): Promise<RowList | undefined> {
+    return this.dss.queryMaybeDolt(
+      async query => {
+        const tableName = DoltSystemTable.SCHEMAS;
+        const columns = await query(listTablesQuery, [tableName]);
+
+        const page = { columns, offset: 0 };
+        const { q, cols } = getRowsQuery(columns, !!type);
+
+        const params = [...cols, ROW_LIMIT + 1, page.offset];
+        const rows = await query(
+          q,
+          type ? [tableName, type, ...params] : [tableName, ...params],
+        );
+        return fromDoltListRowRes(rows, page.offset);
+      },
+      args.databaseName,
+      args.refName,
+    );
+  }
+
   @Query(_returns => RowList)
   async views(@Args() args: RefArgs): Promise<RowList | undefined> {
-    return this.rows({
+    return this.doltSchemas(args, "view");
+  }
+
+  @Query(_returns => RowList, { nullable: true })
+  async doltProcedures(@Args() args: RefArgs): Promise<RowList | undefined> {
+    const tableArgs = {
       ...args,
-      tableName: DoltSystemTable.SCHEMAS,
-    });
+      tableName: DoltSystemTable.PROCEDURES,
+    };
+    return handleTableNotFound(async () => this.rows(tableArgs));
   }
 }

packages/graphql-server/src/systemTables/systemTable.enums.ts

@@ -2,6 +2,7 @@ export enum DoltSystemTable {
   DOCS = "dolt_docs",
   QUERY_CATALOG = "dolt_query_catalog",
   SCHEMAS = "dolt_schemas",
+  PROCEDURES = "dolt_procedures",
 }
 
 export const systemTableValues = Object.values(DoltSystemTable);

packages/graphql-server/src/tables/table.model.ts

@@ -47,7 +47,7 @@ export function fromDoltRowRes(
     databaseName,
     refName,
     tableName,
-    columns: columns.map(column.fromDoltRowRes),
+    columns: columns.map(c => column.fromDoltRowRes(c, tableName)),
     foreignKeys: foreignKey.fromDoltRowsRes(fkRows),
     indexes: index.fromDoltRowsRes(idxRows),
   };

packages/web/components/CellButtons/DropColumnButton.tsx

@@ -17,10 +17,12 @@ export default function DropColumnButton({ col, refName }: Props) {
   const { params } = useDataTableContext();
   const { tableName } = params;
 
-  if (!tableName || isDoltSystemTable(tableName)) return null;
+  if (!tableName || !col.sourceTable || isDoltSystemTable(tableName)) {
+    return null;
+  }
 
   const onClick = async () => {
-    const query = dropColumnQuery(tableName, col.name);
+    const query = dropColumnQuery(col.sourceTable ?? tableName, col.name);
     setEditorString(query);
     await executeQuery({
       ...params,

packages/web/components/CellButtons/HideColumnButton.tsx

@@ -14,10 +14,9 @@ export default function HideColumnButton({ col, columns }: Props) {
   const { executeQuery } = useSqlEditorContext();
   const { params } = useDataTableContext();
   const q = params.q ?? `SELECT * FROM \`${params.tableName}\``;
-  const colNames = columns.map(c => c.name);
 
   const onClick = async () => {
-    const query = removeColumnFromQuery(q, col.name, colNames);
+    const query = removeColumnFromQuery(q, col.name, columns);
     await executeQuery({ ...params, query });
   };
 

packages/web/components/DataTable/ShowAllColumns.tsx

@@ -6,21 +6,19 @@ import css from "./index.module.css";
 
 export default function ShowAllColumns() {
   const { executeQuery } = useSqlEditorContext();
-  const { params } = useDataTableContext();
-  const { tableName } = params;
+  const { params, tableNames } = useDataTableContext();
 
-  if (!tableName) return null;
+  if (!params.tableName || tableNames.length > 1) return null;
 
   const q = params.q ?? `SELECT * FROM \`${params.tableName}\``;
-  const cols = getColumns(q);
+  const col = getColumns(q);
 
-  if (!cols?.length || cols[0].expr.column === "*") return null;
+  if (!col?.length || col[0].expr.column === "*") return null;
 
   const onClick = async () => {
-    const query = convertToSqlWithNewCols(q, "*", tableName);
+    const query = convertToSqlWithNewCols(q, "*", tableNames);
     await executeQuery({ ...params, query });
   };
-
   return (
     <Button.Underlined className={css.colsButton} onClick={onClick}>
       Show all columns

packages/web/components/DataTable/Table/Cell.tsx

@@ -85,7 +85,7 @@ export default function Cell(props: Props): JSX.Element {
           }}
         />
       ) : (
-        <span>{displayCellVal}</span>
+        <span onDoubleClick={() => setEditing(true)}>{displayCellVal}</span>
       )}
       {!editing && (
         <CellDropdown

packages/web/components/DatabaseTableNav/NavLinks.tsx

@@ -23,7 +23,7 @@ export default function NavLinks({ className, params }: Props) {
   const router = useRouter();
   const initialActiveIndex = getActiveIndexFromRouterQuery(router.query.active);
   const { hideDoltFeature, loading } = useIsDolt();
-  const tabs = ["Tables", "Schemas", "Views"];
+  const tabs = ["Tables", "Views", "Schemas"];
 
   return (
     <div data-cy="db-page-table-nav" className={className}>
@@ -56,21 +56,21 @@ export default function NavLinks({ className, params }: Props) {
         </CustomTabPanel>
         <CustomTabPanel index={1}>
           {params.refName ? (
-            <SchemaList params={{ ...params, refName: params.refName }} />
+            <NotDoltWrapper showNotDoltMsg feature="Listing views">
+              <Views params={{ ...params, refName: params.refName }} />
+            </NotDoltWrapper>
           ) : (
-            <p className={css.empty} data-cy="db-schemas-empty">
-              No schemas to show
+            <p className={css.empty} data-cy="db-views-empty">
+              No views to show
             </p>
           )}
         </CustomTabPanel>
         <CustomTabPanel index={2}>
           {params.refName ? (
-            <NotDoltWrapper showNotDoltMsg feature="Listing views">
-              <Views params={{ ...params, refName: params.refName }} />
-            </NotDoltWrapper>
+            <SchemaList params={{ ...params, refName: params.refName }} />
           ) : (
-            <p className={css.empty} data-cy="db-views-empty">
-              No views to show
+            <p className={css.empty} data-cy="db-schemas-empty">
+              No schemas to show
             </p>
           )}
         </CustomTabPanel>
@@ -93,9 +93,9 @@ function getActiveIndexFromRouterQuery(
   switch (activeQuery) {
     case "Tables":
       return 0;
-    case "Schemas":
-      return 1;
     case "Views":
+      return 1;
+    case "Schemas":
       return 2;
     default:
       return 0;

packages/web/components/DatabaseTableNav/index.module.css

@@ -6,7 +6,7 @@
 }
 
 .openContainer {
-  @apply transition-width w-96 min-w-[22rem] duration-75;
+  @apply transition-width w-96 min-w-[24rem] duration-75;
   flex-basis: 24rem;
 }
 

packages/web/components/HistoryTable/queryHelpers.ts

@@ -1,6 +1,6 @@
 import { removeClauses } from "@lib/doltSystemTables";
 import {
-  convertToSqlWithNewCols,
+  convertToSqlWithNewColNames,
   getColumns,
   getTableName,
 } from "@lib/parseSqlQuery";
@@ -26,7 +26,7 @@ export function getDoltHistoryQuery(q: string): string {
 
   // SELECT [cols] FROM dolt_history_[tableName] WHERE [conditions];
   const query = formatQuery(q);
-  return convertToSqlWithNewCols(query, cols, historyTableName);
+  return convertToSqlWithNewColNames(query, cols, historyTableName);
 }
 
 function formatQuery(q: string): string {

packages/web/components/ViewFragment/index.tsx → packages/web/components/SchemaFragment/index.tsx

@@ -12,6 +12,7 @@ import { SqlQueryParams } from "@lib/params";
 import { MdPlayCircleOutline } from "@react-icons/all-files/md/MdPlayCircleOutline";
 import dynamic from "next/dynamic";
 import css from "./index.module.css";
+import { getSchemaInfo } from "./util";
 
 const AceEditor = dynamic(async () => import("@components/AceEditor"), {
   ssr: false,
@@ -26,6 +27,7 @@ type InnerProps = Props & {
 };
 
 function Inner({ rows, params }: InnerProps) {
+  const { isView, fragIdx } = getSchemaInfo(params.q);
   const { queryClickHandler } = useSqlEditorContext("Views");
   const { isMobile } = useReactiveWidth(null, 1024);
 
@@ -40,7 +42,7 @@ function Inner({ rows, params }: InnerProps) {
   }
 
   const name = rows[0].columnValues[0].displayValue;
-  const fragment = rows[0].columnValues[1].displayValue;
+  const fragment = rows[0].columnValues[fragIdx].displayValue;
 
   return (
     <div className={css.top}>
@@ -56,16 +58,18 @@ function Inner({ rows, params }: InnerProps) {
         height={isMobile ? "calc(100vh - 38rem)" : "calc(100vh - 28rem)"}
       />
       <div className={css.buttons}>
-        <Btn className={css.play} onClick={async () => executeView(name)}>
-          <MdPlayCircleOutline />
-        </Btn>
+        {isView && (
+          <Btn className={css.play} onClick={async () => executeView(name)}>
+            <MdPlayCircleOutline />
+          </Btn>
+        )}
         <CopyButton text={fragment} />
       </div>
     </div>
   );
 }
 
-export default function ViewFragment(props: Props) {
+export default function SchemaFragment(props: Props) {
   const res = useSqlSelectForSqlDataTableQuery({
     variables: { ...props.params, queryString: props.params.q },
   });

packages/web/components/SchemaFragment/util.ts

@@ -0,0 +1,16 @@
+export function getSchemaInfo(q: string): { isView: boolean; fragIdx: number } {
+  const lower = q.toLowerCase();
+  if (lower.startsWith("show create view")) {
+    return { isView: true, fragIdx: 1 };
+  }
+  if (
+    lower.startsWith("show create trigger") ||
+    lower.startsWith("show create procedure")
+  ) {
+    return { isView: false, fragIdx: 2 };
+  }
+  if (lower.startsWith("show create event")) {
+    return { isView: false, fragIdx: 3 };
+  }
+  return { isView: false, fragIdx: 0 };
+}