77833 wip created SearchControl component base

packages/app/src/components/SearchPageNew/SearchControl.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchPageForm from '../SearchPage/SearchPageForm';
+import AppContainer from '../../client/services/AppContainer';
+
+
+const SearchControl = (props) => {
+
+  return (
+    <div className="">
+      <div className="search-page-input sps sps--abv">
+        <SearchPageForm
+          t={props.t}
+          keyword={props.searchingKeyword}
+          appContainer={props.appContainer}
+          onSearchFormChanged={props.search}
+        />
+      </div>
+      {/* place deleteAll button , relevance button , include specificPath button */}
+    </div>
+  );
+};
+
+SearchControl.propTypes = {
+  t: PropTypes.func.isRequired,
+  searchingKeyword:  PropTypes.string.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  search: PropTypes.func.isRequired,
+};
+
+export default SearchControl;

packages/app/src/components/SearchPageNew/SearchPageLayout.jsx

@@ -9,7 +9,7 @@ const SearchPageLayout = (props) => {
     <div className="content-main">
       <div className="search-result row" id="search-result">
         <nav>
-          <div className="search-page-input sps sps--abv">{props.SearchControlComponent}</div>
+          {props.SearchControlComponent}
         </nav>
         <div className="d-flex align-items-start justify-content-between mt-1">
           <div className="search-result-meta">