IBX-1354: Styled empty subitems (#267)

Co-authored-by: Michał Grabowski <michal.grabowski@ibexa.co> Co-authored-by: Marek Nocoń <mnocon@users.noreply.github.com>
ibexa · Jan 31, 2022 · 8d09624 · 8d09624
1 parent 4ac4b31
commit 8d09624
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/no-items/no.items.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/no-items/no.items.component.js
@@ -3,7 +3,15 @@ import React from 'react';
 const NoItemsComponent = () => {
     const noItemsMessage = Translator.trans(/*@Desc("This location has no sub-items")*/ 'no_items.message', {}, 'sub_items');
 
-    return <div className="c-no-items">{noItemsMessage}</div>;
+    return (
+        <table className="ibexa-table table">
+            <tbody className="ibexa-table__body">
+                <td className="ibexa-table__empty-table-cell">
+                    <img className="ibexa-table__empty-table-image" src="/bundles/ibexaadminui/img/ibexa-empty-table.svg" />
+                </td>
+            </tbody>
+        </table>
+    );
 };
 
 export default NoItemsComponent;
diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js
@@ -1090,8 +1090,12 @@ export default class SubItemsModule extends Component {
      */
     renderPaginationInfo() {
         const { totalCount, activePageItems } = this.state;
-        const viewingCount = activePageItems ? activePageItems.length : 0;
 
+        if (totalCount === 0) {
+            return null;
+        }
+
+        const viewingCount = activePageItems ? activePageItems.length : 0;
         const message = Translator.trans(
             /*@Desc("Viewing %viewingCount% out of %totalCount% sub-items")*/ 'viewing_message',
             {
@@ -1114,6 +1118,11 @@ export default class SubItemsModule extends Component {
     renderPagination() {
         const { limit: itemsPerPage } = this.props;
         const { totalCount } = this.state;
+
+        if (totalCount === 0) {
+            return null;
+        }
+
         const { activePageIndex, activePageItems, isDuringBulkOperation } = this.state;
         const isActivePageLoaded = !!activePageItems;
         const isPaginationDisabled = !isActivePageLoaded || isDuringBulkOperation;
@@ -1184,7 +1193,10 @@ export default class SubItemsModule extends Component {
     }
 
     renderNoItems() {
-        if (this.state.totalCount) {
+        const { activePageItems, totalCount } = this.state;
+        const isActivePageLoaded = !!activePageItems;
+
+        if (totalCount || !isActivePageLoaded) {
             return null;
         }
 

diff --git a/src/lib/Behat/Component/SubItemsList.php b/src/lib/Behat/Component/SubItemsList.php
@@ -76,10 +76,14 @@ public function verifyIsLoaded(): void
         $this->getHTMLPage()->setTimeout(5)->waitUntilCondition(
             new ElementNotExistsCondition($this->getHTMLPage(), $this->getLocator('spinner'))
         );
-        $this->getHTMLPage()->find($this->getLocator('paginationInfo'))->mouseOver();
+
+        if ($this->getTable()->isEmpty()) {
+            return;
+        }
+
         $this->getHTMLPage()
             ->setTimeout(3)
-            ->find(new VisibleCSSLocator('paginationInfoVisible', $this->getLocator('paginationInfo')->getSelector()))
+            ->find($this->getLocator('paginationInfo'))
             ->assert()->textContains('Viewing');
     }
 
@@ -107,7 +111,7 @@ protected function specifyLocators(): array
     {
         return [
             new VisibleCSSLocator('table', '.m-sub-items'),
-            new VisibleCSSLocator('empty', '.c-no-items'),
+            new VisibleCSSLocator('empty', '.ibexa-table__empty-table-cell'),
             new VisibleCSSLocator('horizontalHeaders', '.m-sub-items .ibexa-table__header-cell'),
             new VisibleCSSLocator('paginationInfo', '.m-sub-items__pagination-info'),
             new CSSLocator('spinner', '.m-sub-items__spinner-wrapper'),