added value prop to reflect changes to the q parameter in the url, used new FilterInput component in pageActions

scm-ui-components/packages/ui-components/src/forms/FilterInput.js

@@ -6,6 +6,7 @@ import { translate } from "react-i18next";
 
 type Props = {
   filter: string => void,
+  value?: string,
 
   // context props
   classes: Object,
@@ -30,7 +31,7 @@ const styles = {
 class FilterInput extends React.Component<Props, State> {
   constructor(props) {
     super(props);
-    this.state = { value: "" };
+    this.state = { value: this.props.value ? this.props.value : "" };
   }
 
   handleChange = event => {

scm-ui/src/groups/containers/Groups.js

@@ -1,6 +1,7 @@
 //@flow
 import React from "react";
 import { connect } from "react-redux";
+import classNames from "classnames";
 import { translate } from "react-i18next";
 import type { History } from "history";
 import queryString from "query-string";
@@ -17,6 +18,7 @@ import {
 import {
   Page,
   PageActions,
+  FilterInput,
   Button,
   Notification,
   LinkPaginator,
@@ -25,6 +27,7 @@ import {
 import { GroupTable } from "./../components/table";
 import CreateGroupButton from "../components/buttons/CreateGroupButton";
 import { getGroupsLink } from "../../modules/indexResource";
+import injectSheet from "react-jss";
 
 type Props = {
   groups: Group[],
@@ -36,6 +39,7 @@ type Props = {
   groupLink: string,
 
   // context objects
+  classes: Object,
   t: string => string,
   history: History,
   location: any,
@@ -45,6 +49,13 @@ type Props = {
   fetchGroupsByLink: (link: string) => void
 };
 
+const styles = {
+  button: {
+    float: "right",
+    marginTop: "1.25rem"
+  }
+};
+
 class Groups extends React.Component<Props> {
   componentDidMount() {
     const { fetchGroupsByPage, groupLink, page } = this.props;
@@ -52,33 +63,34 @@ class Groups extends React.Component<Props> {
   }
 
   componentDidUpdate = (prevProps: Props) => {
-    const { list, page, loading, location, fetchGroupsByPage, groupLink } = this.props;
+    const {
+      list,
+      page,
+      loading,
+      location,
+      fetchGroupsByPage,
+      groupLink
+    } = this.props;
     if (list && page && !loading) {
       const statePage: number = list.page + 1;
-      if (
+      if (page !== statePage || prevProps.location.search !== location.search) {
-        page !== statePage ||
-        prevProps.location.search !== location.search
-      ) {
         fetchGroupsByPage(groupLink, page, this.getQueryString());
       }
     }
   };
 
   render() {
-    const { groups, loading, error, history, t } = this.props;
+    const { groups, loading, error, t } = this.props;
     return (
       <Page
         title={t("groups.title")}
         subtitle={t("groups.subtitle")}
         loading={loading || !groups}
         error={error}
-        filter={filter => {
-          history.push("/groups/?q=" + filter);
-        }}
       >
         {this.renderGroupTable()}
         {this.renderCreateButton()}
-        {this.renderPageActionCreateButton()}
+        {this.renderPageActions()}
       </Page>
     );
   }
@@ -117,16 +129,24 @@ class Groups extends React.Component<Props> {
     return null;
   }
 
-  renderPageActionCreateButton() {
+  renderPageActions() {
-    const { canAddGroups, t } = this.props;
+    const { canAddGroups, history, classes, t } = this.props;
     if (canAddGroups) {
       return (
         <PageActions>
+          <FilterInput
+            value={this.getQueryString()}
+            filter={filter => {
+              history.push("/groups/?q=" + filter);
+            }}
+          />
+          <div className={classNames(classes.button, "input-button control")}>
             <Button
               label={t("create-group-button.label")}
               link="/groups/add"
               color="primary"
             />
+          </div>
         </PageActions>
       );
     }
@@ -174,4 +194,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("groups")(Groups));
+)(injectSheet(styles)(translate("groups")(Groups)));

scm-ui/src/repos/containers/Overview.js

@@ -1,6 +1,8 @@
 // @flow
 import React from "react";
 import { connect } from "react-redux";
+import classNames from "classnames";
+import injectSheet from "react-jss";
 import { translate } from "react-i18next";
 import type { History } from "history";
 import queryString from "query-string";
@@ -18,6 +20,7 @@ import {
 import {
   Page,
   PageActions,
+  FilterInput,
   Button,
   CreateButton,
   Notification,
@@ -36,6 +39,7 @@ type Props = {
   reposLink: string,
 
   // context props
+  classes: Object,
   t: string => string,
   history: History,
   location: any,
@@ -46,6 +50,13 @@ type Props = {
   fetchReposByLink: string => void
 };
 
+const styles = {
+  button: {
+    float: "right",
+    marginTop: "1.25rem"
+  }
+};
+
 class Overview extends React.Component<Props> {
   componentDidMount() {
     const { fetchReposByPage, reposLink, page } = this.props;
@@ -63,29 +74,23 @@ class Overview extends React.Component<Props> {
     } = this.props;
     if (collection && page && !loading) {
       const statePage: number = collection.page + 1;
-      if (
+      if (page !== statePage || prevProps.location.search !== location.search) {
-        page !== statePage ||
-        prevProps.location.search !== location.search
-      ) {
         fetchReposByPage(reposLink, page, this.getQueryString());
       }
     }
   };
 
   render() {
-    const { error, loading, history, t } = this.props;
+    const { error, loading, t } = this.props;
     return (
       <Page
         title={t("overview.title")}
         subtitle={t("overview.subtitle")}
         loading={loading}
         error={error}
-        filter={filter => {
-          history.push("/repos/?q=" + filter);
-        }}
       >
         {this.renderOverview()}
-        {this.renderPageActionCreateButton()}
+        {this.renderPageActions()}
       </Page>
     );
   }
@@ -133,16 +138,24 @@ class Overview extends React.Component<Props> {
     return null;
   }
 
-  renderPageActionCreateButton() {
+  renderPageActions() {
-    const { showCreateButton, t } = this.props;
+    const { showCreateButton, history, classes, t } = this.props;
     if (showCreateButton) {
       return (
         <PageActions>
+          <FilterInput
+            value={this.getQueryString()}
+            filter={filter => {
+              history.push("/repos/?q=" + filter);
+            }}
+          />
+          <div className={classNames(classes.button, "input-button control")}>
             <Button
               label={t("overview.createButton")}
               link="/repos/create"
               color="primary"
             />
+          </div>
         </PageActions>
       );
     }
@@ -189,4 +202,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(withRouter(Overview)));
+)(injectSheet(styles)(translate("repos")(withRouter(Overview))));

scm-ui/src/users/containers/Users.js

@@ -1,6 +1,8 @@
 // @flow
 import React from "react";
 import { connect } from "react-redux";
+import classNames from "classnames";
+import injectSheet from "react-jss";
 import { translate } from "react-i18next";
 import type { History } from "history";
 import queryString from "query-string";
@@ -21,7 +23,8 @@ import {
   CreateButton,
   Notification,
   LinkPaginator,
-  getPageFromMatch
+  getPageFromMatch,
+  FilterInput
 } from "@scm-manager/ui-components";
 import { UserTable } from "./../components/table";
 import { getUsersLink } from "../../modules/indexResource";
@@ -36,6 +39,7 @@ type Props = {
   usersLink: string,
 
   // context objects
+  classes: Object,
   t: string => string,
   history: History,
   location: any,
@@ -45,41 +49,48 @@ type Props = {
   fetchUsersByLink: (link: string) => void
 };
 
-class Users extends React.Component<Props> {
+const styles = {
+  button: {
+    float: "right",
+    marginTop: "1.25rem"
+  }
+};
 
+class Users extends React.Component<Props> {
   componentDidMount() {
     const { fetchUsersByPage, usersLink, page } = this.props;
     fetchUsersByPage(usersLink, page, this.getQueryString());
   }
 
   componentDidUpdate = (prevProps: Props) => {
-    const { list, page, loading, location, fetchUsersByPage, usersLink } = this.props;
+    const {
+      list,
+      page,
+      loading,
+      location,
+      fetchUsersByPage,
+      usersLink
+    } = this.props;
     if (list && page && !loading) {
       const statePage: number = list.page + 1;
-      if (
+      if (page !== statePage || prevProps.location.search !== location.search) {
-        page !== statePage ||
-        prevProps.location.search !== location.search
-      ) {
         fetchUsersByPage(usersLink, page, this.getQueryString());
       }
     }
   };
 
   render() {
-    const { users, loading, error, history, t } = this.props;
+    const { users, loading, error, t } = this.props;
     return (
       <Page
         title={t("users.title")}
         subtitle={t("users.subtitle")}
         loading={loading || !users}
         error={error}
-        filter={filter => {
-          history.push("/users/?q=" + filter);
-        }}
       >
         {this.renderUserTable()}
         {this.renderCreateButton()}
-        {this.renderPageActionCreateButton()}
+        {this.renderPageActions()}
       </Page>
     );
   }
@@ -119,16 +130,24 @@ class Users extends React.Component<Props> {
     return null;
   }
 
-  renderPageActionCreateButton() {
+  renderPageActions() {
-    const { canAddUsers, t } = this.props;
+    const { canAddUsers, history, classes, t } = this.props;
     if (canAddUsers) {
       return (
         <PageActions>
+          <FilterInput
+            value={this.getQueryString()}
+            filter={filter => {
+              history.push("/users/?q=" + filter);
+            }}
+          />
+          <div className={classNames(classes.button, "input-button control")}>
             <Button
               label={t("users.createButton")}
               link="/users/add"
               color="primary"
             />
+          </div>
         </PageActions>
       );
     }
@@ -177,4 +196,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("users")(Users));
+)(injectSheet(styles)(translate("users")(Users)));