Fixed #668 UI: Should have some search box for Services page. (#740)

* Fixed #668 UI: Should have some search box for Services page.

* searchbar fix

catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -181,7 +181,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
-                  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"
+                  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"
                   id="searchBox"
                   type="text"
                   value={searchValue || ''}

catalog-rest-service/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx

@@ -70,6 +70,7 @@ const Searchbar = ({
       data-testid="search-bar-container">
       {label !== '' && <label>{label}</label>}
       <div className="tw-flex tw-bg-body-main tw-h-8">
+        <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" />
         {/* <div className="tw-flex-initial">
           <span className="input-group-text1 tw-pr-3 tw-py-1.5 tw-flex">
             <SVGIcons
@@ -80,7 +81,7 @@ const Searchbar = ({
           </span>
         </div> */}
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-relative tw-px-3 tw-py-1 tw-pl-8"
           data-testid="searchbar"
           placeholder={placeholder}
           type="text"

catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx

@@ -17,7 +17,7 @@
 
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
-import { isNull } from 'lodash';
+import { isNull, lowerCase } from 'lodash';
 import { ServiceCollection, ServiceData, ServiceTypes } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -30,6 +30,7 @@ import {
 } from '../../axiosAPIs/serviceAPI';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
+import Searchbar from '../../components/common/searchbar/Searchbar';
 import PageContainer from '../../components/containers/PageContainer';
 import Loader from '../../components/Loader/Loader';
 import {
@@ -94,6 +95,7 @@ const ServicesPage = () => {
   const [serviceList, setServiceList] = useState<Array<ServiceDataObj>>([]);
   const [editData, setEditData] = useState<ServiceDataObj>();
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState('');
 
   const updateServiceList = (
     allServiceCollectionArr: Array<ServiceCollection>
@@ -126,7 +128,17 @@ const ServicesPage = () => {
       );
     }
   };
-
+  const handleSearchAction = (searchValue: string) => {
+    setSearchText(searchValue);
+    const curServ = services[serviceName];
+    setServiceList(
+      (curServ as unknown as Array<ServiceDataObj>).filter(
+        (serv) =>
+          serv.description?.includes(lowerCase(searchValue)) ||
+          serv.name?.includes(lowerCase(searchValue))
+      )
+    );
+  };
   const handleAddService = () => {
     setEditData(undefined);
     setIsModalOpen(true);
@@ -360,6 +372,14 @@ const ServicesPage = () => {
                 ))}
               </nav>
             </div>
+            <div className="md:tw-w-2/6 sm:tw-w-2/5">
+              <Searchbar
+                placeholder={`Search for ${servicesDisplayName[serviceName]}...`}
+                searchValue={searchText}
+                typingInterval={1500}
+                onSearch={handleSearchAction}
+              />
+            </div>
             {serviceList.length ? (
               <div
                 className="tw-grid tw-grid-cols-4 tw-gap-4"
@@ -492,8 +512,10 @@ const ServicesPage = () => {
                   />
                 </div>
                 <div className="tw-mt-11">
-                  <p className="tw-text-lg">
-                    No services found.{' '}
+                  <p className="tw-text-lg tw-text-center">
+                    No services found for {`"${searchText}"`}
+                  </p>
+                  <p className="tw-text-lg tw-text-center">
                     <button
                       className="link-text tw-underline"
                       onClick={handleAddService}>

catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css

@@ -242,9 +242,7 @@
   .horz-separator {
     @apply tw-border-b tw-border-separator;
   }
-  .side-panel .activeCategory {
-    @apply tw--mx-4 tw-pl-4 tw-pr-3 tw-py-1 tw-border-r-4 tw-border-orange-400;
-  }
+
   .side-panel .activeCategory .tag-category {
     @apply tw-text-primary tw-font-medium;
   }

catalog-rest-service/src/main/resources/ui/src/styles/temp.css

@@ -405,13 +405,6 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
-.side-panel .activeCategory {
-  margin-right: -15px;
-  margin-left: -15px;
-  padding: 0px 15px;
-  border-right: 3px solid rgba(249, 130, 108);
-  font-weight: 500;
-}
 
 .search-wrapper + .page-container .side-panel {
   top: 102px;