CA-606 Nested Tab Panel Updates (#4586)

* adding paper to the inner tabvs to match pattern as existing panels * fixing imports * removing redundant classes that were messing up grid alignment * fixing broken sidebar * updating backups tab ordering
linode · Mar 25, 2019 · 36de696 · 36de696
1 parent 717adaf
commit 36de696
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 92 deletions.
diff --git a/src/features/linodes/LinodesCreate/CALinodeCreate.tsx b/src/features/linodes/LinodesCreate/CALinodeCreate.tsx
@@ -319,7 +319,7 @@ export class LinodeCreate extends React.PureComponent<
 
     return (
       <React.Fragment>
-        <Grid item>
+        <Grid item className={`mlMain`}>
           <AppBar position="static" color="default">
             <Tabs
               value={selectedTab}
@@ -339,7 +339,7 @@ export class LinodeCreate extends React.PureComponent<
             </Tabs>
           </AppBar>
         </Grid>
-        <Grid item>{tabRender()}</Grid>
+        {tabRender()}
       </React.Fragment>
     );
   }

diff --git a/src/features/linodes/LinodesCreate/CALinodeCreateSubTabs.tsx b/src/features/linodes/LinodesCreate/CALinodeCreateSubTabs.tsx
@@ -1,12 +1,34 @@
 import { parse } from 'querystring';
 import * as React from 'react';
 import AppBar from 'src/components/core/AppBar';
+import Paper from 'src/components/core/Paper';
+import {
+  StyleRulesCallback,
+  withStyles,
+  WithStyles
+} from 'src/components/core/styles';
 import MUITab from 'src/components/core/Tab';
 import Tabs from 'src/components/core/Tabs';
+import Typography from 'src/components/core/Typography';
 import Grid from 'src/components/Grid';
-
 import { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
 
+type ClassNames = 'root' | 'inner';
+
+const styles: StyleRulesCallback<ClassNames> = theme => ({
+  root: {
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.color.white
+  },
+  inner: {
+    padding: theme.spacing.unit * 2,
+    [theme.breakpoints.up('sm')]: {
+      padding: theme.spacing.unit * 3
+    }
+  }
+});
+
 export interface Tab {
   title: string;
   render: () => JSX.Element;
@@ -24,7 +46,7 @@ interface State {
   selectedTab: number;
 }
 
-type CombinedProps = Props;
+type CombinedProps = Props & WithStyles<ClassNames>;
 
 export const determinePreselectedTab = (tabsToRender: Tab[]): number => {
   /** get the query params as an object, excluding the "?" */
@@ -68,7 +90,7 @@ class CALinodeCreateSubTabs extends React.Component<CombinedProps, State> {
   };
 
   render() {
-    const { tabs } = this.props;
+    const { tabs, classes } = this.props;
     const { selectedTab: selectedTabFromState } = this.state;
 
     const queryParams = parse(location.search.replace('?', ''));
@@ -86,31 +108,38 @@ class CALinodeCreateSubTabs extends React.Component<CombinedProps, State> {
     const selectedTabContentRender = tabs[selectedTab].render;
 
     return (
-      <Grid container>
-        <Grid item className={`mlMain`}>
-          <AppBar position="static" color="default">
-            <Tabs
-              value={selectedTab}
-              onChange={this.handleTabChange}
-              indicatorColor="primary"
-              textColor="primary"
-              variant="scrollable"
-              scrollButtons="on"
-            >
-              {tabs.map((tab, idx) => (
-                <MUITab
-                  key={idx}
-                  label={tab.title}
-                  data-qa-create-from={tab.title}
-                />
-              ))}
-            </Tabs>
-          </AppBar>
+      <React.Fragment>
+        <Grid item className="mlMain">
+          <Paper className={`${classes.root}`}>
+            <div className={`${classes.inner}`}>
+              <Typography role="header" variant="h2">
+                Create From:
+              </Typography>
+              <AppBar position="static" color="default">
+                <Tabs
+                  value={selectedTab}
+                  onChange={this.handleTabChange}
+                  indicatorColor="primary"
+                  textColor="primary"
+                  variant="scrollable"
+                  scrollButtons="on"
+                >
+                  {tabs.map((tab, idx) => (
+                    <MUITab
+                      key={idx}
+                      label={tab.title}
+                      data-qa-create-from={tab.title}
+                    />
+                  ))}
+                </Tabs>
+              </AppBar>
+            </div>
+          </Paper>
         </Grid>
         {selectedTabContentRender()}
-      </Grid>
+      </React.Fragment>
     );
   }
 }
 
-export default CALinodeCreateSubTabs;
+export default withStyles(styles)(CALinodeCreateSubTabs);
diff --git a/src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx b/src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx
@@ -410,68 +410,66 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
       <StickyContainer>
         <DocumentTitleSegment segment="Create a Linode" />
         <Grid container>
-          <Grid item className={`mlMain`}>
+          <Grid item xs={12}>
             <Typography role="header" variant="h1" data-qa-create-linode-header>
               Create New Linode
             </Typography>
-            <CALinodeCreate
-              regionDisplayInfo={this.getRegionInfo()}
-              imageDisplayInfo={this.getImageInfo()}
-              typeDisplayInfo={this.getTypeInfo()}
-              backupsMonthlyPrice={this.getBackupsMonthlyPrice()}
-              regionsData={this.props.regionsData}
-              typesData={this.props.typesData}
-              regionsError={this.props.regionsError}
-              regionsLoading={this.props.regionsLoading}
-              imagesData={this.props.imagesData}
-              imagesError={this.props.imagesError}
-              imagesLoading={this.props.imagesLoading}
-              linodesData={this.props.linodesData}
-              linodesError={this.props.linodesError}
-              linodesLoading={this.props.linodesLoading}
-              accountBackupsEnabled={this.props.accountBackupsEnabled}
-              userCannotCreateLinode={this.props.userCannotCreateLinode}
-              selectedRegionID={this.state.selectedRegionID}
-              updateRegionID={this.setRegionID}
-              selectedImageID={this.state.selectedImageID}
-              updateImageID={this.setImageID}
-              selectedTypeID={this.state.selectedTypeID}
-              updateTypeID={this.setTypeID}
-              selectedLinodeID={this.state.selectedLinodeID}
-              updateLinodeID={this.setLinodeID}
-              selectedDiskSize={this.state.selectedDiskSize}
-              updateDiskSize={this.setDiskSize}
-              selectedUDFs={this.state.udfs}
-              handleSelectUDFs={this.setUDFs}
-              availableUserDefinedFields={this.state.availableUserDefinedFields}
-              availableStackScriptImages={this.state.availableStackScriptImages}
-              selectedStackScriptID={this.state.selectedStackScriptID}
-              selectedStackScriptLabel={this.state.selectedStackScriptLabel}
-              selectedStackScriptUsername={
-                this.state.selectedStackScriptUsername
-              }
-              updateStackScript={this.setStackScript}
-              label={this.generateLabel()}
-              updateLabel={this.props.updateCustomLabel}
-              password={this.state.password}
-              updatePassword={this.setPassword}
-              backupsEnabled={this.state.backupsEnabled}
-              toggleBackupsEnabled={this.toggleBackupsEnabled}
-              privateIPEnabled={this.state.privateIPEnabled}
-              togglePrivateIPEnabled={this.togglePrivateIPEnabled}
-              tags={this.state.tags}
-              updateTags={this.setTags}
-              errors={this.state.errors}
-              formIsSubmitting={this.state.formIsSubmitting}
-              history={this.props.history}
-              handleSubmitForm={this.submitForm}
-              resetCreationState={this.clearCreationState}
-              userSSHKeys={this.props.userSSHKeys}
-              resetSSHKeys={this.props.resetSSHKeys}
-              selectedBackupID={this.state.selectedBackupID}
-              setBackupID={this.setBackupID}
-            />
           </Grid>
+          <CALinodeCreate
+            regionDisplayInfo={this.getRegionInfo()}
+            imageDisplayInfo={this.getImageInfo()}
+            typeDisplayInfo={this.getTypeInfo()}
+            backupsMonthlyPrice={this.getBackupsMonthlyPrice()}
+            regionsData={this.props.regionsData}
+            typesData={this.props.typesData}
+            regionsError={this.props.regionsError}
+            regionsLoading={this.props.regionsLoading}
+            imagesData={this.props.imagesData}
+            imagesError={this.props.imagesError}
+            imagesLoading={this.props.imagesLoading}
+            linodesData={this.props.linodesData}
+            linodesError={this.props.linodesError}
+            linodesLoading={this.props.linodesLoading}
+            accountBackupsEnabled={this.props.accountBackupsEnabled}
+            userCannotCreateLinode={this.props.userCannotCreateLinode}
+            selectedRegionID={this.state.selectedRegionID}
+            updateRegionID={this.setRegionID}
+            selectedImageID={this.state.selectedImageID}
+            updateImageID={this.setImageID}
+            selectedTypeID={this.state.selectedTypeID}
+            updateTypeID={this.setTypeID}
+            selectedLinodeID={this.state.selectedLinodeID}
+            updateLinodeID={this.setLinodeID}
+            selectedDiskSize={this.state.selectedDiskSize}
+            updateDiskSize={this.setDiskSize}
+            selectedUDFs={this.state.udfs}
+            handleSelectUDFs={this.setUDFs}
+            availableUserDefinedFields={this.state.availableUserDefinedFields}
+            availableStackScriptImages={this.state.availableStackScriptImages}
+            selectedStackScriptID={this.state.selectedStackScriptID}
+            selectedStackScriptLabel={this.state.selectedStackScriptLabel}
+            selectedStackScriptUsername={this.state.selectedStackScriptUsername}
+            updateStackScript={this.setStackScript}
+            label={this.generateLabel()}
+            updateLabel={this.props.updateCustomLabel}
+            password={this.state.password}
+            updatePassword={this.setPassword}
+            backupsEnabled={this.state.backupsEnabled}
+            toggleBackupsEnabled={this.toggleBackupsEnabled}
+            privateIPEnabled={this.state.privateIPEnabled}
+            togglePrivateIPEnabled={this.togglePrivateIPEnabled}
+            tags={this.state.tags}
+            updateTags={this.setTags}
+            errors={this.state.errors}
+            formIsSubmitting={this.state.formIsSubmitting}
+            history={this.props.history}
+            handleSubmitForm={this.submitForm}
+            resetCreationState={this.clearCreationState}
+            userSSHKeys={this.props.userSSHKeys}
+            resetSSHKeys={this.props.resetSSHKeys}
+            selectedBackupID={this.state.selectedBackupID}
+            setBackupID={this.setBackupID}
+          />
         </Grid>
       </StickyContainer>
     );

diff --git a/src/features/linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx b/src/features/linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
@@ -40,10 +40,17 @@ type ClassNames = 'root' | 'main' | 'sidebar';
 
 const styles: StyleRulesCallback<ClassNames> = theme => ({
   root: {},
-  main: {},
+  main: {
+    '&.mlMain': {
+      [theme.breakpoints.up('lg')]: {
+        order: 3
+      }
+    }
+  },
   sidebar: {
     [theme.breakpoints.up('lg')]: {
-      marginTop: -130
+      marginTop: -130,
+      order: 2
     }
   }
 });

diff --git a/src/features/linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx b/src/features/linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
@@ -34,10 +34,17 @@ type ClassNames = 'root' | 'main' | 'sidebar';
 
 const styles: StyleRulesCallback<ClassNames> = theme => ({
   root: {},
-  main: {},
+  main: {
+    '&.mlMain': {
+      [theme.breakpoints.up('lg')]: {
+        order: 3
+      }
+    }
+  },
   sidebar: {
     [theme.breakpoints.up('lg')]: {
-      marginTop: -130
+      marginTop: -130,
+      order: 2
     }
   }
 });
@@ -121,7 +128,7 @@ export class FromLinodeContent extends React.PureComponent<CombinedProps> {
     return (
       <React.Fragment>
         {linodes && linodes.length === 0 ? (
-          <Grid item className={`${classes.main} mlMain`}>
+          <Grid item className={`${classes.main}`}>
             <Placeholder
               icon={VolumeIcon}
               copy="You do not have any existing Linodes to clone from.

diff --git a/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx b/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
@@ -41,10 +41,17 @@ type ClassNames =
 
 const styles: StyleRulesCallback<ClassNames> = theme => ({
   root: {},
-  main: {},
+  main: {
+    '&.mlMain': {
+      [theme.breakpoints.up('lg')]: {
+        order: 3
+      }
+    }
+  },
   sidebar: {
     [theme.breakpoints.up('lg')]: {
-      marginTop: -130
+      marginTop: -130,
+      order: 2
     }
   },
   emptyImagePanel: {