fix: [M3-6254] - Show warning message for only Linode clone and backu…

…ps (#8888) * fix: [M3-6254] show warning message for only Linode clone and backups flow * PR -feedback * PR Feedback * PR Feedback
linode · Mar 22, 2023 · 3cfb4f0 · 3cfb4f0
1 parent 15c282c
commit 3cfb4f0
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 50 deletions.
diff --git 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 (
       <form className={classes.form}>
         <Grid item className="py0">
@@ -760,11 +755,7 @@ export class LinodeCreate extends React.PureComponent<
             <UserDataAccordion
               userData={this.props.userData}
               onChange={updateUserData}
-              renderHeaderWarningMessage={
-                <Notice warning spacingTop={16} spacingBottom={16}>
-                  {userDataHeaderWarningMessage}
-                </Notice>
-              }
+              createType={this.props.createType}
             />
           ) : null}
           <AddonsPanel

diff --git a/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/AccordionHeading.tsx b/packages/manager/src/features/linodes/LinodesCreate/UserDataAccordion/AccordionHeading.tsx
diff --git a/...s/manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx b/...s/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 './UserDataAccordionHeading';
 
 describe('UserDataAccordion', () => {
   const onChange = jest.fn();
   const props = {
     userData: 'test data',
     onChange,
+    createType: '',
   };
   it('should render without errors', () => {
     const { container } = renderWithTheme(<UserDataAccordion {...props} />);
@@ -42,13 +44,12 @@ describe('UserDataAccordion', () => {
 
   it('should display a custom header warning message', () => {
     renderWithTheme(
-      <UserDataAccordion
-        {...props}
-        renderHeaderWarningMessage={<div>Custom warning message</div>}
-      />
+      <UserDataAccordion {...props} createType={LINODE_CREATE_FROM.BACKUPS} />
     );
 
-    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
@@ -3,24 +3,24 @@ 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 {
+  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 (
     <Accordion
-      heading={<AccordionHeading warningNotice={renderHeaderWarningMessage} />}
+      heading={<UserDataAccordionHeading createType={createType} />}
       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',

diff --git a/...manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx b/...manager/src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Link from 'src/components/Link';
+import Notice from 'src/components/Notice';
+import { StyledHelpIcon } from './UserDataAccordion.styles';
+
+export const LINODE_CREATE_FROM = {
+  BACKUPS: 'fromBackup',
+  CLONE: 'fromLinode',
+};
+
+interface Props {
+  createType?: string | undefined;
+}
+
+const UserDataAccordionHeading = ({ 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 (
+    <>
+      Add User Data{' '}
+      <StyledHelpIcon
+        text={
+          <>
+            User data is part of a virtual machine&rsquo;s cloud-init metadata
+            containing information related to a user&rsquo;s local account.{' '}
+            <Link to="/">Learn more.</Link>
+          </>
+        }
+        interactive
+      />
+      {showWarningMessage ? (
+        <Notice warning spacingTop={16} spacingBottom={16}>
+          {userDataHeaderWarningMessage}
+        </Notice>
+      ) : null}
+    </>
+  );
+};
+
+export default UserDataAccordionHeading;