Convert tabs to subcomponent

ui/src/shared/components/SubSections.tsx

@@ -2,17 +2,12 @@ import React, {Component, ReactNode} from 'react'
 import uuid from 'uuid'
 import {withRouter, InjectedRouter} from 'react-router'
 
+import SubSectionsTab from 'src/shared/components/SubSectionsTab'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-
+import {PageSection} from 'src/types/shared'
-interface Section {
-  url: string
-  name: string
-  component: ReactNode
-  enabled: boolean
-}
 
 interface Props {
-  sections: Section[]
+  sections: PageSection[]
   activeSection: string
   sourceID: string
   router: InjectedRouter
@@ -20,55 +15,51 @@ interface Props {
 }
 
 @ErrorHandling
-@withRouter
 class SubSections extends Component<Props> {
   constructor(props) {
     super(props)
   }
 
   public render() {
-    const {sections} = this.props
+    const {sections, activeSection} = this.props
 
     return (
       <div className="row subsection">
-        <div className="col-md-2 subsection--nav">
+        <div className="col-md-2 subsection--nav" data-test="subsectionNav">
           <div className="subsection--tabs">
             {sections.map(
               section =>
                 section.enabled && (
-                  <div
+                  <SubSectionsTab
                     key={uuid.v4()}
-                    className={this.getTabClass(section.url)}
+                    section={section}
-                    onClick={this.handleTabClick(section.url)}
+                    handleClick={this.handleTabClick(section.url)}
-                  >
+                    activeSection={activeSection}
-                    {section.name}
+                  />
-                  </div>
                 )
             )}
           </div>
         </div>
-        <div className="col-md-10 subsection--content">
+        <div
-          {this.activeSection}
+          className="col-md-10 subsection--content"
+          data-test="subsectionContent"
+        >
+          {this.activeSectionComponent}
         </div>
       </div>
     )
   }
 
-  private get activeSection(): ReactNode {
+  private get activeSectionComponent(): ReactNode {
     const {sections, activeSection} = this.props
     const {component} = sections.find(section => section.url === activeSection)
     return component
   }
 
-  public getTabClass(sectionName: string) {
-    const {activeSection} = this.props
-    return `subsection--tab ${sectionName === activeSection ? 'active' : ''}`
-  }
-
   public handleTabClick = url => () => {
     const {router, sourceID, parentUrl} = this.props
     router.push(`/sources/${sourceID}/${parentUrl}/${url}`)
   }
 }
 
-export default SubSections
+export default withRouter(SubSections)

ui/src/shared/components/SubSectionsTab.tsx

@@ -0,0 +1,25 @@
+import React, {SFC} from 'react'
+import {PageSection} from 'src/types/shared'
+
+interface TabProps {
+  handleClick: () => void
+  section: PageSection
+  activeSection: string
+}
+
+const SubSectionsTab: SFC<TabProps> = ({
+  handleClick,
+  section,
+  activeSection,
+}) => (
+  <div
+    className={`subsection--tab ${
+      section.name === activeSection ? 'active' : ''
+    }`}
+    onClick={handleClick}
+  >
+    {section.name}
+  </div>
+)
+
+export default SubSectionsTab

ui/src/types/shared.ts

@@ -1,3 +1,5 @@
+import {ReactNode} from 'react'
+
 export type DropdownItem =
   | {
       text: string
@@ -9,3 +11,10 @@ export interface DropdownAction {
   text: string
   handler: () => void
 }
+
+export interface PageSection {
+  url: string
+  name: string
+  component: ReactNode
+  enabled: boolean
+}