M3 clapps icons (#4644)

* Add hard-coded icons

* Adapt for Linode account request

* Format Clapps names for display

* Clean up 2

* Review feedback

- Add APP_ROOT constant to icon URL

* Remove duplicate URL slash

src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx

@@ -149,7 +149,7 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
       .then(response => {
         this.setState({
           appInstancesLoading: false,
-          appInstances: response.data
+          appInstances: response
         });
       })
       .catch(e => {

src/features/linodes/LinodesCreate/SelectAppPanel.tsx

@@ -10,8 +10,9 @@ import ErrorState from 'src/components/ErrorState';
 import Grid from 'src/components/Grid';
 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';
@@ -98,6 +99,7 @@ const SelectAppPanel: React.SFC<CombinedProps> = props => {
             handleClick={handleClick}
             disabled={disabled}
             id={eachApp.id}
+            iconUrl={iconMap[eachApp.id]}
           />
         ))}
       </Grid>
@@ -120,6 +122,7 @@ interface SelectionProps {
     stackScriptImages: string[],
     userDefinedFields: Linode.StackScript.UserDefinedField[]
   ) => void;
+  iconUrl: string;
   id: number;
   label: string;
   username: string;
@@ -149,14 +152,14 @@ class SelectionCardWrapper extends React.PureComponent<SelectionProps> {
   };
 
   render() {
-    const { id, checked, label, disabled } = this.props;
+    const { iconUrl, id, checked, label, disabled } = this.props;
     return (
       <SelectionCard
         key={id}
         checked={checked}
         onClick={this.handleSelectApp}
         renderIcon={() => {
-          return <span className={`fl-coreos`} />;
+          return <img src={`${APP_ROOT}${iconUrl}`} />;
         }}
         heading={label}
         subheadings={['']}

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

@@ -40,5 +40,32 @@ export const filterUDFErrors = (
 export const getCloudApps = (params?: any, filter?: any) =>
   getStackscripts(params, {
     ...filter,
-    username: 'capuk'
+    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'
+};