@truedat/auth 8.14.3 → 8.14.5

package/src/users/components/__tests__/__snapshots__/UserCard.spec.js.snap

@@ -1,62 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<UserCard /> matches the latest snapshot when showing UID 1`] = `
+exports[`<UserCard /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="ui card"
+    class="ui card td-card-base td-card--user"
   >
-    <div
-      class="content"
+    <a
+      aria-label="user.info.open"
+      class="content uc-card-link"
+      data-discover="true"
+      href="/users/1"
     >
-      <a
-        class="header"
-        data-discover="true"
-        href="/users/1"
+      <div
+        class="uc-summary"
+      >
+        <div
+          class="uc-avatar"
+        >
+          JB
+        </div>
+        <div
+          class="uc-name"
+          title="Joe Bloggs"
+        >
+          Joe Bloggs
+        </div>
+      </div>
+      <div
+        class="uc-meta-grid"
       >
         <i
           aria-hidden="true"
           class="user icon"
         />
-        joe
-      </a>
-      <div
-        class="description"
-      >
-        Joe Bloggs
-        <br />
-        joe@bloggs.net
+        <span
+          class="uc-username"
+        >
+          joe
+        </span>
+        <i
+          aria-hidden="true"
+          class="mail icon"
+        />
+        <span
+          class="uc-email"
+        >
+          joe@bloggs.net
+        </span>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<UserCard /> matches the latest snapshot when showing full name 1`] = `
-<div>
-  <div
-    class="ui card"
-  >
+    </a>
     <div
-      class="content"
+      class="uc-actions"
     >
       <a
-        class="header"
+        aria-label="users.actions.edit"
+        class="uc-action-btn"
         data-discover="true"
-        href="/users/1"
+        href="/users/1/edit"
+        title="users.actions.edit"
       >
         <i
           aria-hidden="true"
-          class="user icon"
+          class="pencil alternate icon"
         />
-        joe
+        <span
+          class="uc-action-label"
+        >
+          users.actions.edit
+        </span>
       </a>
-      <div
-        class="description"
+      <a
+        aria-label="user.actions.edit_password"
+        class="uc-action-btn uc-action-btn--key"
+        data-discover="true"
+        href="/users/1/password"
+        title="user.actions.edit_password"
       >
-        Joe Bloggs
-        <br />
-        joe@bloggs.net
-      </div>
+        <i
+          aria-hidden="true"
+          class="key icon"
+        />
+        <span
+          class="uc-action-label"
+        >
+          user.actions.edit_password
+        </span>
+      </a>
     </div>
   </div>
 </div>

package/src/users/components/__tests__/__snapshots__/UserCards.spec.js.snap

@@ -3,118 +3,418 @@
 exports[`<UserCards /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="ui input"
-  >
-    <input
-      placeholder="user.search.placeholder"
-      type="text"
-      value=""
-    />
-  </div>
-  <a
-    class="ui primary right floated button"
-    data-discover="true"
-    href="/users/new"
-    role="button"
-  >
-    <i
-      aria-hidden="true"
-      class="add user icon"
-    />
-    users.actions.create
-  </a>
-  <h3
-    class="ui dividing header"
-  >
-    user.type.admin
-  </h3>
-  <div
-    class="ui cards"
+    class="users-toolbar"
   >
     <div
-      class="ui card"
+      class="ui left icon input"
+    >
+      <i
+        aria-hidden="true"
+        class="search icon"
+      />
+      <input
+        placeholder="user.search.placeholder"
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      class="users-toolbar-actions"
     >
       <div
-        class="content"
+        aria-label="users.view.label"
+        class="ui buttons users-view-buttons"
+        role="group"
       >
-        <a
-          class="header"
-          data-discover="true"
-          href="/users/1"
+        <button
+          aria-pressed="true"
+          class="ui active primary button"
+          type="button"
         >
           <i
             aria-hidden="true"
-            class="user icon"
+            class="grid layout icon"
           />
-          user
-        </a>
-        <div
-          class="description"
+          users.view.cards
+        </button>
+        <button
+          aria-pressed="false"
+          class="ui button"
+          type="button"
         >
-          Pepito Pérez
-          <br />
-          email@email.com
-        </div>
+          <i
+            aria-hidden="true"
+            class="list icon"
+          />
+          users.view.table
+        </button>
       </div>
+      <a
+        class="ui primary button"
+        data-discover="true"
+        href="/users/new"
+        role="button"
+      >
+        <i
+          aria-hidden="true"
+          class="add user icon"
+        />
+        users.actions.create
+      </a>
     </div>
   </div>
-  <h3
-    class="ui dividing header"
-  >
-    user.type.user
-  </h3>
   <div
-    class="ui cards"
+    class="accordion ui fluid styled users-role-accordion"
   >
     <div
-      class="ui card"
+      class="active title users-role-title users-role-title--admin"
     >
-      <div
-        class="content"
+      <button
+        aria-controls="users-role-panel-admin"
+        aria-expanded="true"
+        class="users-role-toggle"
+        type="button"
       >
-        <a
-          class="header"
-          data-discover="true"
-          href="/users/2"
+        <span
+          class="users-role-title-content"
         >
           <i
             aria-hidden="true"
-            class="user icon"
+            class="angle up icon users-role-chevron"
           />
-          user2
-        </a>
+          <h3
+            class="ui header users-role-title-header"
+          >
+            <div
+              class="content"
+            >
+              user.type.admin
+            </div>
+          </h3>
+          <div
+            class="ui circular label users-role-count"
+          >
+            1
+          </div>
+        </span>
+      </button>
+      <div
+        class="users-results"
+        role="status"
+      >
         <div
-          class="description"
+          class="ui label"
         >
-          Miguel Muñoz
-          <br />
-          email2@email.com
+          users.results
         </div>
       </div>
     </div>
     <div
-      class="ui card"
+      class="content active users-role-content"
+      id="users-role-panel-admin"
     >
       <div
-        class="content"
+        class="ui cards users-role-card-group"
+      >
+        <div
+          class="ui card td-card-base td-card--user"
+        >
+          <a
+            aria-label="user.info.open"
+            class="content uc-card-link"
+            data-discover="true"
+            href="/users/1"
+          >
+            <div
+              class="uc-summary"
+            >
+              <div
+                class="uc-avatar"
+              >
+                PP
+              </div>
+              <div
+                class="uc-name"
+                title="Pepito Pérez"
+              >
+                Pepito Pérez
+              </div>
+            </div>
+            <div
+              class="uc-meta-grid"
+            >
+              <i
+                aria-hidden="true"
+                class="user icon"
+              />
+              <span
+                class="uc-username"
+              >
+                user
+              </span>
+              <i
+                aria-hidden="true"
+                class="mail icon"
+              />
+              <span
+                class="uc-email"
+              >
+                email@email.com
+              </span>
+            </div>
+          </a>
+          <div
+            class="uc-actions"
+          >
+            <a
+              aria-label="users.actions.edit"
+              class="uc-action-btn"
+              data-discover="true"
+              href="/users/1/edit"
+              title="users.actions.edit"
+            >
+              <i
+                aria-hidden="true"
+                class="pencil alternate icon"
+              />
+              <span
+                class="uc-action-label"
+              >
+                users.actions.edit
+              </span>
+            </a>
+            <a
+              aria-label="user.actions.edit_password"
+              class="uc-action-btn uc-action-btn--key"
+              data-discover="true"
+              href="/users/1/password"
+              title="user.actions.edit_password"
+            >
+              <i
+                aria-hidden="true"
+                class="key icon"
+              />
+              <span
+                class="uc-action-label"
+              >
+                user.actions.edit_password
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="active title users-role-title users-role-title--user"
+    >
+      <button
+        aria-controls="users-role-panel-user"
+        aria-expanded="true"
+        class="users-role-toggle"
+        type="button"
       >
-        <a
-          class="header"
-          data-discover="true"
-          href="/users/3"
+        <span
+          class="users-role-title-content"
         >
           <i
             aria-hidden="true"
-            class="user icon"
+            class="angle up icon users-role-chevron"
           />
-          user3
-        </a>
+          <h3
+            class="ui header users-role-title-header"
+          >
+            <div
+              class="content"
+            >
+              user.type.user
+            </div>
+          </h3>
+          <div
+            class="ui circular label users-role-count"
+          >
+            2
+          </div>
+        </span>
+      </button>
+    </div>
+    <div
+      class="content active users-role-content"
+      id="users-role-panel-user"
+    >
+      <div
+        class="ui cards users-role-card-group"
+      >
+        <div
+          class="ui card td-card-base td-card--user"
+        >
+          <a
+            aria-label="user.info.open"
+            class="content uc-card-link"
+            data-discover="true"
+            href="/users/2"
+          >
+            <div
+              class="uc-summary"
+            >
+              <div
+                class="uc-avatar"
+              >
+                MM
+              </div>
+              <div
+                class="uc-name"
+                title="Miguel Muñoz"
+              >
+                Miguel Muñoz
+              </div>
+            </div>
+            <div
+              class="uc-meta-grid"
+            >
+              <i
+                aria-hidden="true"
+                class="user icon"
+              />
+              <span
+                class="uc-username"
+              >
+                user2
+              </span>
+              <i
+                aria-hidden="true"
+                class="mail icon"
+              />
+              <span
+                class="uc-email"
+              >
+                email2@email.com
+              </span>
+            </div>
+          </a>
+          <div
+            class="uc-actions"
+          >
+            <a
+              aria-label="users.actions.edit"
+              class="uc-action-btn"
+              data-discover="true"
+              href="/users/2/edit"
+              title="users.actions.edit"
+            >
+              <i
+                aria-hidden="true"
+                class="pencil alternate icon"
+              />
+              <span
+                class="uc-action-label"
+              >
+                users.actions.edit
+              </span>
+            </a>
+            <a
+              aria-label="user.actions.edit_password"
+              class="uc-action-btn uc-action-btn--key"
+              data-discover="true"
+              href="/users/2/password"
+              title="user.actions.edit_password"
+            >
+              <i
+                aria-hidden="true"
+                class="key icon"
+              />
+              <span
+                class="uc-action-label"
+              >
+                user.actions.edit_password
+              </span>
+            </a>
+          </div>
+        </div>
         <div
-          class="description"
+          class="ui card td-card-base td-card--user"
         >
-          Rosa Martin
-          <br />
-          email3@email.com
+          <a
+            aria-label="user.info.open"
+            class="content uc-card-link"
+            data-discover="true"
+            href="/users/3"
+          >
+            <div
+              class="uc-summary"
+            >
+              <div
+                class="uc-avatar"
+              >
+                RM
+              </div>
+              <div
+                class="uc-name"
+                title="Rosa Martin"
+              >
+                Rosa Martin
+              </div>
+            </div>
+            <div
+              class="uc-meta-grid"
+            >
+              <i
+                aria-hidden="true"
+                class="user icon"
+              />
+              <span
+                class="uc-username"
+              >
+                user3
+              </span>
+              <i
+                aria-hidden="true"
+                class="mail icon"
+              />
+              <span
+                class="uc-email"
+              >
+                email3@email.com
+              </span>
+            </div>
+          </a>
+          <div
+            class="uc-actions"
+          >
+            <a
+              aria-label="users.actions.edit"
+              class="uc-action-btn"
+              data-discover="true"
+              href="/users/3/edit"
+              title="users.actions.edit"
+            >
+              <i
+                aria-hidden="true"
+                class="pencil alternate icon"
+              />
+              <span
+                class="uc-action-label"
+              >
+                users.actions.edit
+              </span>
+            </a>
+            <a
+              aria-label="user.actions.edit_password"
+              class="uc-action-btn uc-action-btn--key"
+              data-discover="true"
+              href="/users/3/password"
+              title="user.actions.edit_password"
+            >
+              <i
+                aria-hidden="true"
+                class="key icon"
+              />
+              <span
+                class="uc-action-label"
+              >
+                user.actions.edit_password
+              </span>
+            </a>
+          </div>
         </div>
       </div>
     </div>

package/src/users/components/__tests__/__snapshots__/UserGroupAclRow.spec.js.snap

@@ -10,14 +10,18 @@ exports[`<UserGroupAclRow /> matches the latest snapshot 1`] = `
         <td
           class=""
         >
-          <span>
-            resource1
+          <span
+            class="um-group-chip"
+          >
+            grupo1
           </span>
         </td>
         <td
           class=""
         >
-          grupo1
+          <span>
+            resource1
+          </span>
         </td>
         <td
           class=""

package/src/users/components/__tests__/__snapshots__/UserRoutes.spec.js.snap

@@ -71,10 +71,7 @@ exports[`<UserRoutes /> renders correctly with users/:id route 1`] = `
     UsersLoader
   </div>
   <div>
-    UserLoader
-  </div>
-  <div>
-    User
+    UsersAndGroups
   </div>
 </div>
 `;
@@ -85,10 +82,7 @@ exports[`<UserRoutes /> renders correctly with users/:id/edit route 1`] = `
     UsersLoader
   </div>
   <div>
-    UserLoader
-  </div>
-  <div>
-    EditUser
+    UsersAndGroups
   </div>
 </div>
 `;
@@ -99,10 +93,7 @@ exports[`<UserRoutes /> renders correctly with users/:id/password route 1`] = `
     UsersLoader
   </div>
   <div>
-    UserLoader
-  </div>
-  <div>
-    UserPassword
+    UsersAndGroups
   </div>
 </div>
 `;
@@ -113,7 +104,7 @@ exports[`<UserRoutes /> renders correctly with users/new route 1`] = `
     UsersLoader
   </div>
   <div>
-    NewUser
+    UsersAndGroups
   </div>
 </div>
 `;

package/src/users/hooks/useSortedGroups.js

@@ -0,0 +1,13 @@
+import _ from "lodash/fp";
+import { useMemo } from "react";
+import { useGroups } from "../../groups/hooks/useGroups";
+
+const caseInsensitiveName = ({ name }) => _.lowerCase(name);
+
+// Group options for the user forms, sorted as the former Redux `groups` state was.
+export const useSortedGroups = () => {
+  const { groups } = useGroups();
+  return useMemo(() => _.sortBy(caseInsensitiveName)(groups), [groups]);
+};
+
+export default useSortedGroups;