From 08b9eaaf8813a9a814a534e9448eff65b49efc34 Mon Sep 17 00:00:00 2001
From: Adonis Puente <60629070+adonispuente@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:33:25 -0400
Subject: [PATCH] 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                                 |   4 +-
 .../HostStalenessCard.js                      |  53 ++++--
 .../HostStalenessNoAccess.js                  |   2 +-
 .../InventoryHostStaleness/TabCard.js         |  30 +++-
 .../InventoryHostStaleness/constants.js       | 154 ++++++++++--------
 src/routes/InventoryHostStaleness.js          |   7 +-
 6 files changed, 158 insertions(+), 92 deletions(-)

diff --git a/src/Routes.js b/src/Routes.js
index e4c8e7443..3afa18d37 100644
--- a/src/Routes.js
+++ b/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 />,
     },
   ]);
diff --git a/src/components/InventoryHostStaleness/HostStalenessCard.js b/src/components/InventoryHostStaleness/HostStalenessCard.js
index 07dbe1f1f..67a7df30e 100644
--- a/src/components/InventoryHostStaleness/HostStalenessCard.js
+++ b/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>
diff --git a/src/components/InventoryHostStaleness/HostStalenessNoAccess.js b/src/components/InventoryHostStaleness/HostStalenessNoAccess.js
index 80b6b4d7d..eb287dab6 100644
--- a/src/components/InventoryHostStaleness/HostStalenessNoAccess.js
+++ b/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
diff --git a/src/components/InventoryHostStaleness/TabCard.js b/src/components/InventoryHostStaleness/TabCard.js
index c13d1c9bd..0f20833d7 100644
--- a/src/components/InventoryHostStaleness/TabCard.js
+++ b/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;
diff --git a/src/components/InventoryHostStaleness/constants.js b/src/components/InventoryHostStaleness/constants.js
index a5c9fdc36..a27d3cd48 100644
--- a/src/components/InventoryHostStaleness/constants.js
+++ b/src/components/InventoryHostStaleness/constants.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, Flex, Popover, Title } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import PropTypes from 'prop-types';
 
 export const CONVENTIONAL_TAB_TOOLTIP =
   'With RPM-DNF, you can manage the system software by using the DNF package manager and updated RPM packages. This is a simple and adaptive method of managing and modifying the system over its lifecycle.';
@@ -18,16 +19,9 @@ export const HOST_STALENESS_ADMINISTRATOR_PERMISSIONS = [
   GENERAL_HOST_STALENESS_WRITE_PERMISSION,
 ];
 
-//int for 'Never' value. POSTgreSQL max in is this
-const maxSafeInt = 2147483647;
-
 //86400 seconds in one day -> divide each by secodns in a day to get day values
 export const secondsToDaysConversion = (seconds) => {
-  if (seconds > 2000000000) {
-    return 'Never';
-  } else {
-    return seconds / 86400;
-  }
+  return seconds / 86400;
 };
 
 export const hostStalenessApiKeys = [
@@ -40,18 +34,13 @@ export const hostStalenessApiKeys = [
 ];
 
 export const daysToSecondsConversion = (days) => {
-  if (days === 'Never') {
-    return maxSafeInt;
-  } else {
-    return days * 86400;
-  }
+  return days * 86400;
 };
 
 export const conditionalDropdownError = (newFormValues, dropdownItems) => {
   //this runs on every select every time
   let apiKey = dropdownItems[0].apiKey;
-  let formValue =
-    newFormValues[apiKey] === 'Never' ? maxSafeInt : newFormValues[apiKey];
+  let formValue = newFormValues[apiKey];
 
   if (apiKey === 'conventional_staleness_delta') {
     if (formValue > newFormValues['conventional_stale_warning_delta']) {
@@ -69,7 +58,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100"
           style={{ width: '200px' }}
         >
-          Staleness must be before culling
+          Staleness must be before deletion
         </p>
       );
     } else {
@@ -83,7 +72,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100"
           style={{ width: '200px' }}
         >
-          Stale warning must be before culling
+          Stale warning must be before deletion
         </p>
       );
     } else if (formValue < newFormValues['conventional_staleness_delta']) {
@@ -110,7 +99,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100"
           style={{ width: '200px' }}
         >
-          Culling must be after staleness
+          Deletion must be after staleness
         </p>
       );
     } else if (formValue < newFormValues['conventional_staleness_delta']) {
@@ -119,7 +108,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100"
           style={{ width: '200px' }}
         >
-          Culling must be after stale warning
+          Deletion must be after stale warning
         </p>
       );
     } else {
@@ -143,7 +132,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100"
           style={{ width: '200px' }}
         >
-          Staleness must be before culling
+          Staleness must be before deletion
         </p>
       );
     } else {
@@ -161,7 +150,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100 "
           style={{ width: '200px' }}
         >
-          Stale warning must be before culling
+          Stale warning must be before deletion
         </p>
       );
     } else if (formValue < newFormValues['immutable_staleness_delta']) {
@@ -188,7 +177,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100"
           style={{ width: '200px' }}
         >
-          Culling must be after staleness
+          Deletion must be after staleness
         </p>
       );
     } else if (formValue < newFormValues['immutable_staleness_delta']) {
@@ -197,7 +186,7 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
           className="pf-u-font-size-sm pf-v5-u-danger-color-100"
           style={{ width: '200px' }}
         >
-          Culling must be after stale warning
+          Deletion must be after stale warning
         </p>
       );
     } else {
@@ -206,31 +195,48 @@ export const conditionalDropdownError = (newFormValues, dropdownItems) => {
   }
 };
 
-export const HostStalenessResetDefaultPopover = () => {
+export const HostStalenessResetDefaultPopover = ({ activeTabKey }) => {
   return (
     <Popover
       aria-label="Organization level popover"
-      headerContent={
-        <Title headingLevel="h4">Orginization level setting</Title>
-      }
+      headerContent={<Title headingLevel="h4">Default settings</Title>}
       position="left"
       bodyContent={
-        <Flex
-          direction={{ default: 'column' }}
-          spaceItems={{ default: 'spaceItemsNone' }}
-        >
-          <span className="pf-u-font-size-sm">
-            - Systems are marked as stale after 1 day since last check-in.
-          </span>
-          <span className="pf-u-font-size-sm">
-            - Systems are marked as stale warning after 14 days since last
-            check-in.
-          </span>
+        activeTabKey ? (
+          <Flex
+            direction={{ default: 'column' }}
+            spaceItems={{ default: 'spaceItemsNone' }}
+          >
+            <span className="pf-u-font-size-sm">
+              - Systems are marked as stale after 2 day since last check-in.
+            </span>
+            <span className="pf-u-font-size-sm">
+              - Systems are marked as stale warning after 120 days since last
+              check-in.
+            </span>
 
-          <span className="pf-u-font-size-sm">
-            - Systems are culled after 30 days since last check-in.
-          </span>
-        </Flex>
+            <span className="pf-u-font-size-sm">
+              - Systems are culled after 2 years since last check-in.
+            </span>
+          </Flex>
+        ) : (
+          <Flex
+            direction={{ default: 'column' }}
+            spaceItems={{ default: 'spaceItemsNone' }}
+          >
+            <span className="pf-u-font-size-sm">
+              - Systems are marked as stale after 1 day since last check-in.
+            </span>
+            <span className="pf-u-font-size-sm">
+              - Systems are marked as stale warning after 14 days since last
+              check-in.
+            </span>
+
+            <span className="pf-u-font-size-sm">
+              - Systems are culled after 30 days since last check-in.
+            </span>
+          </Flex>
+        )
       }
     >
       <Button
@@ -254,7 +260,7 @@ export const InventoryHostStalenessPopover = () => {
       hasAutoWidth
       position="top"
       bodyContent={
-        <div>
+        <Flex direction={{ default: 'column' }}>
           <p className="pf-u-font-size-sm">
             Configure the number of days it will take for your systems to be
             marked as stale, stale warning, and be cullled.
@@ -263,7 +269,9 @@ export const InventoryHostStalenessPopover = () => {
             direction={{ default: 'column' }}
             spaceItems={{ default: 'spaceItemsNone' }}
           >
-            <span className="pf-u-font-size-sm">By default:</span>
+            <span className="pf-u-font-size-sm">
+              Default for Conventional systems (RPM-DNF):
+            </span>
             <span className="pf-u-font-size-sm">
               <p>
                 - Systems are marked as stale after 1 day since last check-in.
@@ -277,7 +285,27 @@ export const InventoryHostStalenessPopover = () => {
               - Systems are culled after 30 days since last check-in.
             </span>
           </Flex>
-        </div>
+          <Flex
+            direction={{ default: 'column' }}
+            spaceItems={{ default: 'spaceItemsNone' }}
+          >
+            <span className="pf-u-font-size-sm">
+              Default for Immutable systems (OSTree):
+            </span>
+            <span className="pf-u-font-size-sm">
+              <p>
+                - Systems are marked as stale after 2 day since last check-in.
+              </p>
+            </span>
+            <span className="pf-u-font-size-sm">
+              - Systems are marked as stale warning after 120 days since last
+              check-in.
+            </span>
+            <span className="pf-u-font-size-sm">
+              - Systems are culled after 2 years since last check-in.
+            </span>
+          </Flex>
+        </Flex>
       }
     >
       <Button
@@ -345,13 +373,6 @@ export const systemStalenessItems = (activeTabKey) => {
         ? 'immutable_staleness_delta'
         : 'conventional_staleness_delta',
     },
-    {
-      name: 'Never',
-      value: 'Never',
-      apiKey: activeTabKey
-        ? 'immutable_staleness_delta'
-        : 'conventional_staleness_delta',
-    },
   ];
 };
 
@@ -423,17 +444,10 @@ export const systemStalenessWarningItems = (activeTabKey) => {
         ? 'immutable_stale_warning_delta'
         : 'conventional_stale_warning_delta',
     },
-    {
-      name: 'Never',
-      value: 'Never',
-      apiKey: activeTabKey
-        ? 'immutable_stale_warning_delta'
-        : 'conventional_stale_warning_delta',
-    },
   ];
 };
 
-export const systemCullingItems = (activeTabKey) => {
+export const systemDeletionItems = (activeTabKey) => {
   return [
     {
       name: '14 days',
@@ -441,7 +455,7 @@ export const systemCullingItems = (activeTabKey) => {
       apiKey: activeTabKey
         ? 'immutable_culling_delta'
         : 'conventional_culling_delta',
-      title: 'System culling',
+      title: 'System deletion',
       modalMessage:
         'This is the time at which your system will be deleted from your inventory. Once your system is culled, it will have to be re-registered to be added back to your inventory.',
     },
@@ -495,8 +509,15 @@ export const systemCullingItems = (activeTabKey) => {
         : 'conventional_culling_delta',
     },
     {
-      name: 'Never',
-      value: 'Never',
+      name: '1 year',
+      value: 365,
+      apiKey: activeTabKey
+        ? 'immutable_culling_delta'
+        : 'conventional_culling_delta',
+    },
+    {
+      name: '2 years',
+      value: 730,
       apiKey: activeTabKey
         ? 'immutable_culling_delta'
         : 'conventional_culling_delta',
@@ -507,8 +528,7 @@ export const systemCullingItems = (activeTabKey) => {
 export const formValidation = async (newFormValues, setIsFormValid) => {
   for (let i = 0; i < hostStalenessApiKeys.length; i++) {
     const apiKey = hostStalenessApiKeys[i];
-    let formValue =
-      newFormValues[apiKey] === 'Never' ? maxSafeInt : newFormValues[apiKey];
+    let formValue = newFormValues[apiKey];
 
     if (
       apiKey === 'conventional_staleness_delta' &&
@@ -542,3 +562,7 @@ export const formValidation = async (newFormValues, setIsFormValid) => {
     }
   }
 };
+
+HostStalenessResetDefaultPopover.propTypes = {
+  activeTabKey: PropTypes.number,
+};
diff --git a/src/routes/InventoryHostStaleness.js b/src/routes/InventoryHostStaleness.js
index 450ad61d7..99c63ff74 100644
--- a/src/routes/InventoryHostStaleness.js
+++ b/src/routes/InventoryHostStaleness.js
@@ -26,14 +26,15 @@ const HostStaleness = () => {
 
   useEffect(() => {
     chrome?.updateDocumentTitle?.(
-      'Staleness and Culling - System Configuration - Inventory | Red Hat Insights'
+      'Staleness and Deletion - System Configuration - Inventory | Red Hat Insights'
     );
-  }, [chrome]);
+    chrome.hideGlobalFilter(true);
+  }, []);
 
   return (
     <React.Fragment>
       <PageHeader>
-        <PageHeaderTitle title={'Staleness and Culling'} />
+        <PageHeaderTitle title={'Staleness and Deletion'} />
       </PageHeader>
       {canReadHostStaleness ? (
         <Page>