From 8c1d97b1d8adb5877a4baf4b3cf8284c9b316c86 Mon Sep 17 00:00:00 2001
From: adamviktora <84135613+adamviktora@users.noreply.github.com>
Date: Tue, 11 Jun 2024 15:09:06 +0200
Subject: [PATCH] fix(misc): clean up demos - Timestamp date prop, icon status
 colors (#10471)

* fix(misc): pass correct date prop to Timestamp

* fix(Card demos): use correct status color

* fix(Card demo): add status icon color for Status Tabbed demo
---
 .../examples/ComposableDateSelect.tsx         | 113 ------------------
 .../CustomMenus/examples/DateSelectDemo.tsx   |  38 ++++--
 .../demos/examples/Card/CardEventsView.tsx    |  23 ++--
 .../src/demos/examples/Card/CardLogView.tsx   |   8 +-
 .../demos/examples/Card/CardStatusTabbed.tsx  |  29 ++++-
 .../examples/Card/CardUtilizationDemo3.tsx    |   7 +-
 .../Table/examples/TableNestedHeaders.tsx     |   7 +-
 .../examples/TableNestedStickyHeader.tsx      |   7 +-
 8 files changed, 78 insertions(+), 154 deletions(-)
 delete mode 100644 packages/react-core/src/demos/CustomMenus/examples/ComposableDateSelect.tsx

diff --git a/packages/react-core/src/demos/CustomMenus/examples/ComposableDateSelect.tsx b/packages/react-core/src/demos/CustomMenus/examples/ComposableDateSelect.tsx
deleted file mode 100644
index 1f41cf07a40..00000000000
--- a/packages/react-core/src/demos/CustomMenus/examples/ComposableDateSelect.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper, Timestamp } from '@patternfly/react-core';
-
-export const ComposableSimpleDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<number>(0);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (!isOpen) {
-      return;
-    }
-    if (menuRef?.current?.contains(event.target as Node) || toggleRef?.current?.contains(event.target as Node)) {
-      if (event.key === 'Escape' || event.key === 'Tab') {
-        setIsOpen(!isOpen);
-        toggleRef?.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const monthStrings = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ];
-
-  const dateString = (date: Date) => `${monthStrings[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
-
-  const date = new Date();
-
-  const toggleText = {
-    0: 'Today ',
-    1: 'Yesterday ',
-    2: 'Last 7 days ',
-    3: 'Last 14 days '
-  };
-
-  const dateText = {
-    0: <Timestamp>({dateString(date)})</Timestamp>,
-    1: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
-      </Timestamp>
-    ),
-    2: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
-      </Timestamp>
-    ),
-    3: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
-      </Timestamp>
-    )
-  };
-
-  const toggle = (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
-      <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
-      {dateText[selected]}
-    </MenuToggle>
-  );
-  const menu = (
-    // eslint-disable-next-line no-console
-    <Menu ref={menuRef} onSelect={(_ev, itemId) => setSelected(itemId as number)} selected={selected}>
-      <MenuContent>
-        <MenuList>
-          <MenuItem itemId={0}>Today</MenuItem>
-          <MenuItem itemId={1}>Yesterday</MenuItem>
-          <MenuItem itemId={2}>Last 7 days</MenuItem>
-          <MenuItem itemId={3}>Last 14 days</MenuItem>
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};
diff --git a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
index fe7a0a943fa..c9c7c193ac4 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
@@ -36,27 +36,39 @@ export const DateSelectDemo: React.FunctionComponent = () => {
     3: 'Last 14 days '
   };
 
+  const getDateNDaysBefore = (date: Date, days: number) => new Date(new Date().setDate(date.getDate() - days));
+
+  const dates = {
+    0: date,
+    1: getDateNDaysBefore(date, 1),
+    2: getDateNDaysBefore(date, 7),
+    3: getDateNDaysBefore(date, 14)
+  };
+
   const dateText = {
-    0: <Timestamp>({dateString(date)})</Timestamp>,
-    1: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
-      </Timestamp>
-    ),
+    0: <Timestamp date={dates[0]}>({dateString(dates[0])})</Timestamp>,
+    1: <Timestamp date={dates[1]}>({dateString(dates[1])})</Timestamp>,
     2: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
-      </Timestamp>
+      <>
+        <Timestamp date={dates[2]}>
+          ({dateString(dates[2])}
+          &nbsp;-&nbsp;
+        </Timestamp>
+        <Timestamp date={date}>{dateString(date)})</Timestamp>
+      </>
     ),
     3: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
-      </Timestamp>
+      <>
+        <Timestamp date={dates[3]}>
+          ({dateString(dates[3])}
+          &nbsp;-&nbsp;
+        </Timestamp>
+        <Timestamp date={date}>{dateString(date)})</Timestamp>
+      </>
     )
   };
 
   return (
-    // eslint-disable-next-line no-console
     <Select
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/demos/examples/Card/CardEventsView.tsx b/packages/react-core/src/demos/examples/Card/CardEventsView.tsx
index 28a756ce276..39b21ac697c 100644
--- a/packages/react-core/src/demos/examples/Card/CardEventsView.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardEventsView.tsx
@@ -14,6 +14,7 @@ import {
   Flex,
   FlexItem,
   Gallery,
+  Icon,
   MenuToggle,
   Select,
   SelectList,
@@ -39,7 +40,7 @@ export const CardEventsView: React.FunctionComponent = () => {
         Error
       </SelectOption>
       <SelectOption value="Warning" key="option3">
-        Error
+        Warning
       </SelectOption>
     </SelectList>
   );
@@ -76,7 +77,9 @@ export const CardEventsView: React.FunctionComponent = () => {
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <ExclamationCircleIcon aria-hidden="true" />
+                      <Icon status="danger">
+                        <ExclamationCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Readiness probe failed</span>
@@ -88,14 +91,16 @@ export const CardEventsView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:02 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon aria-hidden="true" />
+                      <Icon status="success">
+                        <CheckCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Successful assignment</span>
@@ -106,7 +111,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   Successfully assigned default/example to ip-10-0-130-149.ec2.internal
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:13 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -122,14 +127,16 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:59 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon aria-hidden="true" />
+                      <Icon status="success">
+                        <CheckCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Created container</span>
@@ -138,7 +145,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:45 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>
diff --git a/packages/react-core/src/demos/examples/Card/CardLogView.tsx b/packages/react-core/src/demos/examples/Card/CardLogView.tsx
index 3d1a69a3d06..84aa9f78445 100644
--- a/packages/react-core/src/demos/examples/Card/CardLogView.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardLogView.tsx
@@ -79,7 +79,7 @@ export const CardLogView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:02 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -88,21 +88,21 @@ export const CardLogView: React.FunctionComponent = () => {
                   Successfully assigned default/example to ip-10-0-130-149.ec2.internal
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:13 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Pulling image</DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:59 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Created container</DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:45 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>
diff --git a/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx b/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx
index 5c59f9a5de8..ecfc04d9c78 100644
--- a/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx
@@ -9,6 +9,7 @@ import {
   DescriptionListTerm,
   Flex,
   FlexItem,
+  Icon,
   Tab,
   TabContent,
   Tabs,
@@ -23,25 +24,41 @@ const descriptionListData = [
     status: 'Running',
     resourceName: 'Resource name that is long and can wrap',
     detail: '121 Systems',
-    icon: <CheckCircleIcon />
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    )
   },
   {
-    status: 'Ready',
+    status: 'Failed',
     resourceName: 'Resource name that is long and can wrap',
     detail: '123 Systems',
-    icon: <ExclamationCircleIcon />
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    )
   },
   {
     status: 'Running',
     resourceName: 'Resource name that is long and can wrap',
     detail: '122 Systems',
-    icon: <CheckCircleIcon />
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    )
   },
   {
-    status: 'Ready',
+    status: 'Failed',
     resourceName: 'Resource name that is long and can wrap',
     detail: '124 Systems',
-    icon: <ExclamationCircleIcon />
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    )
   }
 ];
 
diff --git a/packages/react-core/src/demos/examples/Card/CardUtilizationDemo3.tsx b/packages/react-core/src/demos/examples/Card/CardUtilizationDemo3.tsx
index c5f0e3a7c16..3c4ccb576a2 100644
--- a/packages/react-core/src/demos/examples/Card/CardUtilizationDemo3.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardUtilizationDemo3.tsx
@@ -15,7 +15,8 @@ import {
   SelectList,
   SelectOption,
   MenuToggle,
-  MenuToggleElement
+  MenuToggleElement,
+  Icon
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
@@ -79,7 +80,9 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                   <span>System</span>
                 </FlexItem>
                 <Flex>
-                  <ExclamationCircleIcon aria-hidden />
+                  <Icon status="danger">
+                    <ExclamationCircleIcon aria-hidden />
+                  </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>
                 <FlexItem>
diff --git a/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx b/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
index 7fb45ffa29b..f9fefd8f63b 100644
--- a/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
@@ -160,8 +160,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
               <Td dataLabel={columnNames.datetime}>
                 <div>
-                  <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <Timestamp>{new Date(connection.timestamp).toLocaleTimeString()}</Timestamp>
+                  <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -170,7 +169,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <Timestamp>({connection.source.port.protocol})</Timestamp>
+                    <small>({connection.source.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>
@@ -180,7 +179,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <Timestamp>({connection.destination.port.protocol})</Timestamp>
+                    <small>({connection.destination.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>
diff --git a/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
index 477021d8369..099e950628d 100644
--- a/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
@@ -160,8 +160,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
               <Td dataLabel={columnNames.datetime}>
                 <div>
-                  <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <Timestamp>{new Date(connection.timestamp).toLocaleTimeString()}</Timestamp>
+                  <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -170,7 +169,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <Timestamp>({connection.source.port.protocol})</Timestamp>
+                    <small>({connection.source.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>
@@ -180,7 +179,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <Timestamp>({connection.destination.port.protocol})</Timestamp>
+                    <small>({connection.destination.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>