Merge branch 'master' into essntl-5210

src/components/GeneralInfo/EditButton/EditButton.js

@@ -19,7 +19,7 @@ const InnerButton = ({ link, onClick }) => (
     onClick={onClick}
     className="ins-c-inventory__detail--action"
     aria-label="Edit"
-    variant="plain"
+    variant="link"
   >
     <PencilAltIcon />
   </Button>

src/components/GeneralInfo/InfoTable/InfoTable.js

@@ -153,7 +153,7 @@ class InfoTable extends Component {
         ) : (
           <TextContent>
             {prepareRows(activeRows, pagination).map((row, key) => (
-              <Text component={TextVariants.small} key={key}>
+              <Text component={TextVariants.p} key={key}>
                 {row.title || row}
               </Text>
             ))}

src/components/GeneralInfo/InfoTable/__snapshots__/InfoTable.test.js.snap

@@ -8229,19 +8229,19 @@ exports[`InfoTable should render one cell 1`] = `
   />
   <TextContent>
     <Text
-      component="small"
+      component="p"
       key="0"
     >
       first
     </Text>
     <Text
-      component="small"
+      component="p"
       key="1"
     >
       second from title
     </Text>
     <Text
-      component="small"
+      component="p"
       key="2"
     >
       multiple

src/components/GroupSystems/GroupSystems.js

@@ -133,7 +133,6 @@ const GroupSystems = ({ groupName, groupId }) => {
         <AddSystemsToGroupModal
           isModalOpen={addToGroupModalOpen}
           setIsModalOpen={(value) => {
-            resetTable();
             setAddToGroupModalOpen(value);
           }}
           groupId={groupId}
@@ -145,6 +144,7 @@ const GroupSystems = ({ groupName, groupId }) => {
           isModalOpen={removeHostsFromGroupModalOpen}
           setIsModalOpen={setRemoveHostsFromGroupModalOpen}
           modalState={currentSystem}
+          reloadTimeout={1000}
           reloadData={() => {
             if (calculateSelected() > 0) {
               dispatch(selectEntity(-1, false));
@@ -158,6 +158,7 @@ const GroupSystems = ({ groupName, groupId }) => {
         <InventoryTable
           columns={(columns) => prepareColumns(columns, true)}
           hideFilters={{ hostGroupFilter: true }}
+          initialLoading
           getEntities={async (items, config, showTags, defaultGetEntities) =>
             await defaultGetEntities(
               items,

src/components/InventoryGroupDetail/NoSystemsEmptyState.js

@@ -1,13 +1,11 @@
 import React, { useState } from 'react';
 import {
-  Button,
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStateSecondaryActions,
   Title,
 } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { PlusCircleIcon } from '@patternfly/react-icons';
 
 import { global_palette_black_600 as globalPaletteBlack600 } from '@patternfly/react-tokens/dist/js/global_palette_black_600';
 import AddSystemsToGroupModal from '../InventoryGroups/Modals/AddSystemsToGroupModal';
@@ -52,15 +50,6 @@ const NoSystemsEmptyState = ({ groupId, groupName }) => {
       >
         Add systems
       </ActionButton>
-      <EmptyStateSecondaryActions>
-        <Button
-          variant="link"
-          icon={<ExternalLinkAltIcon />}
-          iconPosition="right"
-        >
-          Learn more about system groups
-        </Button>
-      </EmptyStateSecondaryActions>
     </EmptyState>
   );
 };

src/components/InventoryGroups/InventoryGroups.cy.js

@@ -22,7 +22,7 @@ describe('groups table page', () => {
     cy.wait('@getGroups');
 
     cy.get('#groups-table').should('not.exist');
-    cy.get('.pf-c-empty-state').find('h4').contains('Create a system group');
+    cy.get('.pf-c-empty-state').find('h4').contains('No inventory groups');
   });
 
   it('renders error message when request fails', () => {

src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js

@@ -115,10 +115,7 @@ const AddSystemsToGroupModal = ({
                       setConfirmationModalOpen(true); // switch to the confirmation modal
                     } else {
                       await handleSystemAddition([...selected.keys()]);
-                      setTimeout(
-                        () => dispatch(fetchGroupDetail(groupId)),
-                        500
-                      ); // refetch data for this group
+                      dispatch(fetchGroupDetail(groupId));
                       setIsModalOpen(false);
                     }
                   }}

src/components/InventoryGroups/Modals/Modal.js

@@ -15,6 +15,7 @@ const RepoModal = ({
   initialValues,
   variant,
   reloadData,
+  reloadTimeout,
   size,
   onSubmit,
   customFormTemplate,
@@ -56,7 +57,11 @@ const RepoModal = ({
           await onSubmit(values);
 
           if (reloadData !== undefined) {
-            setTimeout(async () => await reloadData(), 500);
+            if (reloadTimeout) {
+              setTimeout(async () => await reloadData(), reloadTimeout);
+            } else {
+              await reloadData();
+            }
           }
 
           closeModal();
@@ -82,6 +87,11 @@ RepoModal.propTypes = {
   additionalMappers: PropTypes.object,
   titleIconVariant: PropTypes.any,
   customFormTemplate: PropTypes.node,
+  reloadTimeout: PropTypes.number,
+};
+
+RepoModal.defaultProps = {
+  reloadTimeout: 500,
 };
 
 export default RepoModal;

src/components/InventoryGroups/Modals/RemoveHostsFromGroupModal.js

@@ -34,6 +34,7 @@ const RemoveHostsFromGroupModal = ({
   setIsModalOpen,
   modalState: hosts,
   reloadData,
+  reloadTimeout,
 }) => {
   const dispatch = useDispatch();
   // the current iteration of groups feature a host can be in at maximum one group
@@ -55,8 +56,8 @@ const RemoveHostsFromGroupModal = ({
 
     apiWithToast(
       dispatch,
-      () =>
-        removeHostsFromGroup(
+      async () =>
+        await removeHostsFromGroup(
           groupId,
           hosts.map(({ id }) => id)
         ),
@@ -74,6 +75,7 @@ const RemoveHostsFromGroupModal = ({
       schema={schema(groupName, hosts)}
       onSubmit={handleRemoveHosts}
       reloadData={reloadData}
+      reloadTimeout={reloadTimeout}
     />
   );
 };
@@ -95,6 +97,7 @@ RemoveHostsFromGroupModal.propTypes = {
   isModalOpen: PropTypes.bool.isRequired,
   setIsModalOpen: PropTypes.func.isRequired,
   reloadData: PropTypes.func,
+  reloadTimeout: PropTypes.number,
 };
 
 export default RemoveHostsFromGroupModal;

src/components/InventoryGroups/NoGroupsEmptyState.js

@@ -4,11 +4,10 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStateSecondaryActions,
   Title,
   Tooltip,
 } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { PlusCircleIcon } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 
 import { global_palette_black_600 as globalPaletteBlack600 } from '@patternfly/react-tokens/dist/js/global_palette_black_600';
@@ -39,10 +38,10 @@ const NoGroupsEmptyState = ({ reloadData }) => {
         color={globalPaletteBlack600.value}
       />
       <Title headingLevel="h4" size="lg">
-        Create a system group
+        No inventory groups
       </Title>
       <EmptyStateBody>
-        Manage device operations efficiently by creating system groups.
+        Manage device operations efficiently by creating inventory groups.
       </EmptyStateBody>
       {canModifyGroups ? (
         <Button variant="primary" onClick={() => setCreateGroupModalOpen(true)}>
@@ -55,16 +54,6 @@ const NoGroupsEmptyState = ({ reloadData }) => {
           </Button>
         </Tooltip>
       )}
-      <EmptyStateSecondaryActions>
-        <Button
-          variant="link"
-          icon={<ExternalLinkAltIcon />}
-          iconPosition="right"
-          // TODO: component={(props) => <a href='' {...props} />}
-        >
-          Learn more about system groups
-        </Button>
-      </EmptyStateSecondaryActions>
     </EmptyState>
   );
 };

src/components/InventoryGroups/SmallComponents/Popover.js

@@ -0,0 +1,40 @@
+import {
+  Button,
+  Popover,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import React from 'react';
+
+const InventoryGroupsPopover = () => (
+  <Popover
+    aria-label="Inventory Groups popover"
+    headerContent={<Title headingLevel="h4">Inventory groups</Title>}
+    position="right"
+    bodyContent={
+      <TextContent>
+        <Text component={TextVariants.p}>
+          Inventory groups allow you to select specific systems and group them
+          together to better organize your inventory.
+        </Text>
+        <Text component={TextVariants.p}>
+          You can also manage user access to specific inventory groups to
+          enhance security within your organization.
+        </Text>
+      </TextContent>
+    }
+  >
+    <Button
+      variant="plain"
+      aria-label="Open Inventory groups popover"
+      style={{ padding: 0 }}
+    >
+      <OutlinedQuestionCircleIcon />
+    </Button>
+  </Popover>
+);
+
+export default InventoryGroupsPopover;

src/components/InventoryGroups/__tests__/NoGroupsEmptyState.test.js

@@ -17,7 +17,7 @@ describe('NoGroupsEmptyState', () => {
       </MemoryRouter>
     );
     // toHaveTextContent is a part of @testing-library/jest-dom
-    expect(getByRole('heading')).toHaveTextContent('Create a system group');
+    expect(getByRole('heading')).toHaveTextContent('No inventory groups');
     expect(container.querySelector('.pf-c-empty-state__icon')).not.toBe(null);
   });
 
@@ -32,8 +32,5 @@ describe('NoGroupsEmptyState', () => {
     expect(container.querySelector('.pf-m-primary')).toHaveTextContent(
       'Create group'
     );
-    const link = container.querySelector('.pf-m-link');
-    expect(link).toHaveTextContent('Learn more about system groups');
-    // TODO: expect(link).toHaveAttribute('href', '');
   });
 });

src/components/InventoryTable/ActionWithRBAC.js

@@ -13,12 +13,17 @@ export const ActionButton = ({
   noAccessTooltip,
   checkAll,
   override,
+  ignoreResourceDefinitions,
   ...props
 }) => {
   const { hasAccess: enabled } =
     override !== undefined
       ? { hasAccess: override }
-      : usePermissionsWithContext(requiredPermissions, checkAll);
+      : usePermissionsWithContext(
+          requiredPermissions,
+          checkAll,
+          !ignoreResourceDefinitions
+        );
 
   return enabled ? (
     <Button {...props} />
@@ -34,6 +39,7 @@ ActionButton.propTypes = {
   noAccessTooltip: PropTypes.string,
   checkAll: PropTypes.bool,
   override: PropTypes.bool,
+  ignoreResourceDefinitions: PropTypes.bool,
 };
 
 ActionButton.defaultProps = {
@@ -45,12 +51,17 @@ export const ActionDropdownItem = ({
   noAccessTooltip,
   checkAll,
   override,
+  ignoreResourceDefinitions,
   ...props
 }) => {
   const { hasAccess: enabled } =
     override !== undefined
       ? { hasAccess: override }
-      : usePermissionsWithContext(requiredPermissions, checkAll);
+      : usePermissionsWithContext(
+          requiredPermissions,
+          checkAll,
+          !ignoreResourceDefinitions
+        );
 
   return enabled ? (
     <DropdownItem {...props} />
@@ -64,6 +75,7 @@ ActionDropdownItem.propTypes = {
   noAccessTooltip: PropTypes.string,
   checkAll: PropTypes.bool,
   override: PropTypes.bool,
+  ignoreResourceDefinitions: PropTypes.bool,
 };
 
 ActionDropdownItem.defaultProps = {

src/routes/InventoryGroups.js

@@ -5,6 +5,8 @@ import {
   PageHeader,
   PageHeaderTitle,
 } from '@redhat-cloud-services/frontend-components/PageHeader';
+import { Flex } from '@patternfly/react-core';
+import InventoryGroupsPopover from '../components/InventoryGroups/SmallComponents/Popover';
 
 const Groups = () => {
   const chrome = useChrome();
@@ -16,7 +18,10 @@ const Groups = () => {
   return (
     <React.Fragment>
       <PageHeader>
-        <PageHeaderTitle title="Groups" />
+        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+          <PageHeaderTitle title="Groups" />
+          <InventoryGroupsPopover />
+        </Flex>
       </PageHeader>
       <InventoryGroups />
     </React.Fragment>