feat: add search result and time to execute query

Author: invisal

src/hooks/useDebounce.ts

@@ -20,3 +20,18 @@ export function useDebounce<T>(value: T, delay: number) {
   );
   return debouncedValue;
 }
+
+export function useDebounceEffect(
+  cb: () => void,
+  deps: unknown[],
+  delay: number
+) {
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      cb();
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [...deps, delay]);
+}

src/libs/SqlRunnerManager.ts

@@ -19,6 +19,7 @@ export type BeforeEachEventCallback = (
 
 export interface SqlStatementResult {
   statement: SqlStatement;
+  time: number;
   result: QueryResult;
 }
 
@@ -85,6 +86,7 @@ export class SqlRunnerManager {
 
         console.log(statement.sql);
 
+        const startTime = Date.now();
         const returnedResult = await this.executor(
           statement.sql,
           statement.params
@@ -93,6 +95,7 @@ export class SqlRunnerManager {
         if (!returnedResult?.error) {
           result.push({
             statement,
+            time: Date.now() - startTime,
             result: returnedResult,
           });
         } else {

src/renderer/components/Toolbar/index.tsx

@@ -5,7 +5,9 @@ import { useContextMenu } from 'renderer/contexts/ContextMenuProvider';
 
 interface ToolbarItemProps {
   icon?: ReactNode;
-  text: string;
+  text?: string;
+  badge?: number;
+  disabled?: boolean;
   onClick?: () => void;
 }
 
@@ -22,11 +24,62 @@ export default function Toolbar({
   );
 }
 
-Toolbar.Item = function ({ icon, text, onClick }: ToolbarItemProps) {
+Toolbar.Item = function ({
+  icon,
+  text,
+  onClick,
+  badge,
+  disabled,
+}: ToolbarItemProps) {
   return (
-    <li onClick={onClick}>
+    <li
+      className={styles.button}
+      onClick={disabled ? undefined : onClick}
+      style={{ opacity: disabled ? 0.5 : 1 }}
+    >
       {icon && <span className={styles.icon}>{icon}</span>}
-      <span>{text}</span>
+      {text && <span>{text}</span>}
+      {badge ? <span className={styles.badge}>{badge}</span> : <></>}
+    </li>
+  );
+};
+
+Toolbar.Filler = function () {
+  return <li className={styles.filler}></li>;
+};
+
+Toolbar.Text = function ({ children }: PropsWithChildren) {
+  return <li>{children}</li>;
+};
+
+Toolbar.Separator = function () {
+  return <li className={styles.separator} />;
+};
+
+interface ToolbarTextFieldProps {
+  value?: string;
+  placeholder?: string;
+  onChange?: (v: string) => void;
+}
+
+Toolbar.TextField = function ({
+  placeholder,
+  value,
+  onChange,
+}: ToolbarTextFieldProps) {
+  return (
+    <li className={styles.textfield}>
+      <input
+        spellCheck={false}
+        autoCorrect="off"
+        autoComplete="off"
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => {
+          if (onChange) onChange(e.currentTarget.value);
+        }}
+      />
     </li>
   );
 };
@@ -43,7 +96,7 @@ Toolbar.ContextMenu = function ({
   const { handleClick } = useContextMenu(() => items, [items]);
 
   return (
-    <li onClick={handleClick}>
+    <li className={styles.button} onClick={handleClick}>
       {icon && <span className={styles.icon}>{icon}</span>}
       <span>{text}</span>
     </li>

src/renderer/components/Toolbar/styles.module.scss

@@ -2,6 +2,60 @@
   border-bottom: 2px solid var(--color-surface-hover);
 }
 
+.filler {
+  flex-grow: 1;
+}
+
+.button {
+  cursor: pointer;
+  border-radius: 5px;
+  color: var(--color-text);
+
+  span.icon {
+    display: inline-block;
+    color: #27ae60;
+    margin-right: 8px;
+  }
+
+  span.icon:last-child {
+    margin-right: 0;
+  }
+
+  span.badge {
+    margin-left: 8px;
+    background: var(--color-critical);
+    color: #fff;
+    display: inline-block;
+    padding: 0px 5px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+  }
+
+  &:hover {
+    background: var(--color-surface-light);
+  }
+}
+
+.separator {
+  padding: 0;
+  margin: 0 3px;
+  border-right: 1px solid var(--color-border)
+}
+
+.textfield {
+  padding: 0 !important;
+
+  input {
+    padding: 5px 10px;
+    border-radius: 4px;
+    margin: 0 5px;
+    border: 1px solid var(--color-border);
+    background: inherit;
+    outline: none;
+    color: inherit;
+  }
+}
+
 .toolbar {
   ul {
     list-style-type: none;
@@ -11,21 +65,8 @@
     li {
       display: flex;
       padding: 5px 10px;
-      cursor: pointer;
-      border-radius: 5px;
-      color: var(--color-text);
       justify-content: center;
       align-items: center;
-
-      &:hover {
-        background: var(--color-surface-light);
-      }
-
-      span.icon {
-        display: inline-block;
-        color: #27ae60;
-        margin-right: 8px;
-      }
     }
   }
 }

src/renderer/screens/DatabaseScreen/QueryMultipleResultViewer.tsx

@@ -17,25 +17,15 @@ export default memo(function QueryMultipleResultViewer({
 
   if (queryResultOnly.length === 0) return <div />;
   if (queryResultOnly.length === 1)
-    return (
-      <QueryResultViewer
-        result={value[0].result}
-        statement={value[0].statement}
-      />
-    );
+    return <QueryResultViewer statementResult={value[0]} />;
 
   return (
     <WindowTab
       selected={selected}
       onTabChanged={(tab) => setSelected(tab.key)}
       tabs={queryResultOnly.map((result, idx) => {
         return {
-          component: (
-            <QueryResultViewer
-              result={result.result}
-              statement={result.statement}
-            />
-          ),
+          component: <QueryResultViewer statementResult={result} />,
           key: `query_${idx}`,
           name: `Query ${idx + 1}`,
         };

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

@@ -2,42 +2,62 @@ import { useCallback, useState, useEffect } from 'react';
 import applyQueryResultChanges from 'libs/ApplyQueryResultChanges';
 import generateSqlFromChanges from 'libs/GenerateSqlFromChanges';
 import generateSqlFromPlan from 'libs/GenerateSqlFromPlan';
-import Button from 'renderer/components/Button';
 import { useQueryResultChange } from 'renderer/contexts/QueryResultChangeProvider';
 import { useSchema } from 'renderer/contexts/SchemaProvider';
 import { useSqlExecute } from 'renderer/contexts/SqlExecuteProvider';
 import { QueryResult } from 'types/SqlResult';
 import styles from './styles.module.scss';
-import ButtonGroup from 'renderer/components/ButtonGroup';
 import ExportModal from '../ExportModal';
 import { useDialog } from 'renderer/contexts/DialogProvider';
+import Toolbar from 'renderer/components/Toolbar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChevronLeft,
+  faChevronRight,
+} from '@fortawesome/free-solid-svg-icons';
+import { useDebounceEffect } from 'hooks/useDebounce';
 
 interface QueryResultActionProps {
   result: QueryResult;
+  resultAfterFilter: { data: Record<string, unknown>; rowIndex: number }[];
   onResultChange: React.Dispatch<React.SetStateAction<QueryResult>>;
+  onSearchChange: (v: string) => void;
   onRequestRefetch: () => void;
   page: number;
   pageSize: number;
   onPageChange: React.Dispatch<React.SetStateAction<number>>;
+  time: number;
 }
 
 export default function QueryResultAction({
   result,
+  resultAfterFilter,
   onResultChange,
   onRequestRefetch,
   page,
   pageSize,
   onPageChange,
+  onSearchChange,
+  time,
 }: QueryResultActionProps) {
   const { showErrorDialog } = useDialog();
   const [changeCount, setChangeCount] = useState(0);
   const [showExportModal, setShowExportModal] = useState(false);
   const { clearChange, collector } = useQueryResultChange();
   const { schema, currentDatabase } = useSchema();
+  const [search, setSearch] = useState('');
   const { runner } = useSqlExecute();
 
   const rowStart = page * pageSize;
-  const rowEnd = Math.min(result.rows.length, rowStart + pageSize);
+  const rowEnd = Math.min(resultAfterFilter.length, rowStart + pageSize);
+
+  useDebounceEffect(
+    () => {
+      onSearchChange(search);
+    },
+    [onSearchChange, search],
+    1000
+  );
 
   useEffect(() => {
     const cb = (count: number) => {
@@ -59,7 +79,6 @@ export default function QueryResultAction({
           collector.getChanges()
         );
 
-        console.log(plans);
         const rawSql = plans.map((plan) => ({
           sql: generateSqlFromPlan(plan),
         }));
@@ -96,40 +115,46 @@ export default function QueryResultAction({
 
   return (
     <div className={styles.footer}>
-      {showExportModal && (
-        <ExportModal data={result} onClose={() => setShowExportModal(false)} />
-      )}
+      <Toolbar>
+        <Toolbar.Text>Took {Math.round(time / 1000)}s</Toolbar.Text>
+        <Toolbar.Separator />
+        <Toolbar.Item
+          text="Commit"
+          badge={changeCount}
+          onClick={onCommit}
+          disabled={!changeCount}
+        />
+        <Toolbar.Item text="Export" onClick={() => setShowExportModal(true)} />
 
-      <div className={styles.footerAction}>
-        <ButtonGroup>
-          <Button primary={!!changeCount} onClick={onCommit}>
-            {changeCount ? `Commit (${changeCount})` : 'Commit'}
-          </Button>
-          <Button primary onClick={() => setShowExportModal(true)}>
-            Export
-          </Button>
-        </ButtonGroup>
-      </div>
+        <Toolbar.Separator />
+        <Toolbar.TextField
+          placeholder="Search here"
+          value={search}
+          onChange={setSearch}
+        />
+        <Toolbar.Filler />
 
-      <div className={styles.footerPage}>
-        <Button
+        {/* Pagination */}
+        <Toolbar.Item
+          text=""
+          icon={<FontAwesomeIcon icon={faChevronLeft} />}
           disabled={page === 0}
-          primary
           onClick={() => onPageChange(page - 1)}
-        >
-          Prev
-        </Button>
-        <div>
-          &nbsp;&nbsp;{rowStart}-{rowEnd} / {result.rows.length}&nbsp;&nbsp;
-        </div>
-        <Button
-          primary
-          disabled={rowStart + pageSize >= result.rows.length}
+        />
+        <Toolbar.Text>
+          {rowStart}-{rowEnd} / {resultAfterFilter.length}
+        </Toolbar.Text>
+        <Toolbar.Item
           onClick={() => onPageChange(page + 1)}
-        >
-          Next
-        </Button>
-      </div>
+          text=""
+          icon={<FontAwesomeIcon icon={faChevronRight} />}
+          disabled={rowStart + pageSize >= resultAfterFilter.length}
+        />
+      </Toolbar>
+
+      {showExportModal && (
+        <ExportModal data={result} onClose={() => setShowExportModal(false)} />
+      )}
     </div>
   );
 }

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

@@ -25,7 +25,7 @@ export default function QueryResultLoading() {
   return (
     <div className={styles.result}>
       <div className={styles.container}></div>
-      <div className={styles.footer}>
+      <div className={styles.footer} style={{ padding: '5px 10px' }}>
         <Stack>
           <div
             style={{