fix(core/serverGroup): Default to decoding User Data as text (#5210)

* fix(core/serverGroup): Default to decoding User Data as text
spinnaker · Apr 19, 2018 · cd3fe20 · cd3fe20
1 parent a6e1f91
commit cd3fe20
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/app/scripts/modules/core/src/serverGroup/details/ShowUserData.tsx b/app/scripts/modules/core/src/serverGroup/details/ShowUserData.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Modal } from 'react-bootstrap';
 import { BindAll } from 'lodash-decorators';
 
+import { decodeUnicodeBase64 } from 'core/utils/unicodeBase64';
+
 export interface IShowUserDataProps {
   serverGroupName: string;
   title?: string;
@@ -10,6 +12,7 @@ export interface IShowUserDataProps {
 
 export interface IShowUserDataState {
   show: boolean;
+  decodeAsText: boolean;
 }
 
 @BindAll()
@@ -18,20 +21,25 @@ export class ShowUserData extends React.Component<IShowUserDataProps, IShowUserD
     super(props);
     this.state = {
       show: false,
+      decodeAsText: true,
     };
   }
 
-  private close(): void {
+  private close() {
     this.setState({ show: false });
   }
 
-  private open(): void {
+  private open() {
     this.setState({ show: true });
   }
 
+  private onDecodeChange({ target }: React.ChangeEvent<HTMLInputElement>) {
+    this.setState({ decodeAsText: target.checked });
+  }
+
   public render() {
     const { serverGroupName, title, userData } = this.props;
-    const { show } = this.state;
+    const { show, decodeAsText } = this.state;
 
     return (
       <span>
@@ -45,11 +53,20 @@ export class ShowUserData extends React.Component<IShowUserDataProps, IShowUserD
             </h3>
           </Modal.Header>
           <Modal.Body>
-            <div className="modal-body">
-              <textarea readOnly={true} rows={15} className="code">
-                {userData}
-              </textarea>
-            </div>
+            <>
+              <textarea
+                className="code"
+                readOnly={true}
+                rows={15}
+                value={decodeAsText ? decodeUnicodeBase64(userData) : userData}
+              />
+              <div className="checkbox" style={{ marginBottom: '0' }}>
+                <label>
+                  <input type="checkbox" checked={decodeAsText} onChange={this.onDecodeChange} />
+                  Decode as text
+                </label>
+              </div>
+            </>
           </Modal.Body>
           <Modal.Footer>
             <button className="btn btn-default" onClick={this.close}>

diff --git a/app/scripts/modules/core/src/utils/unicodeBase64.ts b/app/scripts/modules/core/src/utils/unicodeBase64.ts
@@ -0,0 +1,9 @@
+// The native atob() doesn't know how to decode all unicode chars because Strings are 16-bit.
+// This escapes the unicode chars after atob() tries to process them, and re-decodes them.
+export const decodeUnicodeBase64 = (encodedString: string) =>
+  decodeURIComponent(
+    atob(encodedString)
+      .split('')
+      .map(char => '%' + ('00' + char.charCodeAt(0).toString(16)).slice(-2))
+      .join(''),
+  );