fix: Users table header displaying when no results (#36883)

pull/36861/head^2
Douglas Fabris 4 months ago committed by GitHub
parent bf14a53f85
commit 68764092ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      .changeset/two-planes-call.md
  2. 4
      apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
  3. 236
      apps/meteor/client/views/admin/users/UsersTable/__snapshots__/UsersTable.spec.tsx.snap

@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': patch
---
Fixes an issue where users table headers are being displayed when there's no results

@ -159,7 +159,6 @@ const UsersTable = ({
return (
<>
<UsersTableFilters roleData={roleData} setUsersFilters={setUserFilters} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
@ -168,7 +167,6 @@ const UsersTable = ({
</GenericTableBody>
</GenericTable>
)}
{isError && (
<GenericNoResults icon='warning' title={t('Something_went_wrong')} buttonTitle={t('Reload_page')} buttonAction={onReload} />
)}
@ -184,7 +182,7 @@ const UsersTable = ({
/>
)}
{isSuccess && !!users && (
{isSuccess && users.length > 0 && (
<>
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>

@ -1528,242 +1528,6 @@ exports[`renders NoResults without crashing 1`] = `
</div>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-qcmk2x"
>
<div
class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
data-overlayscrollbars="host"
>
<div
class="os-size-observer"
>
<div
class="os-size-observer-listener"
/>
</div>
<div
class=""
data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
tabindex="-1"
>
<div
class="rcx-box rcx-box--full rcx-table__wrapper"
>
<table
class="rcx-box rcx-box--full rcx-table--sticky rcx-table--fixed rcx-table"
>
<thead
class="rcx-box rcx-box--full rcx-table__head"
>
<tr
class="rcx-box rcx-box--full rcx-table__row"
>
<th
class="rcx-box rcx-box--full rcx-table__cell--clickable rcx-table__cell--header rcx-table__cell"
>
<div
class="rcx-box rcx-box--full rcx-css-127j9mz"
wrap="no-wrap"
>
Name
<svg
class="rcx-box rcx-box--full rcx-css-13s9wy"
fill="none"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.33337 5.99999L8.00004 3.33333L10.6667 5.99999"
stroke="#E4E7EA"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.33333"
/>
<path
d="M5.33337 10L8.00004 12.6667L10.6667 10"
stroke="#E4E7EA"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.33333"
/>
</svg>
</div>
</th>
<th
class="rcx-box rcx-box--full rcx-table__cell--clickable rcx-table__cell--header rcx-table__cell"
>
<div
class="rcx-box rcx-box--full rcx-css-127j9mz"
wrap="no-wrap"
>
Username
<svg
class="rcx-box rcx-box--full rcx-css-13s9wy"
fill="none"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.33337 5.99999L8.00004 3.33333L10.6667 5.99999"
stroke="#E4E7EA"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.33333"
/>
<path
d="M5.33337 10L8.00004 12.6667L10.6667 10"
stroke="#E4E7EA"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.33333"
/>
</svg>
</div>
</th>
<th
class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell rcx-css-1nngkbl"
>
<div
class="rcx-box rcx-box--full rcx-css-127j9mz"
wrap="no-wrap"
>
Actions
</div>
</th>
</tr>
</thead>
<tbody
class="rcx-box rcx-box--full rcx-table__body"
/>
</table>
</div>
</div>
<div
class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
>
<div
class="os-scrollbar-track"
>
<div
class="os-scrollbar-handle"
/>
</div>
</div>
<div
class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
>
<div
class="os-scrollbar-track"
>
<div
class="os-scrollbar-handle"
/>
</div>
</div>
</div>
</div>
<nav
class="rcx-box rcx-box--full rcx-pagination--divider rcx-pagination"
>
<div
class="rcx-box rcx-box--full rcx-pagination__left"
>
<span
class="rcx-box rcx-box--full rcx-pagination__label"
>
Items per page:
</span>
<ol
class="rcx-box rcx-box--full rcx-pagination__list"
>
<li
class="rcx-box rcx-box--full rcx-pagination__list-item"
>
<button
class="rcx-box rcx-box--full rcx-pagination__link"
disabled=""
tabindex="-1"
>
25
</button>
</li>
<li
class="rcx-box rcx-box--full rcx-pagination__list-item"
>
<button
class="rcx-box rcx-box--full rcx-pagination__link"
tabindex="0"
>
50
</button>
</li>
<li
class="rcx-box rcx-box--full rcx-pagination__list-item"
>
<button
class="rcx-box rcx-box--full rcx-pagination__link"
tabindex="0"
>
100
</button>
</li>
</ol>
</div>
<div
class="rcx-box rcx-box--full rcx-pagination__right"
>
<span
class="rcx-box rcx-box--full rcx-pagination__label"
>
Showing results 1 - 0 of 0
</span>
<ol
class="rcx-box rcx-box--full rcx-pagination__list"
>
<li
class="rcx-box rcx-box--full rcx-pagination__list-item"
>
<button
class="rcx-box rcx-box--full rcx-pagination__back"
disabled=""
>
<span
class="rcx-box rcx-box--full rcx-chevron--left rcx-chevron"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1g87xs3"
>
</i>
</span>
</button>
</li>
<li
class="rcx-box rcx-box--full rcx-pagination__list-item"
>
<button
class="rcx-box rcx-box--full rcx-pagination__forward"
>
<span
class="rcx-box rcx-box--full rcx-chevron--right rcx-chevron"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1g87xs3"
>
</i>
</span>
</button>
</li>
</ol>
</div>
</nav>
</div>
</body>
`;

Loading…
Cancel
Save