feat(RHIN-447): Staleness page UX updates and Name changes (#2036)

* Disable Global Filter

* Reset button works with individual tabs

* rename culling to deletion + QE button request

* optimizations and route change

* Popover changes, Never value replaces , current api Keys

src/Routes.js

@@ -29,7 +29,7 @@ export const routes = {
   groupDetail: '/groups/:groupId',
   update: '/:inventoryId/update',
   edgeInventory: '/manage-edge-inventory',
-  staleness: '/staleness-and-culling',
+  staleness: '/staleness-and-deletion',
 };
 const INVENTORY_TOTAL_FETCH_URL = '/api/inventory/v1/hosts';
 
@@ -84,7 +84,7 @@ export const Routes = () => {
       element: <Navigate to="/" replace />,
     },
     {
-      path: '/staleness-and-culling',
+      path: '/staleness-and-deletion',
       element: groupsEnabled ? <InventoryHostStaleness /> : <LostPage />,
     },
   ]);

src/components/InventoryHostStaleness/HostStalenessCard.js

@@ -37,12 +37,18 @@ import PropTypes from 'prop-types';
 
 const HostStalenessCard = ({ canModifyHostStaleness }) => {
   const [filter, setFilter] = useState({});
-  const [defaultApiValues, setDefaultApiValues] = useState({});
   const [newFormValues, setNewFormValues] = useState(filter);
   const [isEditing, setIsEditing] = useState(false);
   const [activeTabKey, setActiveTabKey] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isFormValid, setIsFormValid] = useState(true);
+  const [hostStalenessImmutableDefaults, setHostStalenessImmutableDefaults] =
+    useState({});
+  const [
+    hostStalenessConventionalDefaults,
+    setHostStalenessConventionalDefaults,
+  ] = useState({});
+
   const [isLoading, setIsLoading] = useState(true);
   const dispatch = useDispatch();
 
@@ -139,12 +145,25 @@ const HostStalenessCard = ({ canModifyHostStaleness }) => {
   //keeps track of what default the backend wants
   const fetchDefaultValues = async () => {
     let results = await fetchDefaultStalenessValues().catch((err) => err);
-    let newFilter = {};
-    hostStalenessApiKeys.forEach(
-      (filterKey) =>
-        (newFilter[filterKey] = secondsToDaysConversion(results[filterKey]))
-    );
-    setDefaultApiValues(newFilter);
+    let conventionalFilter = {};
+    let immutableFilter = {};
+
+    Object.keys(results).forEach((key) => {
+      if (key.includes('conventional')) {
+        conventionalFilter[key] = secondsToDaysConversion(results[key]);
+      } else if (key.includes('immutable')) {
+        immutableFilter[key] = secondsToDaysConversion(results[key]);
+      }
+    });
+
+    setHostStalenessConventionalDefaults({
+      ...hostStalenessConventionalDefaults,
+      ...conventionalFilter,
+    });
+    setHostStalenessImmutableDefaults({
+      ...hostStalenessImmutableDefaults,
+      ...immutableFilter,
+    });
   };
 
   const batchedApi = async () => {
@@ -163,7 +182,7 @@ const HostStalenessCard = ({ canModifyHostStaleness }) => {
         <Card id={'HostStalenessCard'}>
           <CardHeader>
             <Title headingLevel="h4" size="xl" id="HostTitle">
-              Organization level system staleness and culling
+              Organization level system staleness and deletion
             </Title>
             <InventoryHostStalenessPopover />
           </CardHeader>
@@ -185,7 +204,7 @@ const HostStalenessCard = ({ canModifyHostStaleness }) => {
                   Edit
                 </Button>
               ) : (
-                <Tooltip content="You do not have the Inventory staleness and culling viewer role required to perform this action. Contact your org admin for access.">
+                <Tooltip content="You do not have the Inventory staleness and deletion viewer role required to perform this action. Contact your org admin for access.">
                   <Button
                     variant="link"
                     style={{ 'padding-left': '0px' }}
@@ -226,7 +245,12 @@ const HostStalenessCard = ({ canModifyHostStaleness }) => {
                   setNewFormValues={setNewFormValues}
                   isFormValid={isFormValid}
                   setIsFormValid={setIsFormValid}
-                  defaultValues={defaultApiValues}
+                  hostStalenessImmutableDefaults={
+                    hostStalenessImmutableDefaults
+                  }
+                  hostStalenessConventionalDefaults={
+                    hostStalenessConventionalDefaults
+                  }
                 />
               </Tab>
               <Tab
@@ -253,7 +277,12 @@ const HostStalenessCard = ({ canModifyHostStaleness }) => {
                   setNewFormValues={setNewFormValues}
                   isFormValid={isFormValid}
                   setIsFormValid={setIsFormValid}
-                  defaultValues={defaultApiValues}
+                  hostStalenessImmutableDefaults={
+                    hostStalenessImmutableDefaults
+                  }
+                  hostStalenessConventionalDefaults={
+                    hostStalenessConventionalDefaults
+                  }
                 />
               </Tab>
             </Tabs>
@@ -301,7 +330,7 @@ const HostStalenessCard = ({ canModifyHostStaleness }) => {
                   ouiaId="BasicModal"
                 >
                   {`Changing the organization level setting for system staleness and
-              culling may impact your systems. Some systems will be culled as a
+              deletion may impact your systems. Some systems will be culled as a
               result.`}
                 </Modal>
               </Flex>

src/components/InventoryHostStaleness/HostStalenessNoAccess.js

@@ -16,7 +16,7 @@ const HostStalenessNoAccess = () => {
         Access permissions needed
       </Title>
       <EmptyStateBody className="pf-u-mb-xl">
-        You do not have the necessary Inventory staleness and culling viewer
+        You do not have the necessary Inventory staleness and deletion viewer
         role required to view this page.
       </EmptyStateBody>
       <Button

src/components/InventoryHostStaleness/TabCard.js

@@ -1,10 +1,10 @@
-import { Card, Flex, FlexItem } from '@patternfly/react-core';
+import { Button, Card, Flex, FlexItem } from '@patternfly/react-core';
 import React from 'react';
 import BaseDropdown from './BaseDropDown';
 import PropTypes from 'prop-types';
 import {
   HostStalenessResetDefaultPopover,
-  systemCullingItems,
+  systemDeletionItems,
   systemStalenessItems,
   systemStalenessWarningItems,
 } from './constants';
@@ -18,16 +18,21 @@ const TabCard = ({
   setNewFormValues,
   isFormValid,
   setIsFormValid,
-  defaultValues,
+  hostStalenessImmutableDefaults,
+  hostStalenessConventionalDefaults,
 }) => {
   const dropdownArray = (activeTabKey) => [
     systemStalenessItems(activeTabKey),
     systemStalenessWarningItems(activeTabKey),
-    systemCullingItems(activeTabKey),
+    systemDeletionItems(activeTabKey),
   ];
 
-  const resetToStandard = () => {
-    setNewFormValues(defaultValues);
+  const resetToStandard = (activeTab) => {
+    const defaultsForSelectedTab = activeTab
+      ? hostStalenessImmutableDefaults
+      : hostStalenessConventionalDefaults;
+
+    setNewFormValues({ ...newFormValues, ...defaultsForSelectedTab });
   };
 
   return (
@@ -59,10 +64,15 @@ const TabCard = ({
           {isEditing ? (
             <Flex>
               <FlexItem style={{ width: '200px' }}>
-                <a onClick={() => resetToStandard()}>
+                <Button
+                  variant="link"
+                  role="button"
+                  onClick={() => resetToStandard(activeTabKey)}
+                  style={{ padding: '0' }}
+                >
                   Reset to default setting
-                </a>
-                <HostStalenessResetDefaultPopover />
+                </Button>
+                <HostStalenessResetDefaultPopover activeTabKey={activeTabKey} />
               </FlexItem>
             </Flex>
           ) : (
@@ -84,5 +94,7 @@ TabCard.propTypes = {
   isFormValid: PropTypes.any,
   setIsFormValid: PropTypes.any,
   defaultValues: PropTypes.object,
+  hostStalenessImmutableDefaults: PropTypes.object,
+  hostStalenessConventionalDefaults: PropTypes.object,
 };
 export default TabCard;