tabregion boilerplate and basic test

dashboard/src/components/TabRegion.tsx

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import TabSelector from './TabSelector';
+
+type PropsType = {
+  options: { label: string, value: string }[],
+  contents: any,
+  defaultTab?: string
+};
+
+type StateType = {
+  currentTab: string
+};
+
+// Manages a tab selector and renders the associated view
+export default class TabRegion extends Component<PropsType, StateType> {
+  state = {
+    currentTab: this.props.defaultTab
+  }
+
+  componentDidMount() {
+    if (!this.props.defaultTab) {
+      this.setState({ currentTab: this.props.options[0].value });
+    }
+  }
+
+  renderTabContents = () => {
+    let found = this.props.contents.find((el: any) => el.value === this.state.currentTab);
+    if (found) {
+      return found.component;
+    }
+  }
+
+  render() {
+    return (
+      <StyledTabRegion>
+        <TabSelector
+          options={this.props.options}
+          currentTab={this.state.currentTab}
+          setCurrentTab={(x: string) => this.setState({ currentTab: x })}
+        />
+
+        {this.renderTabContents()}
+      </StyledTabRegion>
+    );
+  }
+}
+
+const StyledTabRegion = styled.div`
+  width: 100%;
+  height: 100%;
+`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -601,7 +601,7 @@ const StyledExpandedChart = styled.div`
   animation-fill-mode: forwards;
   padding: 25px; 
   display: flex;
-  overflow: hidden;
+
   flex-direction: column;
 
   @keyframes floatIn {

dashboard/src/main/home/cluster-dashboard/expanded-chart/log/LogSection.tsx

@@ -30,17 +30,17 @@ export default class LogSection extends Component<PropsType, StateType> {
   renderPodTabs = () => {
     return this.state.pods.map((pod, i) => {
       return (
-        <Tab 
+        <Tab
           key={i}
-          selected={(this.state.selectedPod == pod)} 
+          selected={(this.state.selectedPod == pod)}
           onClick={() => {
-          this.setState({selectedPod: pod})
-          }
-        }>
+            this.setState({ selectedPod: pod })
+          }}
+        >
           {pod}
         </Tab>
-      )
-    })
+      );
+    });
   }
 
   componentDidMount() {
@@ -54,9 +54,9 @@ export default class LogSection extends Component<PropsType, StateType> {
     }, {
       id: currentProject.id
     }, (err: any, res: any) => {
-      console.log("SELECTORS", selectors)
-      this.setState({pods: res.data, selectedPod: res.data[0]})
-    })
+      // console.log("SELECTORS", selectors)
+      this.setState({ pods: res.data, selectedPod: res.data[0] })
+    });
   }
 
   render() {

dashboard/src/main/home/templates/expanded-template/LaunchTemplate.tsx

@@ -7,6 +7,7 @@ import api from '../../../../shared/api';
 import { PorterChart, RepoType, Cluster } from '../../../../shared/types';
 import Selector from '../../../../components/Selector';
 import ImageSelector from '../../../../components/image-selector/ImageSelector';
+import TabRegion from '../../../../components/TabRegion';
 
 type PropsType = {
   currentTemplate: PorterChart,
@@ -20,15 +21,23 @@ type StateType = {
   selectedImageUrl: string | null,
 };
 
+const tabOptions = [
+  { value: 'a', label: 'Tab A' },
+  { value: 'b', label: 'Tab B' },
+  { value: 'c', label: 'Tab C' },
+  { value: 'd', label: 'Tab D' },
+];
+
 export default class LaunchTemplate extends Component<PropsType, StateType> {
   state = {
     currentView: 'repo',
     clusterOptions: [] as { label: string, value: string }[],
     selectedCluster: this.context.currentCluster.name,
-    selectedImageUrl: null as string | null,
+    selectedImageUrl: '',
   };
 
   componentDidMount() {
+    console.log('current template: ', this.props.currentTemplate);
     let { currentProject } = this.context;
 
     // TODO: query with selected filter once implemented
@@ -97,6 +106,15 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
         <br />
         <Subtitle>Configure additional settings for this template (optional).</Subtitle>
+        <TabRegion
+          options={tabOptions}
+          contents={[
+            { value: 'a', component: <h1>test</h1> },
+            { value: 'b', component: <h1>hello</h1> },
+            { value: 'c', component: <h1>world</h1> },
+            { value: 'd', component: <h1>hola</h1> },
+          ]}
+        />
       </StyledLaunchTemplate>
     );
   }

server/api/template_handler.go

@@ -51,19 +51,23 @@ type FormYAML struct {
 	Icon        string   `yaml:"icon"`
 	Description string   `yaml:"description"`
 	Tags        []string `yaml:"tags"`
-	Sections    []struct {
+	Tabs        []struct {
 		Name     string `yaml:"name"`
-		ShowIf   string `yaml:"show_if"`
-		Contents []struct {
-			Type     string `yaml:"type"`
-			Label    string `yaml:"label"`
-			Name     string `yaml:"name,omitempty"`
-			Variable string `yaml:"variable,omitempty"`
-			Settings struct {
-				Default interface{}
-			} `yaml:"settings,omitempty"`
-		} `yaml:"contents"`
-	} `yaml:"sections"`
+		Label    string `yaml:"label"`
+		Sections []struct {
+			Name     string `yaml:"name"`
+			ShowIf   string `yaml:"show_if"`
+			Contents []struct {
+				Type     string `yaml:"type"`
+				Label    string `yaml:"label"`
+				Name     string `yaml:"name,omitempty"`
+				Variable string `yaml:"variable,omitempty"`
+				Settings struct {
+					Default interface{}
+				} `yaml:"settings,omitempty"`
+			} `yaml:"contents"`
+		} `yaml:"sections"`
+	} `yaml:"tabs"`
 }
 
 // HandleListTemplates retrieves a list of Porter templates
@@ -71,7 +75,7 @@ type FormYAML struct {
 // TODO: separate markdown retrieval into its own query if necessary
 func (app *App) HandleListTemplates(w http.ResponseWriter, r *http.Request) {
 	baseURL := "https://porter-dev.github.io/chart-repo/"
-
+	fmt.Println("and i oop!")
 	resp, err := http.Get(baseURL + "index.yaml")
 	if err != nil {
 		fmt.Println(err)