Show user and group information in the footer

In the folder icon view you where not able to see the owner/group of the
selected file or folder since the removal of the sidebar.

Closes: #846

src/files-footer-detail.tsx

@@ -9,6 +9,7 @@ import { Text } from "@patternfly/react-core/dist/esm/components/Text";
 import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip";
 
 import cockpit from "cockpit";
+import type { FileInfo } from "cockpit/fsinfo.ts";
 import * as timeformat from "timeformat";
 
 import { useFilesContext } from './app.tsx';
@@ -70,7 +71,11 @@ export const FilesFooterDetail = ({
     const selectedFile = (selected.length === 1) ? selected[0] : cwdInfo;
 
     let permsPopover = null;
+    let userGroup = null;
+
     if (selectedFile.mode !== undefined) {
+        userGroup = <UserGroupPopover file={selectedFile} />;
+
         const mode = selectedFile.mode;
         const popoverBody = [_("Owner"), _("Group"), _("Others")].map((permGroup, i) => {
             return (
@@ -119,7 +124,47 @@ export const FilesFooterDetail = ({
                     {timeformat.distanceToNow(selectedFile.mtime * 1000)}
                 </Text>
             </Tooltip>}
+            {userGroup}
             {permsPopover}
         </div>
     );
 };
+
+const UserGroupPopover = ({ file }: { file: FileInfo }) => (
+    <Popover
+      id="files-footer-usergroup-popover"
+      hasAutoWidth
+      bodyContent={
+          <DescriptionList
+            isHorizontal
+            isCompact
+          >
+              <DescriptionListGroup key="user">
+                  <DescriptionListTerm>
+                      {_("User")}
+                  </DescriptionListTerm>
+                  <DescriptionListDescription>
+                      {file.user}
+                  </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup key="group">
+                  <DescriptionListTerm>
+                      {_("Group")}
+                  </DescriptionListTerm>
+                  <DescriptionListDescription>
+                      {file.group}
+                  </DescriptionListDescription>
+              </DescriptionListGroup>
+          </DescriptionList>
+      }
+    >
+        <Button
+          id="files-footer-owner"
+          variant="link"
+          isInline
+          component="pre"
+        >
+            {(file.user === file.group) ? file.user : `${file.user}:${file.group}`}
+        </Button>
+    </Popover>
+);

test/check-application

@@ -333,6 +333,7 @@ class TestFiles(testlib.MachineCase):
         b.wait_in_text("#files-footer-permissions", "rwx r-x r-x")
         m.execute("chmod 700 /home/admin/newdir")
         b.wait_in_text("#files-footer-permissions", "rwx --- ---")
+        b.wait_in_text("#files-footer-owner", "root")
 
         # Also check popover
         b.click("#files-footer-permissions")
@@ -342,6 +343,22 @@ class TestFiles(testlib.MachineCase):
         b.click(".pf-v5-c-popover__close > button")
         b.wait_not_present(".pf-v5-c-popover")
 
+        b.click("#files-footer-owner")
+        b.wait_in_text(".pf-v5-c-popover dl div:nth-child(1) > dd", "root")
+        b.wait_in_text(".pf-v5-c-popover dl div:nth-child(2) > dd", "root")
+        b.click(".pf-v5-c-popover__close > button")
+        b.wait_not_present(".pf-v5-c-popover")
+
+        # Change group is shown in popover
+        m.execute("chown root:admin /home/admin/newdir")
+        b.wait_in_text("#files-footer-owner", "root:admin")
+
+        b.click("#files-footer-owner")
+        b.wait_in_text(".pf-v5-c-popover dl div:nth-child(1) > dd", "root")
+        b.wait_in_text(".pf-v5-c-popover dl div:nth-child(2) > dd", "admin")
+        b.click(".pf-v5-c-popover__close > button")
+        b.wait_not_present(".pf-v5-c-popover")
+
         # Change last edit time on cwd
         m.execute("touch -d '2 hours ago' /home/admin/newdir")
         b.wait_in_text(".files-footer-mtime", "2 hours ago")
@@ -380,6 +397,7 @@ class TestFiles(testlib.MachineCase):
         b.click("[data-item='newdir']")
         b.wait_in_text(".files-footer-info", "newdir")
         b.wait_in_text("#files-footer-permissions", "rwx --- ---")
+        b.wait_in_text("#files-footer-owner", "root")
 
         # Select multiple files
         m.execute("touch /home/admin/newfile.txt")