add subtabs (#4581)

src/features/linodes/LinodesCreate/CALinodeCreate.tsx

@@ -7,7 +7,7 @@ import { StickyContainer } from 'react-sticky';
 import { compose as composeComponent } from 'recompose';
 import CircleProgress from 'src/components/CircleProgress';
 import AppBar from 'src/components/core/AppBar';
-import Tab from 'src/components/core/Tab';
+import MUITab from 'src/components/core/Tab';
 import Tabs from 'src/components/core/Tabs';
 import Typography from 'src/components/core/Typography';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -24,6 +24,7 @@ import {
 } from 'src/features/Profile/permissionsHelpers';
 import { ApplicationState } from 'src/store';
 import { MapState } from 'src/store/types';
+import SubTabs, { Tab } from './CALinodeCreateSubTabs';
 import { ExtendedType } from './SelectPlanPanel';
 import FromImageContent from './TabbedContent/FromImageContent';
 import { Info } from './util';
@@ -48,11 +49,6 @@ interface State {
   selectedTab: number;
 }
 
-interface Tab {
-  title: string;
-  render: () => JSX.Element;
-}
-
 export class LinodeCreate extends React.Component<CombinedProps, State> {
   constructor(props: CombinedProps) {
     super(props);
@@ -113,13 +109,13 @@ export class LinodeCreate extends React.Component<CombinedProps, State> {
     {
       title: 'One-Click',
       render: () => {
-        return <React.Fragment />;
+        return <SubTabs history={this.props.history} type="oneClick" />;
       }
     },
     {
       title: 'My Images',
       render: () => {
-        return <React.Fragment />;
+        return <SubTabs history={this.props.history} type="myImages" />;
       }
     }
   ];
@@ -219,7 +215,7 @@ export class LinodeCreate extends React.Component<CombinedProps, State> {
                 scrollButtons="on"
               >
                 {this.tabs.map((tab, idx) => (
-                  <Tab
+                  <MUITab
                     key={idx}
                     label={tab.title}
                     data-qa-create-from={tab.title}

src/features/linodes/LinodesCreate/CALinodeCreateSubTabs.tsx

@@ -0,0 +1,132 @@
+import { parse } from 'querystring';
+import * as React from 'react';
+import AppBar from 'src/components/core/AppBar';
+import MUITab from 'src/components/core/Tab';
+import Tabs from 'src/components/core/Tabs';
+import Grid from 'src/components/Grid';
+
+export interface Tab {
+  title: string;
+  render: () => JSX.Element;
+}
+
+interface Props {
+  history: any;
+  type: 'oneClick' | 'myImages';
+}
+
+interface State {
+  selectedTab: number;
+}
+
+type CombinedProps = Props;
+
+class CALinodeCreateSubTabs extends React.PureComponent<CombinedProps, State> {
+  constructor(props: CombinedProps) {
+    super(props);
+
+    const tabsToRender =
+      props.type === 'oneClick' ? this.oneClickTabs : this.myImagesTabs;
+
+    /** get the query params as an object, excluding the "?" */
+    const queryParams = parse(location.search.replace('?', ''));
+
+    /** will be -1 if the query param is not found */
+    const preSelectedTab = tabsToRender.findIndex((eachTab, index) => {
+      return eachTab.title === queryParams.subtype;
+    });
+
+    this.state = {
+      selectedTab: preSelectedTab !== -1 ? preSelectedTab : 0
+    };
+  }
+
+  oneClickTabs: Tab[] = [
+    {
+      title: 'One-Click Apps',
+      render: () => {
+        return <React.Fragment />;
+      }
+    },
+    {
+      title: 'Community StackScripts',
+      render: () => {
+        return <React.Fragment />;
+      }
+    }
+  ];
+
+  myImagesTabs: Tab[] = [
+    {
+      title: 'Backups and My Images',
+      render: () => {
+        return <React.Fragment />;
+      }
+    },
+    {
+      title: 'Clone From Existing Linode',
+      render: () => {
+        return <React.Fragment />;
+      }
+    },
+    {
+      title: 'My StackScripts',
+      render: () => {
+        return <React.Fragment />;
+      }
+    }
+  ];
+
+  handleTabChange = (
+    event: React.ChangeEvent<HTMLDivElement>,
+    value: number
+  ) => {
+    /** get the query params as an object, excluding the "?" */
+    const queryParams = parse(location.search.replace('?', ''));
+
+    this.props.history.push({
+      search: `?type=${queryParams.type}&subtype=${event.target.textContent}`
+    });
+    this.setState({
+      selectedTab: value
+    });
+  };
+
+  render() {
+    const { type } = this.props;
+    const { selectedTab } = this.state;
+
+    const tabsToRender =
+      type === 'oneClick' ? this.oneClickTabs : this.myImagesTabs;
+
+    const selectedTabContentRender = tabsToRender[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"
+            >
+              {tabsToRender.map((tab, idx) => (
+                <MUITab
+                  key={idx}
+                  label={tab.title}
+                  data-qa-create-from={tab.title}
+                />
+              ))}
+            </Tabs>
+          </AppBar>
+        </Grid>
+        {selectedTabContentRender()}
+      </Grid>
+    );
+  }
+}
+
+export default CALinodeCreateSubTabs;