Unify search container

Fixes #1269.
Introduces a search container component for our search fields.
This should make them behave more similarly and thus
prevent user confusion.

Also now hides the reset button in case the field is empty.

Author: Arnei

src/components/shared/SearchContainer.tsx

@@ -0,0 +1,62 @@
+import { t } from "i18next";
+import ButtonLikeAnchor from "./ButtonLikeAnchor";
+
+
+const SearchContainer = ({
+	value,
+	handleChange,
+	clearSearchField,
+	isExpand,
+	isInModal,
+	isDisabled,
+	style,
+}: {
+	value: string
+	handleChange: (value: string) => unknown
+	clearSearchField: () => unknown
+	isExpand?: boolean
+	isInModal?: boolean
+	isDisabled?: boolean
+	style?: object
+}) => {
+
+	let containerClassName = "search-container";
+	if (isExpand) {
+		containerClassName = containerClassName + " expand";
+	}
+	if (isInModal) {
+		containerClassName = containerClassName + " modal";
+	}
+	let inputClassName = "search";
+		if (isDisabled) {
+		inputClassName = inputClassName + " disabled"
+	}
+	if (!value) {
+		inputClassName = inputClassName + " fullwidth";
+	}
+	let buttonClassName = "clear";
+	if (isDisabled) {
+		buttonClassName = buttonClassName + " disabled"
+	}
+
+	return (
+		<div className={containerClassName} style={style}>
+			{value && <ButtonLikeAnchor
+				extraClassName={buttonClassName}
+				onClick={() => clearSearchField()}
+				disabled={isDisabled}
+			/>}
+			<input
+				type="text"
+				className={inputClassName}
+				placeholder={t("TABLE_FILTERS.PLACEHOLDER")}
+				onChange={(e) => handleChange(e.target.value)}
+				name="textFilter"
+				value={value}
+				disabled={isDisabled}
+			/>
+		</div>
+	);
+};
+
+export default SearchContainer;

src/components/shared/TableFilters.tsx

@@ -31,6 +31,7 @@ import DropDown from "./DropDown";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
+import SearchContainer from "./SearchContainer";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -98,6 +99,14 @@ const TableFilters = ({
 		dispatch(loadResourceIntoTable());
 	};
 
+	const handleSearchChange = (value: string) => {
+		handleChange("textFilter", value);
+	}
+
+	const clearSearchField = () => {
+		dispatch(removeTextFilter());
+	};
+
 	// Handle changes when an item of the component is changed
 	const handleChange = (name: string, value: string) => {
 		let mustApplyChanges = false;
@@ -233,16 +242,12 @@ const TableFilters = ({
 		<>
 			<div className="filters-container">
 				{/* Text filter - Search Query */}
-        <div className="search-container">
-          <input
-            type="text"
-            className="search expand"
-            placeholder={t("TABLE_FILTERS.PLACEHOLDER")}
-            onChange={(e) => handleChange("textFilter", e.target.value)}
-            name="textFilter"
-            value={textFilter}
-          />
-        </div>
+				<SearchContainer
+					value={textFilter}
+					handleChange={handleSearchChange}
+					clearSearchField={clearSearchField}
+					isExpand={true}
+				/>
 
 				{/* Selection of filters and management of filter profiles*/}
 				{/*show only if filters.filters contains filters*/}
@@ -346,12 +351,14 @@ const TableFilters = ({
 						</div>
 
 						{/* Remove icon to clear all filters */}
-						<ButtonLikeAnchor
-							onClick={removeFilters}
-							tooltipText="TABLE_FILTERS.CLEAR"
-						>
-							<i className="clear fa fa-times" />
-						</ButtonLikeAnchor>
+						{filterMap.some(e => e.value) &&
+							<ButtonLikeAnchor
+								onClick={removeFilters}
+								tooltipText="TABLE_FILTERS.CLEAR"
+							>
+								<i className="clear fa fa-times" />
+							</ButtonLikeAnchor>
+						}
 						{/* Settings icon to open filters profile dialog (save and editing filter profiles)*/}
 						<ButtonLikeAnchor
 							onClick={() => setFilterSettings(!showFilterSettings)}

src/components/shared/wizard/SelectContainer.tsx

@@ -4,6 +4,7 @@ import cn from "classnames";
 import { useField } from "formik";
 import ButtonLikeAnchor from "../ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
+import SearchContainer from "../SearchContainer";
 
 type Item = {
 	name: string
@@ -67,10 +68,6 @@ const SelectContainer = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const disabledStyle = {
-		backgroundColor: "#eeeff0",
-	};
-
 	const disabledSelectStyle = {
 		backgroundColor: "#eeeff0",
 	};
@@ -205,20 +202,13 @@ const SelectContainer = ({
 						</label>
 						{/*Search*/}
 						{resource.searchable && (
-							<div className="search-container">
-								{/* search bar */}
-								<ButtonLikeAnchor extraClassName="clear" onClick={() => clearSearchField()} />
-								<input
-									type="text"
-									id="search"
-									className="search"
-									disabled={!manageable}
-									style={manageable ? {} : disabledStyle}
-									placeholder={t("TABLE_FILTERS.PLACEHOLDER")}
-									onChange={(e) => handleChangeSearch(e.target.value)}
-									value={searchField}
-								/>
-							</div>
+							<SearchContainer
+								value={searchField}
+								handleChange={handleChangeSearch}
+								clearSearchField={clearSearchField}
+								isDisabled={!manageable}
+								style={{ marginTop: "10px" }}
+							/>
 						)}
 						{/*Select with options provided by backend*/}
 						<select

src/components/users/partials/wizard/UserEffectiveRolesTab.tsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import ModalContent from "../../../shared/modals/ModalContent";
+import SearchContainer from "../../../shared/SearchContainer";
 
 /**
  * This component renders the effective role tab of the user details modal
@@ -44,17 +45,11 @@ const UserEffectiveRolesTab = <T extends RequiredFormProps>({
 				<p>{t("USERS.USERS.DETAILS.DESCRIPTION.EFFECTIVEROLES")}</p>
 
 				{/* list  all roles a user got */}
-				<div className="search-container">
-					<ButtonLikeAnchor extraClassName="clear" onClick={() => clearSearchField()} />
-					<input
-						type="text"
-						id="search_effective"
-						className="search"
-						value={searchField}
-						onChange={(e) => handleChangeSearch(e.target.value)}
-						placeholder={t("TABLE_FILTERS.PLACEHOLDER")}
-					/>
-				</div>
+				<SearchContainer
+					value={searchField}
+					handleChange={handleChangeSearch}
+					clearSearchField={clearSearchField}
+				/>
 
 				<select multiple style={{ height: "26em" }}>
 					{items.map((item, key) => (

src/styles/components/_inputs.scss

@@ -2,6 +2,7 @@
 @use "../base/fontawesome/fa-mixins";
 @use "../base/fontawesome/variables" as variables2;
 @use "../base/variables";
+@use "../mixins/button";
 
 /**
  * Licensed to The Apereo Foundation under one or more contributor license
@@ -82,21 +83,6 @@ textarea {
         background-position: 19px center;
     }
 
-    &.search,
-    &#search {
-        appearance: none;
-        vertical-align: top;
-        padding: 0 20px 0 40px !important;
-        height: 40px;
-
-        &.expand {
-            transition: width 0.2s ease-in;
-
-            &:focus {
-                width: 200px;
-            }
-        }
-    }
 
     &.small {
         padding: 15px;
@@ -177,14 +163,83 @@ input[type="radio"].ios {
     width: 100%;
 }
 
+
 .search-container {
-    @include fa-mixins.fa-icon(variables2.$fa-var-search, after, inline, 0, 0, inherit, 13px);
+    width: 100% !important;
+    height: 40px;
     position: relative;
 
+    @include fa-mixins.fa-icon(variables2.$fa-var-search, after, inline, 0, 0, inherit, 13px);
+
+    outline: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%);
+    border-radius: variables.$main-border-radius;
+
+    input.search {
+        border: 0;
+        border-right-width: 0;
+        float: left;
+        margin: 0;
+
+        appearance: none;
+        vertical-align: top;
+        padding: 0 0px 0 40px !important;
+        height: 40px;
+
+        outline: none;
+
+        width: calc(100% - 46px) !important;
+
+        &.fullwidth {
+            width: 100% !important;
+        }
+    }
+
+
+    &:focus-within {
+        outline: 3px solid #378dd4;
+    }
+
+    &.expand {
+        width: 170px !important;
+        transition: width 0.2s ease-in;
+
+        &:focus-within {
+            width: 240px !important;
+            // width: calc(100% + 46px) !important;
+        }
+    }
+
+    button.clear {
+        height: 40px;
+        width: 46px;
+        float: right;
+        @include button.btn(white);
+        @include fa-mixins.fa-icon(variables2.$fa-var-times, before, block, 0, 0.45em 0.45em 0.55em 0.45em, inherit, 14px);
+        opacity: 1 !important;
+
+        &, &:hover, &:focus, &:active {
+            background: none;
+            background-color: #fff;
+            border: 0;
+            box-shadow: none;
+        }
+
+        &.disabled, &.disabled:hover, &.disabled:focus, &.disabled:active {
+            background-color: #eeeff0,
+        }
+
+        &+input.search {
+            width: calc(100% - 46px) !important;
+        }
+
+
+    }
+
     &:after {
         position: absolute;
         top: 13px;
         left: 10px;
     }
+
 }
 

src/styles/components/_multi-select.scss

@@ -75,31 +75,6 @@
         display: block;
         float: left;
         vertical-align: top;
-
-        .search-container {
-            width: 100% !important;
-            margin-top: 10px;
-        }
-
-        input.search {
-            border-radius: variables.$main-border-radius 0 0 variables.$main-border-radius;
-            border-right-width: 0;
-            float: left;
-            margin: 0;
-        }
-
-        button.clear {
-            height: inherit;
-            float: right;
-            @include button.btn(white);
-            @include fa-mixins.fa-icon(variables2.$fa-var-times, before, block, 0, 0.45em 0.45em 0.55em 0.45em, inherit, 14px);
-
-            border-radius: 0 variables.$main-border-radius variables.$main-border-radius 0;
-
-            &+input.search {
-                width: calc(100% - 46px) !important;
-            }
-        }
     }
 }
 

src/styles/components/modals/_modal-base.scss

@@ -136,32 +136,6 @@
 
 .modal-body {
     padding: 3%;
-
-    .search-container {
-        width: 100% !important;
-        margin-top: 5px;
-    }
-
-    input.search {
-        border-radius: variables.$main-border-radius 0 0 variables.$main-border-radius;
-        border-right-width: 0;
-        float: left;
-        margin: 0;
-    }
-
-    button.clear {
-        height: inherit;
-        width: 46px;
-        float: right;
-        @include button.btn(white);
-        @include fa-mixins.fa-icon(variables2.$fa-var-times, before, block, 0, 0.45em 0.45em 0.55em 0.45em, inherit, 14px);
-
-        border-radius: 0 variables.$main-border-radius variables.$main-border-radius 0;
-
-        &+input.search {
-            width: calc(100% - 46px) !important;
-        }
-    }
 }
 
 .modal {