CLAPPS - Create from App (#4604)

* init commit

* cleanup

* init createapppanel

* add apps panel

* update label logic

* move apps request to container

* reset errors on new stackscript selection

* fix placement of closing grid tag

* fix rebase issues

src/features/linodes/LinodesCreate/CALinodeCreate.tsx

@@ -7,11 +7,13 @@ import MUITab from 'src/components/core/Tab';
 import Tabs from 'src/components/core/Tabs';
 import ErrorState from 'src/components/ErrorState';
 import Grid from 'src/components/Grid';
+import { State as userSSHKeyProps } from 'src/features/linodes/userSSHKeyHoc';
 import {
   getCommunityStackscripts,
   getStackScriptsByUser
 } from 'src/features/StackScripts/stackScriptUtils';
 import SubTabs, { Tab } from './CALinodeCreateSubTabs';
+import FromAppsContent from './TabbedContent/FromAppsContent';
 import FromBackupsContent from './TabbedContent/FromBackupsContent';
 import FromImageContent from './TabbedContent/FromImageContent';
 import FromLinodeContent from './TabbedContent/FromLinodeContent';
@@ -24,6 +26,7 @@ import {
 
 import {
   AllFormStateAndHandlers,
+  AppsData,
   WithAll,
   WithDisplayData,
   WithLinodesImagesTypesAndRegions
@@ -37,7 +40,9 @@ type CombinedProps = Props &
   WithLinodesImagesTypesAndRegions &
   WithDisplayData &
   WithAll &
-  AllFormStateAndHandlers;
+  AppsData &
+  AllFormStateAndHandlers &
+  userSSHKeyProps;
 
 interface State {
   selectedTab: number;
@@ -46,7 +51,7 @@ interface State {
 export class LinodeCreate extends React.PureComponent<
   CombinedProps & DispatchProps,
   State
-> {
+  > {
   constructor(props: CombinedProps & DispatchProps) {
     super(props);
 
@@ -107,6 +112,9 @@ export class LinodeCreate extends React.PureComponent<
           selectedStackScriptUsername,
           selectedStackScriptLabel,
           selectedLinodeID,
+          appInstances,
+          appInstancesError,
+          appInstancesLoading,
           ...rest
         } = this.props;
         return (
@@ -168,6 +176,9 @@ export class LinodeCreate extends React.PureComponent<
           selectedStackScriptUsername,
           selectedStackScriptLabel,
           selectedLinodeID,
+          appInstances,
+          appInstancesError,
+          appInstancesLoading,
           ...rest
         } = this.props;
 
@@ -231,6 +242,9 @@ export class LinodeCreate extends React.PureComponent<
           linodesError,
           regionsLoading,
           regionsError,
+          appInstances,
+          appInstancesError,
+          appInstancesLoading,
           ...rest
         } = this.props;
         return (
@@ -256,6 +270,9 @@ export class LinodeCreate extends React.PureComponent<
           updateLinodeID,
           selectedBackupID,
           setBackupID,
+          appInstances,
+          appInstancesError,
+          appInstancesLoading,
           ...rest
         } = this.props;
         return (
@@ -276,7 +293,14 @@ export class LinodeCreate extends React.PureComponent<
       title: 'One-Click Apps',
       type: 'fromApp',
       render: () => {
-        return <React.Fragment />;
+        const {
+          setTab,
+          linodesError,
+          linodesLoading,
+          linodesData,
+          ...rest
+        } = this.props;
+        return <FromAppsContent {...rest} />;
       }
     },
     {

src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx

@@ -53,6 +53,7 @@ import { MapState } from 'src/store/types';
 import { allocatePrivateIP } from 'src/utilities/allocateIPAddress';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
+import { getCloudApps } from './TabbedContent/formUtilities';
 
 interface State {
   selectedImageID?: string;
@@ -74,6 +75,9 @@ interface State {
   tags?: Tag[];
   errors?: Linode.ApiFieldError[];
   formIsSubmitting: boolean;
+  appInstances?: Linode.StackScript.Response[];
+  appInstancesLoading: boolean;
+  appInstancesError?: string;
 }
 
 type CombinedProps = InjectedNotistackProps &
@@ -99,7 +103,9 @@ const defaultState: State = {
   selectedRegionID: undefined,
   selectedTypeID: undefined,
   tags: [],
-  formIsSubmitting: false
+  formIsSubmitting: false,
+  errors: undefined,
+  appInstancesLoading: false
 };
 
 const getRegionIDFromLinodeID = (
@@ -127,6 +133,23 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
     }
   }
 
+  componentDidMount() {
+    this.setState({ appInstancesLoading: true });
+    getCloudApps()
+      .then(response => {
+        this.setState({
+          appInstancesLoading: false,
+          appInstances: response.data
+        });
+      })
+      .catch(e => {
+        this.setState({
+          appInstancesLoading: false,
+          appInstancesError: 'There was an error loading Cloud Apps.'
+        });
+      });
+  }
+
   clearCreationState = () => {
     this.props.resetSSHKeys();
     this.setState(defaultState);
@@ -180,7 +203,15 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
     userDefinedFields: Linode.StackScript.UserDefinedField[],
     images: Linode.Image[],
     defaultData?: any
-  ) =>
+  ) => {
+    /**
+     * reset the selected Image but only if we're creating a Linode from
+     * a StackScript and not an app
+     */
+    if (this.props.createType !== 'fromApp') {
+      this.setState({ selectedImageID: undefined });
+    }
+
     this.setState({
       selectedStackScriptID: id,
       selectedStackScriptLabel: label,
@@ -189,8 +220,10 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
       availableStackScriptImages: images,
       udfs: defaultData,
       /** reset image because stackscript might not be compatible with selected one */
-      selectedImageID: undefined
+      selectedImageID: undefined,
+      errors: undefined
     });
+  };
 
   setDiskSize = (size: number) => this.setState({ selectedDiskSize: size });
 
@@ -208,14 +241,24 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
 
   generateLabel = () => {
     const { getLabel, imagesData, regionsData } = this.props;
-    const { selectedImageID, selectedRegionID } = this.state;
+    const {
+      selectedImageID,
+      selectedRegionID,
+      selectedStackScriptLabel
+    } = this.state;
 
     /* tslint:disable-next-line  */
     let arg1,
       arg2,
       arg3 = '';
 
-    if (selectedImageID) {
+    /**
+     * lean in favor of using stackscript label
+     * then next priority is image label
+     */
+    if (selectedStackScriptLabel) {
+      arg1 = selectedStackScriptLabel;
+    } else if (selectedImageID) {
       const selectedImage = imagesData.find(img => img.id === selectedImageID);
       /**
        * Use 'vendor' if it's a public image, otherwise use label (because 'vendor' will be null)
@@ -469,6 +512,9 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
             resetSSHKeys={this.props.resetSSHKeys}
             selectedBackupID={this.state.selectedBackupID}
             setBackupID={this.setBackupID}
+            appInstances={this.state.appInstances}
+            appInstancesError={this.state.appInstancesError}
+            appInstancesLoading={this.state.appInstancesLoading}
           />
         </Grid>
       </StickyContainer>

src/features/linodes/LinodesCreate/Panel.tsx

@@ -23,15 +23,16 @@ interface Props {
   children: React.ReactElement;
   error?: string;
   title?: string;
+  className?: string;
 }
 
 type CombinedProps = Props & WithStyles<ClassNames>;
 
-const Panel: React.StatelessComponent<CombinedProps> = (props) => {
+const Panel: React.StatelessComponent<CombinedProps> = props => {
   const { classes, children, error, title } = props;
   return (
     <Paper
-      className={classes.flatImagePanel}
+      className={`${classes.flatImagePanel} ${props.className}`}
       data-qa-tp="Select Image"
     >
       {error && <Notice text={error} error />}
@@ -40,9 +41,9 @@ const Panel: React.StatelessComponent<CombinedProps> = (props) => {
       </Typography>
       {children}
     </Paper>
-  )
-}
+  );
+};
 
 const styled = withStyles(styles);
 
-export default styled(Panel);
+export default styled(Panel);