CLAPPS: Leverage /one-click-apps endpoint

src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx

@@ -45,6 +45,7 @@ import {
 } from './types';
 
 import { resetEventsPolling } from 'src/events';
+import { CloudApp, getCloudApps } from 'src/services/cloud_apps';
 import { cloneLinode } from 'src/services/linodes';
 
 import { ApplicationState } from 'src/store';
@@ -54,7 +55,6 @@ 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;
@@ -76,7 +76,7 @@ interface State {
   tags?: Tag[];
   errors?: Linode.ApiFieldError[];
   formIsSubmitting: boolean;
-  appInstances?: Linode.StackScript.Response[];
+  appInstances?: CloudApp[];
   appInstancesLoading: boolean;
   appInstancesError?: string;
 }
@@ -149,7 +149,7 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
       .then(response => {
         this.setState({
           appInstancesLoading: false,
-          appInstances: response
+          appInstances: response.data
         });
       })
       .catch(e => {

src/features/linodes/LinodesCreate/SelectAppPanel.tsx

@@ -12,7 +12,6 @@ import LinearProgress from 'src/components/LinearProgress';
 import SelectionCard from 'src/components/SelectionCard';
 import { APP_ROOT } from 'src/constants';
 import Panel from './Panel';
-import { iconMap } from './TabbedContent/formUtilities';
 import { AppsData } from './types';
 
 type ClassNames = 'flatImagePanelSelections' | 'panel' | 'loading';
@@ -92,14 +91,13 @@ const SelectAppPanel: React.SFC<CombinedProps> = props => {
           <SelectionCardWrapper
             key={eachApp.id}
             checked={eachApp.id === selectedStackScriptID}
-            username={eachApp.username}
             label={eachApp.label}
             availableImages={eachApp.images}
             userDefinedFields={eachApp.user_defined_fields}
             handleClick={handleClick}
             disabled={disabled}
             id={eachApp.id}
-            iconUrl={iconMap[eachApp.id]}
+            iconUrl={eachApp.logo_url || ''}
           />
         ))}
       </Grid>
@@ -125,7 +123,6 @@ interface SelectionProps {
   iconUrl: string;
   id: number;
   label: string;
-  username: string;
   userDefinedFields: Linode.StackScript.UserDefinedField[];
   availableImages: string[];
   disabled: boolean;
@@ -134,18 +131,12 @@ interface SelectionProps {
 
 class SelectionCardWrapper extends React.PureComponent<SelectionProps> {
   handleSelectApp = (event: React.SyntheticEvent<HTMLElement, Event>) => {
-    const {
-      id,
-      label,
-      username,
-      userDefinedFields,
-      availableImages
-    } = this.props;
+    const { id, label, userDefinedFields, availableImages } = this.props;
 
     return this.props.handleClick(
       id,
       label,
-      username,
+      '' /** username doesn't matter since we're not displaying it */,
       availableImages,
       userDefinedFields
     );
@@ -159,7 +150,7 @@ class SelectionCardWrapper extends React.PureComponent<SelectionProps> {
         checked={checked}
         onClick={this.handleSelectApp}
         renderIcon={() => {
-          return <img src={`${APP_ROOT}${iconUrl}`} />;
+          return <img src={`${APP_ROOT}/${iconUrl}`} />;
         }}
         heading={label}
         subheadings={['']}

src/features/linodes/LinodesCreate/TabbedContent/formUtilities.ts

@@ -1,5 +1,3 @@
-import { getStackscripts } from 'src/services/stackscripts';
-
 /**
  * @returns { Linode.Image[] } - a list of public images AKA
  * images that are officially supported by Linode
@@ -29,43 +27,3 @@ export const filterUDFErrors = (
         );
       });
 };
-
-/**
- * helper function to get Cloud Apps StackScripts
- *
- * for the prototype, all the apps we need are going to be uploaded to
- * Christine Puk's account. Keep in mind that the Linux distros will be missing from this
- * list because we're intentionally not including the distros in this view
- */
-export const getCloudApps = (params?: any, filter?: any) =>
-  getStackscripts(params, {
-    ...filter,
-    username: 'linode'
-  }).then(response => {
-    return response.data
-      .filter(script => {
-        return Object.keys(iconMap).includes(String(script.id));
-      })
-      .map(script => ({
-        // so sorry about this
-        ...script,
-        label: script.label.replace('One-Click', '').replace('- OneClick', '')
-      }));
-  });
-
-export const iconMap = {
-  401705: '/assets/Terraria.svg',
-  401699: '/assets/Ark@1x.svg',
-  401704: '/assets/TF2.svg',
-  401703: '/assets/Rust.svg',
-  401707: '/assets/GitLab.svg',
-  401709: '/assets/Minecraft.svg',
-  401698: '/assets/Drupal.svg',
-  401706: '/assets/Wireguard.svg',
-  401708: '/assets/WooCommerce.svg',
-  401697: '/assets/WordPress.svg',
-  401700: '/assets/CSGO2.svg',
-  401701: '/assets/LAMP.svg',
-  401702: '/assets/MERN.svg',
-  401719: '/assets/OpenVPN.svg'
-};

src/features/linodes/LinodesCreate/types.ts

@@ -1,6 +1,7 @@
 import { ExtendedRegion } from 'src/components/SelectRegionPanel';
 import { Tag } from 'src/components/TagsInput';
 import { State as userSSHKeysProps } from 'src/features/linodes/userSSHKeyHoc';
+import { CloudApp } from 'src/services/cloud_apps';
 import { CreateLinodeRequest } from 'src/services/linodes';
 import { ExtendedType } from './SelectPlanPanel';
 
@@ -89,6 +90,7 @@ export interface BaseFormStateAndHandlers {
   tags?: Tag[];
   updateTags: (tags: Tag[]) => void;
   resetCreationState: () => void;
+  resetSSHKeys: () => void;
 }
 
 /**
@@ -128,7 +130,7 @@ export interface BackupFormStateHandlers extends CloneFormStateHandlers {
   setBackupID: (id: number) => void;
 }
 export interface AppsData {
-  appInstances?: Linode.StackScript.Response[];
+  appInstances?: CloudApp[];
   appInstancesLoading: boolean;
   appInstancesError?: string;
 }

src/services/cloud_apps/index.ts

@@ -1,7 +1,7 @@
 import { API_ROOT } from 'src/constants';
 import Request, { setMethod, setParams, setURL, setXFilter } from '../index';
 
-interface CloudApp {
+export interface CloudApp {
   sequence: number;
   /**
    * will be something like /assets/minecraft.svg
@@ -16,8 +16,8 @@ interface CloudApp {
   id: number;
 }
 
-export const getCloudApps = (params: any, filter: any) => {
-  return Request<Linode.ResourcePage<CloudApp[]>>(
+export const getCloudApps = (params?: any, filter?: any) => {
+  return Request<Linode.ResourcePage<CloudApp>>(
     setURL(`${API_ROOT}beta/linode/one-click-apps`),
     setMethod('GET'),
     setParams(params),