feat(tag): support search tags (#7450)

frontend/src/components/cur-dir-path/dir-tool.js

@@ -9,6 +9,7 @@ import ListTagPopover from '../popover/list-tag-popover';
 import ViewModes from '../../components/view-modes';
 import SortMenu from '../../components/sort-menu';
 import MetadataViewToolBar from '../../metadata/components/view-toolbar';
+import TagsTableSearcher from '../../tag/views/all-tags/tags-table/tags-searcher';
 import { PRIVATE_FILE_TYPE } from '../../constants';
 
 const propTypes = {
@@ -116,6 +117,7 @@ class DirTool extends React.Component {
     if (isTagView) {
       return (
         <div className="dir-tool">
+          <TagsTableSearcher />
         </div>
       );
     }

frontend/src/components/sf-table/index.css

@@ -1,3 +1,97 @@
+.sf-table-searcher-container {
+  margin-left: 15px;
+}
+
+.sf-table-searcher-btn {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 3px;
+  height: 22px;
+  padding: 0 .5rem;
+  transition: all .1s ease-in;
+}
+
+.sf-table-searcher-btn:hover {
+  background-color: #efefef;
+  cursor: pointer;
+}
+
+.sf-table-searcher-btn .sf3-font-search {
+  display: inline-block;
+  color: #666;
+}
+
+.sf-table-searcher-input-wrapper {
+  position: relative;
+}
+
+.sf-table-searcher-input {
+  padding-left: 30px;
+  padding-right: 60px;
+  height: 30px;
+  width: 260px;
+}
+
+.sf-table-searcher-input-wrapper .btn-close-searcher-wrapper {
+  pointer-events: all;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sf-table-searcher-input-wrapper .btn-close-searcher {
+  font-size: 14px;
+}
+
+.sf-table-searcher-input-wrapper .btn-close-searcher-wrapper:hover {
+  background-color: #efefef;
+  cursor: pointer;
+}
+
+.sf-table-searcher-input-wrapper .input-icon-addon.search-poll-button {
+  display: flex;
+  font-size: 12px;
+  height: 30px;
+  left: auto;
+  line-height: 30px;
+  min-width: 35px;
+  pointer-events: all;
+  right: 28px;
+  text-align: center;
+}
+
+.sf-table-searcher-input-wrapper .search-upward,
+.sf-table-searcher-input-wrapper .search-backward {
+  color: #666;
+  font-size: 12px;
+  background-color: #efefef;
+  display: inline-block;
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+}
+
+.sf-table-searcher-input-wrapper .search-upward:hover,
+.sf-table-searcher-input-wrapper .search-backward:hover {
+  cursor: pointer;
+  background-color: #DBDBDB;
+}
+
+.sf-table-searcher-input-wrapper .search-upward {
+  margin-left: 8px;
+  border-radius: 2px 0 0 2px;
+}
+
+.sf-table-searcher-input-wrapper .search-backward {
+  border-radius: 0 2px 2px 0;
+}
+
 .sf-table-wrapper {
   height: 100%;
   width: 100%;

frontend/src/components/sf-table/searcher/index.js

@@ -0,0 +1,100 @@
+import React, { useMemo, useState } from 'react';
+import { gettext } from '../../../utils/constants';
+import { KeyCodes } from '../../../constants';
+import { isModG, isModShiftG } from '../../../metadata/utils/hotkey';
+import SFTableSearcherInput from './searcher-input';
+import { checkHasSearchResult } from '../utils/search';
+
+const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells, closeSearcher, focusNextMatchedCell, focusPreviousMatchedCell }) => {
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const [hasSearchValue, setHasSearchValue] = useState(false);
+
+  const hasSearchResult = useMemo(() => {
+    return checkHasSearchResult(searchResult);
+  }, [searchResult]);
+
+  const onToggleSearch = () => {
+    setIsSearchActive(!isSearchActive);
+  };
+
+  const handleCloseSearcher = () => {
+    setIsSearchActive(false);
+    closeSearcher && closeSearcher();
+  };
+
+  const onKeyDown = (e) => {
+    const isEmptySearchResult = !hasSearchResult;
+    if (e.keyCode === KeyCodes.Escape) {
+      e.preventDefault();
+      handleCloseSearcher();
+    } else if (isModG(e)) {
+      e.preventDefault();
+      if (isEmptySearchResult) return;
+      focusNextMatchedCell && focusNextMatchedCell();
+    } else if (isModShiftG(e)) {
+      e.preventDefault();
+      if (isEmptySearchResult) return;
+      focusPreviousMatchedCell && focusPreviousMatchedCell();
+    }
+  };
+
+  const renderSearchPollButton = () => {
+    return (
+      <span className="input-icon-addon search-poll-button">
+        {hasSearchValue &&
+          <span className="search-description">
+            {hasSearchResult ?
+              (searchResult.currentSelectIndex + 1 + ' of ' + searchResult.matchedCells.length) : '0 of 0'
+            }
+          </span>
+        }
+        {hasSearchResult &&
+          <>
+            <i className="sf3-font sf3-font-down rotate-180 search-upward"
+              onClick={focusPreviousMatchedCell ? focusPreviousMatchedCell : () => {}}>
+            </i>
+            <i className="sf3-font sf3-font-down search-backward"
+              onClick={focusNextMatchedCell ? focusNextMatchedCell : () => {}}>
+            </i>
+          </>
+        }
+      </span>
+    );
+  };
+
+  return (
+    <div className="sf-table-searcher-container">
+      {!isSearchActive && (
+        <span
+          className='sf-table-searcher-btn'
+          onClick={onToggleSearch}
+          onKeyDown={onToggleSearch}
+          role="button"
+          title={gettext('Search')}
+          aria-label={gettext('Search')}
+          tabIndex={0}
+        >
+          <i className='active-search m-0 sf3-font sf3-font-search'></i>
+        </span>
+      )}
+      {isSearchActive && (
+        <div className='sf-table-searcher-input-wrapper'>
+          <i className='input-icon-addon sf3-font sf3-font-search' />
+          <SFTableSearcherInput
+            recordsCount={recordsCount}
+            columnsCount={columnsCount}
+            onKeyDown={onKeyDown}
+            setHasSearchValue={setHasSearchValue}
+            searchCells={searchCells}
+          />
+          {renderSearchPollButton()}
+          <span className="btn-close-searcher-wrapper input-icon-addon" onClick={handleCloseSearcher}>
+            <i className='btn-close-searcher sf3-font sf3-font-x-01'></i>
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SFTableSearcher;

frontend/src/components/sf-table/searcher/searcher-input.js

@@ -0,0 +1,59 @@
+import React, { useRef, useState } from 'react';
+import { gettext } from '../../../utils/constants';
+
+const SFTableSearcherInput = ({ recordsCount, columnsCount, setHasSearchValue, searchCells, onKeyDown }) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const isInputtingChinese = useRef(false);
+  const inputTimer = useRef(null);
+
+  const getSearchDelayTime = () => {
+    const viewCellsCount = (recordsCount || 0) * (columnsCount || 0);
+    let delayTime = viewCellsCount * 0.1;
+    delayTime = delayTime > 500 ? 500 : Math.floor(delayTime);
+    if (delayTime < 100) {
+      delayTime = 100;
+    }
+    return delayTime;
+  };
+
+  const onChangeSearchValue = (e) => {
+    inputTimer.current && clearTimeout(inputTimer.current);
+    const text = e.target.value;
+    const wait = getSearchDelayTime();
+    const currSearchValue = text || '';
+    const trimmedSearchValue = currSearchValue.trim();
+    setSearchValue(currSearchValue);
+    setHasSearchValue(!!trimmedSearchValue);
+    if (!isInputtingChinese.current) {
+      inputTimer.current = setTimeout(() => {
+        searchCells && searchCells(trimmedSearchValue);
+      }, wait);
+    }
+  };
+
+  const onCompositionStart = () => {
+    isInputtingChinese.current = true;
+  };
+
+  const onCompositionEnd = (e) => {
+    isInputtingChinese.current = false;
+    onChangeSearchValue(e);
+  };
+
+  return (
+    <input
+      className='sf-table-searcher-input form-control'
+      type='text'
+      autoFocus
+      value={searchValue}
+      onChange={onChangeSearchValue}
+      placeholder={gettext('Search')}
+      onKeyDown={onKeyDown}
+      onCompositionStart={onCompositionStart}
+      onCompositionEnd={onCompositionEnd}
+    />
+  );
+};
+
+export default SFTableSearcherInput;

frontend/src/components/sf-table/table-main/records/record/index.js

@@ -82,15 +82,15 @@ class Record extends React.Component {
   getFrozenCells = () => {
     const {
       columns, sequenceColumnWidth, lastFrozenColumnKey, groupRecordIndex, index: recordIndex, record,
-      cellMetaData, isGroupView, height, columnColor
+      cellMetaData, isGroupView, height, columnColor, treeNodeKey,
     } = this.props;
     const frozenColumns = getFrozenColumns(columns);
     if (frozenColumns.length === 0) return null;
     const recordId = record._id;
     return frozenColumns.map((column, index) => {
       const { key } = column;
-      const isCellHighlight = this.checkIsCellHighlight(key, recordId);
-      const isCurrentCellHighlight = this.checkIsCurrentCellHighlight(key, recordId);
+      const isCellHighlight = this.checkIsCellHighlight(key, recordId, treeNodeKey);
+      const isCurrentCellHighlight = this.checkIsCurrentCellHighlight(key, recordId, treeNodeKey);
       const highlightClassName = isCurrentCellHighlight ? 'cell-current-highlight' : isCellHighlight ? 'cell-highlight' : null;
       const isCellSelected = this.checkIsCellSelected(index);
       const isLastCell = this.checkIsLastCell(columns, key);
@@ -126,10 +126,10 @@ class Record extends React.Component {
     });
   };
 
-  checkIsCellHighlight = (columnKey, rowId) => {
+  checkIsCellHighlight = (columnKey, rowId, treeNodeKey) => {
     const { searchResult } = this.props;
     if (searchResult) {
-      const matchedColumns = searchResult.matchedRows[rowId];
+      const matchedColumns = this.props.showRecordAsTree ? searchResult.matchedRows[treeNodeKey] : searchResult.matchedRows[rowId];
       if (matchedColumns && matchedColumns.includes(columnKey)) {
         return true;
       }
@@ -137,14 +137,15 @@ class Record extends React.Component {
     return false;
   };
 
-  checkIsCurrentCellHighlight = (columnKey, rowId) => {
+  checkIsCurrentCellHighlight = (columnKey, rowId, treeNodeKey) => {
     const { searchResult } = this.props;
     if (searchResult) {
       const { currentSelectIndex } = searchResult;
       if (typeof(currentSelectIndex) !== 'number') return false;
       const currentSelectCell = searchResult.matchedCells[currentSelectIndex];
       if (!currentSelectCell) return false;
-      if (currentSelectCell.row === rowId && currentSelectCell.column === columnKey) return true;
+      const isCurrentRow = this.props.showRecordAsTree ? currentSelectCell.nodeKey === treeNodeKey : currentSelectCell.row === rowId;
+      return isCurrentRow && currentSelectCell.column === columnKey;
     }
     return false;
   };
@@ -152,7 +153,7 @@ class Record extends React.Component {
   getColumnCells = () => {
     const {
       columns, sequenceColumnWidth, colOverScanStartIdx, colOverScanEndIdx, groupRecordIndex, index: recordIndex,
-      record, cellMetaData, isGroupView, height, columnColor,
+      record, cellMetaData, isGroupView, height, columnColor, treeNodeKey,
     } = this.props;
     const recordId = record._id;
     const rendererColumns = columns.slice(colOverScanStartIdx, colOverScanEndIdx);
@@ -160,8 +161,8 @@ class Record extends React.Component {
       const { key, frozen } = column;
       const needBindEvents = !frozen;
       const isCellSelected = this.checkIsCellSelected(columns.findIndex(col => col.key === column.key));
-      const isCellHighlight = this.checkIsCellHighlight(key, recordId);
-      const isCurrentCellHighlight = this.checkIsCurrentCellHighlight(key, recordId);
+      const isCellHighlight = this.checkIsCellHighlight(key, recordId, treeNodeKey);
+      const isCurrentCellHighlight = this.checkIsCurrentCellHighlight(key, recordId, treeNodeKey);
       const highlightClassName = isCurrentCellHighlight ? 'cell-current-highlight' : isCellHighlight ? 'cell-highlight' : null;
       const isLastCell = this.checkIsLastCell(columns, key);
       const bgColor = columnColor && columnColor[key];

frontend/src/components/sf-table/table-main/records/tree-body.js

@@ -13,6 +13,7 @@ import { checkEditableViaClickCell, checkIsColumnSupportDirectEdit, getColumnByI
 import { checkIsCellSupportOpenEditor } from '../../utils/selected-cell-utils';
 import { LOCAL_KEY_TREE_NODE_FOLDED } from '../../constants/tree';
 import { TreeMetrics } from '../../utils/tree-metrics';
+import { checkHasSearchResult } from '../../utils/search';
 
 const ROW_HEIGHT = 33;
 const RENDER_MORE_NUMBER = 10;
@@ -36,6 +37,7 @@ class TreeBody extends Component {
       startRenderIndex: 0,
       endRenderIndex: this.getInitEndIndex(nodes),
       keyNodeFoldedMap: validKeyTreeNodeFoldedMap,
+      keyNodeFoldedMapForSearch: {},
       selectedPosition: null,
       isScrollingRightScrollbar: false,
     };
@@ -58,12 +60,19 @@ class TreeBody extends Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { recordsCount, recordIds, treeNodesCount, recordsTree } = nextProps;
+    const { recordsCount, recordIds, treeNodesCount, recordsTree, searchResult } = nextProps;
+    const searchResultChanged = searchResult !== this.props.searchResult;
     if (
       recordsCount !== this.props.recordsCount || recordIds !== this.props.recordIds ||
-      treeNodesCount !== this.props.treeNodesCount || recordsTree !== this.props.recordsTree
+      treeNodesCount !== this.props.treeNodesCount || recordsTree !== this.props.recordsTree ||
+      searchResultChanged
     ) {
-      this.recalculateRenderIndex(recordsTree);
+      const hasSearchResult = checkHasSearchResult(searchResult);
+      const keyNodeFoldedMap = hasSearchResult ? {} : this.state.keyNodeFoldedMap;
+      this.recalculateRenderIndex(recordsTree, keyNodeFoldedMap);
+      if (searchResultChanged) {
+        this.setState({ keyNodeFoldedMapForSearch: {} });
+      }
     }
   }
 
@@ -119,8 +128,8 @@ class TreeBody extends Component {
     return Math.min(Math.ceil((contentScrollTop + height) / ROW_HEIGHT) + RENDER_MORE_NUMBER, nodes.length);
   };
 
-  recalculateRenderIndex = (recordsTree) => {
-    const { startRenderIndex, endRenderIndex, keyNodeFoldedMap } = this.state;
+  recalculateRenderIndex = (recordsTree, keyNodeFoldedMap) => {
+    const { startRenderIndex, endRenderIndex } = this.state;
     const nodes = this.getShownNodes(recordsTree, keyNodeFoldedMap);
     const contentScrollTop = this.resultContentRef.scrollTop;
     const start = Math.max(0, Math.floor(contentScrollTop / ROW_HEIGHT) - RENDER_MORE_NUMBER);
@@ -339,6 +348,14 @@ class TreeBody extends Component {
     this.columnVisibleEnd = columnVisibleEnd;
   };
 
+  jumpToRow = (scrollToRowIndex) => {
+    const { treeNodesCount } = this.props;
+    const rowHeight = this.getRowHeight();
+    const height = this.resultContentRef.offsetHeight;
+    const scrollTop = Math.min(scrollToRowIndex * rowHeight, treeNodesCount * rowHeight - height);
+    this.setScrollTop(scrollTop);
+  };
+
   scrollToColumn = (idx) => {
     const { columns, getTableContentRect } = this.props;
     const { width: tableContentWidth } = getTableContentRect();
@@ -496,13 +513,25 @@ class TreeBody extends Component {
   };
 
   toggleExpandNode = (nodeKey) => {
-    const { recordsTree } = this.props;
-    const { keyNodeFoldedMap, endRenderIndex } = this.state;
+    const { recordsTree, searchResult } = this.props;
+    const { keyNodeFoldedMap, keyNodeFoldedMapForSearch, endRenderIndex } = this.state;
+    const hasSearchResult = checkHasSearchResult(searchResult);
     let updatedKeyNodeFoldedMap = { ...keyNodeFoldedMap };
-    if (updatedKeyNodeFoldedMap[nodeKey]) {
-      delete updatedKeyNodeFoldedMap[nodeKey];
+    let updatedKeyNodeFoldedMapForSearch = { ...keyNodeFoldedMapForSearch };
+    if (hasSearchResult) {
+      if (updatedKeyNodeFoldedMapForSearch[nodeKey]) {
+        delete updatedKeyNodeFoldedMapForSearch[nodeKey];
+        delete updatedKeyNodeFoldedMap[nodeKey];
+      } else {
+        updatedKeyNodeFoldedMapForSearch[nodeKey] = true;
+        updatedKeyNodeFoldedMap[nodeKey] = true;
+      }
     } else {
-      updatedKeyNodeFoldedMap[nodeKey] = true;
+      if (updatedKeyNodeFoldedMap[nodeKey]) {
+        delete updatedKeyNodeFoldedMap[nodeKey];
+      } else {
+        updatedKeyNodeFoldedMap[nodeKey] = true;
+      }
     }
 
     if (this.props.storeFoldedTreeNodes) {
@@ -510,8 +539,15 @@ class TreeBody extends Component {
       this.props.storeFoldedTreeNodes(LOCAL_KEY_TREE_NODE_FOLDED, updatedKeyNodeFoldedMap);
     }
 
-    const updatedNodes = this.getShownNodes(recordsTree, updatedKeyNodeFoldedMap);
-    let updates = { nodes: updatedNodes, keyNodeFoldedMap: updatedKeyNodeFoldedMap };
+    const updatedNodes = this.getShownNodes(recordsTree, hasSearchResult ? updatedKeyNodeFoldedMapForSearch : updatedKeyNodeFoldedMap);
+    let updates = {
+      nodes: updatedNodes,
+      keyNodeFoldedMap: updatedKeyNodeFoldedMap,
+    };
+    if (hasSearchResult) {
+      updates.keyNodeFoldedMapForSearch = updatedKeyNodeFoldedMapForSearch;
+    }
+
     const end = this.recalculateRenderEndIndex(updatedNodes);
     if (end !== endRenderIndex) {
       updates.endRenderIndex = end;
@@ -525,8 +561,8 @@ class TreeBody extends Component {
   };
 
   renderRecords = () => {
-    const { treeMetrics, showCellColoring, columnColors } = this.props;
-    const { nodes, keyNodeFoldedMap, startRenderIndex, endRenderIndex, selectedPosition } = this.state;
+    const { treeMetrics, showCellColoring, columnColors, searchResult } = this.props;
+    const { nodes, keyNodeFoldedMap, keyNodeFoldedMapForSearch, startRenderIndex, endRenderIndex, selectedPosition } = this.state;
     this.initFrozenNodesRef();
     const visibleNodes = this.getVisibleNodesInRange();
     const nodesCount = nodes.length;
@@ -534,6 +570,7 @@ class TreeBody extends Component {
     const scrollLeft = this.props.getScrollLeft();
     const rowHeight = this.getRowHeight();
     const cellMetaData = this.getCellMetaData();
+    const hasSearchResult = checkHasSearchResult(searchResult);
     let shownNodes = visibleNodes.map((node, index) => {
       const { _id: recordId, node_key, node_depth, node_index } = node;
       const hasChildNodes = checkTreeNodeHasChildNodes(node);
@@ -543,7 +580,7 @@ class TreeBody extends Component {
       const isLastRecord = lastRecordIndex === recordIndex;
       const hasSelectedCell = this.props.hasSelectedCell({ recordIndex }, selectedPosition);
       const columnColor = showCellColoring ? columnColors[recordId] : {};
-      const isFoldedNode = !!keyNodeFoldedMap[node_key];
+      const isFoldedNode = hasSearchResult ? !!keyNodeFoldedMapForSearch[node_key] : !!keyNodeFoldedMap[node_key];
       return (
         <Record
           showRecordAsTree
@@ -565,7 +602,7 @@ class TreeBody extends Component {
           height={rowHeight}
           cellMetaData={cellMetaData}
           columnColor={columnColor}
-          searchResult={this.props.searchResult}
+          searchResult={searchResult}
           treeNodeIndex={node_index}
           treeNodeKey={node_key}
           treeNodeDepth={node_depth}

frontend/src/components/sf-table/utils/search.js

@@ -0,0 +1,22 @@
+const escapeRegExp = (value) => {
+  if (typeof value !== 'string') return '';
+  return value.replace(/[.\\[\]{}()|^$?*+]/g, '\\$&');
+};
+
+export const getSearchRule = (value) => {
+  if (typeof value !== 'string') {
+    return false;
+  }
+  let searchRule = value;
+  searchRule = searchRule.trim();
+  if (searchRule.length === 0) {
+    return false;
+  }
+  // i: search value uppercase and lowercase are not sensitive
+  return new RegExp(escapeRegExp(searchRule), 'i');
+};
+
+export const checkHasSearchResult = (searchResult) => {
+  const { matchedCells } = searchResult || {};
+  return Array.isArray(matchedCells) ? matchedCells.length > 0 : false;
+};