Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: [M3-6316, M3-6317] MUI v5 Migration - Components > DateTimeDisplay, DebouncedSearchTextField #9007

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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');

Expand All @@ -24,7 +24,7 @@ describe('DateTimeDisplay component', () => {
.minus({ minutes: 5 })
.toFormat(ISO_DATETIME_NO_TZ_FORMAT),
humanizeCutoff: 'day',
} as Props;
} as DateTimeDisplayProps;
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);

getByText('5 minutes ago');
Expand All @@ -38,7 +38,7 @@ describe('DateTimeDisplay component', () => {
const props = {
value: almostOneWeekString,
humanizeCutoff: 'month',
} as Props;
} as DateTimeDisplayProps;
const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);
getByText('6 days ago');
});
Expand All @@ -47,7 +47,7 @@ describe('DateTimeDisplay component', () => {
const props = {
value: almostOneWeekString,
humanizeCutoff: 'day',
} as Props;
} as DateTimeDisplayProps;
const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);
getByText(`${almostOneWeek.year}`, { exact: false });
});
Expand All @@ -59,7 +59,7 @@ describe('DateTimeDisplay component', () => {
const props = {
value: aLongTimeAgo,
humanizeCutoff: 'never',
} as Props;
} as DateTimeDisplayProps;
const { getByText } = renderWithTheme(<DateTimeDisplay {...props} />);
getByText('10 years ago');
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 (
Expand All @@ -29,4 +27,4 @@ export const DateTimeDisplay: React.FC<CombinedProps> = (props) => {
);
};

export default DateTimeDisplay;
export { DateTimeDisplay };
9 changes: 5 additions & 4 deletions packages/manager/src/components/DateTimeDisplay/index.ts
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import DateTimeDisplay, {
Props as _DateTimeDisplayProps,
import {
DateTimeDisplay,
DateTimeDisplayProps as _DateTimeDisplayProps,
} from './DateTimeDisplay';
/* tslint:disable */
export interface DateTimeDisplayProps extends _DateTimeDisplayProps {}
export default DateTimeDisplay;
export type DateTimeDisplayProps = _DateTimeDisplayProps;
export { DateTimeDisplay };
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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,
Expand All @@ -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.
Expand Down Expand Up @@ -85,7 +73,7 @@ const DebouncedSearch: React.FC<CombinedProps> = (props) => {
InputProps={{
startAdornment: (
<InputAdornment position="end">
<Search className={classes.searchIcon} />
<StyledSearchIcon />
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
</InputAdornment>
),
endAdornment: isSearching ? (
Expand All @@ -102,4 +90,8 @@ 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 }) => ({
color: `${theme.color.grey1} !important`,
}));
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
import DebouncedSearchTextField from './DebouncedSearchTextField';
export default DebouncedSearchTextField;
export { DebouncedSearchTextField } from './DebouncedSearchTextField';
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Domains/DomainTableRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
import TableCell from 'src/components/TableCell';
import TableRow from 'src/components/TableRow';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Events/EventRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Search/ResultRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
} from '../types';
import { filterUDFErrors } from './formUtilities';
import { APP_ROOT } from 'src/constants';
import DebouncedSearch from 'src/components/DebouncedSearchTextField';
import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
import Select, { Item } from 'src/components/EnhancedSelect';
import Box from 'src/components/core/Box';
import Paper from 'src/components/core/Paper';
Expand Down Expand Up @@ -323,7 +323,7 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
<Typography variant="h2">Select an App</Typography>
<Box className={classes.searchAndFilter}>
<Box className={classes.search}>
<DebouncedSearch
<DebouncedSearchTextField
placeholder="Search for app name"
fullWidth
onSearch={this.onSearch}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import BarPercent from 'src/components/BarPercent';
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 useEvents from 'src/hooks/useEvents';
Expand Down
Loading