Added UI for no search results (#119)

* Adding search parameter for imodel-browser-react * Added UI for no search results * added changeset * Updated NoResults Component * Modified NoResults component based on search results * centering the component * reverting version bump change --------- Co-authored-by: Sourabh Bankey <sourabh.bankey@bentley.com>
iTwin · Jun 19, 2024 · e33e0f8 · e33e0f8
1 parent 6cba9b8
commit e33e0f8
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 34 deletions.
diff --git a/common/changes/@itwin/imodel-browser-react/addNoSearchResultUI_2024-06-06-06-39.json b/common/changes/@itwin/imodel-browser-react/addNoSearchResultUI_2024-06-06-06-39.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Updated no search results UI for IModelGrid component",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}
diff --git a/...el-browser-react/sourabh-adding-search-parameter-for-imodel-browser_2024-06-04-07-50.json b/...el-browser-react/sourabh-adding-search-parameter-for-imodel-browser_2024-06-04-07-50.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Adding `Search` parameter to get iModels instead of `Name`. `Search` allows user to search without need to put the exact iModel name.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}
diff --git a/packages/modules/imodel-browser/src/components/noResults/NoResults.scss b/packages/modules/imodel-browser/src/components/noResults/NoResults.scss
@@ -4,10 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 @import "../../index.scss";
 
-.iac-no-results {
+.iac-no-results-container {
   position: absolute;
   left: 50%;
-  top: 40%;
+  top: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
@@ -17,13 +17,21 @@
   margin-top: var(--iui-size-m);
   margin-bottom: var(--iui-size-m);
 
-  >svg {
-    height: 75px;
-    fill: currentColor;
-    width: 100%;
-  }
+  .iac-no-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--iui-size-2xs);
+
+    > svg {
+      height: var(--iui-size-2xl);
+      width: var(--iui-size-2xl);
+      fill: var(--iui-color-icon-muted);
+      margin-bottom: var(--iui-size-2xs);
+    }
 
-  >span:first-of-type {
-    margin-top: var(--iui-size-m);
+    .iui-text-leading {
+      font-weight: var(--iui-font-weight-semibold);
+    }
   }
-}
+}
diff --git a/packages/modules/imodel-browser/src/components/noResults/NoResults.tsx b/packages/modules/imodel-browser/src/components/noResults/NoResults.tsx
@@ -4,21 +4,30 @@
  *--------------------------------------------------------------------------------------------*/
 import "./NoResults.scss";
 
-import { SvgImodelHollow } from "@itwin/itwinui-icons-react";
+import { SvgImodelHollow, SvgSearch } from "@itwin/itwinui-icons-react";
 import { Text } from "@itwin/itwinui-react";
 import React from "react";
 
 export interface NoResultsProps {
   /** Displayed text */
   text: string;
+  subtext?: string;
+  isSearchResult?: boolean;
 }
 
 /** Pre-formatted empty result page */
-export const NoResults = ({ text }: NoResultsProps) => {
+export const NoResults = ({
+  text,
+  subtext,
+  isSearchResult = false,
+}: NoResultsProps) => {
   return (
-    <Text variant="leading" isMuted={true} className={"iac-no-results"}>
-      <SvgImodelHollow />
-      <span>{text}</span>
-    </Text>
+    <div className="iac-no-results-container">
+      <div className="iac-no-results">
+        {isSearchResult ? <SvgSearch /> : <SvgImodelHollow />}
+        <Text variant="leading">{text}</Text>
+        {subtext && <Text>{subtext}</Text>}
+      </div>
+    </div>
   );
 };
diff --git a/packages/modules/imodel-browser/src/containers/iModelGrid/IModelGrid.tsx b/packages/modules/imodel-browser/src/containers/iModelGrid/IModelGrid.tsx
@@ -55,6 +55,8 @@ export interface IModelGridProps {
     tableLoadingData?: string;
     /** Displayed after successful fetch search, but no iModel is returned. */
     noIModelSearch?: string;
+    /** Displayed after successful fetch search, but no iModel is returned, along with noIModelSearch text. */
+    noIModelSearchSubtext?: string;
     /** Displayed after successful fetch, but no iModels are returned. */
     noIModels?: string;
     /** Displayed when the component is mounted and there is no iTwin or asset Id. */
@@ -114,7 +116,9 @@ export const IModelGrid = ({
       tableColumnDescription: "Description",
       tableColumnLastModified: "Last Modified",
       tableLoadingData: "Loading...",
-      noIModelSearch: "There is no such iModel in this project.",
+      noIModelSearch: "No results found",
+      noIModelSearchSubtext:
+        "Try adjusting your search by using fewer or more general terms.",
       noIModels: "There are no iModels in this iTwin.",
       noContext: "No context provided",
       noAuthentication: "No access token provided",
@@ -173,22 +177,18 @@ export const IModelGrid = ({
               </>
             ) : (
               <>
-                {searchText && iModels.length === 0 ? (
-                  <div>{strings.noIModelSearch}</div>
-                ) : (
-                  iModels?.map((iModel) => (
-                    <IModelHookedTile
-                      key={iModel.id}
-                      iModel={iModel}
-                      iModelOptions={iModelActions}
-                      accessToken={accessToken}
-                      onThumbnailClick={onThumbnailClick}
-                      apiOverrides={tileApiOverrides}
-                      useTileState={useIndividualState}
-                      {...tileOverrides}
-                    />
-                  ))
-                )}
+                {iModels?.map((iModel) => (
+                  <IModelHookedTile
+                    key={iModel.id}
+                    iModel={iModel}
+                    iModelOptions={iModelActions}
+                    accessToken={accessToken}
+                    onThumbnailClick={onThumbnailClick}
+                    apiOverrides={tileApiOverrides}
+                    useTileState={useIndividualState}
+                    {...tileOverrides}
+                  />
+                ))}
                 {fetchMore ? (
                   <>
                     <InView onChange={fetchMore}>
@@ -240,6 +240,15 @@ export const IModelGrid = ({
     if (!searchText && iModels.length === 0 && noResultsText) {
       return <NoResults text={noResultsText} />;
     }
+    if (searchText && iModels.length === 0) {
+      return (
+        <NoResults
+          text={strings.noIModelSearch}
+          subtext={strings.noIModelSearchSubtext}
+          isSearchResult={true}
+        />
+      );
+    }
     return renderIModelGridStructure();
   };
   return renderComponent();

diff --git a/packages/modules/imodel-browser/src/containers/iModelGrid/useIModelData.ts b/packages/modules/imodel-browser/src/containers/iModelGrid/useIModelData.ts
@@ -102,7 +102,7 @@ export const useIModelData = ({
       top = PAGE_SIZE;
     }
     const paging = `&$skip=${skip}&$top=${top}`;
-    const searching = searchText?.trim() ? `&name=${searchText}` : "";
+    const searching = searchText?.trim() ? `&$search=${searchText}` : "";
 
     const url = `${_getAPIServer(
       apiOverrides