apps: port empty state to EmptyStatePanel

Babithakumari · Nov 4, 2021 · f013104 · f013104
1 parent 72b5867
commit f013104
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 34 deletions.
diff --git a/pkg/apps/application-list.jsx b/pkg/apps/application-list.jsx
@@ -33,6 +33,7 @@ import { RebootingIcon } from "@patternfly/react-icons";
 import * as PackageKit from "./packagekit.js";
 import { icon_url, show_error, launch, ProgressBar, CancelButton } from "./utils.jsx";
 import { ActionButton } from "./application.jsx";
+import { EmptyStatePanel } from "cockpit-components-empty-state.jsx";
 
 const _ = cockpit.gettext;
 
@@ -130,10 +131,7 @@ export const ApplicationList = ({ metainfo_db, appProgress, appProgressTitle, ac
         );
     }
 
-    if (comps.length === 0) {
-        const empty_caption = _("No applications installed or available");
-        tbody = <div className="app-list-empty">{empty_caption}</div>;
-    } else {
+    if (comps.length) {
         tbody = comps.map(c => <ApplicationRow comp={c} key={c.id}
                                                progress={appProgress[c.id]}
                                                progress_title={appProgressTitle[c.id]}
@@ -153,13 +151,15 @@ export const ApplicationList = ({ metainfo_db, appProgress, appProgressTitle, ac
                     </FlexItem>
                 </Flex>
             </PageSection>
-            <PageSection>
-                <Card>
-                    <DataList aria-label={_("Applications list")}>
-                        { tbody }
-                    </DataList>
-                </Card>
-            </PageSection>
+            {comps.length == 0
+                ? <EmptyStatePanel title={ _("No applications installed or available.") } />
+                : <PageSection>
+                    <Card>
+                        <DataList aria-label={_("Applications list")}>
+                            { tbody }
+                        </DataList>
+                    </Card>
+                </PageSection>}
         </Page>
     );
 };
diff --git a/pkg/apps/application.css b/pkg/apps/application.css
@@ -2,18 +2,6 @@
 
 /* Application list */
 
-.app-list-empty {
-    color: var(--ct-color-subtle-copy);
-    text-align: center;
-    border-top: 1px solid var(--ct-color-border);
-    border-bottom: 1px solid var(--ct-color-border);
-}
-
-.app-list-empty .spinner {
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
 .app-list img {
     width: 32px;
     height: 32px;

diff --git a/test/verify/check-apps b/test/verify/check-apps
@@ -97,7 +97,7 @@ class TestApps(PackageCase):
 
         m.start_cockpit()
         b.login_and_go("/apps", urlroot=urlroot)
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
 
         self.createAppStreamPackage("app-1", "1.0", "1")
         self.createAppStreamRepoPackage()
@@ -142,7 +142,7 @@ class TestApps(PackageCase):
 
         m.start_cockpit()
         b.login_and_go("/apps")
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
 
         m.execute("mkdir -p /usr/share/app-info/xmls")
         m.write("/usr/share/app-info/xmls/test.xml", """
@@ -204,7 +204,7 @@ class TestApps(PackageCase):
 
         m.start_cockpit()
         b.login_and_go("/apps")
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
 
         m.execute("mkdir -p /usr/share/app-info/xmls")
 
@@ -226,7 +226,7 @@ class TestApps(PackageCase):
     <pkgname>foo</pkgname>
   </component>
 </components>""")
-            b.wait_not_present(".app-list-empty")
+            b.wait_not_present(".pf-c-empty-state")
             b.wait_visible(".app-list .pf-c-data-list__item-row:contains('Summary')")
 
         # First lay down some good XML so that we can later detect the reaction to broken XML.
@@ -236,14 +236,14 @@ class TestApps(PackageCase):
         m.write("/usr/share/app-info/xmls/test.xml", """
 This <is <not XML.
 """)
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
         reset()
 
         # Not really AppStream
         m.write("/usr/share/app-info/xmls/test.xml", """
 <foo></foo>
 """)
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
         reset()
 
         # No origin
@@ -261,7 +261,7 @@ This <is <not XML.
     <pkgname>foo</pkgname>
   </component>
 </components>""")
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
         reset()
 
         # No package
@@ -278,7 +278,7 @@ This <is <not XML.
     <launchable type="cockpit-manifest">foo</launchable>
   </component>
 </components>""")
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
         reset()
 
         # No id
@@ -292,7 +292,7 @@ This <is <not XML.
     <pkgname>foo</pkgname>
   </component>
 </components>""")
-        b.wait_visible(".app-list-empty")
+        b.wait_visible(".pf-c-empty-state")
         reset()
 
         # Error (launchable without type) in earlier entry, shouldn't affect the later entry
@@ -321,7 +321,7 @@ This <is <not XML.
     <pkgname>foo</pkgname>
   </component>
 </components>""")
-        b.wait_not_present(".app-list-empty")
+        b.wait_not_present(".pf-c-empty-state")
         b.wait_visible(".app-list .pf-c-data-list__item-row:contains('Summary 2')")
 
 

diff --git a/test/verify/check-sosreport b/test/verify/check-sosreport
@@ -113,7 +113,7 @@ only-plugins=release,date,host,cgroups,networking
         self.allow_journal_messages(".*xml.*")
 
         self.login_and_go("/apps")
-        b.wait_not_present(".app-list-empty .spinner")
+        b.wait_not_present(".pf-c-empty-state")
         image_os = m.image.split('-')[0]
         if image_os in ['fedora', 'debian', 'ubuntu']:
             b.wait_visible(".app-list .pf-c-data-list__item-row div[rowId='Diagnostic reports']")