regex search fixes

BloopAI · Jan 15, 2024 · 0cb4726 · 0cb4726
1 parent c424aa9
commit 0cb4726
Show file tree

Hide file tree

Showing 8 changed files with 388 additions and 190 deletions.
diff --git a/client/src/Project/LeftSidebar/NavPanel/index.tsx b/client/src/Project/LeftSidebar/NavPanel/index.tsx
@@ -1,34 +1,22 @@
-import {
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { ProjectContext } from '../../../context/projectContext';
 import { TabTypesEnum } from '../../../types/general';
 import { TabsContext } from '../../../context/tabsContext';
 import { RepositoriesContext } from '../../../context/repositoriesContext';
-import { UIContext } from '../../../context/uiContext';
-import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
 import RepoNav from './Repo';
 import ConversationsNav from './Conversations';
 
-type Props = {};
+type Props = {
+  focusedIndex: string;
+};
 
-const NavPanel = ({}: Props) => {
+const NavPanel = ({ focusedIndex }: Props) => {
   const [expanded, setExpanded] = useState(-1);
   const { project } = useContext(ProjectContext.Current);
   const { focusedPanel } = useContext(TabsContext.All);
   const { tab: leftTab } = useContext(TabsContext.CurrentLeft);
   const { tab: rightTab } = useContext(TabsContext.CurrentRight);
   const { indexingStatus } = useContext(RepositoriesContext);
-  const { isLeftSidebarFocused } = useContext(UIContext.Focus);
-  const ref = useRef<HTMLDivElement>(null);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const [focusedIndexFull, setFocusedIndexFull] = useState('');
 
   const currentlyFocusedTab = useMemo(() => {
     const focusedTab = focusedPanel === 'left' ? leftTab : rightTab;
@@ -55,38 +43,13 @@ const NavPanel = ({}: Props) => {
     }
   }, [currentlyFocusedTab]);
 
-  const handleKeyEvent = useCallback((e: KeyboardEvent) => {
-    if (ref.current) {
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-        e.preventDefault();
-        e.stopPropagation();
-        const nodes = ref.current.querySelectorAll('[data-node-index]');
-        setFocusedIndex((prev) => {
-          const newInd =
-            e.key === 'ArrowDown'
-              ? prev < nodes.length - 1
-                ? prev + 1
-                : 0
-              : prev > 0
-              ? prev - 1
-              : nodes.length - 1;
-          setFocusedIndexFull(
-            (nodes[newInd] as HTMLElement)?.dataset?.nodeIndex || '',
-          );
-          return newInd;
-        });
-      }
-    }
-  }, []);
-  useKeyboardNavigation(handleKeyEvent, !isLeftSidebarFocused);
-
   return (
-    <div className="flex flex-col h-full flex-1 overflow-auto" ref={ref}>
+    <div className="flex flex-col h-full flex-1 overflow-auto">
       {!!project?.conversations.length && (
         <ConversationsNav
           setExpanded={setExpanded}
           isExpanded={expanded === 0}
-          focusedIndex={focusedIndexFull}
+          focusedIndex={focusedIndex}
           index={0}
         />
       )}
@@ -110,7 +73,7 @@ const NavPanel = ({}: Props) => {
               ? currentlyFocusedTab?.path
               : undefined
           }
-          focusedIndex={focusedIndexFull}
+          focusedIndex={focusedIndex}
           index={
             i +
             (project?.conversations.length

diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenu.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenu.tsx
@@ -41,13 +41,7 @@ const AutocompleteMenu = ({
   );
 
   return (
-    <div
-      className={`fixed top-[80px] left-6 list-none p-0 z-20 ${
-        resultOptions.length ? 'w-98' : 'w-68 '
-      } bg-bg-shade ${
-        isOpen ? 'block' : 'hidden'
-      } border border-bg-border rounded-4 shadow-high overflow-auto max-h-[40vh]`}
-    >
+    <div className={`list-none`}>
       <ul {...getMenuProps()}>
         {isOpen && (
           <>

diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx
@@ -2,6 +2,7 @@ import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { Trans } from 'react-i18next';
 import { ResultItemType, SuggestionType } from '../../../types/results';
 import CodeBlockSearch from '../../../components/Code/CodeBlockSearch';
+import CodeResult from './Results/CodeResult';
 
 type Props = {
   item: SuggestionType;
@@ -36,7 +37,13 @@ const AutocompleteMenuItem = ({
     if (item.type === ResultItemType.CODE) {
       return item.snippets?.slice(0, 1).map((s) => ({
         ...s,
-        code: s.code.split('\n').slice(0, 5).join('\n'), // don't render big snippets that have over 5 lines
+        line_range: {
+          start: s.lineStart || 0,
+          end: (s.lineStart || 0) + s.code.split('\n').length,
+        },
+        highlights: s.highlights || [],
+        symbols: [],
+        data: s.code.split('\n').slice(0, 5).join('\n'), // don't render big snippets that have over 5 lines
       }));
     }
     return [];
@@ -51,22 +58,26 @@ const AutocompleteMenuItem = ({
         isFirst ? 'scroll-mt-8' : ''
       } outline-0 outline-none ${
         item.type === ResultItemType.FLAG ? 'h-9' : ''
-      } px-1.5 py-2.5 hover:bg-bg-base-hover gap-1 border-transparent border-l-2 hover:border-bg-main group 
+      } hover:bg-bg-base-hover gap-1group 
       ${
         isFocused ? 'bg-bg-shade-hover' : 'focus:bg-bg-shade-hover'
       } transition duration-150 ease-in-out`}
     >
       {item.type === ResultItemType.FLAG ||
       item.type === ResultItemType.LANG ? (
-        <span className="caption flex-1">{item.data}</span>
+        <span className="caption flex-1 pl-6">{item.data}</span>
       ) : item.type === ResultItemType.CODE ? (
-        <CodeBlockSearch
-          snippets={snippets}
-          language={item.language}
-          filePath={item.relativePath}
-          collapsed={false}
-          repoRef={item.repoRef}
-        />
+        <span className="-ml-4">
+          <CodeResult
+            focusedIndex={'-1'}
+            snippets={snippets}
+            lang={item.language}
+            relative_path={item.relativePath}
+            repo_ref={item.repoRef}
+            isFirst={false}
+            index={`option-${index}`}
+          />
+        </span>
       ) : item.type === ResultItemType.FILE ? (
         <>
           <span className="caption flex-1">{item.relativePath}</span>

diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx
@@ -12,15 +12,16 @@ import FileIcon from '../../../../components/FileIcon';
 import { TabsContext } from '../../../../context/tabsContext';
 import { TabTypesEnum } from '../../../../types/general';
 import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
-import { isFocusInInput } from '../../../../utils/domUtils';
+import { UIContext } from '../../../../context/uiContext';
 import CodeLine from './CodeLine';
 
 type Props = {
   relative_path: string;
   repo_ref: string;
   lang: string;
   snippets: SnippetItem[];
-  isFocused: boolean;
+  index: string;
+  focusedIndex: string;
   isFirst: boolean;
 };
 
@@ -29,28 +30,27 @@ const CodeResult = ({
   repo_ref,
   lang,
   snippets,
-  isFocused,
+  index,
+  focusedIndex,
   isFirst,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
+  const { isLeftSidebarFocused } = useContext(UIContext.Focus);
   const ref = useRef<HTMLDivElement>(null);
   const [isExpanded, setIsExpanded] = useState(true);
   const toggleExpanded = useCallback(() => {
     setIsExpanded((prev) => !prev);
   }, []);
 
   useEffect(() => {
-    if (isFocused) {
+    if (focusedIndex === index) {
       ref.current?.scrollIntoView({ block: 'nearest' });
     }
-  }, [isFocused]);
+  }, [focusedIndex, index]);
 
   const handleKeyEvent = useCallback(
     (e: KeyboardEvent) => {
-      if (
-        e.key === 'Enter' &&
-        (!isFocusInInput() || document.activeElement?.id === 'regex-search')
-      ) {
+      if (e.key === 'Enter') {
         e.stopPropagation();
         e.preventDefault();
         openNewTab({
@@ -63,7 +63,10 @@ const CodeResult = ({
     },
     [repo_ref, relative_path, openNewTab],
   );
-  useKeyboardNavigation(handleKeyEvent, !isFocused);
+  useKeyboardNavigation(
+    handleKeyEvent,
+    focusedIndex !== index || !isLeftSidebarFocused,
+  );
 
   const handleClick = useCallback(() => {
     openNewTab({
@@ -79,9 +82,10 @@ const CodeResult = ({
       <div
         className={`flex w-max min-w-full items-center gap-3 whitespace-nowrap body-mini text-label-title h-7 flex-shrink-0 ${
           isFirst ? 'scroll-mt-10' : ''
-        } ${isFocused ? 'bg-bg-shade-hover' : ''} pl-10 pr-4`}
+        } ${focusedIndex === index ? 'bg-bg-shade-hover' : ''} pl-10 pr-4`}
         onClick={toggleExpanded}
         ref={ref}
+        data-node-index={index}
       >
         <ChevronRightIcon
           sizeClassName="w-3.5 h-3.5"