Improve ux on overview

scm-ui/ui-components/src/OverviewPageActions.tsx

@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { withRouter, RouteComponentProps } from "react-router-dom";
+import React, { FC } from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Button, DropDown, urls } from "./index";
 import { FilterInput } from "./forms";
 
-type Props = RouteComponentProps & {
+type Props = {
   showCreateButton: boolean;
   currentGroup: string;
   groups: string[];
@@ -35,41 +35,36 @@ type Props = RouteComponentProps & {
   groupSelected: (namespace: string) => void;
   label?: string;
   testId?: string;
+  searchPlaceholder?: string;
+  filterPlaceholder?: string;
 };
 
-class OverviewPageActions extends React.Component<Props> {
-  render() {
-    const { history, currentGroup, groups, location, link, testId, groupSelected } = this.props;
-    const groupSelector = groups && (
-      <div className={"column is-flex"}>
-        <DropDown
-          className={"is-fullwidth"}
-          options={groups}
-          preselectedOption={currentGroup}
-          optionSelected={groupSelected}
-        />
-      </div>
-    );
+const OverviewPageActions: FC<Props> = ({
+  groups,
+  currentGroup,
+  showCreateButton,
+  link,
+  groupSelected,
+  label,
+  testId,
+  searchPlaceholder,
+  filterPlaceholder
+}) => {
+  const history = useHistory();
+  const location = useLocation();
+  const groupSelector = groups && (
+    <div className={"column is-flex"}>
+      <DropDown
+        className={"is-fullwidth"}
+        options={groups}
+        preselectedOption={currentGroup}
+        optionSelected={groupSelected}
+        placeholder={filterPlaceholder}
+      />
+    </div>
+  );
 
-    return (
-      <div className={"columns is-tablet"}>
-        {groupSelector}
-        <div className={"column"}>
-          <FilterInput
-            value={urls.getQueryStringFromLocation(location)}
-            filter={filter => {
-              history.push(`/${link}/?q=${filter}`);
-            }}
-            testId={testId + "-filter"}
-          />
-        </div>
-        {this.renderCreateButton()}
-      </div>
-    );
-  }
-
-  renderCreateButton() {
-    const { showCreateButton, link, label } = this.props;
+  const renderCreateButton = () => {
     if (showCreateButton) {
       return (
         <div className={classNames("input-button", "control", "column")}>
@@ -78,7 +73,24 @@ class OverviewPageActions extends React.Component<Props> {
       );
     }
     return null;
-  }
-}
+  };
 
-export default withRouter(OverviewPageActions);
+  return (
+    <div className={"columns is-tablet"}>
+      {groupSelector}
+      <div className={"column"}>
+        <FilterInput
+          placeholder={searchPlaceholder}
+          value={urls.getQueryStringFromLocation(location)}
+          filter={filter => {
+            history.push(`/${link}/?q=${filter}`);
+          }}
+          testId={testId + "-filter"}
+        />
+      </div>
+      {renderCreateButton()}
+    </div>
+  );
+};
+
+export default OverviewPageActions;

scm-ui/ui-components/src/forms/DropDown.tsx

@@ -32,6 +32,7 @@ type Props = {
   preselectedOption?: string;
   className?: string;
   disabled?: boolean;
+  placeholder?: string;
 };
 
 const FullWidthSelect = styled.select`
@@ -40,7 +41,7 @@ const FullWidthSelect = styled.select`
 
 class DropDown extends React.Component<Props> {
   render() {
-    const { options, optionValues, preselectedOption, className, disabled } = this.props;
+    const { options, optionValues, preselectedOption, className, disabled, placeholder } = this.props;
 
     if (preselectedOption && options.filter(o => o === preselectedOption).length === 0) {
       options.push(preselectedOption);
@@ -48,7 +49,12 @@ class DropDown extends React.Component<Props> {
 
     return (
       <div className={classNames(className, "select", disabled ? "disabled" : "")}>
-        <FullWidthSelect value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}>
+        <FullWidthSelect
+          value={preselectedOption ? preselectedOption : ""}
+          onChange={this.change}
+          disabled={disabled}
+          placeholder={placeholder}
+        >
           {options.map((option, index) => {
             const value = optionValues && optionValues[index] ? optionValues[index] : option;
             return (

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -65,7 +65,7 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder }) => {
         <FixedHeightInput
           className="input"
           type="search"
-          placeholder={placeholder || t("filterEntries")}
+          placeholder={placeholder || t("overviewAction.filterEntries")}
           value={stateValue}
           onChange={event => setStateValue(event.target.value)}
         />