ILEX-90 Single term - versions history get integration: fix date formatting

src/components/SingleTermView/History/HistoryItem.jsx

@@ -5,7 +5,8 @@ import {
     ListItemText,
     ListItemIcon,
     Stack,
-    Typography
+    Typography,
+    Tooltip
 } from "@mui/material";
 import { CreateForkHistoryIcon } from "../../../Icons";
 // import CustomButton from "../../common/CustomButton";
@@ -14,10 +15,20 @@ import { vars } from "../../../theme/variables";
 
 const { gray200, gray600, gray700, brand600 } = vars;
 
-const formatDate = (dateString) => {
+const formatDate = (dateString, includeDayAndTime = false) => {
     const fixedDateString = dateString.replace(',', '.');
     try {
         const date = new Date(fixedDateString);
+        const months = ['January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December'];
+        const month = months[date.getUTCMonth()];
+        const day = date.getUTCDate();
+        const year = date.getUTCFullYear();
+
+        if (!includeDayAndTime) {
+            return `${month} ${day}, ${year}`;
+        }
+
         const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
         const weekday = weekdays[date.getUTCDay()];
 
@@ -27,7 +38,8 @@ const formatDate = (dateString) => {
         hours = hours ? hours : 12;
         const minutes = date.getUTCMinutes().toString().padStart(2, '0');
 
-        return `${weekday} ${hours}:${minutes}${ampm}`;
+        return `${month} ${day}, ${year} ${weekday} ${hours}:${minutes}${ampm}`;
+
     } catch (e) {
         console.error("Error formatting date:", dateString, e);
         return dateString.split('T')[0];
@@ -80,9 +92,11 @@ const HistoryItem = ({ entry }) => (
                 }
                 secondary={
                     <Box component="span" display="flex" alignItems="center" gap={1.5}>
-                        <Typography component="span" sx={{ color: gray600, fontSize: '0.75rem' }}>
-                            {formatDate(entry.date)}
-                        </Typography>
+                        <Tooltip title={formatDate(entry.date, true)}>
+                            <Typography component="span" sx={{ color: gray600, fontSize: '0.75rem', cursor: 'default' }}>
+                                {formatDate(entry.date)}
+                            </Typography>
+                        </Tooltip>
                         {/* <CustomButton sx={visibilityHidden}>
                             <RestoreIcon />
                             Restore version

src/components/SingleTermView/index.jsx

@@ -75,7 +75,7 @@ const SingleTermView = () => {
   const [isLoadingTerm, setIsLoadingTerm] = useState(false);
   const [actualGroup, setActualGroup] = useState(group); // Track the actual group the data comes from
   const [isUsingFallback, setIsUsingFallback] = useState(false); // Track if we're using fallback data
-  
+
   // Remove redundant query logic - use term from URL params directly
   const searchTerm = term;
   const openDataFormatMenu = Boolean(dataFormatAnchorEl);
@@ -214,11 +214,11 @@ const SingleTermView = () => {
   // Optimize tab URL synchronization
   useEffect(() => {
     const newTabValue = tabMapping[tab] !== undefined ? tabMapping[tab] : 0;
-    
+
     if (newTabValue !== tabValue) {
       setTabValue(newTabValue);
     }
-    
+
     // If no tab is specified in URL, redirect to overview
     if (!tab && group && term) {
       navigate(`/${group}/${term}/overview`, { replace: true });
@@ -246,7 +246,7 @@ const SingleTermView = () => {
   // Memoize the toggle button group for overview tab
   const toggleButtonGroup = useMemo(() => {
     if (tabValue !== 0) return null;
-    
+
     return (
       <Box display="flex">
         {isCodeViewVisible && (
@@ -255,10 +255,10 @@ const SingleTermView = () => {
               <Typography color={gray600} fontSize=".875rem" lineHeight="1.25rem">
                 Format to visualize:
               </Typography>
-              <CustomSingleSelect 
-                value={selectedDataFormat} 
-                onChange={(v) => setSelectedDataFormat(v)} 
-                options={dataFormats} 
+              <CustomSingleSelect
+                value={selectedDataFormat}
+                onChange={(v) => setSelectedDataFormat(v)}
+                options={dataFormats}
               />
             </Stack>
             <Divider sx={{ ml: '0.625rem', mr: '0.625rem', border: `1px solid ${gray200}` }} />
@@ -305,11 +305,11 @@ const SingleTermView = () => {
                   {isItFork ? <Chip label="Fork" variant="outlined" /> : null}
                 </Stack>
                 {isUsingFallback && (
-                  <Typography 
-                    variant="body2" 
-                    sx={{ 
-                      color: 'warning.main', 
-                      fontSize: '0.875rem', 
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: 'warning.main',
+                      fontSize: '0.875rem',
                       fontStyle: 'italic',
                       mt: '0.5rem'
                     }}