Merge pull request #9536 from hana-linode/fix-encoding

## Description 📝
Follow up to #9494. The previous PR fixed the Cloud crashing issue, but introduced another issue where we were not unescaping the encoded user data. So, when running the `atob` function on the user data, the output string included `%`s instead of just the original string.

reading:
https://base64.guru/developers/javascript/examples/unicode-strings
https://stackoverflow.com/questions/30631927/converting-to-base64-in-javascript-without-deprecated-escape-call (see the second answer by `T S`)

## How to test 🧪
- Add a console log after line 706 to log the user data `console.log(utoa(this.props.userData))`
- Follow the steps in #9494 
- Take the result of the console log and run `atob`
- The result should be readable and not have unexpected characters such as `%`

packages/manager/.changeset/pr-9536-fixed-1691767427821.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Unescape encoding for user data ([#9536](https://github.com/linode/manager/pull/9536))

packages/manager/package.json

@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.99.0",
+  "version": "1.99.1",
   "private": true,
   "bugs": {
     "url": "https://github.com/Linode/manager/issues"

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

@@ -29,7 +29,10 @@ import { FeatureFlagConsumerProps } from 'src/containers/withFeatureFlagConsumer
 import { WithLinodesProps } from 'src/containers/withLinodes.container';
 import EUAgreementCheckbox from 'src/features/Account/Agreements/EUAgreementCheckbox';
 import PlansPanel from 'src/features/Linodes/LinodesCreate/SelectPlanPanel/PlansPanel';
-import { getMonthlyAndHourlyNodePricing } from 'src/features/Linodes/LinodesCreate/utilities';
+import {
+  getMonthlyAndHourlyNodePricing,
+  utoa,
+} from 'src/features/Linodes/LinodesCreate/utilities';
 import SMTPRestrictionText from 'src/features/Linodes/SMTPRestrictionText';
 import {
   getCommunityStackscripts,
@@ -52,6 +55,14 @@ import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 
 import { AddonsPanel } from './AddonsPanel';
 import ApiAwarenessModal from './ApiAwarenessModal';
+import {
+  StyledButtonGroupBox,
+  StyledCreateButton,
+  StyledForm,
+  StyledMessageDiv,
+  StyledPaper,
+  StyledTabPanel,
+} from './LinodeCreate.styles';
 import FromAppsContent from './TabbedContent/FromAppsContent';
 import FromBackupsContent from './TabbedContent/FromBackupsContent';
 import FromImageContent from './TabbedContent/FromImageContent';
@@ -71,14 +82,6 @@ import {
   WithDisplayData,
   WithTypesRegionsAndImages,
 } from './types';
-import {
-  StyledButtonGroupBox,
-  StyledCreateButton,
-  StyledForm,
-  StyledMessageDiv,
-  StyledPaper,
-  StyledTabPanel,
-} from './LinodeCreate.styles';
 
 import type { Tab } from 'src/components/TabLinkList/TabLinkList';
 
@@ -699,7 +702,7 @@ export class LinodeCreate extends React.PureComponent<
 
     if (this.props.userData) {
       payload['metadata'] = {
-        user_data: window.btoa(encodeURIComponent(this.props.userData)),
+        user_data: utoa(this.props.userData),
       };
     }
 

packages/manager/src/features/Linodes/LinodesCreate/utilities.tsx

@@ -100,3 +100,15 @@ export const getMonthlyAndHourlyNodePricing = (
 
 export const CROSS_DATA_CENTER_CLONE_WARNING =
   'Cloning a Powered Off instance across Data Centers may cause long periods of down time.';
+
+/**
+ * Unicode to ASCII (encode data to Base64)
+ * https://base64.guru/developers/javascript/examples/unicode-strings
+ */
+export const utoa = (data: string) => {
+  try {
+    return btoa(unescape(encodeURIComponent(data)));
+  } catch (error) {
+    return data;
+  }
+};