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 React, { FC } from "react";
-import { withRouter, RouteComponentProps } from "react-router-dom";
+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> {
+const OverviewPageActions: FC<Props> = ({
-  render() {
+  groups,
-    const { history, currentGroup, groups, location, link, testId, groupSelected } = this.props;
+  currentGroup,
-    const groupSelector = groups && (
+  showCreateButton,
-      <div className={"column is-flex"}>
+  link,
-        <DropDown
+  groupSelected,
-          className={"is-fullwidth"}
+  label,
-          options={groups}
+  testId,
-          preselectedOption={currentGroup}
+  searchPlaceholder,
-          optionSelected={groupSelected}
+  filterPlaceholder
-        />
+}) => {
-      </div>
+  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 (
+  const renderCreateButton = () => {
-      <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;
     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)}
         />

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -42,7 +42,9 @@
     "title": "Repositories",
     "subtitle": "Übersicht aller verfügbaren Repositories",
     "noRepositories": "Keine Repositories gefunden.",
-    "createButton": "Repository erstellen"
+    "createButton": "Repository erstellen",
+    "searchRepository": "Repository suchen",
+    "filterNamespace": "Namespace filtern"
   },
   "create": {
     "title": "Repository erstellen",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -42,7 +42,9 @@
     "title": "Repositories",
     "subtitle": "Overview of available repositories",
     "noRepositories": "No repositories found.",
-    "createButton": "Create Repository"
+    "createButton": "Create Repository",
+    "searchRepository": "Search repository",
+    "filterNamespace": "Filter by namespace"
   },
   "create": {
     "title": "Create Repository",

scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx

@@ -22,22 +22,26 @@
  * SOFTWARE.
  */
 import React from "react";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
-import { CardColumnGroup, RepositoryEntry } from "@scm-manager/ui-components";
+import {CardColumnGroup, Icon, RepositoryEntry} from "@scm-manager/ui-components";
-import { RepositoryGroup } from "@scm-manager/ui-types";
+import {RepositoryGroup} from "@scm-manager/ui-types";
-import { Icon } from "@scm-manager/ui-components";
+import {WithTranslation, withTranslation} from "react-i18next";
-import { WithTranslation, withTranslation } from "react-i18next";
+import styled from "styled-components";
 
 type Props = WithTranslation & {
   group: RepositoryGroup;
 };
 
+const SizedIcon = styled(Icon)`
+  font-size: 1.33rem;
+`;
+
 class RepositoryGroupEntry extends React.Component<Props> {
   render() {
     const { group, t } = this.props;
     const settingsLink = group.namespace?._links?.permissions && (
       <Link to={`/namespace/${group.name}/settings`}>
-        <Icon color={"is-link"} name={"cog"} title={t("repositoryOverview.settings.tooltip")} />
+        <SizedIcon color={"is-link"} name={"cog"} title={t("repositoryOverview.settings.tooltip")} />
       </Link>
     );
     const namespaceHeader = (

scm-ui/ui-webapp/src/repos/containers/Overview.tsx

@@ -126,6 +126,8 @@ class Overview extends React.Component<Props> {
             link="repos"
             label={t("overview.createButton")}
             testId="repository-overview"
+            searchPlaceholder={t("overview.searchRepository")}
+            filterPlaceholder={t("overview.filterNamespace")}
           />
         </PageActions>
       </Page>