improve user overview

Pushed-by: k8s-git-ops<admin@cloudogu.com>
Pushed-by: Viktor Egorov<viktor.egorov-extern@cloudogu.com>
Co-authored-by: Viktor<viktor.egorov@triology.de>
Co-authored-by: Thomas Zerr<thomas.zerr@cloudogu.com>

gradle/changelog/improve_user_filter.yaml

@@ -0,0 +1,2 @@
+- type: changed
+  description: Placeholder is now a label and breakpoint is different

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

@@ -47,7 +47,7 @@ const OverviewPageActions: FC<Props> = ({
   label,
   testId,
   searchPlaceholder,
-  groupAriaLabelledby
+  groupAriaLabelledby,
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -55,11 +55,11 @@ const OverviewPageActions: FC<Props> = ({
   const link = createAbsoluteLink(inputLink);
 
   const groupSelector = groups && (
-    <div className="column is-flex">
+    <div className="column is-flex is-align-items-center">
       <Select
         ariaLabelledby={groupAriaLabelledby}
         className="is-fullwidth"
-        options={groups.map(g => ({ value: g, label: g }))}
+        options={groups.map((g) => ({ value: g, label: g }))}
         value={currentGroup}
         onChange={groupSelected}
       />
@@ -69,7 +69,7 @@ const OverviewPageActions: FC<Props> = ({
   const renderCreateButton = () => {
     if (showCreateButton) {
       return (
-        <div className={classNames("input-button", "control", "column")}>
+        <div className={classNames("input-button", "control", "column", "is-flex", "is-align-items-center")}>
           <Button label={label} link={createLink || `${link}create/`} color="primary" />
         </div>
       );
@@ -85,9 +85,9 @@ const OverviewPageActions: FC<Props> = ({
   };
 
   return (
-    <div className="columns is-tablet">
+    <div className="columns is-desktop">
       {groupSelector}
-      <div className="column">
+      <div className="column is-flex is-align-items-center">
         <FilterInput
           placeholder={searchPlaceholder}
           value={urls.getQueryStringFromLocation(location)}

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

@@ -19,6 +19,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { createAttributesForTesting } from "../devBuild";
 import classNames from "classnames";
+import { createA11yId } from "../createA11yId";
 
 type Props = {
   filter: (p: string) => void;
@@ -41,6 +42,7 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus,
   const [stateValue, setStateValue] = useState(value || "");
   const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout>>();
   const [t] = useTranslation("commons");
+  const labeldId = createA11yId("input");
 
   // TODO check dependencies
   useEffect(() => {
@@ -63,17 +65,19 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus,
   };
 
   return (
-    <form className={classNames("input-field", className)} onSubmit={handleSubmit}>
+    <form className={classNames("input-field is-flex is-align-items-center", className)} onSubmit={handleSubmit}>
+      <label className="mr-2 label" id={labeldId}>
+        {placeholder || t("filterEntries")}
+      </label>
       <div className="control has-icons-left">
         <FixedHeightInput
           className="input"
           type="search"
-          placeholder={placeholder || t("filterEntries")}
           value={stateValue}
           onChange={(event) => setStateValue(event.target.value)}
           autoFocus={autoFocus || false}
           aria-describedby={id}
-          aria-label={t("filterEntries")}
+          aria-labelledby={labeldId}
           {...createAttributesForTesting(testId)}
         />
         <span className="icon is-small is-left">

scm-ui/ui-components/src/layout/Page.tsx

@@ -85,7 +85,7 @@ export default class Page extends React.Component<Props> {
             <PageActionContainer
               className={classNames(
                 "column",
-                "is-three-fifths",
+                "is-three-quarters",
                 "is-mobile-action-spacing",
                 "is-flex-tablet",
                 "is-justify-content-flex-end",

scm-ui/ui-webapp/src/users/components/table/UserRow.tsx

@@ -26,10 +26,16 @@ type Props = {
   user: User;
 };
 
-const UserRowLink = React.forwardRef<HTMLAnchorElement, { to: string; children: string }>(({ children, to }, ref) => (
-  <Link ref={ref} to={to} {...createAttributesForTesting(children)}>
-    {children}
-  </Link>
+const UserRowLink = React.forwardRef<HTMLAnchorElement, { to?: string; children: string }>(({ children, to }, ref) => (
+  <>
+    {to ? (
+      <Link ref={ref} to={to} {...createAttributesForTesting(children)}>
+        {children}
+      </Link>
+    ) : (
+      <div {...createAttributesForTesting(children)}>{children}</div>
+    )}
+  </>
 ));
 const UserRow: FC<Props> = ({ user }) => {
   const ref = useKeyboardIteratorTarget();
@@ -49,10 +55,10 @@ const UserRow: FC<Props> = ({ user }) => {
           {user.name}
         </UserRowLink>
       </td>
-      <td className={classNames("is-hidden-mobile", "is-word-break")}>
-        <UserRowLink to={to}>{user.displayName}</UserRowLink>
+      <td className={classNames("is-word-break")}>
+        <UserRowLink>{user.displayName}</UserRowLink>
       </td>
-      <td className={classNames("is-hidden-mobile", "is-word-break")}>
+      <td className={classNames("is-word-break")}>
         {user.mail ? <a href={`mailto:${user.mail}`}>{user.mail}</a> : null}
       </td>
     </tr>

scm-ui/ui-webapp/src/users/components/table/UserTable.tsx

@@ -33,8 +33,8 @@ const UserTable: FC<Props> = ({ users }) => {
         <thead>
           <tr>
             <th>{t("user.name")}</th>
-            <th className="is-hidden-mobile">{t("user.displayName")}</th>
-            <th className="is-hidden-mobile">{t("user.mail")}</th>
+            <th>{t("user.displayName")}</th>
+            <th>{t("user.mail")}</th>
           </tr>
         </thead>
         <tbody>