fix: improve regexp search ux (opensumi#2185)

winjo · Jan 10, 2023 · dfa6634 · dfa6634
1 parent 144720e
commit dfa6634
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 56 deletions.
diff --git a/packages/addons/src/browser/file-search.contribution.ts b/packages/addons/src/browser/file-search.contribution.ts
@@ -232,7 +232,9 @@ export class FileSearchQuickCommandHandler {
       },
       getPlaceholderItem: (lookFor: string) =>
         new QuickOpenItem({
-          label: localize(lookFor.indexOf('@') > -1 ? 'fileSymbolResults.notfound' : 'fileResults.notfound'),
+          label: localize(
+            lookFor.indexOf('@') > -1 ? 'search.fileSymbolResults.notfound' : 'search.fileResults.notfound',
+          ),
           run: () => false,
         }),
     };
@@ -319,7 +321,7 @@ export class FileSearchQuickCommandHandler {
                 iconClass: getSymbolIcon(symbol.kind),
                 description: (symbol.parent as INormalizedDocumentSymbol)?.name,
                 labelHighlights: (symbol as any).labelHighlights,
-                groupLabel: index === 0 ? formatLocalize('fileSymbolResults', flatSymbols.length) : '',
+                groupLabel: index === 0 ? formatLocalize('search.fileSymbolResults', flatSymbols.length) : '',
                 showBorder: false,
                 run: (mode: Mode) => {
                   if (mode === Mode.PREVIEW) {
@@ -343,7 +345,7 @@ export class FileSearchQuickCommandHandler {
       // 排序后设置第一个元素的样式
       if (results[0]) {
         const newItems = await this.getItems([results[0].getUri()!.toString()], {
-          groupLabel: localize('fileResults'),
+          groupLabel: localize('search.fileResults'),
           showBorder: true,
         });
         results[0] = newItems[0];
@@ -411,7 +413,7 @@ export class FileSearchQuickCommandHandler {
         return true;
       }),
       {
-        groupLabel: localize('historyMatches'),
+        groupLabel: localize('search.historyMatches'),
       },
     );
   }

diff --git a/packages/i18n/src/common/en-US.lang.ts b/packages/i18n/src/common/en-US.lang.ts
@@ -236,19 +236,19 @@ export const localizationBundle = {
     'file-search.quickOpen.leftRight': 'Open on the side',
     'file-search.quickOpen.upDown': 'Open at the bottom',
     'search.fileReplaceChanges': '{0} ↔ {1} (Replace Preview)',
-    fileResults: 'File results',
-    'fileResults.notfound': 'No files matching',
-    fileSymbolResults: 'symbols ({0})',
-    'fileSymbolResults.notfound': 'No symbols matching',
-    historyMatches: 'Recently opened',
-    'replaceAll.occurrences.files.message': "Replaced {0} occurrences across {1} files with '{2}'.",
+    'search.fileResults': 'File results',
+    'search.fileResults.notfound': 'No files matching',
+    'search.fileSymbolResults': 'symbols ({0})',
+    'search.fileSymbolResults.notfound': 'No symbols matching',
+    'search.historyMatches': 'Recently opened',
+    'search.replaceAll.occurrencesMessage': "Replaced {0} occurrences across {1} files with '{2}'.",
     'search.replace.toggle.button.title': 'Toggle Replace',
-    caseDescription: 'Match Case',
-    wordsDescription: 'Match Whole Word',
-    regexDescription: 'Use Regular Expression',
-    includeIgnoredFiles: 'Include Ignored Files',
-    onlyOpenEditors: 'Search only in Open Editors',
-    noResultsFound: 'No results found. Review your settings for configured exclusions and ignore files',
+    'search.caseDescription': 'Match Case',
+    'search.wordsDescription': 'Match Whole Word',
+    'search.regexDescription': 'Use Regular Expression',
+    'search.includeIgnoredFiles': 'Include Ignored Files',
+    'search.onlyOpenEditors': 'Search only in Open Editors',
+    'search.noResultsFound': 'No results found. Review your settings for configured exclusions and ignore files',
 
     'quickopen.recent-commands': 'recently used',
     'quickopen.other-commands': 'other commands',

diff --git a/packages/i18n/src/common/zh-CN.lang.ts b/packages/i18n/src/common/zh-CN.lang.ts
@@ -199,20 +199,19 @@ export const localizationBundle = {
     'file-search.quickOpen.leftRight': '在侧边打开',
     'file-search.quickOpen.upDown': '在底部打开',
     'search.fileReplaceChanges': '{0} ↔ {1} (替换预览)',
-    fileResults: '文件结果',
-    'fileResults.notfound': '没有匹配的文件',
-    fileSymbolResults: '符号（{0}）',
-    'fileSymbolResults.notfound': '没有匹配的符号',
-    historyMatches: '最近打开',
-    'replaceAll.occurrences.files.message': '已将 {1} 个文件中出现的 {0} 处替换为 “{2}”。',
+    'search.fileResults': '文件结果',
+    'search.fileResults.notfound': '没有匹配的文件',
+    'search.fileSymbolResults': '符号 ({0})',
+    'search.fileSymbolResults.notfound': '没有匹配的符号',
+    'search.historyMatches': '最近打开',
+    'search.replaceAll.occurrencesMessage': '已将 {1} 个文件中出现的 {0} 处替换为 “{2}”。',
     'search.replace.toggle.button.title': '切换替换',
-    caseDescription: '区分大小写',
-    wordsDescription: '全字匹配',
-    regexDescription: '使用正则表达式',
-    includeIgnoredFiles: '包含忽略的文件',
-    onlyOpenEditors: '仅在已打开的编辑器内搜索',
-    'match.replace.label': '替换',
-    noResultsFound: '未找到结果。查看您的设置配置排除, 并检查您的 gitignore 文件',
+    'search.caseDescription': '区分大小写',
+    'search.wordsDescription': '全字匹配',
+    'search.regexDescription': '使用正则表达式',
+    'search.includeIgnoredFiles': '包含忽略的文件',
+    'search.onlyOpenEditors': '仅在已打开的编辑器内搜索',
+    'search.noResultsFound': '未找到结果。查看您的设置配置排除, 并检查您的 gitignore 文件',
 
     'quickopen.recent-commands': '最近使用',
     'quickopen.other-commands': '其他命令',

diff --git a/packages/search/src/browser/replace.ts b/packages/search/src/browser/replace.ts
@@ -48,7 +48,7 @@ export async function replaceAll(
   if (messageService && resultTotal) {
     messageService.info(
       formatLocalize(
-        'replaceAll.occurrences.files.message',
+        'search.replaceAll.occurrencesMessage',
         String(resultTotal.resultNum),
         String(resultTotal.fileNum),
         replaceText,

diff --git a/packages/search/src/browser/search.input.widget.tsx b/packages/search/src/browser/search.input.widget.tsx
@@ -94,27 +94,27 @@ export const SearchInputWidget = memo(
                 validateMessage={isShowValidateMessage ? validateMessage : undefined}
                 addonAfter={[
                   <span
-                    key={localize('caseDescription')}
+                    key={localize('search.caseDescription')}
                     className={cls(getIcon('ab'), styles['match-case'], styles.search_option, {
                       [styles.select]: isMatchCase,
                     })}
-                    title={localize('caseDescription')}
+                    title={localize('search.caseDescription')}
                     onClick={onMatchCaseToggle}
                   ></span>,
                   <span
-                    key={localize('wordsDescription')}
+                    key={localize('search.wordsDescription')}
                     className={cls(getIcon('abl'), styles['whole-word'], styles.search_option, {
                       [styles.select]: isWholeWord,
                     })}
-                    title={localize('wordsDescription')}
+                    title={localize('search.wordsDescription')}
                     onClick={onWholeWordToggle}
                   ></span>,
                   <span
-                    key={localize('regexDescription')}
+                    key={localize('search.regexDescription')}
                     className={cls(getIcon('regex'), styles['use-regexp'], styles.search_option, {
                       [styles.select]: isRegex,
                     })}
-                    title={localize('regexDescription')}
+                    title={localize('search.regexDescription')}
                     onClick={onRegexToggle}
                   ></span>,
                 ]}

diff --git a/packages/search/src/browser/search.rules.widget.tsx b/packages/search/src/browser/search.rules.widget.tsx
@@ -97,7 +97,7 @@ const IncludeInput = React.memo(
           <span
             key='onlyOpenEditors'
             className={cls(getExternalIcon('book'), styles.search_option, { [styles.select]: isOnlyOpenEditors })}
-            title={localize('onlyOpenEditors')}
+            title={localize('search.onlyOpenEditors')}
             onClick={onOnlyOpenEditorsToggle}
           />,
         ]}

diff --git a/packages/search/src/browser/search.view.tsx b/packages/search/src/browser/search.view.tsx
@@ -123,9 +123,13 @@ export const Search = memo(({ viewState }: PropsWithChildren<{ viewState: ViewSt
       if (e && e.key !== Key.ENTER.code) {
         return;
       }
+      setSearchContent({
+        ...searchContent,
+        results: new Map(),
+      });
       searchBrowserService.search();
     },
-    [searchBrowserService],
+    [searchBrowserService, searchContent],
   );
 
   const onSearchInputChange = useCallback(
@@ -210,7 +214,7 @@ export const Search = memo(({ viewState }: PropsWithChildren<{ viewState: ViewSt
       );
     } else {
       if (searchContent.state === SEARCH_STATE.done) {
-        <div className={styles.result_describe}>{search && localize('noResultsFound')}</div>;
+        <div className={styles.result_describe}>{search && localize('search.noResultsFound')}</div>;
       }
       return null;
     }

diff --git a/packages/search/src/browser/tree/search-node.tsx b/packages/search/src/browser/tree/search-node.tsx
@@ -112,24 +112,23 @@ export const SearchNodeRendered: React.FC<ISearchNodeRenderedProps> = ({
           } catch (e) {
             regexp = null;
           }
-          if (!regexp) {
+
+          const match = node.description.match(regexp);
+          if (!regexp || !match) {
             return <div className={cls(styles.segment_grow, styles.description)}>{node.description}</div>;
           }
-          const match = node.description.match(regexp);
-          if (match) {
-            const matchText = match[0];
-            const index = match.index;
-            if (matchText && isDefined(index)) {
-              const replaceResult = matchText.replace(regexp, replace);
-              return (
-                <div className={cls(styles.segment_grow, styles.description)}>
-                  {node.description.slice(0, index)}
-                  <span className={cls(styles.match, replace && styles.replace)}>{matchText}</span>
-                  {replaceResult && <span className={styles.replace}>{replaceResult}</span>}
-                  {node.description.slice(index + matchText.length)}
-                </div>
-              );
-            }
+          const matchText = match[0];
+          const index = match.index;
+          if (matchText && isDefined(index)) {
+            const replaceResult = matchText.replace(regexp, replace);
+            return (
+              <div className={cls(styles.segment_grow, styles.description)}>
+                {node.description.slice(0, index)}
+                <span className={cls(styles.match, replace && styles.replace)}>{matchText}</span>
+                {replaceResult && <span className={styles.replace}>{replaceResult}</span>}
+                {node.description.slice(index + matchText.length)}
+              </div>
+            );
           }
         } else {
           let index = -1;

diff --git a/packages/search/src/browser/tree/search-tree.view.tsx b/packages/search/src/browser/tree/search-tree.view.tsx
@@ -1,5 +1,5 @@
 import cls from 'classnames';
-import React, { useEffect, useState, RefObject, useRef, useCallback, memo } from 'react';
+import React, { useEffect, useState, RefObject, useRef, useCallback } from 'react';
 
 import { IRecycleTreeHandle, RecycleTree, Button, TreeNodeEvent } from '@opensumi/ide-components';
 import { localize, formatLocalize, useInjectable, CommandService } from '@opensumi/ide-core-browser';