basic service tabs

dashboard/src/main/home/app-dashboard/new-app-flow/JobTabs.tsx

@@ -0,0 +1,93 @@
+import Input from "components/porter/Input";
+import React from "react"
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import TabSelector from "components/TabSelector";
+import Checkbox from "components/porter/Checkbox";
+
+interface Props {
+}
+
+const JobTabs: React.FC<Props> = ({
+}) => {
+  const [currentTab, setCurrentTab] = React.useState<string>('main');
+
+  const renderMain = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Input 
+          label="Start command"
+          placeholder="ex: sh start.sh"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Cron schedule (leave blank to run manually)"
+          placeholder="ex: */5 * * * *"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+      </>
+    )
+  };
+
+  const renderResources = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Input 
+          label="CPUs"
+          placeholder="ex: 0.5"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="RAM (GB)"
+          placeholder="ex: 1"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+      </>
+    )
+  };
+
+  const renderAdvanced = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Checkbox
+          checked={true}
+          toggleChecked={() => {}}
+        >
+          <Text color="helper">Allow jobs to execute concurrently</Text>
+        </Checkbox>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <TabSelector
+        options={[
+          { label: 'Main', value: 'main' },
+          { label: 'Resources', value: 'resources' },
+          { label: 'Advanced', value: 'advanced' },
+        ]}
+        currentTab={currentTab}
+        setCurrentTab={setCurrentTab}
+      />
+      {currentTab === 'main' && renderMain()}
+      {currentTab === 'resources' && renderResources()}
+      {currentTab === 'advanced' && renderAdvanced()}
+    </>
+  )
+}
+
+export default JobTabs;

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -256,7 +256,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                 />
               </>,
               <>
-                <Text size={16}>Services</Text>
+                <Text size={16}>Application services</Text>
                 <Spacer y={1} />
                 <Services
                   setServices={(services: any[]) => {

dashboard/src/main/home/app-dashboard/new-app-flow/Service.tsx

@@ -1,15 +1,16 @@
-import Input from "components/porter/Input";
 import React from "react"
 import AnimateHeight from "react-animate-height";
 import styled from "styled-components";
-import Text from "components/porter/Text";
-import Spacer from "components/porter/Spacer";
-import TabSelector from "components/TabSelector";
 
 import web from "assets/web.png";
 import worker from "assets/worker.png";
 import job from "assets/job.png";
 
+import Spacer from "components/porter/Spacer";
+import WebTabs from "./WebTabs";
+import WorkerTabs from "./WorkerTabs";
+import JobTabs from "./JobTabs";
+
 interface ServiceProps {
   serviceData: ServiceType;
   editService: (service: ServiceType) => void;
@@ -39,22 +40,6 @@ const Service: React.FC<ServiceProps> = ({
 }) => {
   const [showExpanded, setShowExpanded] = React.useState<boolean>(true)
 
-  const renderServiceSettings = () => {
-    return (
-      <>
-        <TabSelector
-          options={[
-            { label: 'Web', value: 'web' },
-            { label: 'Worker', value: 'worker' },
-            { label: 'Cron', value: 'cron' },
-          ]}
-          currentTab="web"
-          setCurrentTab={(e) => {}}
-        />
-      </>
-    )
-  }
-
   return (
     <>
       <ServiceHeader
@@ -80,7 +65,9 @@ const Service: React.FC<ServiceProps> = ({
         height={showExpanded ? "auto" : 0}
       >
         <StyledSourceBox showExpanded={showExpanded}>
-          {renderServiceSettings()}
+          {serviceData.type === 'web' && <WebTabs />}
+          {serviceData.type === 'worker' && <WorkerTabs />}
+          {serviceData.type === 'job' && <JobTabs />}
         </StyledSourceBox>
       </AnimateHeight>
       <Spacer y={0.5} />
@@ -98,7 +85,7 @@ const ServiceTitle = styled.div`
 const StyledSourceBox = styled.div<{ showExpanded: boolean }>`
   width: 100%;
   color: #ffffff;
-  padding: 14px 25px 20px;
+  padding: 14px 25px 30px;
   position: relative;
   font-size: 13px;
   border-radius: 5px;
@@ -107,7 +94,6 @@ const StyledSourceBox = styled.div<{ showExpanded: boolean }>`
   border-top: 0px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
-  height: 400px;
 `;
 
 const ActionButton = styled.button`

dashboard/src/main/home/app-dashboard/new-app-flow/WebTabs.tsx

@@ -0,0 +1,148 @@
+import Input from "components/porter/Input";
+import React from "react"
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import TabSelector from "components/TabSelector";
+import Checkbox from "components/porter/Checkbox";
+
+interface Props {
+}
+
+const WebTabs: React.FC<Props> = ({
+}) => {
+  const [currentTab, setCurrentTab] = React.useState<string>('main');
+
+  const renderMain = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Input 
+          label="Start command"
+          placeholder="ex: sh start.sh"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Container port"
+          placeholder="ex: 80"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Checkbox
+          checked={true}
+          toggleChecked={() => {}}
+        >
+          <Text color="helper">Generate a Porter URL for external traffic</Text>
+        </Checkbox>
+      </>
+    )
+  };
+
+  const renderResources = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Input 
+          label="CPUs"
+          placeholder="ex: 0.5"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="RAM (GB)"
+          placeholder="ex: 1"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Replicas"
+          placeholder="ex: 1"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Checkbox
+          checked={true}
+          toggleChecked={() => {}}
+        >
+          <Text color="helper">Enable autoscaling (overrides replicas)</Text>
+        </Checkbox>
+        <Spacer y={1} />
+        <Input 
+          label="Min replicas"
+          placeholder="ex: 1"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Max replicas"
+          placeholder="ex: 10"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Target CPU utilization (%)"
+          placeholder="ex: 50"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Target RAM utilization (%)"
+          placeholder="ex: 50"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+      </>
+    )
+  };
+
+  const renderAdvanced = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Input 
+          label="Custom domain"
+          placeholder="ex: my-app.my-domain.com"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+      </>
+    );
+  };
+
+  return (
+    <>
+      <TabSelector
+        options={[
+          { label: 'Main', value: 'main' },
+          { label: 'Resources', value: 'resources' },
+          { label: 'Advanced', value: 'advanced' },
+        ]}
+        currentTab={currentTab}
+        setCurrentTab={setCurrentTab}
+      />
+      {currentTab === 'main' && renderMain()}
+      {currentTab === 'resources' && renderResources()}
+      {currentTab === 'advanced' && renderAdvanced()}
+    </>
+  )
+}
+
+export default WebTabs;

dashboard/src/main/home/app-dashboard/new-app-flow/WorkerTabs.tsx

@@ -0,0 +1,125 @@
+import Input from "components/porter/Input";
+import React from "react"
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import TabSelector from "components/TabSelector";
+import Checkbox from "components/porter/Checkbox";
+
+interface Props {
+}
+
+const WorkerTabs: React.FC<Props> = ({
+}) => {
+  const [currentTab, setCurrentTab] = React.useState<string>('main');
+
+  const renderMain = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Input 
+          label="Start command"
+          placeholder="ex: sh start.sh"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+      </>
+    )
+  };
+
+  const renderResources = () => {
+    return (
+      <>
+        <Spacer y={1} />
+        <Input 
+          label="CPUs"
+          placeholder="ex: 0.5"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="RAM (GB)"
+          placeholder="ex: 1"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Replicas"
+          placeholder="ex: 1"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Checkbox
+          checked={true}
+          toggleChecked={() => {}}
+        >
+          <Text color="helper">Enable autoscaling (overrides replicas)</Text>
+        </Checkbox>
+        <Spacer y={1} />
+        <Input 
+          label="Min replicas"
+          placeholder="ex: 1"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Max replicas"
+          placeholder="ex: 10"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Target CPU utilization (%)"
+          placeholder="ex: 50"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <Input 
+          label="Target RAM utilization (%)"
+          placeholder="ex: 50"
+          value=""
+          width="300px"
+          setValue={(e) => {}}
+        />
+      </>
+    )
+  };
+
+  const renderAdvanced = () => {
+    return (
+      <>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <TabSelector
+        options={[
+          { label: 'Main', value: 'main' },
+          { label: 'Resources', value: 'resources' },
+          // { label: 'Advanced', value: 'advanced' },
+        ]}
+        currentTab={currentTab}
+        setCurrentTab={setCurrentTab}
+      />
+      {currentTab === 'main' && renderMain()}
+      {currentTab === 'resources' && renderResources()}
+      {/* currentTab === 'advanced' && renderAdvanced() */}
+    </>
+  )
+}
+
+export default WorkerTabs;