Merge branch 'unify-search-field' of Arnei/opencast-admin-interface into r/17.x

Pull request #1337
Fixes #1269
  Unify search container

Author: gregorydlogan

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";
 import { Resource } from "../../slices/tableSlice";
 
 /**
@@ -99,6 +100,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;
@@ -235,16 +244,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*/}
@@ -348,12 +353,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 {