Elongated search bar across the platform (#1396)

* Elongate search bar across the platform * Fix lint * Fix tests * Remove unchanged files * Resolve conflicts * Remove elipsis
onaio · May 23, 2024 · a05db4f · a05db4f
1 parent 417b099
commit a05db4f
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 2 deletions.
diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx
@@ -72,6 +72,7 @@ export const UserList = (props: OrganizationListProps) => {
   const columns = getTableColumns(keycloakBaseURL, fhirBaseURL, extraData, t, userRole, history);
 
   const searchFormProps = {
+    wrapperClassName: 'elongate-search-bar',
     defaultValue: getQueryParams(location)[searchQuery],
     onChangeHandler: function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
       const searchText = event.target.value;

diff --git a/packages/keycloak-user-management/src/components/UserList/index.tsx b/packages/keycloak-user-management/src/components/UserList/index.tsx
@@ -192,6 +192,7 @@ const UserList = (props: UserListTypes): JSX.Element => {
         <Col className="main-content" span={openDetails ? 19 : 24}>
           <div className="main-content__header">
             <SearchForm
+              wrapperClassName="elongate-search-bar"
               defaultValue={getQueryParams(props.location)[SEARCH_QUERY_PARAM]}
               onChange={createChangeHandler(SEARCH_QUERY_PARAM, props)}
               size={'middle'}

diff --git a/packages/react-utils/src/components/CommonStyles/index.css b/packages/react-utils/src/components/CommonStyles/index.css
@@ -23,3 +23,6 @@
 .flex-grow-1 {
   flex-grow: 1;
 }
+.elongate-search-bar{
+	width: 55%;
+}
diff --git a/packages/react-utils/src/components/Search/index.tsx b/packages/react-utils/src/components/Search/index.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from '../../mls';
  */
 export interface SearchFormProps extends InputProps {
   onChangeHandler: OnChangeType;
+  wrapperClassName?: string;
 }
 
 const defaultPrefix = <SearchOutlined style={{ fontSize: '16px', fontWeight: 'bold' }} />;
@@ -31,7 +32,7 @@ export const defaultSearchProps: SearchFormProps = {
  * @param props - the component's props
  */
 const SearchForm = (props: SearchFormProps) => {
-  const { onChangeHandler, ...passedOnProps } = props;
+  const { onChangeHandler, wrapperClassName, ...passedOnProps } = props;
   // HACK to preserve defaultProps back compatibility
   const { t } = useTranslation();
   passedOnProps['placeholder'] = props.placeholder ?? t('Search');
@@ -51,7 +52,7 @@ const SearchForm = (props: SearchFormProps) => {
   };
 
   return (
-    <div className="search-input-wrapper">
+    <div className={`search-input-wrapper ${wrapperClassName ? wrapperClassName : ''}`}>
       <Input onChange={debouncedOnChangeHandler} {...passedOnProps}></Input>
     </div>
   );

diff --git a/packages/react-utils/src/hooks/useSimpleTabularView.ts b/packages/react-utils/src/hooks/useSimpleTabularView.ts
@@ -93,6 +93,7 @@ export function useSimpleTabularView<T extends Resource>(
   const { data, ...restQueryValues } = useQuery(rQuery);
 
   const searchFormProps = {
+    wrapperClassName: 'elongate-search-bar',
     defaultValue: getQueryParams(location)[searchQuery],
     onChangeHandler: function onChangeHandler(event: ChangeEvent<HTMLInputElement>) {
       const nextUrl = getNextUrlOnSearch(event, location, match);