fixed webtab confl

dashboard/src/main/home/app-dashboard/expanded-app/StatusFooter.tsx

@@ -7,10 +7,7 @@ import { Context } from "shared/Context";
 import Text from "components/porter/Text";
 import Container from "components/porter/Container";
 import Button from "components/porter/Button";
-import {
-  NewWebsocketOptions,
-  useWebsockets,
-} from "shared/hooks/useWebsockets";
+import { NewWebsocketOptions, useWebsockets } from "shared/hooks/useWebsockets";
 import {
   getAvailability,
   getAvailabilityStacks,
@@ -140,10 +137,8 @@ const StatusFooter: React.FC<Props> = ({
       apiEndpoint += `selectors=${selectors}`;
     }
 
-
     const options: NewWebsocketOptions = {};
-    options.onopen = () => {
-    };
+    options.onopen = () => {};
 
     options.onmessage = async (evt: MessageEvent) => {
       let event = JSON.parse(evt.data);
@@ -161,7 +156,9 @@ const StatusFooter: React.FC<Props> = ({
       }
 
       if (event.Kind === "deployment") {
-        let [available, total, stale, unavailable] = getAvailabilityStacks(object);
+        let [available, total, stale, unavailable] = getAvailabilityStacks(
+          object
+        );
 
         setAvailable(available);
         setTotal(total);
@@ -172,8 +169,7 @@ const StatusFooter: React.FC<Props> = ({
       await updatePods();
     };
 
-    options.onclose = () => {
-    };
+    options.onclose = () => {};
 
     options.onerror = (err: ErrorEvent) => {
       console.log(err);
@@ -203,7 +199,7 @@ const StatusFooter: React.FC<Props> = ({
         prev[prev.length - 1].push(currentPod);
         return prev;
       },
-        []);
+      []);
 
     return podsDividedByReplicaSet;
   }, [pods]);
@@ -248,7 +244,8 @@ const StatusFooter: React.FC<Props> = ({
           );
 
           // console.log(containerStatus)
-          const crashLoopReason = containerStatus?.lastState?.terminated?.message ?? "";
+          const crashLoopReason =
+            containerStatus?.lastState?.terminated?.message ?? "";
 
           return {
             namespace: pod?.metadata?.namespace,
@@ -259,7 +256,8 @@ const StatusFooter: React.FC<Props> = ({
             restartCount,
             containerStatus,
             podAge: pod?.metadata?.creationTimestamp ? podAge : "N/A",
-            revisionNumber: pod?.metadata?.annotations?.["helm.sh/revision"] || "N/A",
+            revisionNumber:
+              pod?.metadata?.annotations?.["helm.sh/revision"] || "N/A",
             crashLoopReason,
           };
         });
@@ -293,75 +291,104 @@ const StatusFooter: React.FC<Props> = ({
             </Button>
           </Container>
         )}
-    </StyledStatusFooter>
+      </StyledStatusFooter>
     );
-  };
+  }
 
   return (
     <>
-      {replicaSetArray != null && replicaSetArray.length > 0 && replicaSetArray.map((replicaSet, i) => {
-        return (
-          <>
-            <StyledStatusFooterTop key={i} expanded={expanded}>
-              <StyledContainer row spaced>
-                {replicaSet.some(r => r.crashLoopReason != "") ?
-                  <>
-                    <Running>
-                      <StatusDot color="#ff0000" />
-                      <Text color="helper">
-                        {`${replicaSet.length} replica${replicaSet.length === 1 ? "" : "s"} ${replicaSet.length === 1 ? "is" : "are"} failing to run Revision ${replicaSet[0].revisionNumber}`}
-                      </Text>
-                    </Running>
-                    <Button
-                      onClick={() => {
-                        expanded ? setHeight(0) : setHeight(122);
-                        setExpanded(!expanded);
-                      }}
-                      height="20px"
-                      color="#ffffff11"
-                      withBorder
-                    >
-                      {expanded ? <I className="material-icons">arrow_drop_up</I>
-                        : <I className="material-icons">arrow_drop_down</I>}
-                      <Text color="helper">
-                        See failure reason
-                      </Text>
-                    </Button>
-                  </> :
-                  // check if there are more recent replicasets and if the previous replicaset has a crashloop reason
-                  i > 0 && !replicaSetArray[i - 1].some(p => p.crashLoopReason != "") ?
+      {replicaSetArray != null &&
+        replicaSetArray.length > 0 &&
+        replicaSetArray.map((replicaSet, i) => {
+          return (
+            <>
+              <StyledStatusFooterTop key={i} expanded={expanded}>
+                <StyledContainer row spaced>
+                  {replicaSet.some((r) => r.crashLoopReason != "") ? (
+                    <>
+                      <Running>
+                        <StatusDot color="#ff0000" />
+                        <Text color="helper">
+                          {`${replicaSet.length} replica${
+                            replicaSet.length === 1 ? "" : "s"
+                          } ${
+                            replicaSet.length === 1 ? "is" : "are"
+                          } failing to run Revision ${
+                            replicaSet[0].revisionNumber
+                          }`}
+                        </Text>
+                      </Running>
+                      <Button
+                        onClick={() => {
+                          expanded ? setHeight(0) : setHeight(122);
+                          setExpanded(!expanded);
+                        }}
+                        height="20px"
+                        color="#ffffff11"
+                        withBorder
+                      >
+                        {expanded ? (
+                          <I className="material-icons">arrow_drop_up</I>
+                        ) : (
+                          <I className="material-icons">arrow_drop_down</I>
+                        )}
+                        <Text color="helper">See failure reason</Text>
+                      </Button>
+                    </>
+                  ) : // check if there are more recent replicasets and if the previous replicaset has a crashloop reason
+                  i > 0 &&
+                    !replicaSetArray[i - 1].some(
+                      (p) => p.crashLoopReason != ""
+                    ) ? (
                     <Running>
                       <StatusDot color="#FFA500" />
                       <Text color="helper">
-                        {`${replicaSet.length} replica${replicaSet.length === 1 ? "" : "s"} ${replicaSet.length === 1 ? "is" : "are"} still running at Revision ${replicaSet[0].revisionNumber}. Spinning down...`}
+                        {`${replicaSet.length} replica${
+                          replicaSet.length === 1 ? "" : "s"
+                        } ${
+                          replicaSet.length === 1 ? "is" : "are"
+                        } still running at Revision ${
+                          replicaSet[0].revisionNumber
+                        }. Spinning down...`}
                       </Text>
-                    </Running> :
+                    </Running>
+                  ) : (
                     <Running>
-                      {replicaSet.length ? <StatusDot /> : <StatusDot color="#ffffff33" />}
+                      {replicaSet.length ? (
+                        <StatusDot />
+                      ) : (
+                        <StatusDot color="#ffffff33" />
+                      )}
                       <Text color="helper">
-                        {`${replicaSet.length} replica${replicaSet.length === 1 ? "" : "s"} ${replicaSet.length === 1 ? "is" : "are"} running at Revision ${replicaSet[0].revisionNumber}`}
+                        {`${replicaSet.length} replica${
+                          replicaSet.length === 1 ? "" : "s"
+                        } ${
+                          replicaSet.length === 1 ? "is" : "are"
+                        } running at Revision ${replicaSet[0].revisionNumber}`}
                       </Text>
                     </Running>
-                }
-              </StyledContainer>
-            </StyledStatusFooterTop>
-            {replicaSet.some(r => r.crashLoopReason != "") &&
-              <AnimateHeight height={height}>
-                <StyledStatusFooter>
-                  <Message>
-                    {replicaSet.find(r => r.crashLoopReason != "")?.crashLoopReason}
-                  </Message>
-                </StyledStatusFooter>
-              </AnimateHeight>
-            }
-          </>
-        )
-      })}
+                  )}
+                </StyledContainer>
+              </StyledStatusFooterTop>
+              {replicaSet.some((r) => r.crashLoopReason != "") && (
+                <AnimateHeight height={height}>
+                  <StyledStatusFooter>
+                    <Message>
+                      {
+                        replicaSet.find((r) => r.crashLoopReason != "")
+                          ?.crashLoopReason
+                      }
+                    </Message>
+                  </StyledStatusFooter>
+                </AnimateHeight>
+              )}
+            </>
+          );
+        })}
     </>
   );
 };
 
-
 export default withRouter(StatusFooter);
 
 const StatusDot = styled.div<{ color?: string }>`
@@ -370,22 +397,22 @@ const StatusDot = styled.div<{ color?: string }>`
   height: 7px;
   border-radius: 50%;
   margin-right: 10px;
-  background: ${props => props.color || "#38a88a"};
+  background: ${(props) => props.color || "#38a88a"};
 
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
-	transform: scale(1);
-	animation: pulse 2s infinite;
+  transform: scale(1);
+  animation: pulse 2s infinite;
   @keyframes pulse {
     0% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
     }
-  
+
     70% {
       transform: scale(1);
       box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
     }
-  
+
     100% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
@@ -449,7 +476,7 @@ const StyledStatusFooter = styled.div`
   }
 `;
 
-const StyledStatusFooterTop = styled(StyledStatusFooter) <{
+const StyledStatusFooterTop = styled(StyledStatusFooter)<{
   expanded: boolean;
 }>`
   height: 40px;
@@ -481,8 +508,9 @@ const StyledContainer = styled.div<{
   row: boolean;
   spaced: boolean;
 }>`
-  display: ${props => props.row ? "flex" : "block"};
+  display: ${(props) => (props.row ? "flex" : "block")};
   align-items: center;
-  justify-content: ${props => props.spaced ? "space-between" : "flex-start"};
+  justify-content: ${(props) =>
+    props.spaced ? "space-between" : "flex-start"};
   width: 100%;
-`;
+`;

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

@@ -12,6 +12,7 @@ import WebTabs from "./WebTabs";
 import WorkerTabs from "./WorkerTabs";
 import JobTabs from "./JobTabs";
 import { Service } from "./serviceTypes";
+import { StyledStatusFooter } from "../expanded-app/StatusFooter";
 import StatusFooter from "../expanded-app/StatusFooter";
 import ReleaseTabs from "./ReleaseTabs";
 
@@ -32,7 +33,9 @@ const ServiceContainer: React.FC<ServiceProps> = ({
   defaultExpanded,
   setExpandedJob,
 }) => {
-  const [showExpanded, setShowExpanded] = React.useState<boolean>(defaultExpanded);
+  const [showExpanded, setShowExpanded] = React.useState<boolean>(
+    defaultExpanded
+  );
   const [height, setHeight] = React.useState<Height>("auto");
 
   // TODO: calculate heights instead of hardcoding them
@@ -90,12 +93,8 @@ const ServiceContainer: React.FC<ServiceProps> = ({
     if (chart?.chart?.values == null) {
       return false;
     }
-    return (
-      !_.isEmpty((
-        Object.values(chart.chart.values)[0] as any
-      )?.global)
-    );
-  }
+    return !_.isEmpty((Object.values(chart.chart.values)[0] as any)?.global);
+  };
 
   return (
     <>
@@ -113,30 +112,24 @@ const ServiceContainer: React.FC<ServiceProps> = ({
           {service.name.trim().length > 0 ? service.name : "New Service"}
         </ServiceTitle>
         {service.canDelete && (
-          <ActionButton
-            onClick={deleteService}
-          >
+          <ActionButton onClick={deleteService}>
             <span className="material-icons">delete</span>
           </ActionButton>
         )}
       </ServiceHeader>
-      <AnimateHeight
-        height={showExpanded ? height : 0}
-      >
+      <AnimateHeight height={showExpanded ? height : 0}>
         <StyledSourceBox
           showExpanded={showExpanded}
           chart={chart}
-          hasFooter={getHasBuiltImage()}
+          hasFooter={chart && service && getHasBuiltImage()}
         >
           {renderTabs(service)}
         </StyledSourceBox>
       </AnimateHeight>
-      {(
-        chart &&
+      {chart &&
         service &&
         // Check if has built image
-        getHasBuiltImage()
-      ) && (
+        getHasBuiltImage() && (
           <StatusFooter
             setExpandedJob={setExpandedJob}
             chart={chart}
@@ -156,9 +149,9 @@ const ServiceTitle = styled.div`
 `;
 
 const StyledSourceBox = styled.div<{
-  showExpanded: boolean,
-  chart: any,
-  hasFooter?: boolean,
+  showExpanded: boolean;
+  chart: any;
+  hasFooter?: boolean;
 }>`
   width: 100%;
   color: #ffffff;
@@ -168,8 +161,8 @@ const StyledSourceBox = styled.div<{
   background: ${(props) => props.theme.fg};
   border: 1px solid #494b4f;
   border-top: 0;
-  border-bottom-left-radius: ${props => props.hasFooter ? "0" : "5px"};
-  border-bottom-right-radius: ${props => props.hasFooter ? "0" : "5px"};
+  border-bottom-left-radius: ${(props) => (props.hasFooter ? "0" : "5px")};
+  border-bottom-right-radius: ${(props) => (props.hasFooter ? "0" : "5px")};
 `;
 
 const ActionButton = styled.button`
@@ -184,7 +177,6 @@ const ActionButton = styled.button`
   border-radius: 50%;
   cursor: pointer;
   color: #aaaabb;
-
   :hover {
     color: white;
   }
@@ -196,9 +188,9 @@ const ActionButton = styled.button`
 `;
 
 const ServiceHeader = styled.div<{
-  showExpanded: boolean,
-  chart: any,
-  bordersRounded?: boolean,
+  showExpanded: boolean;
+  chart: any;
+  bordersRounded?: boolean;
 }>`
   flex-direction: row;
   display: flex;
@@ -215,16 +207,16 @@ const ServiceHeader = styled.div<{
     border: 1px solid #7a7b80;
   }
 
-  border-bottom-left-radius: ${props => props.bordersRounded ? "" : "0"};
-  border-bottom-right-radius: ${props => props.bordersRounded ? "" : "0"};
+  border-bottom-left-radius: ${(props) => (props.bordersRounded ? "" : "0")};
+  border-bottom-right-radius: ${(props) => (props.bordersRounded ? "" : "0")};
 
   .dropdown {
     font-size: 30px;
     cursor: pointer;
     border-radius: 20px;
     margin-left: -10px;
-    transform: ${(props: { showExpanded: boolean, chart: any }) =>
-    props.showExpanded ? "" : "rotate(-90deg)"};
+    transform: ${(props: { showExpanded: boolean; chart: any }) =>
+      props.showExpanded ? "" : "rotate(-90deg)"};
   }
 
   animation: fadeIn 0.3s 0s;

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

@@ -7,11 +7,12 @@ import Checkbox from "components/porter/Checkbox";
 import { WebService } from "./serviceTypes";
 import AnimateHeight, { Height } from "react-animate-height";
 import styled from "styled-components";
+import ExpandableSection from "components/porter/ExpandableSection";
 
 interface Props {
   service: WebService;
   editService: (service: WebService) => void;
-  setHeight: (height: Height) => void;
+  setHeight: (height: h) => void;
   hasFooter?: boolean;
 }
 
@@ -22,24 +23,6 @@ const WebTabs: React.FC<Props> = ({
   hasFooter,
 }) => {
   const [currentTab, setCurrentTab] = React.useState<string>("main");
-  const [showSettingsLive, setShowSettingsLive] = React.useState<boolean>(
-    false
-  );
-  const [showSettingsStart, setShowSettingsStart] = React.useState<boolean>(
-    false
-  );
-  const [showSettingsReady, setShowSettingsReady] = React.useState<boolean>(
-    false
-  );
-  const containerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    calculateContainerHeight();
-  }, [currentTab]);
-  const calculateContainerHeight = () => {
-    const containerHeight = containerRef.current?.offsetHeight;
-    const add = hasFooter ? 0 : 55;
-    setHeight(containerHeight + add);
-  };
   const renderMain = () => {
     return (
       <>
@@ -287,391 +270,341 @@ const WebTabs: React.FC<Props> = ({
       <>
         <Spacer y={1} />
         <>
-          <StyledAdvancedBuildSettings
-            showSettings={showSettingsLive}
-            isCurrent={true}
-            onClick={() => {
-              setShowSettingsLive(!showSettingsLive);
-            }}
-          >
-            <AdvancedBuildTitle>
-              <i className="material-icons dropdown">arrow_drop_down</i>
-              Configure Liveness Probe Settings
-            </AdvancedBuildTitle>
-          </StyledAdvancedBuildSettings>
+          <Text size={16}> Configure Liveness Probe settings</Text>
+
           <PaddingContainer>
-            <AnimateHeight
-              height={showSettingsLive ? "auto" : 0}
-              duration={1000}
+            <Spacer y={1} />
+            <Checkbox
+              checked={service.health.livenessProbe?.enabled.value}
+              toggleChecked={() => {
+                editService({
+                  ...service,
+                  health: {
+                    ...service.health,
+                    livenessProbe: {
+                      ...service.health.livenessProbe,
+                      enabled: {
+                        readOnly: false,
+                        value: !service.health.livenessProbe?.enabled.value,
+                      },
+                    },
+                  },
+                });
+              }}
             >
-              <Spacer y={0.5} />
-              <Checkbox
-                checked={service.health.livenessProbe?.enabled.value}
-                toggleChecked={() => {
+              <Text color="helper">Enable Liveness Probe</Text>
+            </Checkbox>
+            <Spacer y={1} />
+
+            <>
+              <Input
+                label="Liveness Check Endpoint "
+                placeholder="ex: 80"
+                value={service.health.livenessProbe.path.value}
+                disabled={service.health.livenessProbe.path.readOnly}
+                width="300px"
+                setValue={(e) => {
                   editService({
                     ...service,
                     health: {
                       ...service.health,
                       livenessProbe: {
                         ...service.health.livenessProbe,
-                        enabled: {
+                        path: {
                           readOnly: false,
-                          value: !service.health.livenessProbe?.enabled.value,
+                          value: e,
                         },
                       },
                     },
                   });
                 }}
-              >
-                <Text color="helper">Enable Liveness Probe</Text>
-              </Checkbox>
-              <Spacer y={0.5} />
-
-              <>
-                <Input
-                  label="Liveness Check Endpoint "
-                  placeholder="ex: 80"
-                  value={service.health.livenessProbe.path.value}
-                  disabled={service.health.livenessProbe.path.readOnly}
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        livenessProbe: {
-                          ...service.health.livenessProbe,
-                          path: {
-                            readOnly: false,
-                            value: e,
-                          },
-                        },
-                      },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-                <Spacer y={0.5} />
-                <Input
-                  label="Failure Threshold"
-                  placeholder="ex: 80"
-                  value={service.health.livenessProbe.failureThreshold.value}
-                  disabled={
-                    service.health.livenessProbe.failureThreshold.readOnly
-                  }
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        livenessProbe: {
-                          ...service.health.livenessProbe,
-                          failureThreshold: {
-                            readOnly: false,
-                            value: e,
-                          },
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+              <Spacer y={1} />
+              <Input
+                label="Failure Threshold"
+                placeholder="ex: 80"
+                value={service.health.livenessProbe.failureThreshold.value}
+                disabled={
+                  service.health.livenessProbe.failureThreshold.readOnly
+                }
+                width="300px"
+                setValue={(e) => {
+                  editService({
+                    ...service,
+                    health: {
+                      ...service.health,
+                      livenessProbe: {
+                        ...service.health.livenessProbe,
+                        failureThreshold: {
+                          readOnly: false,
+                          value: e,
                         },
                       },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-                <Spacer y={0.5} />
-                <Input
-                  label="Retry Interval"
-                  placeholder="ex: 80"
-                  value={service.health.livenessProbe.periodSeconds.value}
-                  disabled={service.health.livenessProbe.periodSeconds.readOnly}
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        livenessProbe: {
-                          ...service.health.livenessProbe,
-                          periodSeconds: {
-                            readOnly: false,
-                            value: e,
-                          },
+                    },
+                  });
+                }}
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+              <Spacer y={1} />
+              <Input
+                label="Retry Interval"
+                placeholder="ex: 80"
+                value={service.health.livenessProbe.periodSeconds.value}
+                disabled={service.health.livenessProbe.periodSeconds.readOnly}
+                width="300px"
+                setValue={(e) => {
+                  editService({
+                    ...service,
+                    health: {
+                      ...service.health,
+                      livenessProbe: {
+                        ...service.health.livenessProbe,
+                        periodSeconds: {
+                          readOnly: false,
+                          value: e,
                         },
                       },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-              </>
-            </AnimateHeight>
+                    },
+                  });
+                }}
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+            </>
           </PaddingContainer>
         </>
         <Spacer y={1} />
         <>
-          <StyledAdvancedBuildSettings
-            showSettings={showSettingsStart}
-            isCurrent={true}
-            onClick={() => {
-              setShowSettingsStart(!showSettingsStart);
-            }}
-          >
-            <AdvancedBuildTitle>
-              <i className="material-icons dropdown">arrow_drop_down</i>
-              Configure Start Up Probe Settings
-            </AdvancedBuildTitle>
-          </StyledAdvancedBuildSettings>
+          <Text size={16}> Configure Start Up Probe settings</Text>
+
           <PaddingContainer>
-            <AnimateHeight
-              height={showSettingsStart ? "auto" : 0}
-              duration={1000}
+            <Spacer y={1} />
+            <Checkbox
+              checked={service.health.startupProbe?.enabled.value}
+              toggleChecked={() => {
+                editService({
+                  ...service,
+                  health: {
+                    ...service.health,
+                    startupProbe: {
+                      ...service.health.startupProbe,
+                      enabled: {
+                        readOnly: false,
+                        value: !service.health.startupProbe?.enabled.value,
+                      },
+                    },
+                  },
+                });
+              }}
+              //disabled={service.autoscaling.enabled.readOnly}
+              //disabledTooltip={"You may only edit this field in your porter.yaml."}
             >
-              <Spacer y={0.5} />
-              <Checkbox
-                checked={service.health.startupProbe?.enabled.value}
-                toggleChecked={() => {
+              <Text color="helper">Enable Start Up Probe</Text>
+            </Checkbox>
+            <Spacer y={1} />
+
+            <>
+              <Input
+                label="Start Up Check Endpoint "
+                placeholder="ex: 80"
+                value={service.health.startupProbe.path.value}
+                disabled={service.health.startupProbe.path.readOnly}
+                width="300px"
+                setValue={(e) => {
                   editService({
                     ...service,
                     health: {
                       ...service.health,
                       startupProbe: {
                         ...service.health.startupProbe,
-                        enabled: {
+                        path: {
                           readOnly: false,
-                          value: !service.health.startupProbe?.enabled.value,
+                          value: e,
                         },
                       },
                     },
                   });
                 }}
-                //disabled={service.autoscaling.enabled.readOnly}
-                //disabledTooltip={"You may only edit this field in your porter.yaml."}
-              >
-                <Text color="helper">Enable Start Up Probe</Text>
-              </Checkbox>
-              <Spacer y={0.5} />
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+              <Spacer y={1} />
 
-              <>
-                <Input
-                  label="Start Up Check Endpoint "
-                  placeholder="ex: 80"
-                  value={service.health.startupProbe.path.value}
-                  disabled={service.health.startupProbe.path.readOnly}
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        startupProbe: {
-                          ...service.health.startupProbe,
-                          path: {
-                            readOnly: false,
-                            value: e,
-                          },
-                        },
-                      },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-                <Spacer y={0.5} />
-
-                <Input
-                  label="Failure Threshold"
-                  placeholder="ex: 80"
-                  value={service.health.startupProbe.failureThreshold.value}
-                  disabled={
-                    service.health.startupProbe.failureThreshold.readOnly
-                  }
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        startupProbe: {
-                          ...service.health.startupProbe,
-                          failureThreshold: {
-                            readOnly: false,
-                            value: e,
-                          },
+              <Input
+                label="Failure Threshold"
+                placeholder="ex: 80"
+                value={service.health.startupProbe.failureThreshold.value}
+                disabled={service.health.startupProbe.failureThreshold.readOnly}
+                width="300px"
+                setValue={(e) => {
+                  editService({
+                    ...service,
+                    health: {
+                      ...service.health,
+                      startupProbe: {
+                        ...service.health.startupProbe,
+                        failureThreshold: {
+                          readOnly: false,
+                          value: e,
                         },
                       },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-                <Spacer y={0.5} />
-                <Input
-                  label="Retry Interval"
-                  placeholder="ex: 80"
-                  value={service.health.startupProbe.periodSeconds.value}
-                  disabled={service.health.startupProbe.periodSeconds.readOnly}
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        startupProbe: {
-                          ...service.health.startupProbe,
-                          periodSeconds: {
-                            readOnly: false,
-                            value: e,
-                          },
+                    },
+                  });
+                }}
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+              <Spacer y={1} />
+              <Input
+                label="Retry Interval"
+                placeholder="ex: 80"
+                value={service.health.startupProbe.periodSeconds.value}
+                disabled={service.health.startupProbe.periodSeconds.readOnly}
+                width="300px"
+                setValue={(e) => {
+                  editService({
+                    ...service,
+                    health: {
+                      ...service.health,
+                      startupProbe: {
+                        ...service.health.startupProbe,
+                        periodSeconds: {
+                          readOnly: false,
+                          value: e,
                         },
                       },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-              </>
-            </AnimateHeight>
+                    },
+                  });
+                }}
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+            </>
           </PaddingContainer>
         </>
         <Spacer y={1} />
         <>
-          <StyledAdvancedBuildSettings
-            showSettings={showSettingsReady}
-            isCurrent={true}
-            onClick={() => {
-              setShowSettingsReady(!showSettingsReady);
-            }}
-          >
-            <AdvancedBuildTitle>
-              <i className="material-icons dropdown">arrow_drop_down</i>
-              Configure Readiness Probe settings
-            </AdvancedBuildTitle>
-          </StyledAdvancedBuildSettings>
+          <Text size={16}> Configure Readiness Probe settings</Text>
           <PaddingContainer>
-            <AnimateHeight
-              height={showSettingsReady ? "auto" : 0}
-              duration={1000}
+            <Spacer y={1} />
+            <Checkbox
+              checked={service.health.readinessProbe?.enabled.value}
+              toggleChecked={() => {
+                editService({
+                  ...service,
+                  health: {
+                    ...service.health,
+                    readinessProbe: {
+                      ...service.health.readinessProbe,
+                      enabled: {
+                        readOnly: false,
+                        value: !service.health.readinessProbe?.enabled.value,
+                      },
+                    },
+                  },
+                });
+              }}
+              //disabled={service.autoscaling.enabled.readOnly}
+              //disabledTooltip={"You may only edit this field in your porter.yaml."}
             >
-              <Spacer y={0.5} />
-              <Checkbox
-                checked={service.health.readinessProbe?.enabled.value}
-                toggleChecked={() => {
+              <Text color="helper">Enable Readiness Probe</Text>
+            </Checkbox>
+            <Spacer y={1} />
+
+            <>
+              <Input
+                label="Readiness Check Endpoint "
+                placeholder="ex: 80"
+                value={service.health.readinessProbe.path.value}
+                disabled={service.health.readinessProbe.path.readOnly}
+                width="300px"
+                setValue={(e) => {
                   editService({
                     ...service,
                     health: {
                       ...service.health,
                       readinessProbe: {
                         ...service.health.readinessProbe,
-                        enabled: {
+                        path: {
                           readOnly: false,
-                          value: !service.health.readinessProbe?.enabled.value,
+                          value: e,
                         },
                       },
                     },
                   });
                 }}
-                //disabled={service.autoscaling.enabled.readOnly}
-                //disabledTooltip={"You may only edit this field in your porter.yaml."}
-              >
-                <Text color="helper">Enable Readiness Probe</Text>
-              </Checkbox>
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
               <Spacer y={0.5} />
 
-              <>
-                <Input
-                  label="Readiness Check Endpoint "
-                  placeholder="ex: 80"
-                  value={service.health.readinessProbe.path.value}
-                  disabled={service.health.readinessProbe.path.readOnly}
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        readinessProbe: {
-                          ...service.health.readinessProbe,
-                          path: {
-                            readOnly: false,
-                            value: e,
-                          },
-                        },
-                      },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-                <Spacer y={0.5} />
-
-                <Input
-                  label="Failure Threshold"
-                  placeholder="ex: 80"
-                  value={service.health.readinessProbe.failureThreshold.value}
-                  disabled={
-                    service.health.readinessProbe.failureThreshold.readOnly
-                  }
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        readinessProbe: {
-                          ...service.health.readinessProbe,
-                          failureThreshold: {
-                            readOnly: false,
-                            value: e,
-                          },
+              <Input
+                label="Failure Threshold"
+                placeholder="ex: 80"
+                value={service.health.readinessProbe.failureThreshold.value}
+                disabled={
+                  service.health.readinessProbe.failureThreshold.readOnly
+                }
+                width="300px"
+                setValue={(e) => {
+                  editService({
+                    ...service,
+                    health: {
+                      ...service.health,
+                      readinessProbe: {
+                        ...service.health.readinessProbe,
+                        failureThreshold: {
+                          readOnly: false,
+                          value: e,
                         },
                       },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-                <Spacer y={0.5} />
+                    },
+                  });
+                }}
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+              <Spacer y={0.5} />
 
-                <Input
-                  label="Initial Delay Threshold"
-                  placeholder="ex: 80"
-                  value={
-                    service.health.readinessProbe.initialDelaySeconds.value
-                  }
-                  disabled={
-                    service.health.readinessProbe.initialDelaySeconds.readOnly
-                  }
-                  width="300px"
-                  setValue={(e) => {
-                    editService({
-                      ...service,
-                      health: {
-                        ...service.health,
-                        readinessProbe: {
-                          ...service.health.readinessProbe,
-                          initialDelaySeconds: {
-                            readOnly: false,
-                            value: e,
-                          },
+              <Input
+                label="Initial Delay Threshold"
+                placeholder="ex: 80"
+                value={service.health.readinessProbe.initialDelaySeconds.value}
+                disabled={
+                  service.health.readinessProbe.initialDelaySeconds.readOnly
+                }
+                width="300px"
+                setValue={(e) => {
+                  editService({
+                    ...service,
+                    health: {
+                      ...service.health,
+                      readinessProbe: {
+                        ...service.health.readinessProbe,
+                        initialDelaySeconds: {
+                          readOnly: false,
+                          value: e,
                         },
                       },
-                    });
-                  }}
-                  disabledTooltip={
-                    "You may only edit this field in your porter.yaml."
-                  }
-                />
-              </>
-            </AnimateHeight>
+                    },
+                  });
+                }}
+                disabledTooltip={
+                  "You may only edit this field in your porter.yaml."
+                }
+              />
+            </>
           </PaddingContainer>
         </>
       </>
@@ -681,50 +614,45 @@ const WebTabs: React.FC<Props> = ({
   const renderAdvanced = () => {
     return (
       <>
-        <ScrollableDiv>
-          <>
-            <Spacer y={1} />
-            <Input
-              label={
-                <>
-                  <span>Custom domain</span>
-                  <a
-                    href="https://docs.porter.run/deploying-applications/https-and-domains/custom-domains"
-                    target="_blank"
-                  >
-                    &nbsp;(?)
-                  </a>
-                </>
-              }
-              placeholder="ex: my-app.my-domain.com"
-              value={service.ingress.hosts.value}
-              disabled={service.ingress.hosts.readOnly}
-              width="300px"
-              setValue={(e) => {
-                editService({
-                  ...service,
-                  ingress: {
-                    ...service.ingress,
-                    hosts: { readOnly: false, value: e },
-                  },
-                });
-              }}
-              disabledTooltip={
-                "You may only edit this field in your porter.yaml."
-              }
-            />
-            {renderHealth()}
-          </>
-        </ScrollableDiv>
+        <>
+          <Spacer y={1} />
+          <Input
+            label={
+              <>
+                <span>Custom domain</span>
+                <a
+                  href="https://docs.porter.run/deploying-applications/https-and-domains/custom-domains"
+                  target="_blank"
+                >
+                  &nbsp;(?)
+                </a>
+              </>
+            }
+            placeholder="ex: my-app.my-domain.com"
+            value={service.ingress.hosts.value}
+            disabled={service.ingress.hosts.readOnly}
+            width="300px"
+            setValue={(e) => {
+              editService({
+                ...service,
+                ingress: {
+                  ...service.ingress,
+                  hosts: { readOnly: false, value: e },
+                },
+              });
+            }}
+            disabledTooltip={
+              "You may only edit this field in your porter.yaml."
+            }
+          />
+          {renderHealth()}
+        </>
       </>
     );
   };
   return (
     <>
-      <div
-        ref={containerRef}
-        style={{ paddingBottom: currentTab == "advanced" ? "100px" : "50px" }}
-      >
+      <>
         <TabSelector
           options={[
             { label: "Main", value: "main" },
@@ -732,56 +660,27 @@ const WebTabs: React.FC<Props> = ({
             { label: "Advanced", value: "advanced" },
           ]}
           currentTab={currentTab}
-          setCurrentTab={(value: string) => setCurrentTab(value)}
+          setCurrentTab={(value: string) => {
+            if (value === "main") {
+              setHeight(288);
+            } else if (value === "resources") {
+              setHeight(713);
+            } else if (value === "advanced") {
+              setHeight(1179);
+            }
+            setCurrentTab(value);
+          }}
         />
         {currentTab === "main" && renderMain()}
         {currentTab === "resources" && renderResources()}
         {currentTab === "advanced" && renderAdvanced()}
-      </div>
+      </>
     </>
   );
 };
 
 export default WebTabs;
 
-const StyledAdvancedBuildSettings = styled.div`
-  color: ${({ showSettings }) => (showSettings ? "white" : "#aaaabb")};
-  background: ${({ theme }) => theme.fg};
-  border: 1px solid #494b4f;
-  ${({ disabled }) =>
-    !disabled &&
-    `
-    :hover {
-      border: 1px solid #7a7b80;
-      color: white;
-    }
-  `}
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 15px;
-  border-radius: 5px;
-  height: 40px;
-  font-size: 13px;
-  width: 100%;
-  padding-left: 10px;
-  cursor: pointer;
-  border-bottom-left-radius: ${({ showSettings }) => showSettings && "0px"};
-  border-bottom-right-radius: ${({ showSettings }) => showSettings && "0px"};
-
-  .dropdown {
-    margin-right: 8px;
-    font-size: 20px;
-    cursor: pointer;
-    border-radius: 20px;
-    transform: ${(props: { showSettings: boolean; isCurrent: boolean }) =>
-      props.showSettings ? "" : "rotate(-90deg)"};
-  }
-`;
-const AdvancedBuildTitle = styled.div`
-  display: flex;
-  align-items: center;
-`;
 const ScrollableDiv = styled.div`
   overflow-y: auto;
   padding: 0 25px;