CLAPPS: Add Community StackScripts panel (#4612)

* Add Community StackScripts panel * Review feedback -- adjust styling
linode · Mar 25, 2019 · ebb32d8 · ebb32d8
1 parent 36de696
commit ebb32d8
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/src/features/StackScripts/SelectStackScriptPanel/CASelectStackScriptPanel.tsx b/src/features/StackScripts/SelectStackScriptPanel/CASelectStackScriptPanel.tsx
@@ -62,7 +62,8 @@ const styles: StyleRulesCallback<ClassNames> = theme => ({
   panel: {
     flexGrow: 1,
     width: '100%',
-    backgroundColor: theme.color.white
+    backgroundColor: theme.color.white,
+    marginBottom: theme.spacing.unit * 3
   },
   inner: {
     padding: theme.spacing.unit * 2,
@@ -224,16 +225,18 @@ class SelectStackScriptPanel extends React.Component<CombinedProps, State> {
               An error occured while loading the selected StackScript.
             </Typography>
           )}
-          <SelectStackScriptPanelContent
-            onSelect={this.props.onSelect}
-            resetStackScriptSelection={this.props.resetSelectedStackScript}
-            publicImages={this.props.publicImages}
-            currentUser={this.props.username}
-            request={request}
-            key={category + '-tab'}
-            category={category}
-            disabled={this.props.disabled}
-          />
+          <Paper className={classes.selecting}>
+            <SelectStackScriptPanelContent
+              onSelect={this.props.onSelect}
+              resetStackScriptSelection={this.props.resetSelectedStackScript}
+              publicImages={this.props.publicImages}
+              currentUser={this.props.username}
+              request={request}
+              key={category + '-tab'}
+              category={category}
+              disabled={this.props.disabled}
+            />
+          </Paper>
         </div>
       </Paper>
     );

diff --git a/src/features/linodes/LinodesCreate/CALinodeCreate.tsx b/src/features/linodes/LinodesCreate/CALinodeCreate.tsx
@@ -7,7 +7,10 @@ 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 { getStackScriptsByUser } from 'src/features/StackScripts/stackScriptUtils';
+import {
+  getCommunityStackscripts,
+  getStackScriptsByUser
+} from 'src/features/StackScripts/stackScriptUtils';
 import SubTabs, { Tab } from './CALinodeCreateSubTabs';
 import FromBackupsContent from './TabbedContent/FromBackupsContent';
 import FromImageContent from './TabbedContent/FromImageContent';
@@ -249,6 +252,10 @@ export class LinodeCreate extends React.PureComponent<
         const {
           accountBackupsEnabled,
           userCannotCreateLinode,
+          selectedLinodeID,
+          updateLinodeID,
+          selectedBackupID,
+          setBackupID,
           ...rest
         } = this.props;
         return (
@@ -276,7 +283,24 @@ export class LinodeCreate extends React.PureComponent<
       title: 'Community StackScripts',
       type: 'fromStackScript',
       render: () => {
-        return <div>community stackscripts</div>;
+        const {
+          accountBackupsEnabled,
+          userCannotCreateLinode,
+          selectedLinodeID,
+          updateLinodeID,
+          selectedBackupID,
+          setBackupID,
+          ...rest
+        } = this.props;
+        return (
+          <FromStackScriptContent
+            accountBackupsEnabled={this.props.accountBackupsEnabled}
+            userCannotCreateLinode={this.props.userCannotCreateLinode}
+            request={getCommunityStackscripts}
+            header={'Select a StackScript'}
+            {...rest}
+          />
+        );
       }
     }
   ];

diff --git a/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx b/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
@@ -145,6 +145,7 @@ export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
     const {
       backupsEnabled,
       password,
+      privateIPEnabled,
       userSSHKeys,
       handleSubmitForm,
       selectedImageID,
@@ -165,6 +166,7 @@ export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
       image: selectedImageID /* optional */,
       backups_enabled: backupsEnabled /* optional */,
       booted: true,
+      private_ip: privateIPEnabled,
       authorized_users: userSSHKeys
         .filter(u => u.selected)
         .map(u => u.username),