accounts: Move overview layout to PF6

Author: Venefilyn

pkg/users/account-details.js

@@ -400,7 +400,7 @@ export const AccountGroupsSelect = ({ name, loggedIn, groups }) => {
                 {(selected || []).map((currentLabel, index) => {
                     return (
                         <Label key={currentLabel}
-                               color={groups.find(group => group.name === currentLabel).isAdmin ? "gold" : "cyan"}
+                               color={groups.find(group => group.name === currentLabel).isAdmin ? "yellow" : "blue"}
                         >
                             {currentLabel}
                         </Label>
@@ -427,7 +427,7 @@ export const AccountGroupsSelect = ({ name, loggedIn, groups }) => {
                           return {
                               value: option.name,
                               content: option.name,
-                              color: option.isAdmin ? "gold" : "cyan",
+                              color: option.isAdmin ? "yellow" : "blue",
                               isDisabled: option.name == primaryGroupName,
                           };
                       })}

pkg/users/accounts-list.js

@@ -87,9 +87,9 @@ const UserActions = ({ account, current }) => {
 const getGroupRow = (group, accounts) => {
     let groupColorClass;
     if (group.isAdmin)
-        groupColorClass = "group-gold";
+        groupColorClass = "group-yellow";
     else if (group.members > 0)
-        groupColorClass = "group-cyan";
+        groupColorClass = "group-blue";
     else
         groupColorClass = "group-grey";
 
@@ -147,7 +147,7 @@ const getGroupRow = (group, accounts) => {
 const getAccountRow = (account, current, groups) => {
     const userGroups = groups.filter(group => group.gid === account.gid || group.userlist.find(accountName => accountName === account.name));
     const userGroupLabels = userGroups.map(group => {
-        const color = group.isAdmin ? "gold" : "cyan";
+        const color = group.isAdmin ? "yellow" : "blue";
         return (
             <Label key={group.name} variant="filled" color={color}>
                 {!group.isAdmin ? group.name : ("admin" + " (" + group.name + ")") }
@@ -319,7 +319,7 @@ const GroupsList = ({ groups, accounts, isExpanded, setIsExpanded, min_gid, max_
                     {(!isExpanded && filtered_groups.length > 0) && <>
                         {filtered_groups.slice(0, 3)
                                 .map(group => {
-                                    const color = group.isAdmin ? "gold" : "cyan";
+                                    const color = group.isAdmin ? "yellow" : "blue";
                                     return (
                                         <Label key={group.name} variant="filled" color={color}>
                                             {group.name + ": " + (group.userlistPrimary.length + group.userlist.length)}
@@ -471,7 +471,7 @@ export const AccountsMain = ({ accountsInfo, current_user, groups, isGroupsExpan
     });
 
     return (
-        <Page id="accounts">
+        <Page id="accounts" className='no-masthead-sidebar'>
             <PageSection hasBodyWrapper={false}>
                 <Stack hasGutter>
                     <GroupsList accounts={accounts} groups={groups} isExpanded={isGroupsExpanded} setIsExpanded={setIsGroupsExpanded} min_gid={min_gid} max_gid={max_gid} />

pkg/users/rename-group-dialog.jsx

@@ -24,6 +24,7 @@ import { HelperText, HelperTextItem } from "@patternfly/react-core/dist/esm/comp
 import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput/index.js";
 
 import { apply_modal_dialog, show_modal_dialog } from "cockpit-components-dialog.jsx";
+import { Alert } from '@patternfly/react-core';
 
 const _ = cockpit.gettext;
 
@@ -60,7 +61,6 @@ export function rename_group_dialog(group) {
             title: cockpit.format(_("Rename group $0"), group),
             body: <RenameGroupDialogBody state={state} change={change} />,
             variant: 'small',
-            titleIconVariant: 'warning',
         };
 
         const footer = {

pkg/users/users.scss

@@ -23,7 +23,7 @@
 }
 
 .delete-resource-red {
-  color: var(--pf-v5-global--danger-color--200);
+  color: var(--pf-t--global--icon--color--status--danger--default);
 }
 
 #account-details div.checkbox:first-child {
@@ -82,39 +82,50 @@
 }
 
 // Iterate through supported PF color names for light and dark modes
-@each $color in cyan gold {
+@each $color in blue yellow {
   .group-#{"" + $color} {
-    background-color: var(--pf-v5-global--palette--#{$color}-100);
+    background-color: var(--pf-t--color--#{$color}--30);
 
     .pf-v6-theme-dark & {
-      background-color: var(--pf-v5-global--palette--#{$color}-300);
+      background-color: var(--pf-t--color--#{$color}--40);
     }
   }
 }
-// PF adapts this color properly across light and dark
+.group-blue {
+  background-color: var(--pf-t--global--color--nonstatus--blue--default);
+}
+
+.group-yellow {
+  background-color: var(--pf-t--global--color--nonstatus--yellow--default);
+}
+
 .group-grey {
-  background-color: var(--pf-v5-global--BorderColor--100);
+  background-color: var(--pf-t--global--color--nonstatus--gray--default);
 }
 
 .group-more-btn {
-  font-size: var(--pf-v5-global--FontSize--sm);
+  font-size: var(--pf-t--global--font--size--body--default);
 }
 
 #groups-list td:first-child {
   vertical-align: middle;
 }
 
-#groups-create, #account-create {
+// Create new group and Create new account are
+// different characters and different lengths
+// This makes buttons the same size.
+#groups-create, #accounts-create {
   min-inline-size: 11rem;
 }
 
-#group-confirm-delete-dialog .list-item {
-  margin-inline-end: var(--pf-v5-global--spacer--lg);
-}
+// @Venefilyn: Seemingly does nothing atm
+// #group-confirm-delete-dialog .list-item {
+//   margin-inline-end: var(--pf-v5-global--spacer--lg);
+// }
 
 // We cannot use the PF helper pf-v6-u-ml-lg here, as it doesn't support RTL yet
 #current-account-badge {
-  margin-inline-start: var(--pf-v5-global--spacer--lg);
+  margin-inline-start: var(--pf-t--global--spacer--lg);
 }
 
 // Pretty sure paths are LTR, even in an RTL display

test/verify/check-users

@@ -371,11 +371,11 @@ class TestAccounts(testlib.MachineCase):
         b.wait_not_present("#accounts-list tbody tr:contains(robert) td[data-label='Group'] .pf-v6-c-label:contains(users)")
         if not m.ostree_image:  # Users group does not exist in coreos image
             m.execute("/usr/bin/gpasswd -a robert users")
-            b.wait_in_text("#accounts-list tbody tr:contains(robert) td[data-label='Group'] .pf-v6-c-label.pf-m-cyan:contains(users)", "users")
+            b.wait_in_text("#accounts-list tbody tr:contains(robert) td[data-label='Group'] .pf-v6-c-label.pf-m-blue:contains(users)", "users")
         m.execute(f"/usr/bin/gpasswd -a robert {m.get_admin_group()}")
-        b.wait_in_text("#accounts-list tbody tr:contains(robert) td[data-label='Group'] .pf-v6-c-label.pf-m-gold", m.get_admin_group())
+        b.wait_in_text("#accounts-list tbody tr:contains(robert) td[data-label='Group'] .pf-v6-c-label.pf-m-yellow", m.get_admin_group())
         m.execute(f"/usr/bin/gpasswd -d robert {m.get_admin_group()}")
-        b.wait_not_present("#accounts-list tbody tr:contains(robert) td[data-label='Group'] .pf-v6-c-label.pf-m-gold")
+        b.wait_not_present("#accounts-list tbody tr:contains(robert) td[data-label='Group'] .pf-v6-c-label.pf-m-yellow")
 
         # test filters
         b.set_input_text("#accounts-filter input", "root")
@@ -1190,8 +1190,8 @@ class TestAccounts(testlib.MachineCase):
 
         # Delete it
         performGroupAction(b, 'testgroup0', 'Delete group')
-        b.wait_text("#group-confirm-delete-dialog footer .pf-v5-c-button.apply", "Delete")
-        b.click("#group-confirm-delete-dialog footer .pf-v5-c-button.apply")
+        b.wait_text("#group-confirm-delete-dialog footer .pf-v6-c-button.apply", "Delete")
+        b.click("#group-confirm-delete-dialog footer .pf-v6-c-button.apply")
         b.wait_not_present('#group-confirm-delete-dialog')
         b.wait_not_in_text('#groups-list', "testgroup0")
 
@@ -1200,9 +1200,9 @@ class TestAccounts(testlib.MachineCase):
 
         # Groups used as primary need force deletion
         performGroupAction(b, 'anton', 'Delete group')
-        b.wait_text("#group-confirm-delete-dialog footer .pf-v5-c-button.apply", "Force delete")
+        b.wait_text("#group-confirm-delete-dialog footer .pf-v6-c-button.apply", "Force delete")
         b.assert_pixels("#group-confirm-delete-dialog", "group-delete-dialog")
-        b.click("#group-confirm-delete-dialog footer .pf-v5-c-button.apply")
+        b.click("#group-confirm-delete-dialog footer .pf-v6-c-button.apply")
         b.wait_not_present('#account-confirm-delete-dialog')
         b.wait(lambda: "#/" == b.eval_js('window.location.hash'))
         b.wait_not_in_text('#groups-list', "anton")