feat(CullingInfo): add culling info component

Author: InsaneZein

packages/module/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfo.md

@@ -0,0 +1,37 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Status and state indicators
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Culling information
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['CullingInformation']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfo.md
+---
+
+import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';
+
+A **culling information** component displays a warning for when an object will become culled or stale. It can display this as a tooltip or text. 
+
+## Examples
+
+### Basic culling information
+
+A basic culling information example
+
+```js file="./CullingInfoExample.tsx"
+
+```
+
+### Culling information with customized props
+
+For further customization, you can choose to render the tooltip as a message beside the icon instead. And you can utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.
+
+```js file="./CullingInfoCustomExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfoCustomExample.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';
+
+
+export const CustomizedRenderExample: React.FunctionComponent = () => {
+  const staleDate = new Date('Sun Jan 26 2020');
+  const warningDate = new Date('Mon Feb 03 2025');
+  const cullingDate = new Date('Fri Feb 07 2025');
+  return <>
+    <CullingInformation
+      stale={staleDate}
+      currDate={new Date()}
+      culled={cullingDate}
+      staleWarning={warningDate}
+      render={({ msg }) => (<React.Fragment>{msg} Hello there. Last seen: {` `}</React.Fragment>)}>
+    </CullingInformation>
+  </>
+};

packages/module/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfoExample.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const staleDate = new Date('Sun Jan 26 2020');
+  const warningDate = new Date('Mon Feb 03 2025');
+  const cullingDate = new Date('Fri Feb 07 2025');
+  return <>
+    <CullingInformation
+      stale={staleDate}
+      currDate={new Date()}
+      culled={cullingDate}
+      staleWarning={warningDate}>
+    </CullingInformation>
+  </>
+};

packages/module/src/CullingInfo/CullingInfo.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { Tooltip, TooltipProps } from '@patternfly/react-core';
+import clsx from 'clsx';
+import { createUseStyles } from 'react-jss';
+import { CullingDate, CullingInfo, calculateTooltip } from './CullingInfoUtils';
+
+export type Render = (config: { msg: string }) => React.ReactElement<any, any> | null;
+
+const useStyles = createUseStyles({
+  inventoryCullingWarning: {
+    color: 'var(--pf-v6-global--warning-color--200)',
+    fontWeight: 'var(--pf-v6-global--FontWeight--bold)',
+    svg: {
+      marginRight: 'var(--pf-v5-global--spacer--sm)'
+    }
+  },
+  inventoryCullingDanger: {
+    color: 'var(--pf-v6-global--warning-color--200)',
+    fontWeight: 'var(--pf-v6-global--FontWeight--bold)',
+    svg: {
+      marginRight: 'var(--pf-v6-global--spacer--sm)'
+    }
+  }
+});
+
+export interface CullingInformation extends Omit<TooltipProps, 'content'> {
+  /** Option to add custom css classes */
+  className?: string;
+  /** Warning date for when object becomes stale */
+  staleWarning: CullingDate;
+  /** Date when object becomes culled */
+  culled: CullingDate;
+  /** Date when object becomes stale */
+  stale: CullingDate;
+  /** Current date */
+  currDate: CullingDate;
+  /** Optional prop to add custom children */
+  children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+  /** Option to add custom message ReactElement */
+  render?: Render;
+}
+
+const CullingInformation: React.FunctionComponent<CullingInformation> = ({
+  culled = new Date(0),
+  className,
+  staleWarning = new Date(0),
+  stale = new Date(0),
+  currDate = new Date(0),
+  children,
+  render,
+  ...props
+}) => {
+  const classes = useStyles();
+
+  if (new Date(currDate).valueOf() - new Date(stale).valueOf() < 0) {
+    return render
+      ? render({
+        msg: '',
+      })
+      : children || null;
+  }
+
+  const { isWarn, isError, msg }: CullingInfo = calculateTooltip(culled, staleWarning, currDate);
+  if (render) {
+    return (
+      <span
+        className={clsx({ [classes.inventoryCullingWarning]: isWarn, [classes.inventoryCullingDanger]: isError }, className)}
+      >
+        {isWarn && <ExclamationTriangleIcon className={classes.inventoryCullingWarning}/>}
+        {isError && <ExclamationCircleIcon />}
+        {render({ msg })}
+      </span>
+    );
+  }
+
+  return (
+    <React.Fragment>
+      <Tooltip {...props} content={msg} position="bottom">
+        <span
+          className={clsx({ [classes.inventoryCullingWarning]: isWarn, [classes.inventoryCullingDanger]: isError }, className)}
+        >
+          {isError && <ExclamationCircleIcon />}
+          {isWarn && <ExclamationTriangleIcon />}
+          {children}
+        </span>
+      </Tooltip>
+    </React.Fragment>
+  );
+};
+
+export default CullingInformation;
+

packages/module/src/CullingInfo/CullingInfoUtils.ts

@@ -0,0 +1,32 @@
+export type CullingDate = string | number | Date;
+
+export interface CullingInfo {
+  isWarn?: boolean;
+  isError?: boolean;
+  msg: string;
+}
+export type CalculateTooltip = (culled: CullingDate, warning: CullingDate, currDate: CullingDate) => CullingInfo;
+
+export const seconds = 1000;
+export const minutes: number = seconds * 60;
+export const hours: number = minutes * 60;
+export const days: number = hours * 24;
+
+export const calculateTooltip: CalculateTooltip = (culled, warning, currDate) => {
+  const culledDate: Date = new Date(culled);
+  const warningDate: Date = new Date(warning);
+  const diffTime: number = new Date(currDate).valueOf() - warningDate.valueOf();
+  const removeIn: number = Math.ceil((culledDate.valueOf() - new Date(currDate).valueOf()) / days);
+  const msg = `System scheduled for inventory removal in ${removeIn} days`;
+  if (diffTime >= 0) {
+    return {
+      isError: true,
+      msg,
+    };
+  }
+
+  return {
+    isWarn: true,
+    msg,
+  };
+};

packages/module/src/CullingInfo/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CullingInfo';
+export * from './CullingInfo';

packages/module/src/index.ts

@@ -66,6 +66,9 @@ export * from './ErrorStack';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export * from './ErrorBoundary';
 
+export { default as CullingInfo } from './CullingInfo';
+export * from './CullingInfo';
+
 export { default as ColumnManagementModal } from './ColumnManagementModal';
 export * from './ColumnManagementModal';