refactor: [M3-6316, M3-6317] MUI v5 Migration - Components > DateTime…

…Display, DebouncedSearchTextField (#9007)

* Pull in latest develop

* Fix DateTimeDisplayProps export

* Run codemod on DebouncedSearchTextField

* Modernize DebouncedSearchTextField export, props interface

* Use styled component

* Remove important

* Address PR feedback

* Add changelog entry

* Prevent search icon from turning blue on hover

CHANGELOG.md

@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - MUIv5 Migration - Components > StatusIcon #9014
 - MUIv5 Migration - Components > TagsInput, TagsPanel #8995
 - MUIv5 Migration - Grid v2 for Features #8985
+- MUIv5 Migration - `Components > DateTimeDisplay, DebouncedSearchTextField` #9007
 - MUIv5 Migration - `SRC > Components > ConfirmationDialog` #9016
 
 ## [2023-04-18] - v1.91.1

packages/manager/src/components/BackupStatus/BackupStatus.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Tooltip from 'src/components/core/Tooltip';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import Link from 'src/components/Link';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
 import { makeStyles } from 'tss-react/mui';

packages/manager/src/components/DateTimeDisplay/DateTimeDisplay.test.tsx

@@ -1,7 +1,7 @@
 import { renderWithTheme } from 'src/utilities/testHelpers';
 import { DateTime } from 'luxon';
 import * as React from 'react';
-import { DateTimeDisplay, Props } from './DateTimeDisplay';
+import { DateTimeDisplay, DateTimeDisplayProps } from './DateTimeDisplay';
 import { ISO_DATETIME_NO_TZ_FORMAT } from 'src/constants';
 jest.mock('../../utilities/getUserTimezone');
 
@@ -19,12 +19,12 @@ describe('DateTimeDisplay component', () => {
 
   describe('Humanized dates', () => {
     it('should output humanized strings if the date is earlier than the cutoff', () => {
-      const props = {
+      const props: DateTimeDisplayProps = {
         value: DateTime.utc()
           .minus({ minutes: 5 })
           .toFormat(ISO_DATETIME_NO_TZ_FORMAT),
         humanizeCutoff: 'day',
-      } as Props;
+      };
       const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);
 
       getByText('5 minutes ago');
@@ -35,19 +35,19 @@ describe('DateTimeDisplay component', () => {
         ISO_DATETIME_NO_TZ_FORMAT
       );
       it('cutoff month', () => {
-        const props = {
+        const props: DateTimeDisplayProps = {
           value: almostOneWeekString,
           humanizeCutoff: 'month',
-        } as Props;
+        };
         const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);
         getByText('6 days ago');
       });
 
       it('cutoff day', () => {
-        const props = {
+        const props: DateTimeDisplayProps = {
           value: almostOneWeekString,
           humanizeCutoff: 'day',
-        } as Props;
+        };
         const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);
         getByText(`${almostOneWeek.year}`, { exact: false });
       });
@@ -56,10 +56,10 @@ describe('DateTimeDisplay component', () => {
       const aLongTimeAgo = DateTime.utc()
         .minus({ years: 10 })
         .toFormat(ISO_DATETIME_NO_TZ_FORMAT);
-      const props = {
+      const props: DateTimeDisplayProps = {
         value: aLongTimeAgo,
         humanizeCutoff: 'never',
-      } as Props;
+      };
       const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);
       getByText('10 years ago');
     });

packages/manager/src/components/DateTimeDisplay/DateTimeDisplay.tsx

@@ -3,7 +3,7 @@ import Typography from 'src/components/core/Typography';
 import { useProfile } from 'src/queries/profile';
 import formatDate, { TimeInterval } from 'src/utilities/formatDate';
 
-export interface Props {
+export interface DateTimeDisplayProps {
   value: string;
   format?: string;
   displayTime?: boolean;
@@ -12,9 +12,7 @@ export interface Props {
   styles?: React.CSSProperties;
 }
 
-type CombinedProps = Props;
-
-export const DateTimeDisplay: React.FC<CombinedProps> = (props) => {
+const DateTimeDisplay = (props: DateTimeDisplayProps) => {
   const { format, humanizeCutoff, displayTime, value, className } = props;
   const { data: profile } = useProfile();
   return (
@@ -29,4 +27,4 @@ export const DateTimeDisplay: React.FC<CombinedProps> = (props) => {
   );
 };
 
-export default DateTimeDisplay;
+export { DateTimeDisplay };

packages/manager/src/components/DateTimeDisplay/index.ts

@@ -1,6 +1,2 @@
-import DateTimeDisplay, {
-  Props as _DateTimeDisplayProps,
-} from './DateTimeDisplay';
-/* tslint:disable */
-export interface DateTimeDisplayProps extends _DateTimeDisplayProps {}
-export default DateTimeDisplay;
+export type { DateTimeDisplayProps } from './DateTimeDisplay';
+export { DateTimeDisplay } from './DateTimeDisplay';

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -1,22 +1,14 @@
 import Search from '@mui/icons-material/Search';
 import * as React from 'react';
-import { compose } from 'recompose';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import InputAdornment from 'src/components/core/InputAdornment';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import TextField, { Props as TextFieldProps } from 'src/components/TextField';
 
 import usePrevious from 'src/hooks/usePrevious';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  searchIcon: {
-    color: `${theme.color.grey1} !important`,
-  },
-}));
-
-interface Props extends TextFieldProps {
+interface DebouncedSearchProps extends TextFieldProps {
   onSearch: (query: string) => void;
   debounceTime?: number;
   isSearching?: boolean;
@@ -27,9 +19,7 @@ interface Props extends TextFieldProps {
   defaultValue?: string;
 }
 
-type CombinedProps = Props;
-
-const DebouncedSearch: React.FC<CombinedProps> = (props) => {
+const DebouncedSearch = (props: DebouncedSearchProps) => {
   const {
     className,
     isSearching,
@@ -45,8 +35,6 @@ const DebouncedSearch: React.FC<CombinedProps> = (props) => {
   const [query, setQuery] = React.useState<string>('');
   const prevQuery = usePrevious<string>(query);
 
-  const classes = useStyles();
-
   React.useEffect(() => {
     /*
       This `didCancel` business is to prevent a warning from React.
@@ -85,7 +73,7 @@ const DebouncedSearch: React.FC<CombinedProps> = (props) => {
       InputProps={{
         startAdornment: (
           <InputAdornment position="end">
-            <Search className={classes.searchIcon} />
+            <StyledSearchIcon />
           </InputAdornment>
         ),
         endAdornment: isSearching ? (
@@ -102,4 +90,10 @@ const DebouncedSearch: React.FC<CombinedProps> = (props) => {
   );
 };
 
-export default compose<CombinedProps, Props>(React.memo)(DebouncedSearch);
+export const DebouncedSearchTextField = React.memo(DebouncedSearch);
+
+const StyledSearchIcon = styled(Search)(({ theme }) => ({
+  '&&, &&:hover': {
+    color: theme.color.grey1,
+  },
+}));

packages/manager/src/components/DebouncedSearchTextField/StoryComponents/TextFieldExample.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { action } from '@storybook/addon-actions';
 
-import DebouncedSearchTextField from '../DebouncedSearchTextField';
+import { DebouncedSearchTextField } from '../DebouncedSearchTextField';
 
 interface Props {
   list: string[];

packages/manager/src/components/DebouncedSearchTextField/index.tsx

@@ -1,2 +1 @@
-import DebouncedSearchTextField from './DebouncedSearchTextField';
-export default DebouncedSearchTextField;
+export { DebouncedSearchTextField } from './DebouncedSearchTextField';

packages/manager/src/components/StackScript/StackScript.tsx

@@ -8,7 +8,7 @@ import CopyTooltip from 'src/components/CopyTooltip';
 import Chip from 'src/components/core/Chip';
 import Divider from 'src/components/core/Divider';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import H1Header from 'src/components/H1Header';
 import ScriptCode from 'src/components/ScriptCode';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';

packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx

@@ -14,7 +14,7 @@ import TableHead from 'src/components/core/TableHead';
 import Typography from 'src/components/core/Typography';
 import { TextTooltip } from 'src/components/TextTooltip';
 import Currency from 'src/components/Currency';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import InlineMenuAction from 'src/components/InlineMenuAction';
 import Link from 'src/components/Link';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDisplay.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from 'src/components/core/Box';
 import Currency from 'src/components/Currency';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
 import Typography from 'src/components/core/Typography';
 import { useTheme } from '@mui/material/styles';

packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx

@@ -6,7 +6,7 @@ import { Theme } from '@mui/material/styles';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
 import Currency from 'src/components/Currency';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import Paginate from 'src/components/Paginate';
 import PaginationFooter from 'src/components/PaginationFooter';
 import Table from 'src/components/Table';

packages/manager/src/features/Domains/DomainTableRow.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.tsx

@@ -5,7 +5,7 @@ import { Theme } from '@mui/material/styles';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
 import Typography from 'src/components/core/Typography';
-import DebouncedSearchTextField from 'src/components/DebouncedSearchTextField';
+import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import PaginationFooter from 'src/components/PaginationFooter';
 import Table from 'src/components/Table';
 import TableCell from 'src/components/TableCell';

packages/manager/src/features/EntityTransfers/RenderTransferRow.tsx

@@ -4,7 +4,7 @@ import CopyTooltip from 'src/components/CopyTooltip';
 import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import capitalize from 'src/utilities/capitalize';

packages/manager/src/features/Events/EventRow.tsx

@@ -5,7 +5,7 @@ import { compose } from 'recompose';
 import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import HighlightedMarkdown from 'src/components/HighlightedMarkdown';
 import renderGuard, { RenderGuardProps } from 'src/components/RenderGuard';
 import TableCell from 'src/components/TableCell';

packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Chip from 'src/components/core/Chip';
 import Hidden from 'src/components/core/Hidden';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
 import Grid from '@mui/material/Unstable_Grid2';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import ActionMenu from './ClusterActionMenu';

packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx

@@ -12,7 +12,7 @@ import { compose } from 'recompose';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import Search from 'src/components/DebouncedSearchTextField';
+import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import Grid from 'src/components/Grid';
@@ -235,7 +235,7 @@ export const LongviewClients: React.FC<CombinedProps> = (props) => {
       <DocumentTitleSegment segment="Clients" />
       <Grid container className={classes.headingWrapper} alignItems="center">
         <Grid item className={classes.searchbar}>
-          <Search
+          <DebouncedSearchTextField
             placeholder="Filter by client label or hostname"
             label="Filter by client label or hostname"
             hideLabel

packages/manager/src/features/Managed/Credentials/CredentialRow.tsx

@@ -2,7 +2,7 @@ import { ManagedCredential } from '@linode/api-v4/lib/managed';
 import * as React from 'react';
 import { createStyles, makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import ActionMenu from './CredentialActionMenu';

packages/manager/src/features/Managed/Monitors/IssueDay.tsx

@@ -7,8 +7,8 @@ import TicketIcon from 'src/assets/icons/ticket.svg';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Tooltip from 'src/components/core/Tooltip';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
 import Grid from '@mui/material/Unstable_Grid2';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx

@@ -4,7 +4,7 @@ import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import EntityIcon from 'src/components/EntityIcon';
 import Grid from '@mui/material/Unstable_Grid2';
 import TableCell from 'src/components/TableCell';

packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx

@@ -5,8 +5,8 @@ import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
 import Grid from '@mui/material/Unstable_Grid2';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import { useObjectStorageClusters } from 'src/queries/objectStorage';

packages/manager/src/features/Profile/APITokens/APITokenTable.tsx

@@ -3,8 +3,8 @@ import AddNewLink from 'src/components/AddNewLink';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
 import Grid from '@mui/material/Unstable_Grid2';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import PaginationFooter from 'src/components/PaginationFooter';
 import Table from 'src/components/Table';
 import TableCell from 'src/components/TableCell';

packages/manager/src/features/Profile/AuthenticationSettings/TrustedDevices.tsx

@@ -9,7 +9,7 @@ import TableRow from 'src/components/TableRow';
 import TableRowError from 'src/components/TableRowError/TableRowError';
 import TableRowEmpty from 'src/components/TableRowEmptyState';
 import TableSortCell from 'src/components/TableSortCell';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import InlineMenuAction from 'src/components/InlineMenuAction';
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';

packages/manager/src/features/Search/ResultRow.tsx

@@ -4,7 +4,7 @@ import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Item } from 'src/components/EnhancedSelect/Select';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';

packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx

@@ -11,7 +11,7 @@ import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg';
 import Button from 'src/components/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import Typography from 'src/components/core/Typography';
-import DebouncedSearch from 'src/components/DebouncedSearchTextField';
+import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import ErrorState from 'src/components/ErrorState';
 import Notice from 'src/components/Notice';
 import Placeholder from 'src/components/Placeholder';
@@ -544,7 +544,7 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => (
                   [classes.landing]: !isSelecting,
                 })}
               >
-                <DebouncedSearch
+                <DebouncedSearchTextField
                   placeholder="Search by Label, Username, or Description"
                   onSearch={this.handleSearch}
                   debounceTime={400}

packages/manager/src/features/Support/ExpandableTicketPanel.tsx

@@ -4,8 +4,8 @@ import { compose } from 'recompose';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
 import Grid from '@mui/material/Unstable_Grid2';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Hively, shouldRenderHively } from './Hively';
 import TicketDetailBody from './TicketDetailText';
 import { OFFICIAL_USERNAMES } from './ticketUtils';

packages/manager/src/features/Support/SupportTickets/TicketRow.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Hidden from 'src/components/core/Hidden';
 import Typography from 'src/components/core/Typography';
-import DateTimeDisplay from 'src/components/DateTimeDisplay';
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import { SupportTicket } from '@linode/api-v4/lib/support';