Feature/cloud apps

src/__data__/images.ts

@@ -252,3 +252,30 @@ export const images: Linode.Image[] = [
     description: null
   }
 ];
+
+export const privateImages: Linode.Image[] = [
+  {
+    created_by: 'linode',
+    deprecated: false,
+    id: 'linode/debian8.7',
+    vendor: 'Debian',
+    size: 1100,
+    type: 'manual',
+    created: '2017-08-15T22:28:13',
+    is_public: false,
+    label: 'Debian 8.7',
+    description: null
+  },
+  {
+    created_by: 'linode',
+    deprecated: false,
+    id: 'linode/containerlinux',
+    vendor: 'CoreOS',
+    size: 3000,
+    type: 'manual',
+    created: '2017-08-15T22:28:13',
+    is_public: false,
+    label: 'Container Linux',
+    description: null
+  }
+];

src/components/AccessPanel/AccessPanel.tsx

@@ -1,4 +1,6 @@
+import * as classNames from 'classnames';
 import * as React from 'react';
+import { compose } from 'recompose';
 import CheckBox from 'src/components/CheckBox';
 import Paper from 'src/components/core/Paper';
 import {
@@ -11,7 +13,7 @@ import TableHead from 'src/components/core/TableHead';
 import TableRow from 'src/components/core/TableRow';
 import Notice from 'src/components/Notice';
 import PasswordInput from 'src/components/PasswordInput';
-import RenderGuard from 'src/components/RenderGuard';
+import RenderGuard, { RenderGuardProps } from 'src/components/RenderGuard';
 import Table from 'src/components/Table';
 import TableCell from 'src/components/TableCell';
 import TableHeader from 'src/components/TableHeader';
@@ -59,11 +61,6 @@ const styles: StyleRulesCallback<ClassNames> = theme => ({
 
 const styled = withStyles(styles);
 
-export interface Disabled {
-  disabled?: boolean;
-  reason?: string;
-}
-
 interface Props {
   password: string | null;
   error?: string;
@@ -74,7 +71,10 @@ interface Props {
   required?: boolean;
   placeholder?: string;
   users?: UserSSHKeyObject[];
-  passwordFieldDisabled?: Disabled;
+  disabled?: boolean;
+  disabledReason?: string;
+  hideStrengthLabel?: boolean;
+  className?: string;
 }
 
 export interface UserSSHKeyObject {
@@ -100,24 +100,33 @@ class AccessPanel extends React.Component<CombinedProps> {
       required,
       placeholder,
       users,
-      passwordFieldDisabled
+      disabled,
+      disabledReason,
+      hideStrengthLabel,
+      className
     } = this.props;
 
     return (
-      <Paper className={classes.root}>
+      <Paper
+        className={classNames(
+          {
+            [classes.root]: true
+          },
+          className
+        )}
+      >
         <div className={!noPadding ? classes.inner : ''} data-qa-password-input>
           {error && <Notice text={error} error />}
           <PasswordInput
             required={required}
-            disabled={passwordFieldDisabled && passwordFieldDisabled.disabled}
-            disabledReason={
-              passwordFieldDisabled && passwordFieldDisabled.reason
-            }
+            disabled={disabled}
+            disabledReason={disabledReason || ''}
             autoComplete="new-password"
             value={this.props.password || ''}
             label={label || 'Root Password'}
             placeholder={placeholder || 'Enter a password.'}
             onChange={this.handleChange}
+            hideStrengthLabel={hideStrengthLabel}
           />
           {users && users.length > 0 && this.renderUserSSHKeyTable(users)}
         </div>
@@ -175,4 +184,7 @@ class AccessPanel extends React.Component<CombinedProps> {
     this.props.handleChange(e.target.value);
 }
 
-export default styled(RenderGuard<CombinedProps>(AccessPanel));
+export default compose<CombinedProps, Props & RenderGuardProps>(
+  RenderGuard,
+  styled
+)(AccessPanel);

src/components/AccessPanel/index.ts

@@ -1,9 +1,7 @@
 import AccessPanel, {
-  Disabled as _Disabled,
   UserSSHKeyObject as _UserSSHKeyObject
 } from './AccessPanel';
 
 /* tslint:disable */
-export interface Disabled extends _Disabled {}
 export interface UserSSHKeyObject extends _UserSSHKeyObject {}
 export default AccessPanel;

src/components/CheckoutBar/CheckoutBar.tsx

@@ -1,6 +1,5 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-import { StickyProps } from 'react-sticky';
 import Button from 'src/components/Button';
 import {
   StyleRulesCallback,
@@ -67,13 +66,12 @@ interface Props {
   onDeploy: () => void;
   heading: string;
   calculatedPrice?: number;
-  isSticky?: boolean;
   disabled?: boolean;
   isMakingRequest?: boolean;
   displaySections?: { title: string; details?: string | number }[];
 }
 
-type CombinedProps = Props & StickyProps & WithStyles<ClassNames>;
+type CombinedProps = Props & WithStyles<ClassNames>;
 
 class CheckoutBar extends React.Component<CombinedProps> {
   static defaultProps: Partial<Props> = {
@@ -82,13 +80,6 @@ class CheckoutBar extends React.Component<CombinedProps> {
 
   render() {
     const {
-      /**
-       * Note:
-       * This 'style' prop is what gives us the "sticky" styles. Other special
-       * props are available, see https://github.com/captivationsoftware/react-sticky
-       */
-      style,
-      isSticky,
       classes,
       onDeploy,
       heading,
@@ -98,16 +89,8 @@ class CheckoutBar extends React.Component<CombinedProps> {
       isMakingRequest
     } = this.props;
 
-    let finalStyle;
-    if (isSticky) {
-      finalStyle = {
-        ...style,
-        paddingTop: 24
-      };
-    }
-
     return (
-      <div className={classes.root} style={finalStyle}>
+      <div className={classes.root}>
         <Typography
           role="header"
           variant="h2"

src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { compose } from 'recompose';
 import Paper from 'src/components/core/Paper';
 import {
   StyleRulesCallback,
   WithStyles,
   withStyles
 } from 'src/components/core/styles';
 import Notice from 'src/components/Notice';
-import RenderGuard from 'src/components/RenderGuard';
+import RenderGuard, { RenderGuardProps } from 'src/components/RenderGuard';
 import TagsInput, { TagsInputProps } from 'src/components/TagsInput';
 import TextField, { Props as TextFieldProps } from 'src/components/TextField';
 
@@ -63,4 +64,7 @@ export class InfoPanel extends React.Component<CombinedProps> {
   }
 }
 
-export default styled(RenderGuard<CombinedProps>(InfoPanel));
+export default compose<CombinedProps, Props & RenderGuardProps>(
+  RenderGuard,
+  styled
+)(InfoPanel);

src/components/PasswordInput/PasswordInput.tsx

@@ -16,6 +16,7 @@ type Props = TextFieldProps & {
   value?: string;
   required?: boolean;
   disabledReason?: string;
+  hideStrengthLabel?: boolean;
 };
 
 interface State {
@@ -67,7 +68,14 @@ class PasswordInput extends React.Component<CombinedProps, State> {
 
   render() {
     const { strength } = this.state;
-    const { classes, value, required, disabledReason, ...rest } = this.props;
+    const {
+      classes,
+      value,
+      required,
+      disabledReason,
+      hideStrengthLabel,
+      ...rest
+    } = this.props;
 
     return (
       <React.Fragment>
@@ -82,11 +90,12 @@ class PasswordInput extends React.Component<CombinedProps, State> {
               required={required}
             />
           </Grid>
-          {
-            <Grid item xs={12} className={`${classes.strengthIndicator} py0`}>
-              <StrengthIndicator strength={strength} />
-            </Grid>
-          }
+          <Grid item xs={12} className={`${classes.strengthIndicator} py0`}>
+            <StrengthIndicator
+              strength={strength}
+              hideStrengthLabel={hideStrengthLabel}
+            />
+          </Grid>
         </Grid>
         <Typography variant="body1" className={classes.infoText}>
           Password must be at least 6 characters and contain each of the

src/components/PasswordInput/StrengthIndicator.tsx

@@ -11,6 +11,7 @@ import Grid from 'src/components/Grid';
 
 interface Props {
   strength: null | 0 | 1 | 2 | 3;
+  hideStrengthLabel?: boolean;
 }
 type ClassNames = 'root' | 'block' | 'strengthText' | 'strengthLabel';
 
@@ -49,7 +50,7 @@ const styled = withStyles<ClassNames>(styles);
 type CombinedProps = Props & WithStyles<ClassNames>;
 
 const StrengthIndicator: React.StatelessComponent<CombinedProps> = props => {
-  const { classes, strength } = props;
+  const { classes, strength, hideStrengthLabel } = props;
 
   return (
     <Grid
@@ -75,7 +76,9 @@ const StrengthIndicator: React.StatelessComponent<CombinedProps> = props => {
           className={classes.strengthText}
           data-qa-password-strength
         >
-          <span className={classes.strengthLabel}>Strength:</span>
+          {!hideStrengthLabel && (
+            <span className={classes.strengthLabel}>Strength:</span>
+          )}
           {strength
             ? (strength === 1 && ' Weak') ||
               (strength === 2 && ' Fair') ||