feat: fix minor bugs and improvement

Author: invisal

src/renderer/components/CodeEditor/SqlCodeEditor.tsx

@@ -60,7 +60,9 @@ const SqlCodeEditor = forwardRef(function SqlCodeEditor(
 
   return (
     <CodeMirror
+      tabIndex={0}
       ref={ref}
+      autoFocus
       theme={theme}
       indentWithTab={false}
       basicSetup={{

src/renderer/components/OptimizeTable/TableHeader.tsx

@@ -0,0 +1,38 @@
+import { OptimizeTableHeaderProps } from '.';
+import TableHeaderResizeHandler from './TableHeaderResizeHandler';
+import styles from './styles.module.css';
+import { useContextMenu } from 'renderer/contexts/ContextMenuProvider';
+
+export default function TableHeader({
+  idx,
+  header,
+  onHeaderResize,
+}: {
+  idx: number;
+  header: OptimizeTableHeaderProps;
+  onHeaderResize: (idx: number, newWidth: number) => void;
+}) {
+  const { menu } = header;
+  const { handleContextMenu } = useContextMenu(() => menu ?? [], [menu]);
+
+  return (
+    <th
+      key={header.name}
+      title={header.tooltip}
+      onContextMenu={(e) => {
+        handleContextMenu(e);
+        e.stopPropagation();
+      }}
+    >
+      {header.icon && (
+        <div className={styles.tableHeaderIcon}>{header.icon}</div>
+      )}
+
+      <div className={styles.tableCellContent}>{header.name}</div>
+
+      {header.resizable && (
+        <TableHeaderResizeHandler idx={idx} onResize={onHeaderResize} />
+      )}
+    </th>
+  );
+}

src/renderer/components/OptimizeTable/index.tsx

@@ -7,16 +7,21 @@ import React, {
   useMemo,
 } from 'react';
 import styles from './styles.module.css';
-import TableHeaderResizeHandler from './TableHeaderResizeHandler';
+import { ContextMenuItemProps } from '../ContextMenu';
+import TableHeader from './TableHeader';
+
+export interface OptimizeTableHeaderProps {
+  name: string;
+  initialSize: number;
+  resizable?: boolean;
+  icon?: ReactElement;
+  tooltip?: string;
+  menu?: ContextMenuItemProps[];
+}
 
 interface OptimizeTableProps {
   data: unknown[];
-  headers: {
-    name: string;
-    initialSize: number;
-    resizable?: boolean;
-    icon?: ReactElement;
-  }[];
+  headers: OptimizeTableHeaderProps[];
   renderCell: (y: number, x: number) => ReactElement;
   rowHeight: number;
   renderAhead: number;
@@ -279,22 +284,15 @@ export default function OptimizeTable({
             {/* This is table header */}
             <thead>
               <tr>
-                {headers.map((header, idx) => (
-                  <th key={header.name}>
-                    {header.icon && (
-                      <div className={styles.tableHeaderIcon}>
-                        {header.icon}
-                      </div>
-                    )}
-                    <div className={styles.tableCellContent}>{header.name}</div>
-                    {header.resizable && (
-                      <TableHeaderResizeHandler
-                        idx={idx}
-                        onResize={onHeaderResize}
-                      />
-                    )}
-                  </th>
-                ))}
+                {headers.map((header, idx) => {
+                  return (
+                    <TableHeader
+                      header={header}
+                      idx={idx}
+                      onHeaderResize={onHeaderResize}
+                    />
+                  );
+                })}
               </tr>
             </thead>
 

src/renderer/contexts/NativeMenuProvider.tsx

@@ -70,6 +70,15 @@ export default function NativeMenuProvider({ children }: PropsWithChildren) {
           { label: 'Copy', role: 'copy' },
           { label: 'Cut', role: 'cut' },
           { label: 'Paste', role: 'paste' },
+          {
+            type: 'separator',
+          },
+          { label: 'Undo', role: 'undo' },
+          { label: 'Redo', role: 'redo' },
+          {
+            type: 'separator',
+          },
+          { label: 'Select All', role: 'selectAll' },
         ],
       },
     ],

src/renderer/screens/DatabaseScreen/QueryHeader.tsx

@@ -11,10 +11,10 @@ export default function QueryHeader({
 }) {
   return (
     <div className={styles.queryHeader}>
+      <QueryWindowNameEditor tabKey={tabKey} />
       <Button primary onClick={onSave}>
         Save
       </Button>
-      <QueryWindowNameEditor tabKey={tabKey} />
     </div>
   );
 }

src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultTable.tsx

@@ -115,6 +115,11 @@ function QueryResultTable({
       icon: header?.schema?.primaryKey ? (
         <Icon.GreenKey size="sm" />
       ) : undefined,
+      tooltip: header.columnDefinition?.comment,
+      menu: [
+        { text: 'Order by ASC', disabled: true },
+        { text: 'Order by DESC', disabled: true },
+      ],
       initialSize: Math.max(
         header.name.length * 10,
         getInitialSizeByHeaderType(idx, header)

src/renderer/screens/DatabaseScreen/QueryResultViewer/index.tsx

@@ -45,18 +45,16 @@ function QueryResultViewer({
   );
 
   const resultWithIndex = useMemo(() => {
-    let slicedRows = result.rows
-      .slice(page * pageSize, (page + 1) * pageSize)
-      .map((value, rowIndex) => {
-        return {
-          rowIndex: rowIndex + page * pageSize,
-          data: value,
-        };
-      });
+    let rows = result.rows.map((value, rowIndex) => {
+      return {
+        rowIndex: rowIndex + page * pageSize,
+        data: value,
+      };
+    });
 
     if (search) {
       const searchValue = search.toLowerCase();
-      slicedRows = slicedRows.filter((row) => {
+      rows = rows.filter((row) => {
         const values = Object.values(row.data);
         for (const value of values) {
           if (typeof value === 'string' || typeof value === 'number') {
@@ -68,16 +66,20 @@ function QueryResultViewer({
       });
     }
 
-    return slicedRows;
+    return rows;
   }, [page, result, search]);
 
+  const slicedResult = useMemo(() => {
+    return resultWithIndex.slice(page * pageSize, (page + 1) * pageSize);
+  }, [resultWithIndex]);
+
   return (
     <QueryResultChangeProvider key={runningIndex.toString()}>
       <div className={styles.result}>
         <TableCellManagerProvider>
           <QueryResultTable
             headers={result.headers}
-            result={resultWithIndex}
+            result={slicedResult}
             page={page}
             pageSize={pageSize}
           />

src/renderer/screens/DatabaseScreen/QueryWindowNameEditor.tsx

@@ -33,7 +33,6 @@ export default function QueryWindowNameEditor({
     <div className={styles.queryNameEditor}>
       <input
         ref={inputRef}
-        autoFocus
         type="text"
         value={name}
         onKeyDown={(e) => {

src/renderer/screens/DatabaseScreen/styles.module.scss

@@ -33,6 +33,7 @@
 
 .queryNameEditor {
   display: flex;
+  flex-grow: 1;
   flex-direction: row;
   gap: 5px;
   align-items: center;