Add hover background transitions to tables - Part1

linode · Dec 27, 2024 · 8f87cb6 · 8f87cb6
1 parent 8af4227
commit 8f87cb6
Show file tree

Hide file tree

Showing 84 changed files with 290 additions and 68 deletions.
diff --git a/packages/manager/src/features/Account/AccountLogins.tsx b/packages/manager/src/features/Account/AccountLogins.tsx
@@ -89,7 +89,7 @@ const AccountLogins = () => {
     }
     if (data) {
       return data.data.map((item: AccountLogin) => (
-        <AccountLoginsTableRow key={item.id} {...item} />
+        <AccountLoginsTableRow hover key={item.id} {...item} />
       ));
     }
 

diff --git a/packages/manager/src/features/Account/AccountLoginsTableRow.tsx b/packages/manager/src/features/Account/AccountLoginsTableRow.tsx
@@ -14,19 +14,24 @@ import type {
   AccountLogin,
   AccountLoginStatus,
 } from '@linode/api-v4/lib/account/types';
+import type { TableRowOwnProps } from '@mui/material';
 import type { Status } from 'src/components/StatusIcon/StatusIcon';
 
+interface AccountLoginProps extends AccountLogin {
+  hover?: TableRowOwnProps['hover'];
+}
+
 const accessIconMap: Record<AccountLoginStatus, Status> = {
   failed: 'other',
   successful: 'active',
 };
 
-const AccountLoginsTableRow = (props: AccountLogin) => {
-  const { datetime, id, ip, restricted, status, username } = props;
+const AccountLoginsTableRow = (props: AccountLoginProps) => {
+  const { datetime, hover, id, ip, restricted, status, username } = props;
   const { data: profile } = useProfile();
 
   return (
-    <TableRow key={id}>
+    <TableRow hover={hover} key={id}>
       <TableCell>
         {formatDate(datetime, {
           timezone: profile?.timezone,

diff --git a/packages/manager/src/features/Backups/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx
@@ -100,6 +100,7 @@ export const BackupDrawer = (props: Props) => {
               result.linode.id === linode.id && result.status === 'rejected'
           ) as EnableBackupsRejectedResult | undefined)?.reason?.[0]?.reason
         }
+        hover
         key={linode.id}
         linode={linode}
       />

diff --git a/packages/manager/src/features/Backups/BackupLinodeRow.tsx b/packages/manager/src/features/Backups/BackupLinodeRow.tsx
@@ -12,14 +12,16 @@ import {
 } from 'src/utilities/pricing/constants';
 
 import type { Linode, PriceObject } from '@linode/api-v4';
+import type { TableRowOwnProps } from '@mui/material';
 
 interface Props {
   error?: string;
+  hover?: TableRowOwnProps['hover'];
   linode: Linode;
 }
 
 export const BackupLinodeRow = (props: Props) => {
-  const { error, linode } = props;
+  const { error, hover, linode } = props;
   const { data: type } = useTypeQuery(linode.type ?? '', Boolean(linode.type));
   const { data: regions } = useRegionsQuery();
 
@@ -37,7 +39,7 @@ export const BackupLinodeRow = (props: Props) => {
     backupsMonthlyPrice === null || backupsMonthlyPrice === undefined;
 
   return (
-    <TableRow key={`backup-linode-${linode.id}`}>
+    <TableRow hover={hover} key={`backup-linode-${linode.id}`}>
       <TableCell>
         <Typography variant="body1">{linode.label}</Typography>
         {error && (

diff --git a/.../manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/.../manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -47,6 +47,7 @@ import { getAll } from 'src/utilities/getAll';
 import { getTaxID } from '../../billingUtils';
 
 import type { Invoice, InvoiceItem, Payment } from '@linode/api-v4/lib/account';
+import type { TableRowOwnProps } from '@mui/material';
 import type { SxProps, Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -372,6 +373,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
                 : {}
             }
             hasError={pdfErrors.has(`${thisItem.type}-${thisItem.id}`)}
+            hover
             isLoading={pdfLoading.has(`${thisItem.type}-${thisItem.id}`)}
             key={`${thisItem.type}-${thisItem.id}`}
             {...thisItem}
@@ -497,6 +499,7 @@ const StyledBillingAndPaymentHistoryHeader = styled('div', {
 interface ActivityFeedItemProps extends ActivityFeedItem {
   downloadPDF: (id: number) => void;
   hasError: boolean;
+  hover?: TableRowOwnProps['hover'];
   isLoading: boolean;
   sxRow: SxProps<Theme>;
 }
@@ -508,6 +511,7 @@ export const ActivityFeedItem = React.memo((props: ActivityFeedItemProps) => {
     date,
     downloadPDF,
     hasError,
+    hover,
     id,
     isLoading,
     label,
@@ -532,7 +536,7 @@ export const ActivityFeedItem = React.memo((props: ActivityFeedItemProps) => {
   };
 
   return (
-    <TableRow data-testid={`${type}-${id}`} sx={sxRow}>
+    <TableRow data-testid={`${type}-${id}`} hover={hover} sx={sxRow}>
       <TableCell>
         {type === 'invoice' ? (
           <Link to={`/account/billing/invoices/${id}`}>{label}</Link>

diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -204,6 +204,7 @@ export const InvoiceDetail = () => {
           )}
           <InvoiceTable
             errors={errors}
+            hover
             items={items}
             loading={loading}
             shouldShowRegion={shouldShowRegion}

diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx
@@ -19,9 +19,11 @@ import { getInvoiceRegion } from '../PdfGenerator/utils';
 
 import type { InvoiceItem } from '@linode/api-v4/lib/account';
 import type { APIError } from '@linode/api-v4/lib/types';
+import type { TableRowOwnProps } from '@mui/material';
 
 interface Props {
   errors?: APIError[];
+  hover?: TableRowOwnProps['hover'];
   items?: InvoiceItem[];
   loading: boolean;
   shouldShowRegion: boolean;
@@ -36,7 +38,7 @@ export const InvoiceTable = (props: Props) => {
     isLoading: regionsLoading,
   } = useRegionsQuery();
 
-  const { errors, items, loading, shouldShowRegion } = props;
+  const { errors, hover, items, loading, shouldShowRegion } = props;
   const NUM_COLUMNS = shouldShowRegion ? 9 : 8;
 
   const renderTableContent = () => {
@@ -76,6 +78,7 @@ export const InvoiceTable = (props: Props) => {
             <React.Fragment>
               {paginatedData.map((invoiceItem: InvoiceItem) => (
                 <TableRow
+                  hover={hover}
                   key={`${invoiceItem.label}-${invoiceItem.from}-${invoiceItem.to}`}
                 >
                   <TableCell data-qa-description>{invoiceItem.label}</TableCell>

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx
@@ -78,6 +78,7 @@ export const AlertListing = () => {
                 handleDetails: () => handleDetails(alert),
               }}
               alert={alert}
+              hover
               key={alert.id}
             />
           ))}

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx
@@ -11,6 +11,7 @@ import { AlertActionMenu } from './AlertActionMenu';
 
 import type { ActionHandlers } from './AlertActionMenu';
 import type { Alert } from '@linode/api-v4';
+import type { TableRowOwnProps } from '@mui/material';
 
 interface Props {
   /**
@@ -21,14 +22,15 @@ interface Props {
    * The callback handlers for clicking an action menu item like Show Details, Delete, etc.
    */
   handlers: ActionHandlers;
+  hover?: TableRowOwnProps['hover'];
 }
 
 export const AlertTableRow = (props: Props) => {
-  const { alert, handlers } = props;
+  const { alert, handlers, hover } = props;
   const { created_by, id, label, service_type, status, type, updated } = alert;
   const theme = useTheme();
   return (
-    <TableRow data-qa-alert-cell={id} key={`alert-row-${id}`}>
+    <TableRow data-qa-alert-cell={id} hover={hover} key={`alert-row-${id}`}>
       <TableCell>{label}</TableCell>
       <TableCell>{service_type}</TableCell>
       <TableCell>

diff --git a/.../src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupTableBody.tsx b/.../src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupTableBody.tsx
@@ -58,6 +58,7 @@ const DatabaseBackupTableBody = (props: Props) => {
         <BackupTableRow
           backup={backup}
           disabled={disabled}
+          hover
           key={backup.id}
           onRestore={onRestore}
         />

diff --git a/...r/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupTableRow.tsx b/...r/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupTableRow.tsx
@@ -8,17 +8,25 @@ import { parseAPIDate } from 'src/utilities/date';
 
 import DatabaseBackupActionMenu from './DatabaseBackupActionMenu';
 
+import type { TableRowOwnProps } from '@mui/material';
+
 interface Props {
   backup: DatabaseBackup;
   disabled?: boolean;
+  hover?: TableRowOwnProps['hover'];
   onRestore: (id: number) => void;
 }
 
-export const BackupTableRow = ({ backup, disabled, onRestore }: Props) => {
+export const BackupTableRow = ({
+  backup,
+  disabled,
+  hover,
+  onRestore,
+}: Props) => {
   const { created, id } = backup;
 
   return (
-    <TableRow key={id}>
+    <TableRow hover={hover} key={id}>
       <TableCell>
         <DateTimeDisplay value={created} />
       </TableCell>

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -175,6 +175,7 @@ const DatabaseLandingTable = ({
               }}
               database={database}
               events={events}
+              hover
               isNewDatabase={isNewDatabase}
               key={database.id}
             />

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
@@ -21,6 +21,7 @@ import type {
   DatabaseInstance,
   DatabaseType,
 } from '@linode/api-v4/lib/databases/types';
+import type { TableRowOwnProps } from '@mui/material';
 import type { ActionHandlers } from 'src/features/Databases/DatabaseLanding/DatabaseActionMenu';
 
 interface Props {
@@ -31,13 +32,15 @@ interface Props {
    * @since DBaaS V2 GA
    */
   handlers?: ActionHandlers;
+  hover?: TableRowOwnProps['hover'];
   isNewDatabase?: boolean;
 }
 
 export const DatabaseRow = ({
   database,
   events,
   handlers,
+  hover,
   isNewDatabase,
 }: Props) => {
   const {
@@ -81,7 +84,11 @@ export const DatabaseRow = ({
       </>
     );
   return (
-    <TableRow data-qa-database-cluster-id={id} key={`database-row-${id}`}>
+    <TableRow
+      data-qa-database-cluster-id={id}
+      hover={hover}
+      key={`database-row-${id}`}
+    >
       <TableCell>
         {isDatabasesV2GA && isLinkInactive ? (
           label

diff --git a/packages/manager/src/features/Domains/DomainTableRow.tsx b/packages/manager/src/features/Domains/DomainTableRow.tsx
@@ -14,16 +14,18 @@ import { getDomainDisplayType } from './domainUtils';
 
 import type { Handlers } from './DomainActionMenu';
 import type { Domain, DomainStatus } from '@linode/api-v4/lib/domains';
+import type { TableRowOwnProps } from '@mui/material';
 
 interface DomainTableRowProps extends Handlers {
   domain: Domain;
+  hover?: TableRowOwnProps['hover'];
 }
 
 export const DomainTableRow = React.memo((props: DomainTableRowProps) => {
-  const { domain, onClone, onDisableOrEnable, onEdit, onRemove } = props;
+  const { domain, hover, onClone, onDisableOrEnable, onEdit, onRemove } = props;
 
   return (
-    <TableRow data-qa-domain-cell={domain.domain} key={domain.id}>
+    <TableRow data-qa-domain-cell={domain.domain} hover={hover} key={domain.id}>
       <TableCell data-qa-domain-label>
         <StyledDiv>
           {domain.type !== 'slave' ? (

diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx
@@ -278,7 +278,12 @@ export const DomainsLanding = (props: DomainsLandingProps) => {
         </TableHead>
         <TableBody>
           {domains?.data.map((domain: Domain) => (
-            <DomainTableRow domain={domain} key={domain.id} {...handlers} />
+            <DomainTableRow
+              domain={domain}
+              hover
+              key={domain.id}
+              {...handlers}
+            />
           ))}
         </TableBody>
       </Table>

diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
@@ -18,14 +18,16 @@ import {
 } from './utils';
 
 import type { Event } from '@linode/api-v4/lib/account';
+import type { TableRowOwnProps } from '@mui/material';
 
 interface EventRowProps {
   entityId?: number;
   event: Event;
+  hover?: TableRowOwnProps['hover'];
 }
 
 export const EventRow = (props: EventRowProps) => {
-  const { event } = props;
+  const { event, hover } = props;
   const theme = useTheme();
   const timestamp = getEventTimestamp(event);
   const { action, message, username } = {
@@ -42,7 +44,7 @@ export const EventRow = (props: EventRowProps) => {
   const { progressEventDisplay, showProgress } = formatProgressEvent(event);
 
   return (
-    <TableRow data-qa-event-row data-test-id={action}>
+    <TableRow data-qa-event-row data-test-id={action} hover={hover}>
       <TableCell data-qa-event-message-cell>
         <Box sx={{ mt: showProgress ? 0.5 : 0 }}>{message}</Box>
         {showProgress && (

diff --git a/packages/manager/src/features/Events/EventsLanding.tsx b/packages/manager/src/features/Events/EventsLanding.tsx
@@ -74,6 +74,7 @@ export const EventsLanding = (props: Props) => {
             <EventRow
               entityId={entityId}
               event={event}
+              hover
               key={`event-${event.id}`}
             />
           ))}

diff --git a/packages/manager/src/features/Events/EventsMessages.stories.tsx b/packages/manager/src/features/Events/EventsMessages.stories.tsx
@@ -45,7 +45,7 @@ export const EventMessages: StoryObj = {
           </Typography>
           <Table>
             <TableHead>
-              <TableRow>
+              <TableRow hover>
                 <TableCell style={{ width: '15%' }}>Status</TableCell>
                 <TableCell>Message</TableCell>
               </TableRow>
@@ -55,7 +55,7 @@ export const EventMessages: StoryObj = {
                 const message = statuses[status]?.(event);
 
                 return (
-                  <TableRow key={`status-${key}`}>
+                  <TableRow hover key={`status-${key}`}>
                     <TableCell>
                       <Chip label={status} />
                     </TableCell>

diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx
@@ -192,7 +192,7 @@ const FirewallLanding = () => {
         </TableHead>
         <TableBody>
           {data?.data.map((firewall) => (
-            <FirewallRow key={firewall.id} {...firewall} {...handlers} />
+            <FirewallRow hover key={firewall.id} {...firewall} {...handlers} />
           ))}
         </TableBody>
       </Table>

diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.tsx
@@ -15,12 +15,20 @@ import type { Firewall, FirewallDeviceEntity } from '@linode/api-v4';
 export interface FirewallRowProps extends Firewall, ActionHandlers {}
 
 export const FirewallRow = React.memo((props: FirewallRowProps) => {
-  const { entities, id, label, rules, status, ...actionHandlers } = props;
+  const {
+    entities,
+    hover,
+    id,
+    label,
+    rules,
+    status,
+    ...actionHandlers
+  } = props;
 
   const count = getCountOfRules(rules);
 
   return (
-    <TableRow data-testid={`firewall-row-${id}`}>
+    <TableRow data-testid={`firewall-row-${id}`} hover={hover}>
       <TableCell>
         <Link tabIndex={0} to={`/firewalls/${id}`}>
           {label}
-Original file line number
+Diff line change
@@ Expand Up / @@ -78,6 +78,7 @@ export const AlertListing = () => { @@
                     handleDetails: () => handleDetails(alert),
                   }}
                   alert={alert}
+                  hover
                   key={alert.id}
                 />
               ))}
@@ Expand Down @@