From d33053e4604178e232834ebe58644fa61747c8e8 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Thu, 16 Mar 2023 10:26:17 -0500 Subject: [PATCH 1/4] fix: [M3-6254] show warning message for only Linode clone and backups flow --- .../linodes/LinodesCreate/LinodeCreate.tsx | 13 ++-------- .../UserDataAccordion/AccordionHeading.tsx | 24 +++++++++++++++---- .../UserDataAccordion.test.tsx | 11 +++++---- .../UserDataAccordion/UserDataAccordion.tsx | 6 ++--- 4 files changed, 31 insertions(+), 23 deletions(-) diff --git a/packages/manager/src/features/linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/linodes/LinodesCreate/LinodeCreate.tsx index 7ed1e00015f..319700f87c5 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/LinodeCreate.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/LinodeCreate.tsx @@ -35,7 +35,6 @@ import { DefaultProps as ImagesProps } from 'src/containers/images.container'; import { AppsDocs } from 'src/documentation'; import EUAgreementCheckbox from 'src/features/Account/Agreements/EUAgreementCheckbox'; import SMTPRestrictionText from 'src/features/linodes/SMTPRestrictionText'; -import UserDataAccordion from 'src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion'; import { getCommunityStackscripts, getMineAndAccountStackScripts, @@ -60,6 +59,7 @@ import FromBackupsContent from './TabbedContent/FromBackupsContent'; import FromImageContent from './TabbedContent/FromImageContent'; import FromLinodeContent from './TabbedContent/FromLinodeContent'; import FromStackScriptContent from './TabbedContent/FromStackScriptContent'; +import UserDataAccordion from './UserDataAccordion/UserDataAccordion'; import { renderBackupsDisplaySection } from './TabbedContent/utils'; import { AllFormStateAndHandlers, @@ -551,11 +551,6 @@ export class LinodeCreate extends React.PureComponent< const showUserData = imageIsCloudInitCompatible || linodeIsCloudInitCompatible; - const userDataHeaderWarningMessage = - this.props.createType === 'fromBackup' - ? 'Existing user data is not available when creating a Linode from a backup.' - : 'User data is not cloned.'; - return (
@@ -760,11 +755,7 @@ export class LinodeCreate extends React.PureComponent< - {userDataHeaderWarningMessage} - - } + createType={this.props.createType} /> ) : null} { - const { warningNotice } = props; +const AccordionHeading = ({ createType }: Props) => { + const userDataHeaderWarningMessage = + createType === LINODE_CREATE_FROM.BACKUPS + ? 'Existing user data is not available when creating a Linode from a backup.' + : 'User data is not cloned.'; + const showWarningMessage = + createType && + [LINODE_CREATE_FROM.BACKUPS, LINODE_CREATE_FROM.CLONE].includes(createType); return ( <> @@ -22,7 +34,11 @@ const AccordionHeading = (props: Props) => { } interactive /> - {warningNotice ?? warningNotice} + {showWarningMessage ? ( + + {userDataHeaderWarningMessage} + + ) : null} ); }; diff --git a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx index fd0194be292..6cdf3019fc8 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx @@ -2,12 +2,14 @@ import * as React from 'react'; import { fireEvent, screen } from '@testing-library/react'; import { renderWithTheme } from 'src/utilities/testHelpers'; import UserDataAccordion from './UserDataAccordion'; +import { LINODE_CREATE_FROM } from './AccordionHeading'; describe('UserDataAccordion', () => { const onChange = jest.fn(); const props = { userData: 'test data', onChange, + createType: '', }; it('should render without errors', () => { const { container } = renderWithTheme(); @@ -42,13 +44,12 @@ describe('UserDataAccordion', () => { it('should display a custom header warning message', () => { renderWithTheme( - Custom warning message} - /> + ); - const headerWarningMessage = screen.getByText('Custom warning message'); + const headerWarningMessage = screen.getByText( + 'Existing user data is not available when creating a Linode from a backup.' + ); expect(headerWarningMessage).toBeInTheDocument(); }); diff --git a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx index 82432bd591f..48af530c01d 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx @@ -7,20 +7,20 @@ import AccordionHeading from './AccordionHeading'; import UserDataExplanatory from './UserDataExplanatory'; interface Props { + createType?: string; userData: string | undefined; onChange: (userData: string) => void; disabled?: boolean; - renderHeaderWarningMessage?: JSX.Element; renderNotice?: JSX.Element; renderCheckbox?: JSX.Element; } const UserDataAccordion = (props: Props) => { const { + createType, disabled, userData, onChange, - renderHeaderWarningMessage, renderNotice, renderCheckbox, } = props; @@ -51,7 +51,7 @@ const UserDataAccordion = (props: Props) => { return ( } + heading={} style={{ marginTop: renderNotice && renderCheckbox ? 0 : 24 }} // for now, these props can be taken as an indicator we're in the Rebuild flow. headingProps={{ variant: 'h2', From f7822caa4e5e581fb1526a155670e5bbff84e22e Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 22 Mar 2023 11:22:03 -0500 Subject: [PATCH 2/4] PR -feedback --- .../{AccordionHeading.tsx => UserDataAccordionHeading.tsx} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/{AccordionHeading.tsx => UserDataAccordionHeading.tsx} (92%) diff --git a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/AccordionHeading.tsx b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx similarity index 92% rename from packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/AccordionHeading.tsx rename to packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx index 332f51fb695..32e13275a7e 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/AccordionHeading.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx @@ -12,7 +12,7 @@ interface Props { createType?: string | undefined; } -const AccordionHeading = ({ createType }: Props) => { +const UserDataAccordionHeading = ({ createType }: Props) => { const userDataHeaderWarningMessage = createType === LINODE_CREATE_FROM.BACKUPS ? 'Existing user data is not available when creating a Linode from a backup.' @@ -43,4 +43,4 @@ const AccordionHeading = ({ createType }: Props) => { ); }; -export default AccordionHeading; +export default UserDataAccordionHeading; From 7d945dc3158c2e703c779cdd8251936aefd5ac1e Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 22 Mar 2023 11:23:09 -0500 Subject: [PATCH 3/4] PR Feedback --- .../LinodesCreate/UserDataAccordion/UserDataAccordion.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx index 48af530c01d..7f33ce1d11a 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx @@ -3,7 +3,7 @@ import Accordion from 'src/components/Accordion'; import TextField from 'src/components/TextField'; import Notice from 'src/components/Notice'; import AcceptedFormats from './AcceptedFormats'; -import AccordionHeading from './AccordionHeading'; +import UserDataAccordionHeading from './UserDataAccordionHeading'; import UserDataExplanatory from './UserDataExplanatory'; interface Props { @@ -51,7 +51,7 @@ const UserDataAccordion = (props: Props) => { return ( } + heading={} style={{ marginTop: renderNotice && renderCheckbox ? 0 : 24 }} // for now, these props can be taken as an indicator we're in the Rebuild flow. headingProps={{ variant: 'h2', From eafb473cb36af8e9b83b7fcf76f3417f6c7100e4 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 22 Mar 2023 11:23:58 -0500 Subject: [PATCH 4/4] PR Feedback --- .../LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx index 6cdf3019fc8..501405fb4e3 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { fireEvent, screen } from '@testing-library/react'; import { renderWithTheme } from 'src/utilities/testHelpers'; import UserDataAccordion from './UserDataAccordion'; -import { LINODE_CREATE_FROM } from './AccordionHeading'; +import { LINODE_CREATE_FROM } from './UserDataAccordionHeading'; describe('UserDataAccordion', () => { const onChange = jest.fn();