SearchUser.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import React from "../_snowpack/pkg/react.js";
  2. import {useTranslation} from "../_snowpack/pkg/react-i18next.js";
  3. import {
  4. Button,
  5. ButtonVariant,
  6. EmptyState,
  7. EmptyStateBody,
  8. Form,
  9. InputGroup,
  10. TextInput,
  11. Title
  12. } from "../_snowpack/pkg/@patternfly/react-core.js";
  13. import {SearchIcon} from "../_snowpack/pkg/@patternfly/react-icons.js";
  14. import {useForm} from "../_snowpack/pkg/react-hook-form.js";
  15. import {useHistory, useRouteMatch} from "../_snowpack/pkg/react-router-dom.js";
  16. export const SearchUser = ({onSearch}) => {
  17. const {t} = useTranslation("users");
  18. const {register, handleSubmit} = useForm();
  19. const {url} = useRouteMatch();
  20. const history = useHistory();
  21. const goToCreate = () => history.push(`${url}/add-user`);
  22. return /* @__PURE__ */ React.createElement(EmptyState, null, /* @__PURE__ */ React.createElement(Title, {
  23. "data-testid": "search-users-title",
  24. headingLevel: "h4",
  25. size: "lg"
  26. }, t("startBySearchingAUser")), /* @__PURE__ */ React.createElement(EmptyStateBody, null, /* @__PURE__ */ React.createElement(Form, {
  27. onSubmit: handleSubmit((form) => onSearch(form.search))
  28. }, /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(TextInput, {
  29. type: "text",
  30. id: "kc-user-search",
  31. name: "search",
  32. ref: register()
  33. }), /* @__PURE__ */ React.createElement(Button, {
  34. variant: ButtonVariant.control,
  35. "aria-label": t("common:search"),
  36. type: "submit"
  37. }, /* @__PURE__ */ React.createElement(SearchIcon, null))))), /* @__PURE__ */ React.createElement(Button, {
  38. "data-testid": "create-new-user",
  39. variant: "link",
  40. onClick: goToCreate
  41. }, t("createNewUser")));
  42. };