feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload flow #8800

cpathipa · 2023-02-16T15:13:24Z

Description 📝

What does this PR do?
Adds an optional checkbox field to the Image upload form so that a user can indicate if an image supports cloud init.

Todo:

Finalize UX copy for tooltip

Remove this section or include a screenshot or screen recording of the change

How to test 🧪

Navigate to http://localhost:3000/images/create/upload to the Upload Image form.
Open the browser's dev tools, navigate to the network tab, and use the search bar to filter traffic by keyword "images" to make it easier to find the requests we want to verify.
Observe that the Uploaded Image form now includes a checkbox for cloud-init. Verify that the checkbox is unchecked by default and the UI (checkbox + tooltip) matches the mock in our internal issue.
Fill out the form with the required fields check the cloud-init checkbox.
Examine the POST request in the dev tools Networks tab to verify that the request contains a value cloud_init: true and the image response contains capabilities: ['cloud-init'].
Fill out the form with the required fields and do not check the cloud-init checkbox.
Examine the POST request in the dev tools Networks tab to verify that the request contains does not contain a value cloud_init (since this is an optional field, we do not need to send cloud_init: false) and the image response does not contain capabilities: ['cloud-init'].
Change screen size and make sure UI looks consistent.

How do I run relevant unit or e2e tests?

mjac0bs

I realize this PR is still WIP. 😃 Just wanted to mention some initial things while working on M3-6149 since it's so similar.

packages/manager/src/features/Images/ImageUpload.tsx

packages/manager/src/components/CheckBox/CheckBox.tsx

packages/manager/src/features/Images/ImageUpload.tsx

mjac0bs

I'll circle back to this once we get the final copy approved and I left a couple nitpicky naming questions for us to decide on.

Functionality looks good! Verified that images can be uploaded with cloud init capabilities. When the image does not have cloud-init enabled, it is not sent in the request. 👍

packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx

hana-akamai

Functionality looks good!

hana-akamai

@cpathipa Mariah merged her PR into the metadata feature branch. Can you pull in those changes and address the merge conflicts?

jdamore-linode · 2023-02-28T18:34:29Z

packages/manager/src/features/Images/ImageUpload.tsx

@@ -64,8 +64,9 @@ const useStyles = makeStyles((theme: Theme) => ({

 const cloudInitTooltipMessage = (
  <Typography>
-    Copy TBD-Need to have installed cloud-init on the distro and change the
-    config to use our data service. <Link to="/">Link to doc</Link>
+    Only check this box if your Custom Image that is compatible with cloud-init,


Should this be Only check this box if your Custom Image is compatible with cloud-init?

I think you're right; that sentence doesn't make sense with "that is compatible".

Also: Noting that we are expecting a final copy update to finalize the docs links in this PR and others. (This will be a follow up PR.)

mjac0bs

Functionality looks good, so I'm approving with the minor comments below.

After looking at the tooltip spacing again, I do feel like it's the lesser of two evils to revert the change I made in this commit on L36-38 and L72 that removed the helpIcon styles. The downfall is that then we continue to have a stretched shadow to the icon when the button is tabbed to, which is present throughout the app and should be fixed at some point. To me, that shadow issue is not as noticeable as the extra padding that is applied if we don't explicity set paddingLeft to 8px.

mjac0bs · 2023-02-28T18:20:06Z

packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx

@@ -54,6 +54,8 @@ export const ImageCreate: React.FC<CombinedProps> = (props) => {
          description={description}
          changeLabel={handleSetLabel}
          changeDescription={handleSetDescription}
+          changeIsCloudInit={() => setIsCloudInit(!isCloudInit)}
+          isCloudInit={isCloudInit}


These changes should already be merged into the feature branch so we wouldn't expect changes in this file. I think you just ordered the props differently here, but not a big deal.

mjac0bs · 2023-02-28T18:44:57Z

packages/manager/src/features/Images/ImageUpload.tsx

@@ -64,8 +64,9 @@ const useStyles = makeStyles((theme: Theme) => ({

 const cloudInitTooltipMessage = (
  <Typography>
-    Copy TBD-Need to have installed cloud-init on the distro and change the
-    config to use our data service. <Link to="/">Link to doc</Link>
+    Only check this box if your Custom Image that is compatible with cloud-init,


I think you're right; that sentence doesn't make sense with "that is compatible".

Also: Noting that we are expecting a final copy update to finalize the docs links in this PR and others. (This will be a follow up PR.)

jdamore-linode

Following @mjac0bs's lead -- totally fine fixing the copy later if we'd rather merge this sooner

cpathipa · 2023-02-28T18:59:28Z

Thank you @mjac0bs for checking on copy updates.

* add user data accordion to linode create * display accordion if image supports cloud-init * update linode create payload * check image for cloud-init * Add validation warning for user data Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * feat: [M3-6149] - Add Cloud Init checkbox to Image Capture/Create flow (#8807) * Add checkbox to Capture Image form * Update request to support cloud_init * Fix controlled component error where checkbox is undefined * Update image validation and types interface for cloud_init * (Debugging an undefined value in createImage request) * Add cloud_init to redux create fn params to include in request * Move checkbox state to ImageCreate so value persists across tabs; code cleanup * Code clean up * Fix comment referencing cloud-init for naming consistency * Update CheckBox tooltip: allow interactivity, minor styling fix * Add final tooltip copy for now * Revert "Merge branch 'develop' into feature/metadata" This reverts commit 8be0c73, reversing changes made to a5e1b25. * feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload flow (#8800) * Add Cloud-init compatible check box * use Checkbox component and reduce space between label and tooltip icon * add new fileds for image create * code cleanup * make cloud_in as optional * Code cleanup * Copy update and PR feedback * code cleanup * Enable interactive to tooltip * feat: [M3 6143] - Add User Data Accordion to Linode Create page (#8811) ## Description 📝 Add User Data accordion to the Linode Create flow so that a user can configure their Linode using cloud-init. ## How to test 🧪 Testing Create via Distribution 1. Point to the dev environment (you might also need additional account setup, reach out for more info) 2. Navigate to the Linode create page http://localhost:3000/linodes/create 3. Select a distribution that supports cloud-init - Arch Linux, Cent OS 7, and Ubuntu 16.04 LTS have been marked as cloud-init compatible for testing purposes 4. If the distribution supports cloud-init, you should see an `Add User Data` accordion - If the distribution doesn't support cloud-init, you should _not_ see the accordion 5. Enter some text (can be anything) into the User Data input field and fill out the rest of the required Linode Create fields 6. Click on Create Linode and observe the POST payload to `/linode/instances`. You should see a metadata field with the user_data object - If you did not enter anything into the User Data input, you should _not_ see any metadata field in the payload. - You can just block the network request to `/linode/instances` and check the payload w/o actually creating another Linode 7. There are no changes to the API response so you will not see a metadata field returned Testing Create via Image - Navigate to the Linode Create Image tab http://localhost:3000/linodes/create?type=Images - Select an image that supports cloud-init - You can create and mark an image as cloud-init compatible in #8807 - Follow steps 4-7 above * Move user data validation warning Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Update user data validation warning UX copy Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Refactor user data validation event handler Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Slighly refactor user data validation Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Pull in tss-react & related changes from #8821 (#8843) * feat: [M3-6146] - Add User Data to Linode Rebuild flow (#8850) * feat: [M3-6145, M3-6191, M3-6233] - Add User Data to Linode Clone and Backup flow (#8859) * Functional flow * add UserDataAccordion.test.tsx * Fix test * Feedback + styling fixes and unit test updates * Add User Data to Linode Clone flow * Add respective user data warning message. * code cleanup * organize UserDataAccordion componet * Code cleanup * refactor: combine two conditional statemets to single one. * Unit test coverage * code cleanup * refactor: code cleanup --------- Co-authored-by: Dajahi Wiley <dwiley@linode.com> * fix: [M3-6254] - Show warning message for only Linode clone and backups (#8888) * fix: [M3-6254] show warning message for only Linode clone and backups flow * PR -feedback * PR Feedback * PR Feedback * Revert "Revert "Merge branch 'develop' into feature/metadata"" This reverts commit 35daaf1. * feat: [M3-6432] - Add Metadata Feature flag (#8910) ## Description 📝 Feature flag Metadata ## How to test 🧪 Toggle the flag on/off with the dev tools and check that Metadata features display/hide in these flows: Image Create - Capture Image - Upload Image Linode Create via - Rebuild - Distribution - Custom Image - Backups - Clone * address feedback --------- Co-authored-by: Hussain Khalil <hkhalil@akamai.com> Co-authored-by: Hussain Khalil <hussain@sanpilot.co> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> Co-authored-by: cpathipa <119517080+cpathipa@users.noreply.github.com> Co-authored-by: Dajahi Wiley <dwiley@linode.com> Co-authored-by: hkhalil-akamai <122488130+hkhalil-akamai@users.noreply.github.com> Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

Add Cloud-init compatible check box

223fe91

cpathipa added the Work in Progress label Feb 16, 2023

cpathipa self-assigned this Feb 16, 2023

cpathipa added the Project: Metadata Related to Metadata project label Feb 16, 2023

cpathipa added 2 commits February 16, 2023 12:03

use Checkbox component and reduce space between label and tooltip icon

5f2134a

add new fileds for image create

160c7e7

mjac0bs reviewed Feb 16, 2023

View reviewed changes

code cleanup

2c04636

mjac0bs mentioned this pull request Feb 17, 2023

feat: [M3-6149] - Add Cloud Init checkbox to Image Capture/Create flow #8807

Merged

1 task

cpathipa changed the title ~~Add Cloud-init compatible check box~~ M3-6150: Add Cloud-init compatible check box Feb 22, 2023

cpathipa added 2 commits February 22, 2023 14:05

make cloud_in as optional

c2eafee

Code cleanup

9f0b1a6

cpathipa changed the title ~~M3-6150: Add Cloud-init compatible check box~~ feat: [M3-6150] - Add Cloud-init compatible check box Feb 24, 2023

cpathipa changed the base branch from develop to feature/metadata February 24, 2023 03:44

cpathipa removed the Work in Progress label Feb 24, 2023

mjac0bs reviewed Feb 24, 2023

View reviewed changes

packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx Outdated Show resolved Hide resolved

packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx Outdated Show resolved Hide resolved

mjac0bs changed the title ~~feat: [M3-6150] - Add Cloud-init compatible check box~~ feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload flow Feb 24, 2023

hana-akamai reviewed Feb 24, 2023

View reviewed changes

Copy update and PR feedback

01a24e6

cpathipa requested review from mjac0bs, jaalah-akamai and hana-akamai February 28, 2023 14:18

hana-akamai reviewed Feb 28, 2023

View reviewed changes

cpathipa added 2 commits February 28, 2023 11:37

Merge branch 'feature/metadata' into M3-6150

31ad170

code cleanup

7008726

jaalah-akamai approved these changes Feb 28, 2023

View reviewed changes

cpathipa requested a review from hana-akamai February 28, 2023 17:45

Enable interactive to tooltip

96ba6cf

jdamore-linode reviewed Feb 28, 2023

View reviewed changes

mjac0bs approved these changes Feb 28, 2023

View reviewed changes

jdamore-linode approved these changes Feb 28, 2023

View reviewed changes

cpathipa merged commit f313d78 into linode:feature/metadata Feb 28, 2023

cpathipa deleted the M3-6150 branch February 28, 2023 19:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload flow #8800

feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload flow #8800

cpathipa commented Feb 16, 2023 •

edited

Loading

mjac0bs left a comment •

edited

Loading

mjac0bs left a comment

hana-akamai left a comment

hana-akamai left a comment

jdamore-linode Feb 28, 2023

mjac0bs Feb 28, 2023 •

edited

Loading

mjac0bs left a comment

mjac0bs Feb 28, 2023

mjac0bs Feb 28, 2023 •

edited

Loading

jdamore-linode left a comment

cpathipa commented Feb 28, 2023

feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload flow #8800

feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload flow #8800

Conversation

cpathipa commented Feb 16, 2023 • edited Loading

Description 📝

How to test 🧪

mjac0bs left a comment • edited Loading

Choose a reason for hiding this comment

mjac0bs left a comment

Choose a reason for hiding this comment

hana-akamai left a comment

Choose a reason for hiding this comment

hana-akamai left a comment

Choose a reason for hiding this comment

jdamore-linode Feb 28, 2023

Choose a reason for hiding this comment

mjac0bs Feb 28, 2023 • edited Loading

Choose a reason for hiding this comment

mjac0bs left a comment

Choose a reason for hiding this comment

mjac0bs Feb 28, 2023

Choose a reason for hiding this comment

mjac0bs Feb 28, 2023 • edited Loading

Choose a reason for hiding this comment

jdamore-linode left a comment

Choose a reason for hiding this comment

cpathipa commented Feb 28, 2023

cpathipa commented Feb 16, 2023 •

edited

Loading

mjac0bs left a comment •

edited

Loading

mjac0bs Feb 28, 2023 •

edited

Loading

mjac0bs Feb 28, 2023 •

edited

Loading