change: [M3-7651] - Add Clone Linode power-off notice (#10072)

* Add Clone Linode power-off notice * Add new feature flag for Linode Clone UI updates * Added changeset: Clone Linode power-off notice * Reduce spacing between notices
linode · Jan 18, 2024 · bd1ec82 · bd1ec82
1 parent 76295c5
commit bd1ec82
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 16 deletions.
diff --git a/packages/manager/.changeset/pr-10072-changed-1705529283172.md b/packages/manager/.changeset/pr-10072-changed-1705529283172.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Clone Linode power-off notice ([#10072](https://github.com/linode/manager/pull/10072))
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -15,6 +15,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'aglb', label: 'AGLB' },
   { flag: 'aglbFullCreateFlow', label: 'AGLB Full Create Flow' },
   { flag: 'dcGetWell', label: 'DC Get Well' },
+  { flag: 'linodeCloneUIChanges', label: 'Linode Clone UI Changes' },
   { flag: 'metadata', label: 'Metadata' },
   { flag: 'parentChildAccountAccess', label: 'Parent/Child Account' },
   { flag: 'selfServeBetas', label: 'Self Serve Betas' },

diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -50,6 +50,7 @@ export interface Flags {
   firewallNodebalancer: boolean;
   ipv6Sharing: boolean;
   kubernetesDashboardAvailability: boolean;
+  linodeCloneUIChanges: boolean;
   linodeCreateWithFirewall: boolean;
   mainContentBanner: MainContentBanner;
   metadata: boolean;

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
@@ -10,6 +10,7 @@ import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFoot
 import { Paper } from 'src/components/Paper';
 import { RenderGuard } from 'src/components/RenderGuard';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 export interface ExtendedLinode extends Linode {
@@ -28,7 +29,7 @@ interface Props {
   handleSelection: (id: number, type: null | string, diskSize?: number) => void;
   header?: string;
   linodes: ExtendedLinode[];
-  notice?: Notice;
+  notices?: Notice[];
   selectedLinodeID?: number;
 }
 
@@ -39,7 +40,7 @@ const SelectLinodePanel = (props: Props) => {
     handleSelection,
     header,
     linodes,
-    notice,
+    notices,
     selectedLinodeID,
   } = props;
 
@@ -71,10 +72,27 @@ const SelectLinodePanel = (props: Props) => {
         return (
           <>
             <StyledPaper data-qa-select-linode-panel>
-              {error && <Notice text={error} variant="error" />}
-              {notice && !disabled && (
-                <Notice text={notice.text} variant={notice.level} />
-              )}
+              <Stack gap={0.5} mb={2}>
+                {error && (
+                  <Notice
+                    spacingBottom={0}
+                    spacingTop={0}
+                    text={error}
+                    variant="error"
+                  />
+                )}
+                {notices &&
+                  !disabled &&
+                  notices.map((notice, i) => (
+                    <Notice
+                      key={i}
+                      spacingBottom={0}
+                      spacingTop={0}
+                      text={notice.text}
+                      variant={notice.level}
+                    />
+                  ))}
+              </Stack>
               <Typography data-qa-select-linode-header variant="h2">
                 {!!header ? header : 'Select Linode'}
               </Typography>

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
@@ -120,13 +120,15 @@ export class FromBackupsContent extends React.Component<CombinedProps, State> {
                   ),
                 filterLinodesWithBackups
               )(linodesData)}
-              notice={{
-                level: 'warning',
-                text: `This newly created Linode will be created with
+              notices={[
+                {
+                  level: 'warning',
+                  text: `This newly created Linode will be created with
                           the same password and SSH Keys (if any) as the original Linode.
                           Also note that this Linode will need to be manually booted after it finishes
                           provisioning.`,
-              }}
+                },
+              ]}
               disabled={disabled}
               error={hasErrorFor('linode_id')}
               handleSelection={this.handleLinodeSelect}

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { Paper } from 'src/components/Paper';
+import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { buildQueryStringForLinodeClone } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu';
+import { useFlags } from 'src/hooks/useFlags';
 import { extendType } from 'src/utilities/extendType';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
-import { StyledGrid } from './CommonTabbedContent.styles';
 
 import SelectLinodePanel from '../SelectLinodePanel';
 import {
@@ -16,6 +16,7 @@ import {
   WithLinodesTypesRegionsAndImages,
 } from '../types';
 import { extendLinodes } from '../utilities';
+import { StyledGrid } from './CommonTabbedContent.styles';
 
 const errorResources = {
   label: 'A label',
@@ -47,6 +48,8 @@ export const FromLinodeContent = (props: CombinedProps) => {
 
   const history = useHistory();
 
+  const flags = useFlags();
+
   const updateSearchParams = (search: string) => {
     history.replace({ search });
   };
@@ -99,10 +102,22 @@ export const FromLinodeContent = (props: CombinedProps) => {
               extendedTypes,
               regionsData
             )}
-            notice={{
-              level: 'warning',
-              text: `This newly created Linode will be created with the same password and SSH Keys (if any) as the original Linode.`,
-            }}
+            notices={[
+              {
+                level: 'warning',
+                text:
+                  'This newly created Linode will be created with the same password and SSH Keys (if any) as the original Linode.',
+              },
+              ...(flags.linodeCloneUIChanges
+                ? [
+                    {
+                      level: 'warning' as const,
+                      text:
+                        'To help avoid data corruption during the cloning process, we recommend powering off your Compute Instance prior to cloning.',
+                    },
+                  ]
+                : []),
+            ]}
             data-qa-linode-panel
             disabled={userCannotCreateLinode}
             error={hasErrorFor('linode_id')}