Merge pull request #22 from dolthub/taylor/other-fixes

web,graphql: Some UI improvements
dolthub · Oct 26, 2023 · 720f768 · 720f768
2 parents 4ed1202 + c7ebce1
commit 720f768
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 16 deletions.
diff --git a/packages/graphql-server/src/tables/table.queries.ts b/packages/graphql-server/src/tables/table.queries.ts
@@ -10,7 +10,7 @@ FROM information_schema.statistics
 WHERE table_name=? AND index_name!="PRIMARY" 
 GROUP BY index_name;`;
 
-export const foreignKeysQuery = `SELECT * FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE WHERE table_name=? AND referenced_table_schema IS NOT NULL`;
+export const foreignKeysQuery = `SELECT * FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE WHERE table_name=? AND table_schema=? AND referenced_table_schema IS NOT NULL`;
 
 export const columnsQuery = `DESCRIBE ??`;
 

diff --git a/packages/graphql-server/src/tables/table.resolver.ts b/packages/graphql-server/src/tables/table.resolver.ts
@@ -24,7 +24,7 @@ export class TableResolver {
   @Query(_returns => Table)
   async table(@Args() args: TableArgs): Promise<Table> {
     return this.dss.queryMaybeDolt(
-      async q => getTableInfo(q, args),
+      async (q, isDolt) => getTableInfo(q, args, isDolt),
       args.databaseName,
       args.refName,
     );
@@ -46,7 +46,7 @@ export class TableResolver {
         const tableNames = await getTableNames(q, args, isDolt);
         const tables = await Promise.all(
           tableNames.list.map(async name =>
-            getTableInfo(q, { ...args, tableName: name }),
+            getTableInfo(q, { ...args, tableName: name }, isDolt),
           ),
         );
         return tables;
@@ -77,9 +77,16 @@ async function getTableNames(
   return { list: [...mapped, ...systemTables] };
 }
 
-async function getTableInfo(query: ParQuery, args: TableArgs): Promise<Table> {
+async function getTableInfo(
+  query: ParQuery,
+  args: TableArgs,
+  isDolt: boolean,
+): Promise<Table> {
   const columns = await query(columnsQuery, [args.tableName]);
-  const fkRows = await query(foreignKeysQuery, [args.tableName]);
+  const fkRows = await query(foreignKeysQuery, [
+    args.tableName,
+    isDolt ? `${args.databaseName}/${args.refName}` : args.databaseName,
+  ]);
   const idxRows = await query(indexQuery, [args.tableName]);
   return fromDoltRowRes(
     args.databaseName,

diff --git a/packages/web/components/CellButtons/index.module.css b/packages/web/components/CellButtons/index.module.css
@@ -4,6 +4,9 @@
 
 .notTable {
   @apply font-sans text-sm;
+  button {
+    @apply flex flex-wrap;
+  }
 }
 
 .check {
@@ -25,7 +28,7 @@
 }
 
 .foreignKeyDropdown {
-  @apply absolute -top-[0.3rem] left-[8.2rem] bg-white widget-shadow-hover z-100 rounded px-3 py-1 border border-ld-lightgrey  w-fit;
+  @apply absolute -top-[0.3rem] left-[8.2rem] bg-white widget-shadow-hover z-100 rounded px-3 py-1 border border-ld-lightgrey w-fit;
 
   a {
     @apply text-acc-hoverlinkblue font-semibold font-sans;
@@ -49,7 +52,7 @@
 }
 
 .history:hover .button:disabled ~ .popup {
-  @apply block absolute -top-0.5 left-24 bg-white widget-shadow-hover z-100 rounded px-3 py-2 border border-ld-lightgrey;
+  @apply block absolute -top-0.5 left-24 bg-white widget-shadow-hover z-100 rounded px-3 py-2 border border-ld-lightgrey max-w-[12rem];
 }
 
 .loading {

diff --git a/packages/web/components/DataTable/Table/index.module.css b/packages/web/components/DataTable/Table/index.module.css
@@ -30,7 +30,7 @@
   border-spacing: 0;
 
   @screen lg {
-    @apply overflow-hidden pr-80 ml-0 pb-80;
+    @apply overflow-hidden pr-40 ml-0 pb-80;
   }
 
   th {

diff --git a/packages/web/components/Database404/index.tsx b/packages/web/components/Database404/index.tsx
@@ -1,6 +1,6 @@
 import Page404 from "@components/Page404";
 import Page from "@components/util/Page";
-import DatabaseLayoutWrapper from "@layouts/DatabaseLayout/Wrapper";
+import { DatabaseLayoutWrapperOuter } from "@layouts/DatabaseLayout/Wrapper";
 import { DatabaseParams } from "@lib/params";
 import css from "./index.module.css";
 
@@ -18,11 +18,11 @@ export default function Database404Page(props: Props) {
 
 export function Database404(props: Props) {
   return (
-    <DatabaseLayoutWrapper>
+    <DatabaseLayoutWrapperOuter>
       <Page404 title="Database not found">
         <Database404Inner {...props} />
       </Page404>
-    </DatabaseLayoutWrapper>
+    </DatabaseLayoutWrapperOuter>
   );
 }
 

diff --git a/packages/web/components/DatabasesDropdown/index.tsx b/packages/web/components/DatabasesDropdown/index.tsx
@@ -29,7 +29,7 @@ function Inner(props: InnerProps) {
         setIsOpen={setIsOpen}
         position="bottom left"
         offsetX={0}
-        contentStyle={{ width: "8rem", padding: 0 }}
+        contentStyle={{ width: "12rem", padding: 0 }}
         arrow={false}
       >
         <ul>

diff --git a/packages/web/components/SchemaDiagram/queries.ts b/packages/web/components/SchemaDiagram/queries.ts
@@ -27,7 +27,11 @@ export const TABLE_LIST_FOR_BRANCH_QUERY = gql`
     }
   }
   query TableListForSchemas($databaseName: String!, $refName: String!) {
-    tables(databaseName: $databaseName, refName: $refName) {
+    tables(
+      databaseName: $databaseName
+      refName: $refName
+      filterSystemTables: true
+    ) {
       ...TableForSchemaList
     }
   }

diff --git a/packages/web/gen/graphql-types.tsx b/packages/web/gen/graphql-types.tsx
@@ -689,7 +689,7 @@ export type SqlSelectForSqlDataTableQueryVariables = Exact<{
 }>;
 
 
-export type SqlSelectForSqlDataTableQuery = { __typename?: 'Query', sqlSelect: { __typename?: 'SqlSelect', _id: string, queryExecutionStatus: QueryExecutionStatus, queryExecutionMessage: string, columns: Array<{ __typename?: 'Column', name: string, isPrimaryKey: boolean, type: string }>, rows: Array<{ __typename?: 'Row', columnValues: Array<{ __typename?: 'ColumnValue', displayValue: string }> }> } };
+export type SqlSelectForSqlDataTableQuery = { __typename?: 'Query', sqlSelect: { __typename?: 'SqlSelect', queryExecutionStatus: QueryExecutionStatus, queryExecutionMessage: string, columns: Array<{ __typename?: 'Column', name: string, isPrimaryKey: boolean, type: string }>, rows: Array<{ __typename?: 'Row', columnValues: Array<{ __typename?: 'ColumnValue', displayValue: string }> }> } };
 
 export type StatusFragment = { __typename?: 'Status', _id: string, refName: string, tableName: string, staged: boolean, status: string };
 
@@ -1732,7 +1732,7 @@ export type SchemaDiffLazyQueryHookResult = ReturnType<typeof useSchemaDiffLazyQ
 export type SchemaDiffQueryResult = Apollo.QueryResult<SchemaDiffQuery, SchemaDiffQueryVariables>;
 export const TableListForSchemasDocument = gql`
     query TableListForSchemas($databaseName: String!, $refName: String!) {
-  tables(databaseName: $databaseName, refName: $refName) {
+  tables(databaseName: $databaseName, refName: $refName, filterSystemTables: true) {
     ...TableForSchemaList
   }
 }
@@ -1773,7 +1773,6 @@ export const SqlSelectForSqlDataTableDocument = gql`
     refName: $refName
     queryString: $queryString
   ) {
-    _id
     queryExecutionStatus
     queryExecutionMessage
     columns {