djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace all old tooltips with new one from macaw (#3485)

Browse source
This commit is contained in:
Paweł Chyła 2023-04-12 15:55:42 +02:00 committed by GitHub
parent 548c10676e
commit 5da48b07af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 297 additions and 215 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -26,7 +26,7 @@
"@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/styles": "^4.11.4", "@material-ui/styles": "^4.11.4",
"@reach/auto-id": "^0.16.0", "@reach/auto-id": "^0.16.0",
"@saleor/macaw-ui": "^0.8.0-pre.66", "@saleor/macaw-ui": "^0.8.0-pre.68",
"@saleor/sdk": "^0.4.6", "@saleor/sdk": "^0.4.6",
"@sentry/react": "^6.0.0", "@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6", "@types/faker": "^5.1.6",
@ -7988,9 +7988,9 @@
} }
}, },
"node_modules/@saleor/macaw-ui": { "node_modules/@saleor/macaw-ui": {
"version": "0.8.0-pre.66", "version": "0.8.0-pre.68",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.66.tgz", "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.68.tgz",
"integrity": "sha512-7iBMoevVsVlGwBIFXUVjIUnuVzKjUph6yMbLy6N5jTxiKOlFK75atRf254er5K4U7cjkTjVw3HorRfvWm7MpeA==", "integrity": "sha512-4P1Ec4dpNk0MyejtosBZLd0EHl3pOBY1aFt09/R0Qpdiyu2+O7Jh/O1pwG+cpaG7J6hcrtMGsfYfLl24PwIAAA==",
"dependencies": { "dependencies": {
"@dessert-box/react": "^0.4.0", "@dessert-box/react": "^0.4.0",
"@floating-ui/react-dom-interactions": "^0.5.0", "@floating-ui/react-dom-interactions": "^0.5.0",
@ -43153,9 +43153,9 @@
} }
}, },
"@saleor/macaw-ui": { "@saleor/macaw-ui": {
"version": "0.8.0-pre.66", "version": "0.8.0-pre.68",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.66.tgz", "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.68.tgz",
"integrity": "sha512-7iBMoevVsVlGwBIFXUVjIUnuVzKjUph6yMbLy6N5jTxiKOlFK75atRf254er5K4U7cjkTjVw3HorRfvWm7MpeA==", "integrity": "sha512-4P1Ec4dpNk0MyejtosBZLd0EHl3pOBY1aFt09/R0Qpdiyu2+O7Jh/O1pwG+cpaG7J6hcrtMGsfYfLl24PwIAAA==",
"requires": { "requires": {
"@dessert-box/react": "^0.4.0", "@dessert-box/react": "^0.4.0",
"@floating-ui/react-dom-interactions": "^0.5.0", "@floating-ui/react-dom-interactions": "^0.5.0",

2
package.json
View file

@ -33,7 +33,7 @@
"@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/styles": "^4.11.4", "@material-ui/styles": "^4.11.4",
"@reach/auto-id": "^0.16.0", "@reach/auto-id": "^0.16.0",
"@saleor/macaw-ui": "^0.8.0-pre.66", "@saleor/macaw-ui": "^0.8.0-pre.68",
"@saleor/sdk": "^0.4.6", "@saleor/sdk": "^0.4.6",
"@sentry/react": "^6.0.0", "@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6", "@types/faker": "^5.1.6",

35
src/apps/components/AppListRow/AppListCardActions.tsx
View file

@ -2,8 +2,7 @@ import { appInstallationStatusMessages } from "@dashboard/apps/messages";
import { IS_CLOUD_INSTANCE } from "@dashboard/config"; import { IS_CLOUD_INSTANCE } from "@dashboard/config";
import { AppInstallationFragment } from "@dashboard/graphql"; import { AppInstallationFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl"; import { buttonMessages } from "@dashboard/intl";
import { Tooltip } from "@material-ui/core"; import { Box, Button, Text, Tooltip } from "@saleor/macaw-ui/next";
import { Box, Button, Text } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@ -74,20 +73,24 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
</Button> </Button>
)} )}
{installHandler && !IS_CLOUD_INSTANCE && ( {installHandler && !IS_CLOUD_INSTANCE && (
<Tooltip <Tooltip>
placement="top" <Tooltip.Trigger>
title={intl.formatMessage(messages.installationCloudOnly)} <span tabIndex={0}>
> <Button
<div> variant="primary"
<Button onClick={installHandler}
variant="primary" data-test-id="app-install-button"
onClick={installHandler} style={{ pointerEvents: "none" }}
data-test-id="app-install-button" disabled
disabled >
> <FormattedMessage {...buttonMessages.install} />
<FormattedMessage {...buttonMessages.install} /> </Button>
</Button> </span>
</div> </Tooltip.Trigger>
<Tooltip.Content>
<Tooltip.Arrow />
{intl.formatMessage(messages.installationCloudOnly)}
</Tooltip.Content>
</Tooltip> </Tooltip>
)} )}
{installationPending && ( {installationPending && (

22
src/apps/components/AppListRow/ErrorInstallAction.tsx
View file

@ -2,12 +2,8 @@ import { appInstallationStatusMessages } from "@dashboard/apps/messages";
import { AppInstallationFragment } from "@dashboard/graphql"; import { AppInstallationFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl"; import { buttonMessages } from "@dashboard/intl";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import { import { Button, Indicator, TooltipMountWrapper } from "@saleor/macaw-ui";
Button, import { Tooltip } from "@saleor/macaw-ui/next";
Indicator,
Tooltip,
TooltipMountWrapper,
} from "@saleor/macaw-ui";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -37,10 +33,16 @@ const InstallErrorAction = ({
data-test-id="app-installation-failed" data-test-id="app-installation-failed"
> >
<FormattedMessage {...appInstallationStatusMessages.failed} /> <FormattedMessage {...appInstallationStatusMessages.failed} />
<Tooltip title={appInstallation?.message} variant="error"> <Tooltip>
<TooltipMountWrapper> <Tooltip.Trigger>
<Indicator icon="error" /> <TooltipMountWrapper>
</TooltipMountWrapper> <Indicator icon="error" />
</TooltipMountWrapper>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{appInstallation?.message}
</Tooltip.Content>
</Tooltip> </Tooltip>
</Typography> </Typography>
{retryInstall && ( {retryInstall && (

64
src/apps/components/AppManifestTableDisplay/AppManifestTableDisplay.tsx
View file

@ -1,6 +1,7 @@
import { appsMessages } from "@dashboard/apps/messages"; import { appsMessages } from "@dashboard/apps/messages";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import { CopyIcon, Tooltip } from "@saleor/macaw-ui"; import { CopyIcon } from "@saleor/macaw-ui";
import { Tooltip } from "@saleor/macaw-ui/next";
import clsx from "clsx"; import clsx from "clsx";
import React, { useState } from "react"; import React, { useState } from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -21,35 +22,40 @@ export const AppManifestTableDisplay = ({
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
return ( return (
<Tooltip <Tooltip>
placement="top" <Tooltip.Trigger>
title={manifestUrl} <Typography
header={intl.formatMessage(appsMessages.appManifestUrl)} onMouseOut={() => setCopied(false)}
> className={styles.manifestText}
<Typography onClick={e => {
onMouseOut={() => setCopied(false)} try {
className={styles.manifestText} e.stopPropagation();
onClick={e => { e.preventDefault();
try {
e.stopPropagation();
e.preventDefault();
navigator.clipboard.writeText(manifestUrl); navigator.clipboard.writeText(manifestUrl);
setCopied(true); setCopied(true);
} catch (e) { } catch (e) {
// Copy not supported, ignore // Copy not supported, ignore
} }
}} }}
> >
{getAppDomainFromManifest(manifestUrl)} {getAppDomainFromManifest(manifestUrl)}
{!!navigator.clipboard && ( {!!navigator.clipboard && (
<CopyIcon <CopyIcon
className={clsx(styles.copyIcon, { className={clsx(styles.copyIcon, {
[styles.copyIconColorful]: copied, [styles.copyIconColorful]: copied,
})} })}
/> />
)} )}
</Typography> </Typography>
</Tooltip.Trigger>
<Tooltip.Content side="top">
<Tooltip.Arrow />
<Tooltip.ContentHeading>
{intl.formatMessage(appsMessages.appManifestUrl)}
</Tooltip.ContentHeading>
{manifestUrl}
</Tooltip.Content>
</Tooltip> </Tooltip>
); );
}; };

23
src/apps/components/AppPermissions/AppPermissions.tsx
View file

@ -1,6 +1,5 @@
import { AppPermissionFragment } from "@dashboard/graphql"; import { AppPermissionFragment } from "@dashboard/graphql";
import { Tooltip } from "@saleor/macaw-ui"; import { Box, InfoIcon, Tooltip } from "@saleor/macaw-ui/next";
import { Box, InfoIcon } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -17,9 +16,17 @@ export const AppPermissions: React.FC<AppPermissionsProps> = ({
const classes = useStyles(); const classes = useStyles();
return ( return (
<Tooltip <Tooltip>
header={<FormattedMessage {...messages.appPermissions} />} <Tooltip.Trigger>
title={ <Box display="flex" placeItems="center">
<InfoIcon color="iconNeutralSubdued" size="large" />
</Box>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
<Tooltip.ContentHeading>
<FormattedMessage {...messages.appPermissions} />
</Tooltip.ContentHeading>
<ul className={classes.list}> <ul className={classes.list}>
{permissions?.length ? ( {permissions?.length ? (
permissions?.map(permission => ( permissions?.map(permission => (
@ -31,11 +38,7 @@ export const AppPermissions: React.FC<AppPermissionsProps> = ({
</li> </li>
)} )}
</ul> </ul>
} </Tooltip.Content>
>
<Box display="flex" placeItems="center">
<InfoIcon color="iconNeutralSubdued" size="large" />
</Box>
</Tooltip> </Tooltip>
); );
}; };

27
src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
View file

@ -1,7 +1,9 @@
import { Tooltip } from "@saleor/macaw-ui"; import { Box, CopyIcon, Text, Tooltip } from "@saleor/macaw-ui/next";
import { Box, CopyIcon, Text } from "@saleor/macaw-ui/next";
import clsx from "clsx"; import clsx from "clsx";
import React, { useState } from "react"; import React, { useState } from "react";
import { FormattedMessage } from "react-intl";
import { appsMessages } from "../../messages";
interface AppManifestUrlProps { interface AppManifestUrlProps {
manifestUrl: string; manifestUrl: string;
@ -27,12 +29,21 @@ export const AppManifestUrl: React.FC<AppManifestUrlProps> = ({
} }
}} }}
> >
<Tooltip title={manifestUrl} header="App Manifest URL"> <Tooltip>
<Box __maxWidth="300px" className="ellipsis"> <Tooltip.Trigger>
<Text variant="caption" color="textNeutralSubdued"> <Box __maxWidth="300px" className="ellipsis">
{new URL(manifestUrl).host} <Text variant="caption" color="textNeutralSubdued">
</Text> {new URL(manifestUrl).host}
</Box> </Text>
</Box>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
<Tooltip.ContentHeading>
<FormattedMessage {...appsMessages.appManifestUrl} />
</Tooltip.ContentHeading>
{manifestUrl}
</Tooltip.Content>
</Tooltip> </Tooltip>
<CopyIcon <CopyIcon
color="iconNeutralSubdued" color="iconNeutralSubdued"

34
src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
View file

@ -8,13 +8,13 @@ import TableButtonWrapper from "@dashboard/components/TableButtonWrapper/TableBu
import { JobStatusEnum } from "@dashboard/graphql"; import { JobStatusEnum } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl"; import { buttonMessages } from "@dashboard/intl";
import { CircularProgress } from "@material-ui/core"; import { CircularProgress } from "@material-ui/core";
import { Tooltip } from "@saleor/macaw-ui";
import { import {
Box, Box,
Button, Button,
Chip, Chip,
List, List,
Text, Text,
Tooltip,
TrashBinIcon, TrashBinIcon,
WarningIcon, WarningIcon,
} from "@saleor/macaw-ui/next"; } from "@saleor/macaw-ui/next";
@ -73,18 +73,26 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
)} )}
{appInstallation?.status === JobStatusEnum.FAILED && ( {appInstallation?.status === JobStatusEnum.FAILED && (
<> <>
<Tooltip title={appInstallation.message} variant="error"> <Tooltip>
<Box display="flex" placeItems="center" gap={3} marginX={3}> <Tooltip.Trigger>
<WarningIcon size="small" color="iconCriticalSubdued" /> <Box display="flex" placeItems="center" gap={3} marginX={3}>
<Text <WarningIcon size="small" color="iconCriticalSubdued" />
variant="caption" <Text
size="small" variant="caption"
color="textCriticalSubdued" size="small"
data-test-id="app-failed-label" color="textCriticalSubdued"
> data-test-id="app-failed-label"
<FormattedMessage {...appInstallationStatusMessages.failed} /> >
</Text> <FormattedMessage
</Box> {...appInstallationStatusMessages.failed}
/>
</Text>
</Box>
</Tooltip.Trigger>
<Tooltip.Content>
<Tooltip.Arrow />
{appInstallation.message}
</Tooltip.Content>
</Tooltip> </Tooltip>
<Button <Button
variant="secondary" variant="secondary"

42
src/channels/components/ChannelAllocationStrategy/ChannelAllocationStrategy.tsx
View file

@ -4,7 +4,7 @@ import RadioGroupField from "@dashboard/components/RadioGroupField";
import { AllocationStrategyEnum, StockSettingsInput } from "@dashboard/graphql"; import { AllocationStrategyEnum, StockSettingsInput } from "@dashboard/graphql";
import { Card, CardContent, Typography } from "@material-ui/core"; import { Card, CardContent, Typography } from "@material-ui/core";
import HelpOutline from "@material-ui/icons/HelpOutline"; import HelpOutline from "@material-ui/icons/HelpOutline";
import { Tooltip } from "@saleor/macaw-ui"; import { Tooltip } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -52,26 +52,26 @@ const ChannelAllocationStrategy: React.FC<ChannelAllocationStrategyProps> = ({
label={ label={
<Typography> <Typography>
<FormattedMessage {...messages.allocationStrategyDescription} /> <FormattedMessage {...messages.allocationStrategyDescription} />
<Tooltip <Tooltip>
title={ <Tooltip.Trigger>
<> <HelpOutline className={classes.tooltipIcon} />
<FormattedMessage {...messages.allocaationMayOccur} /> </Tooltip.Trigger>
<ul> <Tooltip.Content side="bottom">
<li> <Tooltip.Arrow />
<FormattedMessage <FormattedMessage {...messages.allocaationMayOccur} />
{...messages.allocaationMayOccurWithTrackInventory} <ul>
/> <li>
</li> <FormattedMessage
<li> {...messages.allocaationMayOccurWithTrackInventory}
<FormattedMessage />
{...messages.allocaationMayOccurWithReservationTime} </li>
/> <li>
</li> <FormattedMessage
</ul> {...messages.allocaationMayOccurWithReservationTime}
</> />
} </li>
> </ul>
<HelpOutline className={classes.tooltipIcon} /> </Tooltip.Content>
</Tooltip> </Tooltip>
</Typography> </Typography>
} }

12
src/components/Attributes/BasicAttributeRow.tsx
View file

@ -1,7 +1,7 @@
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import HelpOutline from "@material-ui/icons/HelpOutline"; import HelpOutline from "@material-ui/icons/HelpOutline";
import { Tooltip } from "@saleor/macaw-ui"; import { Tooltip } from "@saleor/macaw-ui/next";
import clsx from "clsx"; import clsx from "clsx";
import React from "react"; import React from "react";
@ -30,8 +30,14 @@ const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
<Typography> <Typography>
{label} {label}
{description && ( {description && (
<Tooltip title={description}> <Tooltip>
<HelpOutline className={classes.tooltipIcon} /> <Tooltip.Trigger>
<HelpOutline className={classes.tooltipIcon} />
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{description}
</Tooltip.Content>
</Tooltip> </Tooltip>
)} )}
</Typography> </Typography>

14
src/components/Datagrid/components/TooltipContainer.tsx
View file

@ -1,5 +1,4 @@
import { Tooltip } from "@saleor/macaw-ui"; import { Box, Tooltip } from "@saleor/macaw-ui/next";
import { Box } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
interface TooltipContainerProps { interface TooltipContainerProps {
@ -48,9 +47,14 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
__left={x + width / 2} __left={x + width / 2}
zIndex="2" zIndex="2"
> >
{/* TODO: use tooltip from new macaw when it will be ready */} <Tooltip open={true}>
<Tooltip open={true} title={title} placement="top"> <Tooltip.Trigger>
<span></span> <span></span>
</Tooltip.Trigger>
<Tooltip.Content side="top">
<Tooltip.Arrow />
{title}
</Tooltip.Content>
</Tooltip> </Tooltip>
</Box> </Box>
</> </>

20
src/components/Date/Date.tsx
View file

@ -1,5 +1,5 @@
import useDateLocalize from "@dashboard/hooks/useDateLocalize"; import useDateLocalize from "@dashboard/hooks/useDateLocalize";
import { Tooltip } from "@saleor/macaw-ui"; import { Tooltip } from "@saleor/macaw-ui/next";
import moment from "moment-timezone"; import moment from "moment-timezone";
import React from "react"; import React from "react";
@ -15,9 +15,7 @@ export const Date: React.FC<DateProps> = ({ date, plain }) => {
const localizeDate = useDateLocalize(); const localizeDate = useDateLocalize();
const getHumanized = (value: string, locale: string, currentDate: number) => const getHumanized = (value: string, locale: string, currentDate: number) =>
moment(value) moment(value).locale(locale).from(currentDate);
.locale(locale)
.from(currentDate);
return ( return (
<LocaleConsumer> <LocaleConsumer>
@ -27,10 +25,16 @@ export const Date: React.FC<DateProps> = ({ date, plain }) => {
plain ? ( plain ? (
localizeDate(date) localizeDate(date)
) : ( ) : (
<Tooltip title={localizeDate(date)}> <Tooltip>
<time dateTime={date} data-test-id="dateTime"> <Tooltip.Trigger>
{getHumanized(date, locale, currentDate)} <time dateTime={date} data-test-id="dateTime">
</time> {getHumanized(date, locale, currentDate)}
</time>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{localizeDate(date)}
</Tooltip.Content>
</Tooltip> </Tooltip>
) )
} }

20
src/components/Date/DateTime.tsx
View file

@ -1,4 +1,4 @@
import { Tooltip } from "@saleor/macaw-ui"; import { Tooltip } from "@saleor/macaw-ui/next";
import moment from "moment-timezone"; import moment from "moment-timezone";
import React from "react"; import React from "react";
import ReactMoment from "react-moment"; import ReactMoment from "react-moment";
@ -31,12 +31,18 @@ export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
plain ? ( plain ? (
getTitle(date, locale, tz) getTitle(date, locale, tz)
) : ( ) : (
<Tooltip title={getTitle(date, locale, tz)}> <Tooltip>
<div> <Tooltip.Trigger>
<ReactMoment from={currentDate} locale={locale} tz={tz}> <div>
{date} <ReactMoment from={currentDate} locale={locale} tz={tz}>
</ReactMoment> {date}
</div> </ReactMoment>
</div>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{getTitle(date, locale, tz)}
</Tooltip.Content>
</Tooltip> </Tooltip>
) )
} }

21
src/components/OverflowTooltip/OverflowTooltip.tsx
View file

@ -1,5 +1,5 @@
import { makeStyles } from "@material-ui/core"; import { makeStyles } from "@material-ui/core";
import { Tooltip } from "@saleor/macaw-ui"; import { Tooltip } from "@saleor/macaw-ui/next";
import clsx from "clsx"; import clsx from "clsx";
import React from "react"; import React from "react";
@ -41,11 +41,26 @@ const OverflowTooltip: React.FC<OverflowTooltipProps> = ({
vertical: checkVertical, vertical: checkVertical,
}); });
return ( if (!isOverflow) {
<Tooltip title={title ?? children} header={header} disabled={!isOverflow}> return (
<div ref={ref} className={clsx(classes.wrapper, className)}> <div ref={ref} className={clsx(classes.wrapper, className)}>
{children} {children}
</div> </div>
);
}
return (
<Tooltip>
<Tooltip.Trigger>
<div ref={ref} className={clsx(classes.wrapper, className)}>
{children}
</div>
</Tooltip.Trigger>
<Tooltip.Content side="top">
<Tooltip.Arrow />
<Tooltip.ContentHeading>{header}</Tooltip.ContentHeading>
{title ?? children}
</Tooltip.Content>
</Tooltip> </Tooltip>
); );
}; };

24
src/components/TooltipTableCellHeader/TooltipTableCellHeader.tsx
View file

@ -1,4 +1,4 @@
import { Tooltip } from "@saleor/macaw-ui"; import { Tooltip } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
import TableCellHeader, { TableCellHeaderProps } from "../TableCellHeader"; import TableCellHeader, { TableCellHeaderProps } from "../TableCellHeader";
@ -7,7 +7,9 @@ interface TooltipTableCellHeaderProps extends TableCellHeaderProps {
tooltip?: string | React.ReactNodeArray; tooltip?: string | React.ReactNodeArray;
} }
export const TooltipTableCellHeader: React.FC<TooltipTableCellHeaderProps> = props => { export const TooltipTableCellHeader: React.FC<
TooltipTableCellHeaderProps
> = props => {
const { children, tooltip, disabled, ...rest } = props; const { children, tooltip, disabled, ...rest } = props;
const tooltipDisabled = () => { const tooltipDisabled = () => {
@ -17,11 +19,25 @@ export const TooltipTableCellHeader: React.FC<TooltipTableCellHeaderProps> = pro
return !disabled; return !disabled;
}; };
return ( if (tooltipDisabled()) {
<Tooltip title={tooltip} placement="top" disabled={tooltipDisabled()}> return (
<TableCellHeader disabled={disabled} {...rest}> <TableCellHeader disabled={disabled} {...rest}>
{children} {children}
</TableCellHeader> </TableCellHeader>
);
}
return (
<Tooltip>
<Tooltip.Trigger>
<TableCellHeader disabled={disabled} {...rest}>
{children}
</TableCellHeader>
</Tooltip.Trigger>
<Tooltip.Content side="top">
<Tooltip.Arrow />
{tooltip}
</Tooltip.Content>
</Tooltip> </Tooltip>
); );
}; };

21
src/orders/components/OrderDraftDetailsProducts/TableLineAlert.tsx
View file

@ -1,8 +1,5 @@
import { import { IndicatorOutlined, TooltipMountWrapper } from "@saleor/macaw-ui";
IndicatorOutlined, import { Tooltip } from "@saleor/macaw-ui/next";
Tooltip,
TooltipMountWrapper,
} from "@saleor/macaw-ui";
import React from "react"; import React from "react";
import OrderAlerts from "../OrderAlerts"; import OrderAlerts from "../OrderAlerts";
@ -20,10 +17,16 @@ const TableLineAlert: React.FC<TableLineAlertProps> = ({ alerts, variant }) => {
const title = <OrderAlerts alerts={alerts} />; const title = <OrderAlerts alerts={alerts} />;
return ( return (
<Tooltip title={title} variant={variant}> <Tooltip>
<TooltipMountWrapper> <Tooltip.Trigger>
<IndicatorOutlined icon={variant} /> <TooltipMountWrapper>
</TooltipMountWrapper> <IndicatorOutlined icon={variant} />
</TooltipMountWrapper>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{title}
</Tooltip.Content>
</Tooltip> </Tooltip>
); );
}; };

52
src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
View file

@ -10,12 +10,8 @@ import {
OrderFulfillLineFormData, OrderFulfillLineFormData,
} from "@dashboard/orders/utils/data"; } from "@dashboard/orders/utils/data";
import { TableCell, TextField, Typography } from "@material-ui/core"; import { TableCell, TextField, Typography } from "@material-ui/core";
import { import { ChevronIcon, IconButton, WarningIcon } from "@saleor/macaw-ui";
ChevronIcon, import { Box, Tooltip } from "@saleor/macaw-ui/next";
IconButton,
Tooltip,
WarningIcon,
} from "@saleor/macaw-ui";
import clsx from "clsx"; import clsx from "clsx";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -32,13 +28,8 @@ interface OrderFulfillLineProps {
} }
export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => { export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
const { const { line, lineIndex, formsetData, formsetChange, onWarehouseChange } =
line, props;
lineIndex,
formsetData,
formsetChange,
onWarehouseChange,
} = props;
const classes = useStyles(); const classes = useStyles();
const intl = useIntl(); const intl = useIntl();
@ -88,21 +79,24 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
thumbnail={line?.thumbnail?.url} thumbnail={line?.thumbnail?.url}
badge={ badge={
isPreorder || !line?.variant ? ( isPreorder || !line?.variant ? (
<Tooltip <Tooltip>
variant="warning" <Tooltip.Trigger>
title={intl.formatMessage( <div className={classes.warningIcon}>
isPreorder <WarningIcon />
? messages.preorderWarning </div>
: messages.deletedVariantWarning, </Tooltip.Trigger>
)} <Tooltip.Content side="bottom">
> <Tooltip.Arrow />
<div className={classes.warningIcon}> <Box __maxWidth={350}>
<WarningIcon /> {intl.formatMessage(
</div> isPreorder
? messages.preorderWarning
: messages.deletedVariantWarning,
)}
</Box>
</Tooltip.Content>
</Tooltip> </Tooltip>
) : ( ) : undefined
undefined
)
} }
> >
{line.productName} {line.productName}
@ -122,8 +116,8 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
type="number" type="number"
inputProps={{ inputProps={{
className: clsx(classes.quantityInnerInput, { className: clsx(classes.quantityInnerInput, {
[classes.quantityInnerInputNoRemaining]: !line.variant [classes.quantityInnerInputNoRemaining]:
?.trackInventory, !line.variant?.trackInventory,
}), }),
min: 0, min: 0,
style: { textAlign: "right" }, style: { textAlign: "right" },

18
src/orders/components/OrderTransaction/components/TransactionEvents/components/EventType.tsx
View file

@ -1,7 +1,7 @@
import { transactionEventTypeMap } from "@dashboard/orders/messages"; import { transactionEventTypeMap } from "@dashboard/orders/messages";
import { TransactionEventType } from "@dashboard/orders/types"; import { TransactionEventType } from "@dashboard/orders/types";
import { makeStyles, Tooltip } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import { Box, InfoIcon } from "@saleor/macaw-ui/next"; import { Box, InfoIcon, Tooltip } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -34,10 +34,16 @@ export const EventType = ({ type, message }: EventTypeProps) => {
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
{displayType} {displayType}
{type !== null && message && ( {type !== null && message && (
<Tooltip title={message}> <Tooltip>
<div className={classes.tooltipWrapper}> <Tooltip.Trigger>
<InfoIcon /> <div className={classes.tooltipWrapper}>
</div> <InfoIcon />
</div>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{message}
</Tooltip.Content>
</Tooltip> </Tooltip>
)} )}
</Box> </Box>

25
src/plugins/components/PluginSettings/PluginSettings.tsx
View file

@ -6,14 +6,9 @@ import {
} from "@dashboard/graphql"; } from "@dashboard/graphql";
import { UserError } from "@dashboard/types"; import { UserError } from "@dashboard/types";
import { getFieldError } from "@dashboard/utils/errors"; import { getFieldError } from "@dashboard/utils/errors";
import { import { Card, CardContent, TextField } from "@material-ui/core";
Card,
CardContent,
TextField,
Tooltip,
Typography,
} from "@material-ui/core";
import InfoIcon from "@material-ui/icons/Info"; import InfoIcon from "@material-ui/icons/Info";
import { Box, Tooltip } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -69,14 +64,14 @@ const PluginSettings: React.FC<PluginSettingsProps> = ({
disabled={disabled} disabled={disabled}
/> />
{fieldData.helpText && ( {fieldData.helpText && (
<Tooltip <Tooltip>
title={ <Tooltip.Trigger>
<Typography variant="body2" className={classes.tooltip}> <InfoIcon />
{fieldData.helpText} </Tooltip.Trigger>
</Typography> <Tooltip.Content>
} <Tooltip.Arrow />
> <Box __maxWidth={350}>{fieldData.helpText}</Box>
<InfoIcon /> </Tooltip.Content>
</Tooltip> </Tooltip>
)} )}
</> </>

3
src/plugins/components/PluginSettings/styles.ts
View file

@ -21,9 +21,6 @@ export const useStyles = makeStyles(
spacer: { spacer: {
flex: 1, flex: 1,
}, },
tooltip: {
color: theme.palette.saleor.active[5],
},
}), }),
{ name: "PluginSettings" }, { name: "PluginSettings" },
); );

19
src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
View file

@ -19,7 +19,8 @@ import { maybe, renderCollection } from "@dashboard/misc";
import { ListActions, ReorderAction } from "@dashboard/types"; import { ListActions, ReorderAction } from "@dashboard/types";
import { Card, CardContent, TableCell } from "@material-ui/core"; import { Card, CardContent, TableCell } from "@material-ui/core";
import HelpOutline from "@material-ui/icons/HelpOutline"; import HelpOutline from "@material-ui/icons/HelpOutline";
import { DeleteIcon, IconButton, makeStyles, Tooltip } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { Tooltip } from "@saleor/macaw-ui/next";
import capitalize from "lodash/capitalize"; import capitalize from "lodash/capitalize";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@ -261,8 +262,14 @@ const ProductTypeVariantAttributes: React.FC<
} }
/> />
{!!variantSelectionDisabled && ( {!!variantSelectionDisabled && (
<Tooltip <Tooltip>
title={ <Tooltip.Trigger>
<HelpOutline
className={classes.colVariantDisabled}
/>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
<FormattedMessage <FormattedMessage
id="vlLyvk" id="vlLyvk"
defaultMessage="{inputType} attributes cannot be used as variant selection attributes." defaultMessage="{inputType} attributes cannot be used as variant selection attributes."
@ -270,11 +277,7 @@ const ProductTypeVariantAttributes: React.FC<
inputType: readableAttributeInputType, inputType: readableAttributeInputType,
}} }}
/> />
} </Tooltip.Content>
>
<HelpOutline
className={classes.colVariantDisabled}
/>
</Tooltip> </Tooltip>
)} )}
</div> </div>