Copy column names properly (#250)

CHANGES.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Add a refresh button to the SQL console schema tree.
+- Update text copied to clipboard when clicking a SQL column name.
 
 ## 2024-11-29 - 0.19.2
 

src/components/SQLEditor/SQLEditorSchemaTree.test.tsx

@@ -297,6 +297,30 @@ describe('The SQLEditorSchemaTree component', () => {
       const clipboardText = await navigator.clipboard.readText();
       expect(clipboardText).toBe(column.column_name);
     });
+
+    it('clicking on subcolumn names copies the name', async () => {
+      const { user } = await setup();
+
+      const schema = schemaTableColumns[4];
+      const table = schema.tables[2];
+      const column = table.columns[0];
+      const subColumn = column.children![0];
+
+      // open schema tree
+      await triggerTreeItem(user, schema.schema_name, table.table_name);
+      // open table tree
+      await triggerTreeItem(user, table.table_name, column.column_name);
+      await triggerTreeItem(user, column.column_name, subColumn.column_name);
+
+      // click on name
+      await user.click(screen.getByText(subColumn.column_name));
+
+      // should have been copied
+      const clipboardText = await navigator.clipboard.readText();
+      expect(clipboardText).toBe(
+        `${column.column_name}['${subColumn.column_name}']`,
+      );
+    });
   });
 
   describe('filtering via the search input', () => {

src/components/SQLEditor/SQLEditorSchemaTree.tsx

@@ -133,11 +133,20 @@ function SQLEditorSchemaTree() {
 
   const drawTreeData = (filteredSchemaTree: Schema[]): AntDesignTreeItem[] => {
     const drawColumns = (columns: SchemaTableColumn[]): AntDesignTreeItem[] => {
+      const quoteColumnName = (path: string[]) =>
+        path[2] +
+        path
+          .slice(3)
+          .map((identifier: string) => `['${identifier}']`)
+          .join('');
+
       return columns.map(column => ({
         title: (
           <span data-testid={column.path.join('.')}>
-            <CopyToClipboard textToCopy={column.column_name}>
-              {column.column_name}
+            <CopyToClipboard
+              textToCopy={quoteColumnName(column.path as string[]) as string}
+            >
+              {column.unquoted_column_name}
             </CopyToClipboard>
             <Text pale className="ml-1 inline text-xs italic !leading-3">
               {column.data_type}
@@ -177,7 +186,7 @@ function SQLEditorSchemaTree() {
         data-testid={`schema-${schema.schema_name}`}
       >
         <ApartmentOutlined className="mr-1.5 size-3 opacity-50" />
-        {schema.schema_name}
+        {schema.unquoted_schema_name}
         {schema.tables.find(table => table.is_system_table) && (
           <Text className="ml-1 inline text-xs italic !leading-3" pale>
             system
@@ -284,7 +293,7 @@ function SQLEditorSchemaTree() {
         <span className="flex items-center" data-testid={table.path.join('.')}>
           {drawTableIcon(table.table_type)}
           <CopyToClipboard textToCopy={table.path.join('.')}>
-            {table.table_name}
+            {table.unquoted_table_name}
           </CopyToClipboard>
           <Text pale className="ml-1 inline text-xs italic !leading-3">
             {drawTableDescription(table.table_type)}

src/swr/jwt/useSchemaTree.ts

@@ -17,6 +17,7 @@ export type SchemaTableColumn = {
   column_name: string;
   data_type: string;
   path: string[];
+  unquoted_column_name: string;
 };
 
 type SchemaTableType = 'BASE TABLE' | 'VIEW' | 'FOREIGN';
@@ -28,12 +29,14 @@ export type SchemaTable = {
   path: string[];
   columns: SchemaTableColumn[];
   is_system_table: boolean;
+  unquoted_table_name: string;
 };
 
 export type Schema = {
   schema_name: string;
   path: string[];
   tables: SchemaTable[];
+  unquoted_schema_name: string;
 };
 
 export const postFetch = (data: QueryResultSuccess): Schema[] => {
@@ -100,6 +103,7 @@ export const postFetch = (data: QueryResultSuccess): Schema[] => {
               column_name: node.name,
               data_type: node.data_type,
               path: path,
+              unquoted_column_name: node.name.replace(/^"|"$/g, ''),
             };
             if (childNodes) {
               output['children'] = childNodes;
@@ -112,18 +116,21 @@ export const postFetch = (data: QueryResultSuccess): Schema[] => {
     };
 
     const constructTables = (input: SchemaDescription[]): SchemaTable[] => {
-      return input.map(row => {
-        const path = [row.table_schema, row.table_name];
-
-        return {
-          columns: constructColumns(row, path),
-          is_system_table: SYSTEM_SCHEMAS.includes(row.table_schema),
-          path: path,
-          schema_name: row.table_schema,
-          table_name: row.table_name,
-          table_type: row.table_type as SchemaTableType,
-        };
-      });
+      return input
+        .map(row => {
+          const path = [row.table_schema, row.table_name];
+
+          return {
+            columns: constructColumns(row, path),
+            is_system_table: SYSTEM_SCHEMAS.includes(row.table_schema),
+            path: path,
+            schema_name: row.table_schema,
+            table_name: row.table_name,
+            table_type: row.table_type as SchemaTableType,
+            unquoted_table_name: row.table_name.replace(/^"|"$/g, ''),
+          };
+        })
+        .sort((a, b) => a.unquoted_table_name.localeCompare(b.unquoted_table_name));
     };
 
     const constructSchemas = (input: SchemaDescription[]): Schema[] => {
@@ -136,10 +143,13 @@ export const postFetch = (data: QueryResultSuccess): Schema[] => {
           schema_name: schemaName,
           path: [schemaName],
           tables: constructTables(input.filter(i => i.table_schema === schemaName)),
+          unquoted_schema_name: schemaName.replace(/^"|"$/g, ''),
         });
       });
 
-      return tree;
+      return tree.sort((a, b) =>
+        a.unquoted_schema_name.localeCompare(b.unquoted_schema_name),
+      );
     };
 
     return constructSchemas(input);