From 1147609a8c4de71e9029ed1230399b3db3c4d58b Mon Sep 17 00:00:00 2001
From: Subho <contact.subhoghosh@gmail.com>
Date: Thu, 14 Sep 2023 16:33:56 +0530
Subject: [PATCH] Show toolbox & distrobox containers different in containers
 listing

fixes #865
---
 src/Containers.jsx     |  8 +++++++-
 src/podman.scss        | 20 ++++++++++++++++++++
 test/check-application | 21 +++++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/Containers.jsx b/src/Containers.jsx
index 7057f2369..4096648d9 100644
--- a/src/Containers.jsx
+++ b/src/Containers.jsx
@@ -375,6 +375,8 @@ class Containers extends React.Component {
     renderRow(containersStats, container, localImages) {
         const containerStats = containersStats[container.Id + container.isSystem.toString()];
         const image = container.ImageName;
+        const isToolboxContainer = container.Config?.Labels?.["com.github.containers.toolbox"] === "true";
+        const isDistroboxContainer = container.Config?.Labels?.manager === "distrobox";
         let localized_health = null;
 
         // this needs to get along with stub containers from image run dialog, where most properties don't exist yet
@@ -397,7 +399,11 @@ class Containers extends React.Component {
         }
         const info_block = (
             <div className="container-block">
-                <span className="container-name">{container.Name}</span>
+                <Flex alignItems={{ default: 'alignItemsCenter' }}>
+                    <span className="container-name">{container.Name}</span>
+                    {isToolboxContainer && <Badge className='ct-badge-toolbox'>toolbox</Badge>}
+                    {isDistroboxContainer && <Badge className='ct-badge-distrobox'>distrobox</Badge>}
+                </Flex>
                 <small>{image}</small>
                 <small>{utils.quote_cmdline(container.Config?.Cmd)}</small>
             </div>
diff --git a/src/podman.scss b/src/podman.scss
index 71b60fe94..9c0b08f21 100644
--- a/src/podman.scss
+++ b/src/podman.scss
@@ -69,6 +69,26 @@
   color: white;
 }
 
+.ct-badge-toolbox {
+    background-color: var(--pf-v5-global--palette--purple-100);
+    color: var(--pf-v5-global--palette--purple-600);
+
+    .pf-v5-theme-dark & {
+        background-color: var(--pf-v5-global--palette--purple-500);
+        color: white;
+    }
+}
+
+.ct-badge-distrobox {
+    background-color: var(--pf-v5-global--palette--gold-100);
+    color: var(--pf-v5-global--palette--gold-600);
+
+    .pf-v5-theme-dark & {
+        background-color: var(--pf-v5-global--palette--gold-500);
+        color: white;
+    }
+}
+
 .green {
     color: var(--pf-v5-global--success-color--100);
 }
diff --git a/test/check-application b/test/check-application
index b8d3aff1d..3c5bada1d 100755
--- a/test/check-application
+++ b/test/check-application
@@ -2607,6 +2607,27 @@ class TestApplication(testlib.MachineCase):
         for i in range(31):
             self.execute(True, f"podman rm -f container{i}")
 
+    def testSpecialContainers(self):
+        m = self.machine
+        b = self.browser
+
+        toolbox_label = "com.github.containers.toolbox=true"
+        distrobox_label = "manager=distrobox"
+
+        container_1_id = m.execute(f"podman run -d --name container_1 -l {toolbox_label} {IMG_BUSYBOX}").strip()
+        container_2_id = m.execute(f"podman run -d --name container_2 -l {distrobox_label} {IMG_BUSYBOX}").strip()
+
+        self.login()
+
+        self.waitContainerRow('container_1')
+        self.waitContainerRow('container_2')
+
+        container_1_sel = f"#containers-containers tbody tr[data-row-id=\"{container_1_id}{'true'}\"]"
+        container_2_sel = f"#containers-containers tbody tr[data-row-id=\"{container_2_id}{'true'}\"]"
+
+        b.wait_visible(container_1_sel + " .ct-badge-toolbox:contains('toolbox')")
+        b.wait_visible(container_2_sel + " .ct-badge-distrobox:contains('distrobox')")
+
     def testCreatePodSystem(self):
         self._createPod(True)