fix: workspace back card layout

Signed-off-by: amitamrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -39,6 +39,8 @@ interface ColumnConfigProps {
   isFromWorkspaceTable?: boolean;
   isRemoveAllowed?: boolean;
   theme?: Theme;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: (visibility: VIEW_VISIBILITY) => void;
 }
 
 export const colViews: ColView[] = [
@@ -68,7 +70,9 @@ export const createDesignsColumnsConfig = ({
   isDownloadAllowed,
   isRemoveAllowed,
   theme,
-  isFromWorkspaceTable = false
+  isFromWorkspaceTable = false,
+  isVisibilityEnabled,
+  handleVisibilityChange
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   return [
     {

src/custom/Workspaces/DesignTable.tsx

@@ -56,6 +56,8 @@ export interface DesignTableProps {
   isAssignAllowed: boolean;
   isRemoveAllowed: boolean;
   setDesignSearch: (value: string) => void;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: (visibility: string) => void;
 }
 
 export interface PublishModalState {
@@ -96,7 +98,9 @@ const DesignTable: React.FC<DesignTableProps> = ({
   isAssignAllowed,
   isRemoveAllowed,
   useGetWorkspaceDesignsQuery,
-  setDesignSearch
+  setDesignSearch,
+  isVisibilityEnabled,
+  handleVisibilityChange
 }) => {
   const [publishModal, setPublishModal] = useState<PublishModalState>({
     open: false,
@@ -132,7 +136,9 @@ const DesignTable: React.FC<DesignTableProps> = ({
     isUnpublishAllowed,
     isFromWorkspaceTable: true,
     isRemoveAllowed,
-    theme
+    theme,
+    isVisibilityEnabled: isVisibilityEnabled,
+    handleVisibilityChange: handleVisibilityChange
   });
 
   const [publishSchema, setPublishSchema] = useState<{

src/custom/Workspaces/WorkspaceCard.tsx

@@ -1,8 +1,8 @@
 import { useTheme } from '@mui/material';
 import { Backdrop, CircularProgress, Grid } from '../../base';
+import { getRelativeTime } from '../../utils';
 import { FlipCard } from '../FlipCard';
 import { RecordRow, RedirectButton, TransferButton } from './WorkspaceTransferButton';
-import { formattoLongDate } from './helper';
 import {
   AllocationColumnGrid,
   AllocationWorkspace,
@@ -408,12 +408,12 @@ const CardBack = ({
       <DateGrid xs={12}>
         <DateColumnGrid xs={6}>
           <DateLabel onClick={(e) => e.stopPropagation()}>
-            Updated At: {formattoLongDate(updatedDate)}
+            Updated At: {getRelativeTime(updatedDate)}
           </DateLabel>
         </DateColumnGrid>
         <DateColumnGrid xs={6}>
           <DateLabel onClick={(e) => e.stopPropagation()}>
-            Created At: {formattoLongDate(createdDate)}
+            Created At: {getRelativeTime(createdDate)}
           </DateLabel>
         </DateColumnGrid>
       </DateGrid>

src/custom/Workspaces/WorkspaceTransferButton.tsx

@@ -1,7 +1,8 @@
 import { SyncAlt as SyncAltIcon } from '@mui/icons-material';
-import { Grid, Tooltip, Typography } from '../../base';
+import { Grid, Typography } from '../../base';
 import { useTheme } from '../../theme';
-import { formatShortDate, formatShortDateTime } from './helper';
+import { getFullFormattedTime, getRelativeTime } from '../../utils';
+import { CustomTooltip } from '../CustomTooltip';
 import { PopupButton, Record, TabCount, TabTitle } from './styles';
 
 interface TransferButtonProps {
@@ -89,25 +90,32 @@ export const RecordRow: React.FC<RecordRowProps> = ({ title, name, date }) => {
           {title}
         </Typography>
         <Typography
-          sx={{ ml: 1, fontStyle: 'italic', color: theme.palette.background.brand?.default }}
+          sx={{
+            marginInline: '0.5rem',
+            fontStyle: 'italic',
+            color: theme.palette.background.brand?.default,
+            textWrap: 'nowrap'
+          }}
         >
           {name}
         </Typography>
       </Grid>
       <Grid xs={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Tooltip title={date ? formatShortDateTime(date) : ''} placement="top">
-          <Typography
-            sx={{
-              fontSize: 14,
-              fontStyle: 'italic',
-              color: `${theme.palette.text.disabled}`,
-              paddingRight: '12px',
-              textAlign: 'end'
-            }}
-          >
-            {date ? formatShortDate(date) : '-'}
-          </Typography>
-        </Tooltip>
+        <CustomTooltip title={date ? getFullFormattedTime(date as string) : ''} placement="top">
+          <div>
+            <Typography
+              sx={{
+                fontSize: 14,
+                fontStyle: 'italic',
+                color: `${theme.palette.text.disabled}`,
+                paddingRight: '12px',
+                textAlign: 'end'
+              }}
+            >
+              {date ? getRelativeTime(date as string) : '-'}
+            </Typography>
+          </div>
+        </CustomTooltip>
       </Grid>
     </Record>
   );

src/utils/time.utils.tsx

@@ -1,20 +1,41 @@
 import moment from 'moment';
 import { CustomTooltip } from '../custom';
 
+/**
+ * Returns the relative time (e.g. "2 hours ago") from a given date string
+ * @param {string} date - ISO format date string
+ * @returns {string} Human-readable relative time
+ */
 export const getRelativeTime = (date: string): string => {
   return moment(date).fromNow();
 };
 
+/**
+ * Returns a fully formatted date and time string
+ * @param {string} date - ISO format date string
+ * @returns {string} Formatted date in "ddd, MMM D, YYYY h:mm A" format (e.g. "Mon, Jan 1, 2025 3:45 PM")
+ */
 export const getFullFormattedTime = (date: string): string => {
   return moment(date).format('ddd, MMM D, YYYY h:mm A');
 };
 
+/**
+ * Formats a date string into a short date format
+ * @param {string} date - ISO format date string
+ * @returns {string} Formatted date in "Month Day, Year" format (e.g. "Jan 1, 2025")
+ */
 export const getFormatDate = (date: string) => {
   const options = { year: 'numeric' as const, month: 'short' as const, day: 'numeric' as const };
   const formattedDate = new Date(date).toLocaleDateString('en-US', options);
   return formattedDate;
 };
 
+/**
+ * React component that displays relative time with a tooltip showing the full date and time
+ * @param {Object} props - Component props
+ * @param {string} props.date - ISO format date string
+ * @returns {JSX.Element} Formatted time component with tooltip
+ */
 export const FormattedTime = ({ date }: { date: string }) => {
   return (
     <CustomTooltip title={getFullFormattedTime(date)} disableInteractive>