update: fix auto scroll on delete search string

update: refactor content of search body area
BlueBrain · May 28, 2024 · 1e09929 · 1e09929
1 parent 81b08de
commit 1e09929
Show file tree

Hide file tree

Showing 6 changed files with 432 additions and 361 deletions.
diff --git a/src/shared/components/FullTextSearch/index.tsx b/src/shared/components/FullTextSearch/index.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import CommandPalette from 'react-cmdk';
 import { useNexusContext } from '@bbp/react-nexus';
-import { Tag } from 'antd';
+import { Spin, Tag, Empty } from 'antd';
 import { groupBy } from 'lodash';
 
 import {
@@ -13,6 +13,7 @@ import {
 } from 'shared/utils';
 import 'react-cmdk/dist/cmdk.css';
 import './styles.scss';
+import { LoadingOutlined } from '@ant-design/icons';
 
 type Props = {
   openCmdk: boolean;
@@ -37,7 +38,8 @@ export function useFullTextSearch() {
   const [search, setSearch] = useState('');
   const nexus = useNexusContext();
 
-  const onSearch = async (value: string) => setSearch(value);
+  const onSearch = (value: string) => setSearch(value);
+  const resetSearch = () => setSearch('');
 
   const { isLoading, data } = useQuery({
     enabled: !!search,
@@ -64,18 +66,69 @@ export function useFullTextSearch() {
   return {
     search,
     onSearch,
+    resetSearch,
     isLoading,
     searchResults,
   };
 }
 
 const FullTextSearch = ({ openCmdk, onOpenCmdk }: Props) => {
-  const { search, onSearch, searchResults } = useFullTextSearch();
+  const {
+    search,
+    onSearch,
+    resetSearch,
+    searchResults,
+    isLoading,
+  } = useFullTextSearch();
+
+  const onChangeOpen = () => {
+    onOpenCmdk();
+    resetSearch();
+  };
+
+  let content = null;
+
+  if (isLoading) {
+    content = (
+      <div className="search-resources-loader">
+        <Spin size="large" indicator={<LoadingOutlined />} />
+      </div>
+    );
+  } else if (!Boolean(searchResults.length) && !Boolean(search)) {
+    content = <div className="search-for-placeholder">Search for ""</div>;
+  } else if (!Boolean(searchResults.length) && Boolean(search)) {
+    content = <Empty description="No results found" />;
+  } else {
+    content = searchResults.map(({ id, title, items }) => (
+      <div className="cmdk-list-container" key={id}>
+        <div className="cmdk-list-title">
+          <Tag color="geekblue">{title?.orgLabel}</Tag>|
+          <Tag color="geekblue">{title?.projectLabel}</Tag>
+        </div>
+        <div className="cmdk-list-content">
+          {items.map(resource => {
+            const label = getResourceLabel(resource);
+            return (
+              <Link
+                to={`/resolve/${encodeURIComponent(resource['@id'])}`}
+                onClick={onOpenCmdk}
+                className="cmdk-list-item"
+              >
+                <div className="item-title">{label}</div>
+                <TagRenderer type={resource['@type']} />
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    ));
+  }
 
   useEffect(() => {
     const keyDown = (e: KeyboardEvent) => {
-      if (e.key === '/') {
+      if (e.ctrlKey && e.key === 'e') {
         e.preventDefault();
+        e.stopPropagation();
         onOpenCmdk();
       }
     };
@@ -87,37 +140,13 @@ const FullTextSearch = ({ openCmdk, onOpenCmdk }: Props) => {
   return (
     <CommandPalette
       onChangeSearch={onSearch}
-      onChangeOpen={onOpenCmdk}
+      onChangeOpen={onChangeOpen}
       search={search}
       isOpen={openCmdk}
       page="root"
+      placeholder="Search for resources"
     >
-      <CommandPalette.Page id="root">
-        {searchResults.map(({ id, title, items }) => (
-          <div className="cmdk-list-container" key={id}>
-            <div className="cmdk-list-title">
-              <Tag color="geekblue">{title?.orgLabel}</Tag>|
-              <Tag color="geekblue">{title?.projectLabel}</Tag>
-            </div>
-            <div className="cmdk-list-content">
-              {items.map(resource => {
-                const label = getResourceLabel(resource);
-                return (
-                  <Link
-                    to={`/resolve/${encodeURIComponent(resource['@id'])}`}
-                    onClick={onOpenCmdk}
-                    className="cmdk-list-item"
-                  >
-                    <div className="item-title">{label}</div>
-                    <TagRenderer type={resource['@type']} />
-                  </Link>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </CommandPalette.Page>
-      <CommandPalette.FreeSearchAction />
+      {content}
     </CommandPalette>
   );
 };

diff --git a/src/shared/components/FullTextSearch/styles.scss b/src/shared/components/FullTextSearch/styles.scss
@@ -33,8 +33,8 @@
   border: 1px solid #efefef;
 
   &:hover {
-    background: $fusion-secondary-color !important;
-    box-shadow: 0 2px 12px 0px rgba($color: #333, $alpha: 0.12);
+    background: $fusion-blue-1 !important;
+    box-shadow: 0 2px 12px 0px rgba($color: #333, $alpha: 0.14);
   }
 }
 
@@ -52,3 +52,19 @@
 .item-creation_date {
   font-size: 12px;
 }
+
+.search-resources-loader {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.search-for-placeholder {
+  background-color: $fusion-neutral-2;
+  padding: 10px;
+  color: #333;
+  user-select: none;
+}
diff --git a/src/shared/components/Header/Header.scss b/src/shared/components/Header/Header.scss
@@ -240,4 +240,28 @@
   cursor: pointer;
   border-radius: 4px;
   color: #efefef;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  justify-content: center;
+  min-width: max-content;
+  position: relative;
+  background-color: white;
+  color: #33333385;
+
+  &-input {
+    position: absolute;
+    inset: 0;
+  }
+  &-btn {
+    position: relative;
+    width: max-content;
+    min-width: max-content;
+  }
+  kbd {
+    box-shadow: none;
+    background-color: transparent;
+    margin-left: 2px;
+    margin-right: 2px;
+  }
 }
diff --git a/src/shared/components/Header/Header.tsx b/src/shared/components/Header/Header.tsx
@@ -2,6 +2,7 @@ import React, { useReducer } from 'react';
 import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router';
 import { Menu, Dropdown, MenuItemProps } from 'antd';
+
 import {
   UserOutlined,
   BookOutlined,
@@ -12,6 +13,7 @@ import {
   CopyOutlined,
   MenuOutlined,
   PlusOutlined,
+  SearchOutlined,
 } from '@ant-design/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { UISettingsActionTypes } from '../../store/actions/ui-settings';
@@ -200,13 +202,18 @@ const Header: React.FunctionComponent<HeaderProps> = ({
         </div>
         {token ? (
           <div className="menu-block">
-            <button
-              title="fulltext-search"
-              className="cmdk-shortcut"
-              onClick={onOpenCmdk}
-            >
-              /
-            </button>
+            <div className="cmdk-shortcut" onClick={onOpenCmdk}>
+              <SearchOutlined />
+              <div
+                title="fulltext-search"
+                className="cmdk-shortcut-input"
+              ></div>
+              Click on
+              <div className="cmdk-shortcut-btn">
+                <kbd>Ctrl</kbd>+<kbd>e</kbd>
+              </div>
+              to search
+            </div>
             {name && <AdvancedModeToggle />}
             {name && showCreationPanel && (
               <div