Adding support for recently search term (#1459)

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -38,6 +38,7 @@ import {
 import { urlGitbookDocs, urlJoinSlack } from '../../constants/url.const';
 import { useAuth } from '../../hooks/authHooks';
 import { userSignOut } from '../../utils/AuthUtils';
+import { addToRecentSearch } from '../../utils/CommonUtils';
 import {
   inPageSearchOptions,
   isInPageSearchAllowed,
@@ -181,6 +182,7 @@ const Appbar: React.FC = (): JSX.Element => {
                 data-testid="appbar-item">
                 <span className="fa fa-search tw-absolute tw-block tw-z-10 tw-w-9 tw-h-8 tw-leading-8 tw-text-center tw-pointer-events-none tw-text-gray-400" />
                 <input
+                  autoComplete="off"
                   className="tw-relative search-grey tw-rounded tw-border tw-border-main tw-bg-body-main focus:tw-outline-none tw-pl-8 tw-py-1 tw-form-inputs"
                   data-testid="searchBox"
                   id="searchBox"
@@ -193,6 +195,7 @@ const Appbar: React.FC = (): JSX.Element => {
                     const target = e.target as HTMLInputElement;
                     if (e.key === 'Enter') {
                       setIsOpen(false);
+                      addToRecentSearch(target.value);
                       history.push(
                         getExplorePathWithSearch(
                           target.value,

openmetadata-ui/src/main/resources/ui/src/constants/constants.ts

@@ -22,6 +22,7 @@ export const LIST_SIZE = 5;
 export const SIDEBAR_WIDTH_COLLAPSED = 290;
 export const SIDEBAR_WIDTH_EXPANDED = 290;
 export const LOCALSTORAGE_RECENTLY_VIEWED = 'recentlyViewedData';
+export const LOCALSTORAGE_RECENTLY_SEARCH = 'recentlySearchData';
 export const oidcTokenKey = 'oidcIdToken';
 export const imageTypes = {
   image: 's96-c',

openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts

@@ -393,9 +393,17 @@ declare module 'Models' {
     serviceType?: string;
     timestamp: number;
   }
+
+  interface RecentlySearchData {
+    term: string;
+    timestamp: number;
+  }
   export interface RecentlyViewed {
     data: Array<RecentlyViewedData>;
   }
+  export interface SearchData {
+    data: Array<RecentlySearchData>;
+  }
 
   export type DatasetSchemaTableTab = 'schema' | 'sample_data';
   export type LineagePos = 'from' | 'to';

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -1,9 +1,15 @@
 import { isEmpty } from 'lodash';
-import { RecentlyViewed, RecentlyViewedData } from 'Models';
+import {
+  RecentlySearchData,
+  RecentlyViewed,
+  RecentlyViewedData,
+  SearchData,
+} from 'Models';
 import React from 'react';
 import { reactLocalStorage } from 'reactjs-localstorage';
 import AppState from '../AppState';
 import {
+  LOCALSTORAGE_RECENTLY_SEARCH,
   LOCALSTORAGE_RECENTLY_VIEWED,
   TITLE_FOR_NON_OWNER_ACTION,
 } from '../constants/constants';
@@ -120,6 +126,36 @@ export const getCountBadge = (count = 0) => {
   );
 };
 
+export const addToRecentSearch = (searchTerm: string): void => {
+  const searchData = { term: searchTerm, timestamp: Date.now() };
+  let recentlySearch: SearchData = reactLocalStorage.getObject(
+    LOCALSTORAGE_RECENTLY_SEARCH
+  ) as SearchData;
+  if (recentlySearch?.data) {
+    const arrData = recentlySearch.data
+      // search term is case-insensetive so we should also take care of it.
+      // TODO : after discussion make this check for case-insensetive
+      .filter((item) => item.term !== searchData.term)
+      .sort(
+        arraySorterByKey('timestamp', true) as (
+          a: RecentlySearchData,
+          b: RecentlySearchData
+        ) => number
+      );
+    arrData.unshift(searchData);
+
+    if (arrData.length > 5) {
+      arrData.pop();
+    }
+    recentlySearch.data = arrData;
+  } else {
+    recentlySearch = {
+      data: [searchData],
+    };
+  }
+  reactLocalStorage.setObject(LOCALSTORAGE_RECENTLY_SEARCH, recentlySearch);
+};
+
 export const addToRecentViewed = (eData: RecentlyViewedData): void => {
   const entityData = { ...eData, timestamp: Date.now() };
   let recentlyViewed: RecentlyViewed = reactLocalStorage.getObject(
@@ -160,6 +196,17 @@ export const getRecentlyViewedData = (): Array<RecentlyViewedData> => {
   return [];
 };
 
+export const getRecentlySearchData = (): Array<RecentlySearchData> => {
+  const recentlySearch: SearchData = reactLocalStorage.getObject(
+    LOCALSTORAGE_RECENTLY_SEARCH
+  ) as SearchData;
+  if (recentlySearch?.data) {
+    return recentlySearch.data;
+  }
+
+  return [];
+};
+
 export const setRecentlyViewedData = (
   recentData: Array<RecentlyViewedData>
 ): void => {