Add hover background transitions to tables - Part2

linode · Dec 30, 2024 · 0ecfc55 · 0ecfc55
1 parent a9120db
commit 0ecfc55
Show file tree

Hide file tree

Showing 47 changed files with 161 additions and 61 deletions.
diff --git a/packages/manager/src/components/AccessPanel/AccessPanel.tsx b/packages/manager/src/components/AccessPanel/AccessPanel.tsx
@@ -267,6 +267,7 @@ export const AccessPanel = (props: Props) => {
           <UserSSHKeyPanel
             authorizedUsers={authorizedUsers}
             disabled={disabled}
+            hover
             setAuthorizedUsers={setAuthorizedUsers}
           />
         </>

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -20,6 +20,7 @@ import { Avatar } from '../Avatar/Avatar';
 import { PaginationFooter } from '../PaginationFooter/PaginationFooter';
 import { TableRowLoading } from '../TableRowLoading/TableRowLoading';
 
+import type { TableRowOwnProps } from '@mui/material';
 import type { Theme } from '@mui/material/styles';
 
 export const MAX_SSH_KEYS_DISPLAY = 25;
@@ -46,13 +47,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
 interface Props {
   authorizedUsers: string[];
   disabled?: boolean;
+  hover?: TableRowOwnProps['hover'];
   setAuthorizedUsers: (usernames: string[]) => void;
 }
 
 const UserSSHKeyPanel = (props: Props) => {
   const { classes } = useStyles();
   const theme = useTheme();
-  const { authorizedUsers, disabled, setAuthorizedUsers } = props;
+  const { authorizedUsers, disabled, hover, setAuthorizedUsers } = props;
 
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
     false
@@ -127,7 +129,7 @@ const UserSSHKeyPanel = (props: Props) => {
     // Special case for restricted users
     if (profile && isRestricted) {
       return (
-        <TableRow>
+        <TableRow hover={hover}>
           <TableCell className={classes.cellCheckbox}>
             <Checkbox
               inputProps={{
@@ -156,7 +158,7 @@ const UserSSHKeyPanel = (props: Props) => {
     }
 
     return users?.data.map((user) => (
-      <TableRow key={user.username}>
+      <TableRow hover={hover} key={user.username}>
         <TableCell className={classes.cellCheckbox}>
           <Checkbox
             inputProps={{

diff --git a/packages/manager/src/components/CollapsibleTable/CollapsibleTable.stories.tsx b/packages/manager/src/components/CollapsibleTable/CollapsibleTable.stories.tsx
@@ -27,13 +27,13 @@ export const Default: StoryObj<typeof CollapsibleTable> = {
               </TableRow>
             </TableHead>
             <TableBody>
-              <TableRow>
+              <TableRow hover>
                 <TableCell style={{ paddingLeft: 48 }}>2020-01-05</TableCell>
                 <TableCell>11091700</TableCell>
                 <TableCell>3</TableCell>
                 <TableCell>11.97</TableCell>
               </TableRow>
-              <TableRow>
+              <TableRow hover>
                 <TableCell style={{ paddingLeft: 48 }}>2020-01-02</TableCell>
                 <TableCell>Anonymous</TableCell>
                 <TableCell>1</TableCell>

diff --git a/packages/manager/src/components/LineGraph/LineGraph.tsx b/packages/manager/src/components/LineGraph/LineGraph.tsx
@@ -382,7 +382,7 @@ export const LineGraph = (props: LineGraphProps) => {
                 const hidden = hiddenDatasets.includes(idx);
                 const { data: metricsData, format } = legendRows[idx];
                 return (
-                  <TableRow key={idx}>
+                  <TableRow hover key={idx}>
                     <TableCell noWrap>
                       <StyledButton
                         aria-label={`Toggle ${title} visibility`}

diff --git a/packages/manager/src/components/LineGraph/MetricsDisplay.tsx b/packages/manager/src/components/LineGraph/MetricsDisplay.tsx
@@ -9,6 +9,7 @@ import { TableRow } from 'src/components/TableRow';
 
 import { StyledLegend } from './MetricsDisplay.styles';
 
+import type { TableRowOwnProps } from '@mui/material';
 import type { Metrics } from 'src/utilities/statMetrics';
 
 const ROW_HEADERS = ['Max', 'Avg', 'Last'] as const;
@@ -56,15 +57,17 @@ const HeaderRow = () => {
 
 const MetricRow = ({
   hidden,
+  hover,
   row,
 }: {
   hidden?: boolean;
+  hover?: TableRowOwnProps['hover'];
   row: MetricsDisplayRow;
 }) => {
   const { data, format, handleLegendClick, legendColor, legendTitle } = row;
 
   return (
-    <TableRow data-qa-metric-row>
+    <TableRow data-qa-metric-row hover={hover}>
       <TableCell>
         <StyledLegend
           data-testid="legend-title"
@@ -110,6 +113,7 @@ export const MetricsDisplay = ({
       {rows.map((row) => (
         <MetricRow
           hidden={hiddenRows.includes(row.legendTitle)}
+          hover
           key={row.legendTitle}
           row={row}
         />

diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsListTable.tsx b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsListTable.tsx
@@ -15,6 +15,8 @@ import {
   StyledLabel,
 } from './RemovableSelectionsList.style';
 
+import type { TableRowOwnProps } from '@mui/material';
+
 export type RemovableItem = {
   // The remaining key-value pairs must have their values typed
   // as 'any' because we do not know what types they could be.
@@ -29,6 +31,10 @@ export interface RemovableSelectionsListTableProps {
    * The descriptive text to display above the list
    */
   headerText: string;
+  /**
+   * If true, hover transition will appear on the tablerow
+   */
+  hover?: TableRowOwnProps['hover'];
   /**
    * If false, hide the remove button
    */
@@ -62,6 +68,7 @@ export const RemovableSelectionsListTable = (
 ) => {
   const {
     headerText,
+    hover,
     isRemovable = true,
     noDataText,
     onRemove,
@@ -79,7 +86,7 @@ export const RemovableSelectionsListTable = (
       <TableRowEmpty colSpan={4} message={noDataText} />
     ) : (
       selectionData.map((selection) => (
-        <TableRow key={selection.id}>
+        <TableRow hover={hover} key={selection.id}>
           <TableCell>
             <StyledLabel>
               {preferredDataLabel

diff --git a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx
@@ -5,6 +5,8 @@ import * as React from 'react';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 
+import type { TableRowOwnProps } from '@mui/material';
+
 interface SelectableTableRowProps {
   /**
    * The content to be rendered inside the table row.
@@ -16,6 +18,7 @@ interface SelectableTableRowProps {
    * This function will be called when the row is clicked to select or deselect it.
    */
   handleToggleCheck: () => void;
+  hover?: TableRowOwnProps['hover'];
   /**
    * A boolean indicating whether the row is currently checked or not.
    */
@@ -24,7 +27,7 @@ interface SelectableTableRowProps {
 
 export const SelectableTableRow = React.memo(
   (props: SelectableTableRowProps) => {
-    const { handleToggleCheck, isChecked } = props;
+    const { handleToggleCheck, hover, isChecked } = props;
 
     return (
       <TableRow
@@ -33,6 +36,7 @@ export const SelectableTableRow = React.memo(
             padding: '0px 15px',
           },
         }}
+        hover={hover}
       >
         <StyledTableCell>
           <Checkbox

diff --git a/packages/manager/src/components/Table/Table.stories.tsx b/packages/manager/src/components/Table/Table.stories.tsx
@@ -26,17 +26,17 @@ const meta: Meta<TableProps> = {
           </TableRow>
         </TableHead>
         <TableBody>
-          <TableRow>
+          <TableRow hover>
             <TableCell>test-0</TableCell>
             <TableCell>Linode 2 GB</TableCell>
             <TableCell>Atlanta, GA</TableCell>
           </TableRow>
-          <TableRow>
+          <TableRow hover>
             <TableCell>test-1</TableCell>
             <TableCell>Linode 4 GB</TableCell>
             <TableCell>Dallas, TX</TableCell>
           </TableRow>
-          <TableRow>
+          <TableRow hover>
             <TableCell>test-2</TableCell>
             <TableCell>Linode 8 GB</TableCell>
             <TableCell>Newark, NJ</TableCell>

diff --git a/packages/manager/src/components/TableFooter.stories.tsx b/packages/manager/src/components/TableFooter.stories.tsx
@@ -14,7 +14,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 export const Default: StoryObj<typeof TableFooter> = {
   args: {
     children: (
-      <TableRow>
+      <TableRow hover>
         <TableCell colSpan={3}>
           <Typography>This is a Table Footer</Typography>
         </TableCell>
@@ -32,7 +32,7 @@ export const Default: StoryObj<typeof TableFooter> = {
           </TableRow>
         </TableHead>
         <TableBody>
-          <TableRow>
+          <TableRow hover>
             <TableCell>Test 1</TableCell>
             <TableCell>Test 2</TableCell>
             <TableCell>Test 3</TableCell>

diff --git a/packages/manager/src/components/TableRowEmpty/TableRowEmpty.tsx b/packages/manager/src/components/TableRowEmpty/TableRowEmpty.tsx
@@ -21,7 +21,7 @@ export interface TableRowEmptyProps {
  */
 export const TableRowEmpty = (props: TableRowEmptyProps) => {
   return (
-    <TableRow data-testid={'table-row-empty'}>
+    <TableRow data-testid={'table-row-empty'} hover>
       <TableCell
         sx={{
           height: '40px',

diff --git a/packages/manager/src/components/TableRowError/TableRowError.tsx b/packages/manager/src/components/TableRowError/TableRowError.tsx
@@ -18,7 +18,7 @@ export interface TableRowErrorProps {
 
 export const TableRowError = (props: TableRowErrorProps) => {
   return (
-    <TableRow data-testid="table-row-error">
+    <TableRow data-testid="table-row-error" hover>
       <TableCell colSpan={props.colSpan}>
         <ErrorState compact errorText={props.message} />
       </TableCell>

diff --git a/packages/manager/src/components/TableRowLoading/TableRowLoading.tsx b/packages/manager/src/components/TableRowLoading/TableRowLoading.tsx
@@ -59,6 +59,7 @@ export const TableRowLoading = ({
         }}
         aria-label="Table content is loading"
         data-testid="table-row-loading"
+        hover
         key={`table-loading-row-${i}`}
       >
         {cols}

diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx
@@ -118,7 +118,11 @@ export const MaintenanceTable = ({ type }: Props) => {
 
     if (data) {
       return data.data.map((item: AccountMaintenance) => (
-        <MaintenanceTableRow key={`${item.entity.id}-${item.type}`} {...item} />
+        <MaintenanceTableRow
+          hover
+          key={`${item.entity.id}-${item.type}`}
+          {...item}
+        />
       ));
     }
 

diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx
@@ -14,8 +14,13 @@ import { formatDate } from 'src/utilities/formatDate';
 import { truncate } from 'src/utilities/truncate';
 
 import type { AccountMaintenance } from '@linode/api-v4/lib/account/types';
+import type { TableRowOwnProps } from '@mui/material';
 import type { Status } from 'src/components/StatusIcon/StatusIcon';
 
+interface Props extends AccountMaintenance {
+  hover?: TableRowOwnProps['hover'];
+}
+
 const statusTextMap: Record<AccountMaintenance['status'], string> = {
   completed: 'Completed',
   pending: 'Scheduled',
@@ -28,8 +33,8 @@ const statusIconMap: Record<AccountMaintenance['status'], Status> = {
   started: 'other',
 };
 
-export const MaintenanceTableRow = (props: AccountMaintenance) => {
-  const { entity, reason, status, type, when } = props;
+export const MaintenanceTableRow = (props: Props) => {
+  const { entity, hover, reason, status, type, when } = props;
 
   const { data: profile } = useProfile();
 
@@ -38,7 +43,7 @@ export const MaintenanceTableRow = (props: AccountMaintenance) => {
   const isTruncated = reason !== truncatedReason;
 
   return (
-    <TableRow key={entity.id}>
+    <TableRow hover={hover} key={entity.id}>
       <TableCell style={{ textTransform: 'capitalize' }}>
         {entity.type}
       </TableCell>

diff --git a/packages/manager/src/features/Domains/DomainRecords.tsx b/packages/manager/src/features/Domains/DomainRecords.tsx
@@ -710,6 +710,7 @@ class DomainRecords extends React.Component<Props, State> {
                                     return (
                                       <TableRow
                                         data-qa-record-row={type.title}
+                                        hover
                                         key={idx}
                                       >
                                         {type.columns.length > 0 &&

diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx
@@ -118,6 +118,7 @@ const LinodeRow = (props: RowProps) => {
   return (
     <SelectableTableRow
       handleToggleCheck={handleToggleCheck}
+      hover
       isChecked={isChecked}
     >
       <TableCell>{linode.label}</TableCell>

diff --git a/packages/manager/src/features/EntityTransfers/RenderTransferRow.tsx b/packages/manager/src/features/EntityTransfers/RenderTransferRow.tsx
@@ -20,6 +20,7 @@ import {
 import { TransfersPendingActionMenu } from './TransfersPendingActionMenu';
 
 import type { TransferEntities } from '@linode/api-v4/lib/entity-transfers';
+import type { TableRowOwnProps } from '@mui/material';
 
 interface Props {
   created: string;
@@ -30,6 +31,7 @@ interface Props {
     entities: TransferEntities
   ) => void;
   handleTokenClick: (token: string, entities: TransferEntities) => void;
+  hover?: TableRowOwnProps['hover'];
   status?: string;
   token: string;
   transferType?: 'pending' | 'received' | 'sent';
@@ -42,6 +44,7 @@ export const RenderTransferRow = React.memo((props: Props) => {
     expiry,
     handleCancelPendingTransferClick,
     handleTokenClick,
+    hover,
     status,
     token,
     transferType,
@@ -58,7 +61,7 @@ export const RenderTransferRow = React.memo((props: Props) => {
     : StyledTableCell;
 
   return (
-    <StyledTableRow>
+    <StyledTableRow hover={hover}>
       <StyledTokenTableCell noWrap>
         <StyledDiv>
           <MaskableText isToggleable text={token}>

diff --git a/packages/manager/src/features/EntityTransfers/TransfersTable.tsx b/packages/manager/src/features/EntityTransfers/TransfersTable.tsx
@@ -155,6 +155,7 @@ export const TransfersTable = React.memo((props: Props) => {
                     entities={transfer.entities}
                     expiry={transfer.expiry}
                     handleTokenClick={handleTokenClick}
+                    hover
                     key={`${transferType}-${idx}`}
                     status={transfer.status}
                     token={transfer.token}

diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceRow.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceRow.tsx
@@ -9,24 +9,25 @@ import {
   FirewallDeviceActionMenuProps,
 } from './FirewallDeviceActionMenu';
 
-export const FirewallDeviceRow = React.memo(
-  (props: FirewallDeviceActionMenuProps) => {
-    const { deviceEntityID, deviceID, deviceLabel, deviceType } = props;
+import type { TableRowOwnProps } from '@mui/material';
 
-    return (
-      <TableRow data-testid={`firewall-device-row-${deviceID}`}>
-        <TableCell>
-          <Link
-            tabIndex={0}
-            to={`/${deviceType}s/${deviceEntityID}/networking`}
-          >
-            {deviceLabel}
-          </Link>
-        </TableCell>
-        <TableCell actionCell>
-          <FirewallDeviceActionMenu {...props} />
-        </TableCell>
-      </TableRow>
-    );
-  }
-);
+interface Props extends FirewallDeviceActionMenuProps {
+  hover?: TableRowOwnProps['hover'];
+}
+
+export const FirewallDeviceRow = React.memo((props: Props) => {
+  const { deviceEntityID, deviceID, deviceLabel, deviceType, hover } = props;
+
+  return (
+    <TableRow data-testid={`firewall-device-row-${deviceID}`} hover={hover}>
+      <TableCell>
+        <Link tabIndex={0} to={`/${deviceType}s/${deviceEntityID}/networking`}>
+          {deviceLabel}
+        </Link>
+      </TableCell>
+      <TableCell actionCell>
+        <FirewallDeviceActionMenu {...props} />
+      </TableCell>
+    </TableRow>
+  );
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ export const TableRowLoading = ({ @@
             }}
             aria-label="Table content is loading"
             data-testid="table-row-loading"
+            hover
             key={`table-loading-row-${i}`}
           >
             {cols}
@@ Expand Down @@