diff --git a/packages/manager/.changeset/pr-9523-tech-stories-1691607836644.md b/packages/manager/.changeset/pr-9523-tech-stories-1691607836644.md new file mode 100644 index 00000000000..7253d718ce7 --- /dev/null +++ b/packages/manager/.changeset/pr-9523-tech-stories-1691607836644.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +Add Product Information Banners for all product landing pages ([#9523](https://github.com/linode/manager/pull/9523)) diff --git a/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx b/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx index f727d2a98f0..e424526575a 100644 --- a/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx +++ b/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx @@ -44,7 +44,7 @@ export const AbuseTicketBanner = () => { }} important preferenceKey={preferenceKey} - warning + variant="warning" > {message} diff --git a/packages/manager/src/components/AccessPanel/AccessPanel.tsx b/packages/manager/src/components/AccessPanel/AccessPanel.tsx index 5df5868ace3..3d468e5648d 100644 --- a/packages/manager/src/components/AccessPanel/AccessPanel.tsx +++ b/packages/manager/src/components/AccessPanel/AccessPanel.tsx @@ -81,7 +81,7 @@ const AccessPanel = (props: Props) => { className )} > - {error ? : null} + {error ? : null} }> { diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx index 24ba3cc6a1c..3fa23cb336d 100644 --- a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx +++ b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx @@ -79,8 +79,8 @@ export const DeletionDialog = React.memo((props: DeletionDialogProps) => { title={`Delete ${titlecase(entity)} ${label}?`} {...rest} > - {error && } - + {error && } + Warning: Deleting this {entity} is permanent and can’t be undone. diff --git a/packages/manager/src/components/Dialog/Dialog.tsx b/packages/manager/src/components/Dialog/Dialog.tsx index 4058db1b476..8e2b76d4dca 100644 --- a/packages/manager/src/components/Dialog/Dialog.tsx +++ b/packages/manager/src/components/Dialog/Dialog.tsx @@ -85,7 +85,7 @@ export const Dialog = (props: DialogProps) => { }} className={className} > - {error && } + {error && } {children} diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx index 9060c340e4c..e7c963079b7 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx @@ -40,7 +40,7 @@ export const DismissibleBannerTemplate = (args) => { export const CallToActionBanner = () => { return ( - + { export const BetaBanner = () => { return ( - + Managed Database for MySQL is available in a free, open beta period until May 2nd, 2022. This is a beta environment and should not be used diff --git a/packages/manager/src/components/DrawerContent/DrawerContent.tsx b/packages/manager/src/components/DrawerContent/DrawerContent.tsx index 3343e9a8d0a..a19fb1949a6 100644 --- a/packages/manager/src/components/DrawerContent/DrawerContent.tsx +++ b/packages/manager/src/components/DrawerContent/DrawerContent.tsx @@ -19,7 +19,7 @@ export const DrawerContent = (props: DrawerContentProps) => { if (error) { return ( - + {errorMessage ?? `Couldn't load ${title}`} ); diff --git a/packages/manager/src/components/DynamicPriceNotice.tsx b/packages/manager/src/components/DynamicPriceNotice.tsx index 6254fe03c44..f36b4053839 100644 --- a/packages/manager/src/components/DynamicPriceNotice.tsx +++ b/packages/manager/src/components/DynamicPriceNotice.tsx @@ -6,7 +6,7 @@ import { Typography } from './Typography'; export const DynamicPriceNotice = (props: NoticeProps) => { return ( - + Prices for plans, products, and services may vary based on Region.{' '} Learn more. diff --git a/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx b/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx index 4f33d9c5242..75dda9f3c62 100644 --- a/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx +++ b/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx @@ -26,7 +26,7 @@ export const LabelAndTagsPanel = (props: LabelAndTagsProps) => { }} data-qa-label-header > - {error && } + {error && } { } return ( - + {generateIntroText(type, maintenanceStart, maintenanceEnd)} diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx index 7df36c29a1b..9d92323b8e4 100644 --- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx +++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx @@ -148,7 +148,7 @@ export const MultipleIPInput = React.memo((props: Props) => { {helperText && ( {helperText} )} - {error && } + {error && } {ips.map((thisIP, idx) => ( - + - + - + - + - + - + - + - + diff --git a/packages/manager/src/components/Notice/Notice.tsx b/packages/manager/src/components/Notice/Notice.tsx index ef20c295239..27f8f77e30f 100644 --- a/packages/manager/src/components/Notice/Notice.tsx +++ b/packages/manager/src/components/Notice/Notice.tsx @@ -119,26 +119,29 @@ export const useStyles = makeStyles< }, })); +export type NoticeVariant = + | 'error' + | 'info' + | 'marketing' + | 'success' + | 'warning'; + export interface NoticeProps extends Grid2Props { breakWords?: boolean; className?: string; dataTestId?: string; - error?: boolean; errorGroup?: string; flag?: boolean; important?: boolean; - info?: boolean; - marketing?: boolean; notificationList?: boolean; onClick?: (e: React.MouseEvent) => void; spacingBottom?: 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32; spacingLeft?: number; spacingTop?: 0 | 4 | 8 | 12 | 16 | 24 | 32; - success?: boolean; sx?: SxProps; text?: string; typeProps?: TypographyProps; - warning?: boolean; + variant?: NoticeVariant; } export const Notice = (props: NoticeProps) => { @@ -147,22 +150,18 @@ export const Notice = (props: NoticeProps) => { children, className, dataTestId, - error, errorGroup, flag, important, - info, - marketing, notificationList, onClick, spacingBottom, spacingLeft, spacingTop, - success, sx, text, typeProps, - warning, + variant, } = props; const { classes, cx } = useStyles(); @@ -177,6 +176,14 @@ export const Notice = (props: NoticeProps) => { ) : null; + const variantMap = { + error: variant === 'error', + info: variant === 'info', + marketing: variant === 'marketing', + success: variant === 'success', + warning: variant === 'warning', + }; + /** * There are some cases where the message * can be either a string or JSX. In those @@ -198,7 +205,7 @@ export const Notice = (props: NoticeProps) => { ? `error-for-scroll-${errorGroup}` : `error-for-scroll`; - const dataAttributes = !props.error + const dataAttributes = !variantMap.error ? { 'data-qa-notice': true, } @@ -211,19 +218,19 @@ export const Notice = (props: NoticeProps) => { { )} {important && - ((success && ) || - ((warning || info) && ( + ((variantMap.success && ( + + )) || + ((variantMap.warning || variantMap.info) && ( )) || - (error && ))} + (variantMap.error && ( + + )))}
{innerText || _children}
diff --git a/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx b/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx index 6db77cef43f..21e67df23b0 100644 --- a/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx +++ b/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx @@ -29,6 +29,13 @@ export const ProductInformationBanner = React.memo( return null; } + const isImportantBanner = + thisBanner.decoration.important === 'true' + ? true + : thisBanner.decoration.important === 'false' + ? false + : true; + let hasBannerExpired = true; try { hasBannerExpired = isAfter( @@ -45,7 +52,9 @@ export const ProductInformationBanner = React.memo( return ( diff --git a/packages/manager/src/components/ProductNotification/ProductNotification.tsx b/packages/manager/src/components/ProductNotification/ProductNotification.tsx index d843f8e6a76..94bbd83ce5a 100644 --- a/packages/manager/src/components/ProductNotification/ProductNotification.tsx +++ b/packages/manager/src/components/ProductNotification/ProductNotification.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; +import { Notice, NoticeVariant } from 'src/components/Notice/Notice'; export interface ProductNotificationProps { onClick?: () => void; @@ -18,8 +18,8 @@ export const ProductNotification = ({ severity, text, }: ProductNotificationProps) => { - const level = severityLevelMap[severity] ?? 'warning'; - const props = { flag: true, [level]: true }; + const level = (severityLevelMap[severity] as NoticeVariant) ?? 'warning'; + const props = { flag: true, variant: level }; return {text}; }; diff --git a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx index 00115cf3d34..ee827edd21f 100644 --- a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx +++ b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx @@ -101,7 +101,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => { data-testid="region-select-warning" spacingBottom={0} spacingTop={8} - warning + variant="warning" > {CROSS_DATA_CENTER_CLONE_WARNING} @@ -117,7 +117,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => { selectedID={selectedID || null} /> {showSelectedRegionHasDifferentPriceWarning && ( - + The selected region has a different price structure.{' '} Learn more. diff --git a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx index 4d2d79f4be3..3843eb6c91f 100644 --- a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx +++ b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx @@ -111,12 +111,17 @@ export const SingleTextFieldForm = React.memo((props: Props) => { ) : null} {generalError ? ( - + ) : null} ); diff --git a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx index bd3df250729..719868fe2ac 100644 --- a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx +++ b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx @@ -71,7 +71,7 @@ const TabbedPanel = React.memo((props: TabbedPanelProps) => { sx={{ flexGrow: 1, ...sx }} >
- {error && {error}} + {error && {error}} {header !== '' && ( diff --git a/packages/manager/src/components/Tile/Tile.tsx b/packages/manager/src/components/Tile/Tile.tsx index b3c56f079a7..b75065e0186 100644 --- a/packages/manager/src/components/Tile/Tile.tsx +++ b/packages/manager/src/components/Tile/Tile.tsx @@ -141,7 +141,7 @@ export const Tile = (props: Props) => { {icon} ) : null} - {errorText ? : null} + {errorText ? : null} {link ? renderLink() : title} diff --git a/packages/manager/src/factories/featureFlags.ts b/packages/manager/src/factories/featureFlags.ts index 1c9e98c5349..0c7589388e6 100644 --- a/packages/manager/src/factories/featureFlags.ts +++ b/packages/manager/src/factories/featureFlags.ts @@ -5,6 +5,10 @@ import { ProductInformationBannerFlag } from 'src/featureFlags'; export const productInformationBannerFactory = Factory.Sync.makeFactory( { bannerLocation: 'Object Storage', + decoration: { + important: 'true', + variant: 'warning', + }, expirationDate: '2030-08-01', key: Factory.each((i) => `product-information-banner-${i}`), // safe diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts index 1ef60c81049..68b8fb5746c 100644 --- a/packages/manager/src/featureFlags.ts +++ b/packages/manager/src/featureFlags.ts @@ -1,6 +1,9 @@ import { TPAProvider } from '@linode/api-v4/lib/profile'; +import { NoticeVariant } from 'src/components/Notice/Notice'; + import { Doc } from './features/OneClickApps/oneClickApps'; + // These flags should correspond with active features flags in LD export interface TaxDetail { @@ -119,23 +122,32 @@ interface ReferralBannerText { export type ProductInformationBannerLocation = | 'Account' + | 'Betas' | 'Databases' | 'Domains' | 'Firewalls' | 'Images' | 'Kubernetes' + | 'LinodeCreate' // Use for Marketplace banners | 'Linodes' + | 'LoadBalancers' + | 'Longview' | 'Managed' - | 'Marketplace' | 'NodeBalancers' | 'Object Storage' | 'StackScripts' | 'VPC' | 'Volumes'; +interface ProductInformationBannerDecoration { + important: 'false' | 'true' | boolean; + variant: NoticeVariant; +} export interface ProductInformationBannerFlag { // `bannerLocation` is the location where the banner will be rendered bannerLocation: ProductInformationBannerLocation; + // `decoration` is applies styling to the banner; 'important' with a 'warning' variant is standard + decoration: ProductInformationBannerDecoration; // The date where the banner should no longer be displayed. expirationDate: string; // `key` should be unique across product information banners diff --git a/packages/manager/src/features/Account/AutoBackups.tsx b/packages/manager/src/features/Account/AutoBackups.tsx index f8abcaad0cc..c8de4848eec 100644 --- a/packages/manager/src/features/Account/AutoBackups.tsx +++ b/packages/manager/src/features/Account/AutoBackups.tsx @@ -4,11 +4,11 @@ import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { Accordion } from 'src/components/Accordion'; +import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Toggle } from 'src/components/Toggle'; import { Typography } from 'src/components/Typography'; -import { FormControlLabel } from 'src/components/FormControlLabel'; const useStyles = makeStyles()((theme: Theme) => ({ enableBackupsButton: { @@ -50,7 +50,7 @@ const AutoBackups = (props: Props) => { {!!isManagedCustomer ? ( - + You’re a Managed customer, which means your Linodes are already automatically backed up - no need to toggle this setting. diff --git a/packages/manager/src/features/Account/CloseAccountDialog.tsx b/packages/manager/src/features/Account/CloseAccountDialog.tsx index 1e7c3daf5fd..c74d8009bb5 100644 --- a/packages/manager/src/features/Account/CloseAccountDialog.tsx +++ b/packages/manager/src/features/Account/CloseAccountDialog.tsx @@ -113,9 +113,11 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => { textFieldStyle={{ maxWidth: '415px' }} title="Are you sure you want to close your Linode account?" > - {errors ? : null} + {errors ? ( + + ) : null} - + Warning: Please note this is an extremely destructive action. Closing your account means that all services diff --git a/packages/manager/src/features/Account/EnableObjectStorage.tsx b/packages/manager/src/features/Account/EnableObjectStorage.tsx index ecf744c4e60..899f7e76ac8 100644 --- a/packages/manager/src/features/Account/EnableObjectStorage.tsx +++ b/packages/manager/src/features/Account/EnableObjectStorage.tsx @@ -118,8 +118,8 @@ export const EnableObjectStorage = (props: Props) => { open={isOpen} title={`Cancel Object Storage`} > - {error ? : null} - + {error ? : null} + Warning: Canceling Object Storage will permanently delete all buckets and their objects. Object Storage Access Keys diff --git a/packages/manager/src/features/Account/index.tsx b/packages/manager/src/features/Account/index.tsx index 4671c3d1291..8e5bbf488b2 100644 --- a/packages/manager/src/features/Account/index.tsx +++ b/packages/manager/src/features/Account/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; const AccountLanding = React.lazy( @@ -24,6 +25,7 @@ class Account extends React.Component { return ( }> + { return ( - {error && } + {error && } diff --git a/packages/manager/src/features/Backups/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx index 903366cb68d..a1ee2d74883 100644 --- a/packages/manager/src/features/Backups/BackupDrawer.tsx +++ b/packages/manager/src/features/Backups/BackupDrawer.tsx @@ -152,7 +152,7 @@ all new Linodes will automatically be backed up.` {failedEnableBackupsCount > 0 && ( - + {getFailureNotificationText({ failedCount: failedEnableBackupsCount, successCount: successfulEnableBackupsCount, diff --git a/packages/manager/src/features/Betas/BetasLanding.tsx b/packages/manager/src/features/Betas/BetasLanding.tsx index bd6083e4e00..6f0af39637a 100644 --- a/packages/manager/src/features/Betas/BetasLanding.tsx +++ b/packages/manager/src/features/Betas/BetasLanding.tsx @@ -4,11 +4,13 @@ import * as React from 'react'; import { Divider } from 'src/components/Divider'; import { LandingHeader } from 'src/components/LandingHeader/LandingHeader'; import { Paper } from 'src/components/Paper'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { Typography } from 'src/components/Typography'; const BetasLanding = () => { return ( <> + diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx index b950fd049d7..6b5b54d5990 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx @@ -30,7 +30,7 @@ const CreditCardDialog: React.SFC = (props) => { open={open} title="Confirm Payment" > - {error && } + {error && } {`Confirm payment of $${usd} USD to Linode LLC?`} ); diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx index 49187a85284..6311f553b1f 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx @@ -214,7 +214,7 @@ export const PaymentDrawer = (props: Props) => { }; const renderError = (errorMsg: string) => { - return ; + return ; }; if (!accountLoading && account?.balance === undefined) { @@ -229,7 +229,7 @@ export const PaymentDrawer = (props: Props) => { - {errorMessage && } + {errorMessage && } {warning ? : null} {isProcessing ? ( @@ -400,7 +400,7 @@ const Warning = (props: WarningProps) => { {warning.title} {ticketLink} ); - return {message}; + return {message}; }; export default PaymentDrawer; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx index ec77d647761..47822bf9cd3 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx @@ -81,7 +81,7 @@ const PromoDialog = (props: Props) => { open={open} title="Add promo code" > - {error && } + {error && } Enter the promo code in the field below. You will see promo details in the Promotions panel on the Billing Info tab. diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx index f2649a3258c..88f7ea1501b 100644 --- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx @@ -156,7 +156,7 @@ const UpdateContactInformationForm = ({ focusEmail, onClose }: Props) => { > {generalError && ( - + )} diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx index 385e65e5745..e5c34763de0 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx @@ -162,7 +162,7 @@ const AddCreditCardForm = (props: Props) => {
{error && ( - + )} diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx index 893190738e6..3af0dbb1e0c 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { LinearProgress } from 'src/components/LinearProgress'; -import { Notice } from 'src/components/Notice/Notice'; +import { Notice, NoticeVariant } from 'src/components/Notice/Notice'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { MAXIMUM_PAYMENT_METHODS } from 'src/constants'; @@ -91,14 +91,13 @@ export const AddPaymentMethodDrawer = (props: Props) => { {hasMaxPaymentMethods ? ( ) : null} {noticeMessage ? ( ) : null} <> diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx index bb738ace757..0970d8d5b59 100644 --- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx +++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx @@ -174,7 +174,9 @@ export const InvoiceDetail = () => { - {pdfGenerationError && Failed generating PDF.} + {pdfGenerationError && ( + Failed generating PDF. + )} diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 88101827d8d..64154108ab5 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -29,26 +29,25 @@ import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleVal import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect'; import { RegionOption } from 'src/components/EnhancedSelect/variants/RegionSelect/RegionOption'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; +import { FormControl } from 'src/components/FormControl'; +import { FormControlLabel } from 'src/components/FormControlLabel'; import { LandingHeader } from 'src/components/LandingHeader'; import { Link } from 'src/components/Link'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; import { Notice } from 'src/components/Notice/Notice'; -import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; +import { Paper } from 'src/components/Paper'; import { Radio } from 'src/components/Radio/Radio'; +import { RadioGroup } from 'src/components/RadioGroup'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; -import { FormControl } from 'src/components/FormControl'; -import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Paper } from 'src/components/Paper'; -import { RadioGroup } from 'src/components/RadioGroup'; import { databaseEngineMap } from 'src/features/Databases/DatabaseLanding/DatabaseRow'; import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils'; +import { typeLabelDetails } from 'src/features/Linodes/presentation'; import { - PlansPanel, PlanSelectionType, + PlansPanel, } from 'src/features/components/PlansPanel/PlansPanel'; -import { typeLabelDetails } from 'src/features/Linodes/presentation'; import { useFlags } from 'src/hooks/useFlags'; import { useCreateDatabaseMutation, @@ -444,7 +443,6 @@ const DatabaseCreate = () => { return ( - { title="Create" /> - {createError ? : null} + {createError ? : null} Name Your Cluster { data-testid="database-nodes" > {errors.cluster_size ? ( - + ) : null} { {flags.databaseBeta ? ( - + Notice: There is no charge for database clusters during beta. {' '} @@ -601,7 +599,11 @@ const DatabaseCreate = () => { {ipErrorsFromAPI ? ipErrorsFromAPI.map((apiError: APIError) => ( - + )) : null} { open={isDialogOpen} title={`Remove IP Address ${accessControlToBeRemoved}`} > - {error ? : null} + {error ? : null} IP {accessControlToBeRemoved} will lose all access to the data on this database cluster. This action cannot be undone, but you can re-enable diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx index e345a9e6832..0d3b9b95a94 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx @@ -162,13 +162,13 @@ const AddAccessControlDrawer = (props: CombinedProps) => { return ( - {error ? : null} + {error ? : null} {allowListErrors ? allowListErrors.map((allowListError) => ( )) : null} diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx index aa726efc503..18e0df72281 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx @@ -65,10 +65,10 @@ export const RestoreFromBackupDialog: React.FC = (props) => { getAPIErrorOrDefault(error, 'Unable to restore this backup.')[0] .reason } - error + variant="error" /> ) : null} - + Warning: Restoring from a backup will erase all existing data on this cluster. diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx index a4fd64bfbfc..4d9147a55b5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx @@ -62,8 +62,8 @@ export const DatabaseSettingsDeleteClusterDialog: React.FC = (props) => { open={open} title={`Delete Database Cluster ${databaseLabel}`} > - {error ? : null} - + {error ? : null} + Warning: Deleting your entire database will delete any backups and nodes associated with database {databaseLabel}, which diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx index efac28409cc..80e0d3012eb 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx @@ -53,7 +53,7 @@ export const DatabaseSettingsResetPasswordDialog: React.FC = (props) => { open={open} title="Reset Root Password" > - {error ? {error[0].reason} : undefined} + {error ? {error[0].reason} : undefined} After resetting your root password, you can view your new password on the database cluster summary page. diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx index b710a7ffbe1..ce0d238ee57 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx @@ -180,7 +180,7 @@ export const MaintenanceWindow = (props: Props) => { Maintenance Window {maintenanceUpdateError ? ( - + {maintenanceUpdateError[0].reason} ) : null} diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index 2b6b28b7539..7d126c22221 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx @@ -7,10 +7,10 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel'; -import { TabLinkList } from 'src/components/TabLinkList/TabLinkList'; import { TabPanels } from 'src/components/ReachTabPanels'; import { Tabs } from 'src/components/ReachTabs'; +import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel'; +import { TabLinkList } from 'src/components/TabLinkList/TabLinkList'; import { useEditableLabelState } from 'src/hooks/useEditableLabelState'; import { useDatabaseMutation, diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx index 405047ab830..159eac886f7 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx @@ -7,7 +7,6 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; -import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableHead } from 'src/components/TableHead'; @@ -68,7 +67,6 @@ const DatabaseLanding = () => { return ( - import('./DatabaseLanding')); @@ -14,6 +15,7 @@ const Database = () => { return ( }> + diff --git a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx index cdca7e0ff48..5c8684c2c36 100644 --- a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx @@ -51,7 +51,9 @@ export const CloneDomainDrawer = (props: CloneDomainDrawerProps) => { return ( {noPermission && ( - You do not have permission to create new Domains. + + You do not have permission to create new Domains. + )} diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx index b103209442a..0aaf0db5cbd 100644 --- a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx +++ b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx @@ -17,15 +17,15 @@ import { useHistory } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; +import { FormControlLabel } from 'src/components/FormControlLabel'; +import { FormHelperText } from 'src/components/FormHelperText'; import { LandingHeader } from 'src/components/LandingHeader'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Radio } from 'src/components/Radio/Radio'; -import { TextField } from 'src/components/TextField'; -import { FormControlLabel } from 'src/components/FormControlLabel'; -import { FormHelperText } from 'src/components/FormHelperText'; import { RadioGroup } from 'src/components/RadioGroup'; +import { TextField } from 'src/components/TextField'; import { reportException } from 'src/exceptionReporting'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; import { NodeBalancerSelect } from 'src/features/NodeBalancers/NodeBalancerSelect'; @@ -275,7 +275,7 @@ export const CreateDomain = () => { /> {generalError && !disabled && ( - + {generalError} )} @@ -284,8 +284,8 @@ export const CreateDomain = () => { text={ "You don't have permissions to create a new Domain. Please contact an account administrator for details." } - error important + variant="error" /> )} diff --git a/packages/manager/src/features/Domains/DomainBanner.tsx b/packages/manager/src/features/Domains/DomainBanner.tsx index 35c1d495089..1aa60481d29 100644 --- a/packages/manager/src/features/Domains/DomainBanner.tsx +++ b/packages/manager/src/features/Domains/DomainBanner.tsx @@ -21,13 +21,13 @@ export const DomainBanner = React.memo((props: DomainBannerProps) => { return ( <> diff --git a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx index e5ffb950c2d..14f1ce02ed8 100644 --- a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx +++ b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx @@ -1,23 +1,25 @@ +import Grid from '@mui/material/Unstable_Grid2'; +import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; + import { CircleProgress } from 'src/components/CircleProgress'; -import { styled } from '@mui/material/styles'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Notice } from 'src/components/Notice/Notice'; import { LandingHeader } from 'src/components/LandingHeader'; -import Grid from '@mui/material/Unstable_Grid2'; -import { Typography } from 'src/components/Typography'; -import { TagsPanel } from 'src/components/TagsPanel/TagsPanel'; -import DomainRecords from '../DomainRecords'; -import { DeleteDomain } from '../DeleteDomain'; -import { DownloadDNSZoneFileButton } from '../DownloadDNSZoneFileButton'; +import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; +import { TagsPanel } from 'src/components/TagsPanel/TagsPanel'; +import { Typography } from 'src/components/Typography'; import { useDomainQuery, useDomainRecordsQuery, useUpdateDomainMutation, } from 'src/queries/domains'; +import { DeleteDomain } from '../DeleteDomain'; +import DomainRecords from '../DomainRecords'; +import { DownloadDNSZoneFileButton } from '../DownloadDNSZoneFileButton'; + export const DomainDetail = () => { const params = useParams<{ domainId: string }>(); const domainId = Number(params.domainId); @@ -43,7 +45,7 @@ export const DomainDetail = () => { return Promise.reject('No Domain found.'); } - return updateDomain({ id: domain.id, domain: label }).catch((e) => { + return updateDomain({ domain: label, id: domain.id }).catch((e) => { setUpdateError(e[0].reason); return Promise.reject(e); }); @@ -84,18 +86,15 @@ export const DomainDetail = () => { return ( <> { domainLabel={domain.domain} /> } + docsLabel="Docs" + docsLink="https://www.linode.com/docs/guides/dns-manager/" + title="Domain Details" /> {location.state && location.state.recordError && ( - + )} - + Tags @@ -143,22 +145,22 @@ const StyledTypography = styled(Typography, { label: 'StyledTypography' })( ); const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({ - padding: theme.spacing(2.5), + height: '93%', marginBottom: theme.spacing(2), minHeight: '160px', - height: '93%', + padding: theme.spacing(2.5), })); const StyledNotice = styled(Notice, { label: 'StyledNotice' })(({ theme }) => ({ - marginTop: `${theme.spacing(3)} !important`, marginBottom: `0 !important`, + marginTop: `${theme.spacing(3)} !important`, })); const StyledRootGrid = styled(Grid, { label: 'StyledRootGrid' })( ({ theme }) => ({ + marginBottom: theme.spacing(3), marginLeft: 0, marginRight: 0, - marginBottom: theme.spacing(3), }) ); @@ -175,21 +177,21 @@ const StyledMainGrid = styled(Grid, { label: 'StyledMainGrid' })( const StyledTagSectionGrid = styled(Grid, { label: 'StyledTagGrid' })( ({ theme }) => ({ - [theme.breakpoints.up('md')]: { - marginTop: theme.spacing(2), - order: 2, - }, '&.MuiGrid-item': { paddingLeft: 0, paddingRight: 0, }, + [theme.breakpoints.up('md')]: { + marginTop: theme.spacing(2), + order: 2, + }, }) ); const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({ + display: 'flex', + justifyContent: 'flex-end', [theme.breakpoints.down('lg')]: { marginLeft: theme.spacing(), }, - display: 'flex', - justifyContent: 'flex-end', })); diff --git a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx index 872dfa18dc9..aec791b399e 100644 --- a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx +++ b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx @@ -149,10 +149,14 @@ export class DomainRecordDrawer extends React.Component< > {otherErrors.length > 0 && otherErrors.map((err, index) => { - return ; + return ; })} {!hasARecords && type === 'NS' && ( - + )} {fields.map((field: any, idx: number) => field(idx))} diff --git a/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx b/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx index 84eb866212f..fa574a15065 100644 --- a/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx +++ b/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx @@ -53,10 +53,12 @@ export const DomainZoneImportDrawer = (props: DomainZoneImportDrawerProps) => { return ( {noPermission && ( - You do not have permission to create new Domains. + + You do not have permission to create new Domains. + )} - {generalError && } + {generalError && } {Boolean(updateLinodeError) && ( - + {updateLinodeError?.[0].reason} )} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx index 150d7416ab5..8990db27843 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -58,8 +58,8 @@ import getSelectedOptionFromGroupedOptions from 'src/utilities/getSelectedOption import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView'; import { - InterfaceSelect, ExtendedInterface, + InterfaceSelect, } from '../LinodeSettings/InterfaceSelect'; import { KernelSelect } from '../LinodeSettings/KernelSelect'; @@ -566,10 +566,10 @@ export const LinodeConfigDialog = (props: Props) => { {generalError && ( )} @@ -764,14 +764,14 @@ export const LinodeConfigDialog = (props: Props) => { /> @@ -842,13 +842,16 @@ export const LinodeConfigDialog = (props: Props) => { . } - sx={{ tooltip: { maxWidth: 350 } }} interactive status="help" + sx={{ tooltip: { maxWidth: 350 } }} /> {formik.errors.interfaces ? ( - + ) : null} {values.interfaces.map((thisInterface, idx) => { return ( diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx index e3e94ab6049..2b93f89d5a8 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx @@ -5,13 +5,13 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { Item } from 'src/components/EnhancedSelect/Select'; +import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; +import { RadioGroup } from 'src/components/RadioGroup'; import { Tooltip } from 'src/components/Tooltip'; import { Typography } from 'src/components/Typography'; -import { FormControlLabel } from 'src/components/FormControlLabel'; -import { RadioGroup } from 'src/components/RadioGroup'; import { useAllocateIPMutation, useCreateIPv6RangeMutation, @@ -166,7 +166,7 @@ export const AddIPDrawer = (props: Props) => { IPv4 {Boolean(ipv4Error) && ( - + )} Select type @@ -224,7 +224,7 @@ export const AddIPDrawer = (props: Props) => { IPv6 {Boolean(ipv6Error) && ( - + )} Select prefix diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx index 2b46ca10314..9944b5e1602 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx @@ -57,7 +57,9 @@ export const EditIPRDNSDrawer = (props: Props) => { return ( - {Boolean(errorMap.none) && {errorMap.none}} + {Boolean(errorMap.none) && ( + {errorMap.none} + )} { {Boolean(errorMap.none) && ( - + {errorMap.none} )} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx index f1b4fde2e82..62b58ab3a48 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx @@ -294,18 +294,18 @@ const IPSharingPanel = (props: Props) => { <> {generalError && ( - + )} {successMessage && ( - + )} {flags.ipv6Sharing ? ( - + Warning: Converting a statically routed IPv6 range to a shared range will break existing IPv6 diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx index 3f3ae0d5d49..ed16deb2523 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx @@ -456,13 +456,13 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => { {error && ( {error.map(({ reason }, idx) => ( - + ))} )} {successMessage && ( - + )} @@ -476,7 +476,10 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => { {!isLoading && !ipv6RangesLoading && ipv6RangesError ? ( - + ) : null} {(isLoading || ipv6RangesLoading) && searchText === '' ? (
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx index 103646c3525..5c698b79fef 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx @@ -109,9 +109,9 @@ const TransferContent = (props: ContentProps) => { text={ 'Network transfer information for this Linode is currently unavailable.' } - error={true} important spacingBottom={0} + variant="error" /> ); } diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx index 519241ec91f..b98de01892f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx @@ -4,7 +4,7 @@ import { Notice } from 'src/components/Notice/Notice'; export const LinodePermissionsError = () => ( ); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx index 1294d99368d..c135a50e025 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx @@ -78,7 +78,7 @@ export const LinodeRebuildDialog = (props: Props) => { {unauthorized && } {hostMaintenance && } - {rebuildError && {rebuildError}} + {rebuildError && {rebuildError}} { } renderNotice={ } diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx index 98a5725baeb..1d58f9d1e88 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx @@ -35,7 +35,7 @@ export const RescueDescription = (props: Props) => { spacingBottom={16} spacingTop={0} text={rescueDescription.firewallWarning} - warning + variant="warning" /> ) : null} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx index 155c7d843ce..e104d578426 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx @@ -199,7 +199,7 @@ export const StandardRescueDialog = (props: Props) => { open={open} title={`Rescue Linode ${linode?.label ?? ''}`} > - {APIError && } + {APIError && } {disksError ? (
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx index 9520ba08808..72766f3f3da 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx @@ -163,11 +163,11 @@ export const LinodeResize = (props: Props) => { {hostMaintenance && } {disksError && ( )} - {error && {error}} + {error && {error}} If you’re expecting a temporary burst of traffic to your website, or if you’re not using your Linode as much as you diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel.tsx index dc0431dbb45..ebb7d3a1a46 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel.tsx @@ -231,7 +231,7 @@ export const LinodeSettingsAlertsPanel = (props: Props) => { defaultExpanded heading="Notification Thresholds" > - {generalError && {generalError}} + {generalError && {generalError}} {alertSections.map((p, idx) => ( ))} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx index 7a03777a0c4..7378305b1ef 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx @@ -67,7 +67,7 @@ export const LinodeSettingsDeletePanel = (props: Props) => { open={open} title={`Delete ${linode?.label}?`} > - + Warning: Deleting your Linode will result in permanent data loss. diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx index 0cb297a3dd1..8cb165353ad 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx @@ -63,7 +63,7 @@ export const LinodeSettingsLabelPanel = (props: Props) => { defaultExpanded heading="Linode Label" > - {Boolean(generalError) && } + {Boolean(generalError) && } { heading="Reset Root Password" > - {generalError && } + {generalError && } {!isBareMetalInstance ? ( { {Boolean(error) && ( - + )} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx index 804c7fc34f3..3edcd07884d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx @@ -122,10 +122,10 @@ export const CreateDiskDrawer = (props: Props) => { /> {formik.status && ( )} { {formik.status && ( )} { {formik.status && ( )} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/HostMaintenance.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/HostMaintenance.tsx index 8a8df6b20a2..ecf4651fdba 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/HostMaintenance.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/HostMaintenance.tsx @@ -14,7 +14,7 @@ export const HostMaintenance = (props: Props) => { return null; } return ( - + An issue affecting the physical host this Linode resides on has been diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx index 4f5a25c988d..3e97010720d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx @@ -5,6 +5,7 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { TagDrawer } from 'src/components/TagCell/TagDrawer'; import { LinodeEntityDetail } from 'src/features/Linodes/LinodeEntityDetail'; import { MigrateLinode } from 'src/features/Linodes/MigrateLinode/MigrateLinode'; @@ -208,6 +209,7 @@ const LinodeDetailHeader = () => { + { return ( <> - + {notificationType === 'migration_scheduled' ? migrationScheduledText() diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx index 6e3afa02fcf..b96c599cb47 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx @@ -71,7 +71,7 @@ export const MutationNotification = (props: Props) => { return ( <> - + You have a pending upgrade. The estimated time to complete this upgrade is diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx index 6df9c3bc578..a73b3d6f441 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx @@ -123,7 +123,7 @@ const LinodesDetailNavigation = () => { {text} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/MutateDrawer/MutateDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/MutateDrawer/MutateDrawer.tsx index b55bcaf2135..b06aec5608a 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/MutateDrawer/MutateDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/MutateDrawer/MutateDrawer.tsx @@ -105,7 +105,7 @@ export class MutateDrawer extends React.Component { return ( - {error && } + {error && } This Linode has pending upgrades. The resources that are affected include: diff --git a/packages/manager/src/features/Linodes/LinodesLanding/DeleteLinodeDialog.tsx b/packages/manager/src/features/Linodes/LinodesLanding/DeleteLinodeDialog.tsx index dcd86135f84..d0a8e4e7c32 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/DeleteLinodeDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/DeleteLinodeDialog.tsx @@ -60,7 +60,7 @@ export const DeleteLinodeDialog = (props: Props) => { open={open} title={`Delete ${linode?.label ?? ''}?`} > - + Warning: Deleting your Linode will result in permanent data loss. diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx index 2de50364e55..000134592ea 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx @@ -10,6 +10,7 @@ import { LandingHeader } from 'src/components/LandingHeader'; import { MaintenanceBanner } from 'src/components/MaintenanceBanner/MaintenanceBanner'; import OrderBy from 'src/components/OrderBy'; import { PreferenceToggle } from 'src/components/PreferenceToggle/PreferenceToggle'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; import { WithProfileProps, @@ -146,7 +147,12 @@ class ListLinodes extends React.Component { } if (this.props.linodesData.length === 0) { - return ; + return ( + <> + + + + ); } return ( @@ -180,6 +186,7 @@ class ListLinodes extends React.Component { )} + localStorageKey="GROUP_LINODES" preferenceKey="linodes_group_by_tag" diff --git a/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx b/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx index 77c9be01303..d15e127ffc9 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx @@ -96,14 +96,14 @@ export const CautionNotice = React.memo((props: Props) => { {props.metadataWarning ?
  • {props.metadataWarning}
    • : null} - {props.error && } + {props.error && } props.setConfirmed(!props.hasConfirmed)} - text="Accept" sx={{ marginLeft: theme.spacing(2), }} + checked={props.hasConfirmed} + onChange={() => props.setConfirmed(!props.hasConfirmed)} + text="Accept" /> ); diff --git a/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx b/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx index 7586a7fa179..bc237e4d0d9 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx @@ -206,7 +206,7 @@ export const MigrateLinode = React.memo((props: Props) => { open={open} title={`Migrate Linode ${linode.label ?? ''} to another region`} > - {error && } + {error && } {newLabel} diff --git a/packages/manager/src/features/Linodes/MigrateLinode/MigrationImminentNotice.tsx b/packages/manager/src/features/Linodes/MigrateLinode/MigrationImminentNotice.tsx index d939dbc4e1c..c3c3292a964 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/MigrationImminentNotice.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/MigrationImminentNotice.tsx @@ -22,7 +22,7 @@ export const MigrationImminentNotice = React.memo((props: Props) => { ); return migrationScheduledForThisLinode ? ( - + Your Linode is already scheduled to be migrated. Please open a{' '} { secondaryButtonProps={{ label: 'Cancel', onClick: props.onClose }} /> } - error={error?.[0].reason} - onClose={onClose} - open={isOpen} sx={{ '& .dialog-content': { paddingBottom: 0, paddingTop: 0, }, }} + error={error?.[0].reason} + onClose={onClose} + open={isOpen} title={`${action} Linode ${linode?.label ?? ''}?`} > {props.action === 'Power On' ? ( @@ -181,7 +181,7 @@ export const PowerActionsDialog = (props: Props) => { fontSize: '0.875rem !important', }, }} - warning + variant="warning" > Note: Powered down Linodes will still accrue charges. diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx index 702efa2f179..8b7951edfdf 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; +import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; @@ -92,6 +93,7 @@ const LoadBalancerLanding = () => { return ( <> + { return ( }> + = (props) => { if (notice !== null) { return ( - + {notice} See our{' '} diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLLanding.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLLanding.tsx index 4be28e5862c..8528ceaa22b 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLLanding.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLLanding.tsx @@ -80,7 +80,7 @@ export const MySQLLanding: React.FC = (props) => { if (notice !== null) { return ( - + {notice} See our{' '} diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINX.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINX.tsx index f43e1698950..e1d985bd144 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINX.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINX.tsx @@ -91,7 +91,7 @@ export const NGINX: React.FC = (props) => { if (notice !== null) { return ( - + {notice} See our{' '} diff --git a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx index c4a7651265d..a4a3cd28c6a 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx @@ -224,7 +224,7 @@ export const LongviewDetail: React.FC = (props) => { spacingBottom={0} spacingTop={8} text={thisNotification.TEXT} - warning + variant="warning" /> ))} = (props) => { {isManaged ? ( - {updateErrorMsg && } - {updateSuccessMsg && } - + {updateErrorMsg && } + {updateSuccessMsg && ( + + )} + {managedText} ) : ( <> {mayUserModifyLVSubscription && updateErrorMsg && ( - + )} {!mayUserModifyLVSubscription && ( )} - {updateSuccessMsg && } + {updateSuccessMsg && ( + + )} {isTableDisplayed && ( <> diff --git a/packages/manager/src/features/Longview/index.tsx b/packages/manager/src/features/Longview/index.tsx index 9e59b402799..e9e05392f97 100644 --- a/packages/manager/src/features/Longview/index.tsx +++ b/packages/manager/src/features/Longview/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; const LongviewLanding = React.lazy(() => import('./LongviewLanding')); @@ -17,6 +18,7 @@ const Longview: React.FC = (props) => { return ( + }> diff --git a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx index 03b6c4842fa..cf8891e92c8 100644 --- a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx +++ b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx @@ -130,7 +130,11 @@ const ContactsDrawer = (props: ContactsDrawerProps) => { return ( <> {status && ( - + )} diff --git a/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx b/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx index c0e18cc2ed9..fdb44a8ea4f 100644 --- a/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx @@ -53,9 +53,9 @@ const CredentialDrawer = (props: CredentialDrawerProps) => { {status && ( )} diff --git a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx index fe316b2d79d..dbc382a18f2 100644 --- a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx @@ -53,9 +53,9 @@ const CredentialDrawer = (props: CredentialDrawerProps) => { {status && status.generalError && ( )} @@ -63,8 +63,8 @@ const CredentialDrawer = (props: CredentialDrawerProps) => { )} @@ -118,10 +118,10 @@ const CredentialDrawer = (props: CredentialDrawerProps) => { {status && status.generalError && ( )} @@ -130,8 +130,8 @@ const CredentialDrawer = (props: CredentialDrawerProps) => { data-qa-success key={status.success} spacingBottom={0} - success text={status.success} + variant="success" /> )} diff --git a/packages/manager/src/features/Managed/ManagedLanding.tsx b/packages/manager/src/features/Managed/ManagedLanding.tsx index dec3a640959..a80c173db01 100644 --- a/packages/manager/src/features/Managed/ManagedLanding.tsx +++ b/packages/manager/src/features/Managed/ManagedLanding.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; import { NavTab, NavTabs } from 'src/components/NavTabs/NavTabs'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import ManagedDashboardCard from './ManagedDashboardCard'; import SupportWidget from './SupportWidget'; @@ -44,6 +45,7 @@ export const ManagedLanding = () => { return ( + { {status && ( )} diff --git a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx index b4f4a2ea31d..296c30a4f37 100644 --- a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx @@ -119,7 +119,11 @@ const EditSSHAccessDrawer = (props: EditSSHAccessDrawerProps) => { return ( <> {status && ( - + )} diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx index baab9e9da00..223764518a8 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -74,7 +74,7 @@ export const NodeBalancerConfigNode = React.memo( )} {nodesErrorMap.none && ( - + )} diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx index c4ee79091ab..8f1d176d1fe 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx @@ -181,8 +181,8 @@ export const NodeBalancerConfigPanel = ( {globalFormError && ( )} @@ -354,7 +354,7 @@ export const NodeBalancerConfigPanel = ( {nodeMessage && ( - + )} diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index 61e26bb9997..b0f943f4a0e 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -428,7 +428,7 @@ const NodeBalancerCreate = () => { title="Create" /> {generalError && !disabled && ( - + {generalError} )} @@ -437,9 +437,9 @@ const NodeBalancerCreate = () => { text={ "You don't have permissions to create a new NodeBalancer. Please contact an account administrator for details." } - error={true} important spacingTop={16} + variant="error" /> )} diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx index 20ea0616c11..92c3e3765e4 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx @@ -45,7 +45,7 @@ export const NodeBalancerDeleteDialog = ({ title={`Delete ${label}?`} typographyStyle={{ marginTop: '20px' }} > - + Deleting this NodeBalancer is permanent and can’t be undone. diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx index 239802d79f4..24412fa2b71 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx @@ -10,10 +10,10 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; -import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel'; -import { TabLinkList } from 'src/components/TabLinkList/TabLinkList'; import { TabPanels } from 'src/components/ReachTabPanels'; import { Tabs } from 'src/components/ReachTabs'; +import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel'; +import { TabLinkList } from 'src/components/TabLinkList/TabLinkList'; import { useNodeBalancerQuery, useNodebalancerUpdateMutation, @@ -106,7 +106,7 @@ export const NodeBalancerDetail = () => { docsLink="https://www.linode.com/docs/guides/getting-started-with-nodebalancers/" title={nodeBalancerLabel} /> - {errorMap.none && } + {errorMap.none && } matches(tab.routeName)), diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx index fdb087c704a..5af50f420d8 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Route, Switch } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; const NodeBalancerDetail = React.lazy(() => import('./NodeBalancerDetail/NodeBalancerDetail').then((module) => ({ @@ -16,6 +17,7 @@ const NodeBalancerCreate = React.lazy(() => import('./NodeBalancerCreate')); const NodeBalancers = () => { return ( }> + { return ( <> {status && ( - + )} {isRestrictedUser && ( )} diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx index aac154da692..ddb8685ef3e 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx @@ -131,10 +131,13 @@ export const AccessSelect = React.memo((props: Props) => { return ( <> {updateAccessSuccess ? ( - + ) : null} - {errorText ? : null} + {errorText ? : null} { diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx index 0f61ce6df98..4201a2ee66b 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx @@ -104,7 +104,12 @@ const AddCertForm = (props: Props) => { return ( {errorMap.none && ( - + )} @@ -185,7 +190,7 @@ const RemoveCertForm = (props: Props) => { return ( <> - + A TLS certificate has already been uploaded for this Bucket. To upload a new certificate, remove the current certificate.{` `} diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx index 8d79b4f9713..e65bb19e866 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx @@ -3,11 +3,12 @@ import * as React from 'react'; import { RouteComponentProps, matchPath } from 'react-router-dom'; import { LandingHeader } from 'src/components/LandingHeader'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; +import { TabPanels } from 'src/components/ReachTabPanels'; +import { Tabs } from 'src/components/ReachTabs'; import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { TabLinkList } from 'src/components/TabLinkList/TabLinkList'; -import { TabPanels } from 'src/components/ReachTabPanels'; -import { Tabs } from 'src/components/ReachTabs'; import { BucketAccess } from './BucketAccess'; @@ -61,6 +62,7 @@ export const BucketDetailLanding = React.memo((props: Props) => { return ( <> + { title={`Delete Bucket ${bucketLabel}`} typographyStyle={{ marginTop: '20px' }} > - + Warning: Deleting a bucket is permanent and can’t be undone. @@ -288,7 +288,7 @@ const Banner = React.memo(({ regionsAffected }: BannerProps) => { const moreThanOneRegionAffected = regionsAffected.length > 1; return ( - + There was an error loading buckets in{' '} {moreThanOneRegionAffected diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx index 8e4beb9c815..7729f8b8a42 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx @@ -104,12 +104,14 @@ export const CreateBucketDrawer = (props: Props) => { {isRestrictedUser && ( )} - {Boolean(errorMap.none) && } + {Boolean(errorMap.none) && ( + + )} { return ( - { }} important preferenceKey={NOTIFICATION_KEY} - warning + variant="warning" > You are being billed for Object Storage but do not have any Buckets. You diff --git a/packages/manager/src/features/ObjectStorage/index.tsx b/packages/manager/src/features/ObjectStorage/index.tsx index ce3a44475c6..2a3c7e3cced 100644 --- a/packages/manager/src/features/ObjectStorage/index.tsx +++ b/packages/manager/src/features/ObjectStorage/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; const ObjectStorageLanding = React.lazy(() => @@ -17,6 +18,7 @@ export const ObjectStorage: React.FC = (props) => { return ( }> + { return ( - {errorMap.none && } + {errorMap.none && } { return ( - {errorMap.none && } + {errorMap.none && } { spacingBottom={16} spacingLeft={1} spacingTop={12} - success={hasVerifiedPhoneNumber} - warning={!hasVerifiedPhoneNumber} + variant={hasVerifiedPhoneNumber ? 'success' : 'warning'} > @@ -100,10 +99,10 @@ export const SMSMessaging = () => { Warning: As part of this action, your verified phone number{' '} {profile?.verified_phone_number diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx index 0a3de7d0c27..c1e9d787d39 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx @@ -132,7 +132,7 @@ export const TPAProviders = (props: Props) => { {currentProvider.displayName} Authentication - + Your login credentials are currently managed via{' '} {currentProvider.displayName}. diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx index a0ef4eb09e1..f81eed13103 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx @@ -47,7 +47,7 @@ export const ConfirmToken = React.memo((props: Props) => { } spacingBottom={8} spacingTop={16} - warning + variant="warning" /> )} diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx index 6a6aa31e3e8..ff393af7960 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx @@ -78,7 +78,7 @@ export const EnableTwoFactorForm = (props: Props) => { return ( - {generalError && } + {generalError && } {loading ? ( ) : ( diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx index 29f614ed5f2..6f75117080a 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx @@ -167,14 +167,19 @@ export const TwoFactor = (props: TwoFactorProps) => { Two-Factor Authentication (2FA) {success && ( - + )} {generalError && ( )} @@ -198,7 +203,7 @@ export const TwoFactor = (props: TwoFactorProps) => { style={{ marginTop: '8px' }} text={needSecurityQuestionsCopy} typeProps={{ style: { fontSize: '0.875rem' } }} - warning + variant="warning" /> )} {twoFactorEnabled && ( diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx index 18eafefe1e0..b0d35270354 100644 --- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx +++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx @@ -121,9 +121,11 @@ export const LishSettings = () => { <> - {success && } - {authorizedKeysError && } - {generalError && } + {success && } + {authorizedKeysError && ( + + )} + {generalError && } This controls what authentication methods are allowed to connect to the Lish console servers. diff --git a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx index 17fda8080ec..86a41837cca 100644 --- a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx @@ -53,7 +53,9 @@ export const CreateOAuthClientDrawer = ({ return ( - {hasErrorFor('none') && } + {hasErrorFor('none') && ( + + )} { return ( - {hasErrorFor('none') && } + {hasErrorFor('none') && ( + + )} { 'Unable to load referral information.' )[0].reason } - error + variant="error" /> ); } @@ -123,7 +123,7 @@ export const Referrals = () => { }} spacingBottom={0} spacingTop={8} - warning + variant="warning" > Spend $25 with Linode to activate your personal referral link diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx index bb9ce625f5c..23d1589f446 100644 --- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx @@ -62,7 +62,7 @@ export const CreateSSHKeyDrawer = React.memo(({ onClose, open }: Props) => { return ( - {generalError && } + {generalError && } { open={open} title={`Edit SSH Key ${sshKey?.label}`} > - {generalError && } + {generalError && } { objectStorageKey ? 'secret key' : title.toLowerCase() } once, after which it can\u{2019}t be recovered. Be sure to keep it in a safe place.`} spacingTop={8} - warning + variant="warning" /> {objectStorageKey ? ( <> diff --git a/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx b/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx index 7ab400c084a..6eb633a8465 100644 --- a/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx +++ b/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx @@ -60,9 +60,11 @@ export const PreferenceEditor = (props: Props) => { open={props.open} title="Edit Preferences" > - {errorMessage && } + {errorMessage && ( + + )} {successMessage && ( - + )} Update user preferences tied to Cloud Manager. See the{' '} diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx index 7a149225578..fb8e486f20f 100644 --- a/packages/manager/src/features/Search/SearchLanding.tsx +++ b/packages/manager/src/features/Search/SearchLanding.tsx @@ -258,17 +258,17 @@ export const SearchLanding = (props: CombinedProps) => { {errorMessage && ( - + )} {apiError && ( - + )} {queryError && ( - + )} {(loading || apiSearchLoading) && ( diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx index ecc39db2a4e..4a6e0ecff8e 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx @@ -195,7 +195,12 @@ class SelectStackScriptPanel extends React.Component {
    {error && ( - + )} {stackScriptError && ( diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index 680083f1809..651d526c252 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -173,9 +173,9 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => ( return ( {fieldError && fieldError.reason && ( - + )} - {successMessage && } + {successMessage && } {/* * We only want to show this empty state on the initial GET StackScripts request * If the user is searching and 0 results come back, we just want to show diff --git a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx index 3d08cacb224..ca4c27874f3 100644 --- a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx @@ -223,7 +223,7 @@ export class StackScriptCreate extends React.Component { return ( - {generalError && } + {generalError && } { ? 'create StackScripts' : 'edit this StackScript' }. Please contact an account administrator for details.`} - error={true} important + variant="error" /> )} = (props) => { ) : ( <> {error && ( - + )} {stackScript && ( <_StackScript data={stackScript} userCanModify={false} /> diff --git a/packages/manager/src/features/StackScripts/StackScripts.tsx b/packages/manager/src/features/StackScripts/StackScripts.tsx index 2af9bb43e58..dbdc52a06bb 100644 --- a/packages/manager/src/features/StackScripts/StackScripts.tsx +++ b/packages/manager/src/features/StackScripts/StackScripts.tsx @@ -7,6 +7,7 @@ import { useLocation, useRouteMatch, } from 'react-router-dom'; +import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; @@ -31,6 +32,7 @@ export const StackScripts = () => { return ( }> + diff --git a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx index e57555035a2..c615eebb91f 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx @@ -32,7 +32,10 @@ export const StackScriptsLanding = () => { {!!history.location.state && !!history.location.state.successMessage ? ( - + ) : null} { return (
    - {error && } + {error && }