@truedat/auth 8.14.1 → 8.14.2

package/src/groups/components/__tests__/GroupUsersTable.spec.js

@@ -1,5 +1,5 @@
 import userEvent from "@testing-library/user-event";
-import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
+import { render } from "@truedat/test/render";
 import { waitForLoad } from "@truedat/test/waitForLoad";
 import { GroupUsersTable } from "../GroupUsersTable";
 
@@ -54,7 +54,7 @@ describe("<GroupUsersTable />", () => {
 
     // Click on the username column header to sort
     const usernameHeader = rendered.getByText(/user_name/i);
-    await userEvent.click(usernameHeader);
+    await userEvent.setup({ delay: null }).click(usernameHeader);
 
     // First row should now contain "auser_3" after sorting
     const firstRowCells = rendered.container.querySelectorAll(
@@ -63,3 +63,35 @@ describe("<GroupUsersTable />", () => {
     expect(firstRowCells[1].textContent).toContain("auser_3");
   });
 });
+
+it("fills external IDs from users arriving after group members and searches them", () => {
+  const groupUsers = [{ id: 9, full_name: "Ana", user_name: "ana" }];
+  const ui = render(<GroupUsersTable groupUsers={groupUsers} readOnly />);
+  expect(ui.queryByText("EXT-009")).not.toBeInTheDocument();
+  ui.rerender(
+    <GroupUsersTable
+      groupUsers={groupUsers}
+      users={[
+        { id: "9", external_id: "EXT-009" },
+        { id: 10, external_id: "OTHER" },
+      ]}
+      filter="ext-009"
+      readOnly
+    />,
+  );
+  expect(ui.getByText("EXT-009")).toBeInTheDocument();
+  expect(ui.container.querySelectorAll("tbody tr")).toHaveLength(1);
+  expect(ui.queryByText("OTHER")).not.toBeInTheDocument();
+});
+
+it("preserves an external ID already supplied by the group", () => {
+  const ui = render(
+    <GroupUsersTable
+      groupUsers={[{ id: 9, full_name: "Ana", external_id: "GROUP-ID" }]}
+      users={[{ id: 9, external_id: "DIRECTORY-ID" }]}
+      readOnly
+    />,
+  );
+  expect(ui.getByText("GROUP-ID")).toBeInTheDocument();
+  expect(ui.queryByText("DIRECTORY-ID")).not.toBeInTheDocument();
+});

package/src/groups/components/__tests__/__snapshots__/Group.spec.js.snap

@@ -50,6 +50,7 @@ exports[`<Group /> matches the latest snapshot 1`] = `
         >
           <button
             class="ui button"
+            type="button"
           >
             <i
               aria-hidden="true"

package/src/groups/components/__tests__/__snapshots__/GroupCard.spec.js.snap

@@ -2,50 +2,52 @@
 
 exports[`<GroupCard /> matches the latest snapshot 1`] = `
 <div>
-  <div
-    class="ui card"
+  <article
+    class="td-group-card"
   >
-    <div
-      class="content"
+    <a
+      class="gc-content"
+      data-discover="true"
+      href="/groups/1"
     >
-      <a
-        class="header"
-        data-discover="true"
-        href="/groups/1"
+      <span
+        aria-hidden="true"
+        class="gc-avatar"
       >
         <i
           aria-hidden="true"
-          class="group icon"
+          class="users icon"
         />
+      </span>
+      <h3>
         administrators
-      </a>
-      <div
-        class="description"
+      </h3>
+      <p
+        class="gc-description"
       >
         Administrators
-      </div>
-    </div>
+      </p>
+    </a>
     <div
-      class="extra content"
+      class="gc-actions"
     >
-      <div
-        class="ui two buttons"
+      <a
+        aria-label="actions.edit"
+        data-discover="true"
+        href="/groups/1/edit"
+        title="actions.edit"
       >
-        <a
-          class="ui green basic button"
-          data-discover="true"
-          href="/groups/1/edit"
-          role="button"
+        <i
+          aria-hidden="true"
+          class="pencil alternate icon"
+        />
+        <span
+          class="gc-action-label"
         >
           actions.edit
-        </a>
-        <button
-          class="ui basic negative button"
-        >
-          actions.delete
-        </button>
-      </div>
+        </span>
+      </a>
     </div>
-  </div>
+  </article>
 </div>
 `;

package/src/groups/components/__tests__/__snapshots__/GroupCards.spec.js.snap

@@ -3,122 +3,135 @@
 exports[`<GroupCards /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="ui cards"
+    class="groups-toolbar"
   >
     <a
-      class="ui link card create group"
+      class="ui primary button group-create-button"
       data-discover="true"
       href="/groups/new"
+      role="button"
     >
-      <div
-        class="center aligned content"
+      <span
+        aria-hidden="true"
+        class="group-create-icon"
       >
-        <div
-          class="header"
-        >
-          groups.actions.create
-        </div>
-        <div
-          class="description"
+        <i
+          aria-hidden="true"
+          class="users icon"
+        />
+        <svg
+          focusable="false"
+          viewBox="0 0 16 16"
         >
-          <i
-            aria-hidden="true"
-            class="add massive icon"
-            floated="center"
+          <path
+            d="M8 3v10M3 8h10"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2"
           />
-        </div>
-      </div>
+        </svg>
+      </span>
+      groups.actions.create
     </a>
-    <div
-      class="ui card"
+  </div>
+  <div
+    class="groups-card-list"
+  >
+    <article
+      class="td-group-card"
     >
-      <div
-        class="content"
+      <a
+        class="gc-content"
+        data-discover="true"
+        href="/groups/1"
       >
-        <a
-          class="header"
-          data-discover="true"
-          href="/groups/1"
+        <span
+          aria-hidden="true"
+          class="gc-avatar"
         >
           <i
             aria-hidden="true"
-            class="group icon"
+            class="users icon"
           />
+        </span>
+        <h3>
           administrators
-        </a>
-        <div
-          class="description"
+        </h3>
+        <p
+          class="gc-description"
         >
           Administrators
-        </div>
-      </div>
+        </p>
+      </a>
       <div
-        class="extra content"
+        class="gc-actions"
       >
-        <div
-          class="ui two buttons"
+        <a
+          aria-label="actions.edit"
+          data-discover="true"
+          href="/groups/1/edit"
+          title="actions.edit"
         >
-          <a
-            class="ui green basic button"
-            data-discover="true"
-            href="/groups/1/edit"
-            role="button"
+          <i
+            aria-hidden="true"
+            class="pencil alternate icon"
+          />
+          <span
+            class="gc-action-label"
           >
             actions.edit
-          </a>
-          <button
-            class="ui basic negative button"
-          >
-            actions.delete
-          </button>
-        </div>
+          </span>
+        </a>
       </div>
-    </div>
-    <div
-      class="ui card"
+    </article>
+    <article
+      class="td-group-card"
     >
-      <div
-        class="content"
+      <a
+        class="gc-content"
+        data-discover="true"
+        href="/groups/2"
       >
-        <a
-          class="header"
-          data-discover="true"
-          href="/groups/2"
+        <span
+          aria-hidden="true"
+          class="gc-avatar"
         >
           <i
             aria-hidden="true"
-            class="group icon"
+            class="users icon"
           />
+        </span>
+        <h3>
           users
-        </a>
-        <div
-          class="description"
+        </h3>
+        <p
+          class="gc-description"
         >
           Regular users
-        </div>
-      </div>
+        </p>
+      </a>
       <div
-        class="extra content"
+        class="gc-actions"
       >
-        <div
-          class="ui two buttons"
+        <a
+          aria-label="actions.edit"
+          data-discover="true"
+          href="/groups/2/edit"
+          title="actions.edit"
         >
-          <a
-            class="ui green basic button"
-            data-discover="true"
-            href="/groups/2/edit"
-            role="button"
+          <i
+            aria-hidden="true"
+            class="pencil alternate icon"
+          />
+          <span
+            class="gc-action-label"
           >
             actions.edit
-          </a>
-          <button
-            class="ui basic negative button"
-          >
-            actions.delete
-          </button>
-        </div>
+          </span>
+        </a>
       </div>
-    </div>
+    </article>
   </div>
 </div>
 `;

package/src/groups/components/__tests__/__snapshots__/GroupUsers.spec.js.snap

@@ -25,19 +25,83 @@ exports[`<GroupUsers /> matches the latest snapshot 1`] = `
     <div
       class="ui hidden divider"
     />
-    <h4
-      class="ui header"
+    <table
+      class="ui sortable unstackable table group-users-table"
     >
-      <i
-        aria-hidden="true"
-        class="search icon"
-      />
-      <div
-        class="content"
+      <thead
+        class=""
+      >
+        <tr
+          class=""
+        >
+          <th
+            class="two wide ascending sorted"
+            tabindex="0"
+          >
+            <div
+              class="group-column-heading"
+            >
+              <span>
+                user.props.full_name
+              </span>
+            </div>
+          </th>
+          <th
+            class="two wide"
+            tabindex="0"
+          >
+            <div
+              class="group-column-heading"
+            >
+              <span>
+                user.props.user_name
+              </span>
+            </div>
+          </th>
+          <th
+            class="two wide"
+            tabindex="0"
+          >
+            <div
+              class="group-column-heading"
+            >
+              <span>
+                user.props.email
+              </span>
+            </div>
+          </th>
+          <th
+            class="two wide"
+            tabindex="0"
+          >
+            <div
+              class="group-column-heading"
+            >
+              <span>
+                user.form.external_id
+              </span>
+            </div>
+          </th>
+          <th
+            class="one wide"
+          />
+        </tr>
+      </thead>
+      <tbody
+        class=""
       >
-        groupUsers.search.results.empty
-      </div>
-    </h4>
+        <tr
+          class=""
+        >
+          <td
+            class=""
+            colspan="5"
+          >
+            groupUsers.search.results.empty
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </div>
 `;

package/src/groups/components/__tests__/__snapshots__/GroupUsersTable.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
 <div>
   <table
-    class="ui sortable table"
+    class="ui sortable unstackable table group-users-table"
   >
     <thead
       class=""
@@ -13,18 +13,51 @@ exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
       >
         <th
           class="two wide ascending sorted"
+          tabindex="0"
         >
-          user.props.full_name
+          <div
+            class="group-column-heading"
+          >
+            <span>
+              user.props.full_name
+            </span>
+          </div>
+        </th>
+        <th
+          class="two wide"
+          tabindex="0"
+        >
+          <div
+            class="group-column-heading"
+          >
+            <span>
+              user.props.user_name
+            </span>
+          </div>
         </th>
         <th
           class="two wide"
+          tabindex="0"
         >
-          user.props.user_name
+          <div
+            class="group-column-heading"
+          >
+            <span>
+              user.props.email
+            </span>
+          </div>
         </th>
         <th
           class="two wide"
+          tabindex="0"
         >
-          user.props.email
+          <div
+            class="group-column-heading"
+          >
+            <span>
+              user.form.external_id
+            </span>
+          </div>
         </th>
         <th
           class="one wide"
@@ -40,7 +73,10 @@ exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
         <td
           class="two wide pointer"
         >
-          <a>
+          <a
+            data-discover="true"
+            href="/users/4"
+          >
             a user 3
           </a>
         </td>
@@ -54,15 +90,20 @@ exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
         >
           test3@test.com
         </td>
+        <td
+          class="two wide"
+        />
         <td
           class="center aligned pointer"
         >
           <button
-            class="ui red mini basic icon button"
+            aria-label="groupUsers.actions.delete.confirmation.header"
+            class="ui mini basic icon negative button"
+            type="button"
           >
             <i
               aria-hidden="true"
-              class="red trash alternate outline icon"
+              class="trash alternate outline icon"
             />
           </button>
         </td>
@@ -73,7 +114,10 @@ exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
         <td
           class="two wide pointer"
         >
-          <a>
+          <a
+            data-discover="true"
+            href="/users/9"
+          >
             user 1
           </a>
         </td>
@@ -87,15 +131,20 @@ exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
         >
           test1@test.com
         </td>
+        <td
+          class="two wide"
+        />
         <td
           class="center aligned pointer"
         >
           <button
-            class="ui red mini basic icon button"
+            aria-label="groupUsers.actions.delete.confirmation.header"
+            class="ui mini basic icon negative button"
+            type="button"
           >
             <i
               aria-hidden="true"
-              class="red trash alternate outline icon"
+              class="trash alternate outline icon"
             />
           </button>
         </td>
@@ -106,7 +155,10 @@ exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
         <td
           class="two wide pointer"
         >
-          <a>
+          <a
+            data-discover="true"
+            href="/users/3"
+          >
             user 2
           </a>
         </td>
@@ -120,15 +172,20 @@ exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
         >
           test2@test.com
         </td>
+        <td
+          class="two wide"
+        />
         <td
           class="center aligned pointer"
         >
           <button
-            class="ui red mini basic icon button"
+            aria-label="groupUsers.actions.delete.confirmation.header"
+            class="ui mini basic icon negative button"
+            type="button"
           >
             <i
               aria-hidden="true"
-              class="red trash alternate outline icon"
+              class="trash alternate outline icon"
             />
           </button>
         </td>

package/src/groups/components/index.js

@@ -3,8 +3,6 @@ import Group from "./Group";
 import GroupCard from "./GroupCard";
 import GroupCards from "./GroupCards";
 import GroupForm from "./GroupForm";
-import GroupLoader from "./GroupLoader";
-import GroupsLoader from "./GroupsLoader";
 import GroupsSearchLoader from "./GroupsSearchLoader";
 import GroupUsers from "./GroupUsers";
 import GroupUsersTable from "./GroupUsersTable";
@@ -16,10 +14,8 @@ export {
   GroupCard,
   GroupCards,
   GroupForm,
-  GroupLoader,
   GroupUsers,
   GroupUsersTable,
-  GroupsLoader,
   GroupsSearchLoader,
   NewGroup,
 };