fix that lol

dashboard/src/components/porter/ExpandableSection.tsx

@@ -12,6 +12,8 @@ type Props = {
   expandText?: string;
   collapseText?: string;
   maxHeight?: string;
+  spaced?: boolean;
+  copy?: string;
 };
 
 const ExpandableSection: React.FC<Props> = ({
@@ -24,6 +26,8 @@ const ExpandableSection: React.FC<Props> = ({
   expandText,
   collapseText,
   maxHeight,
+  spaced,
+  copy,
 }) => {
   const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded ?? false);
 
@@ -34,11 +38,17 @@ const ExpandableSection: React.FC<Props> = ({
       noWrapper={noWrapper}
     >
       {noWrapper ? (
-        <Container row>
+        <Container row spaced={spaced}>
           {Header}
-          <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+          {copy ? (<ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
             {isExpanded ? collapseText : expandText}
-          </ExpandButton>
+          </ExpandButton>) : (<div>          <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+            {isExpanded ? collapseText : expandText}
+          </ExpandButton>          <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+              {isExpanded ? collapseText : expandText}
+            </ExpandButton></div>)}
+
+
         </Container>
       ) : (
         <HeaderRow
@@ -66,6 +76,9 @@ const ExpandButton = styled.div`
   color: #aaaabb;
   cursor: pointer;
   font-size: 13px;
+  :hover {
+    color: #ffffff;
+  }
 `;
 
 const HeaderRow = styled.div<{

dashboard/src/components/porter/VerticalSteps.tsx

@@ -16,7 +16,7 @@ const VerticalSteps: React.FC<Props> = ({
     <StyledVerticalSteps>
       {steps.map((step, i) => {
         return (
-          <StepWrapper isLast={i === steps.length - 1}>
+          <StepWrapper isLast={i === steps.length - 1} key={i}>
             {
               (i !== steps.length - 1) && (
                 <Line isActive={i + 1 <= currentStep} />

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

@@ -94,10 +94,11 @@ const GithubActionModal: React.FC<GithubActionModalProps> = ({
         Header={
           <ModalHeader>.github/workflows/porter.yml</ModalHeader>
         }
-        isInitiallyExpanded={true}
+        isInitiallyExpanded
+        spaced
         ExpandedSection={
           <YamlEditor
-            value={getGithubAction(projectId, stackName)}
+            value={getGithubAction(projectId, clusterId, stackName)}
             readOnly={true}
             height="300px"
           />

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

@@ -148,9 +148,9 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       if (porterYamlToJson &&
         porterYamlToJson.apps &&
         Object.keys(porterYamlToJson.apps).length > 0) {
-        setDetected({ detected: true, message: `Detected ${Object.keys(porterYamlToJson.apps).length} apps from porter.yaml` });
+        setDetected({ detected: true, message: `Detected ${Object.keys(porterYamlToJson.apps).length} services from porter.yaml` });
       } else {
-        setDetected({ detected: false, message: "Could not detect any apps from porter.yaml. Make sure it exists in the root of your repo." });
+        setDetected({ detected: false, message: "Could not detect any services from porter.yaml. Make sure it exists in the root of your repo." });
       }
     } catch (error) {
       console.log("Error converting porter yaml file to input: " + error);
@@ -180,6 +180,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       !isAppNameValid(formState.applicationName)
     );
   };
+
   const deployPorterApp = async () => {
     try {
       if (currentProject == null || currentCluster == null || currentProject.id == null || currentCluster.id == null) {

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

@@ -43,6 +43,7 @@ const Services: React.FC<ServicesProps> = ({ services, setServices }) => {
             {services.map((service, index) => {
               return (
                 <ServiceContainer
+                  key={service.name}
                   service={service}
                   editService={(newService: Service) =>
                     setServices(

dashboard/src/main/home/app-dashboard/new-app-flow/serviceTypes.ts

@@ -158,10 +158,10 @@ export const Service = {
                 return JobService.default(name, startCommand);
         }
     },
-    serialize: async (service: Service) => {
+    serialize: (service: Service) => {
         switch (service.type) {
             case 'web':
-                return await WebService.serialize(service);
+                return WebService.serialize(service);
             case 'worker':
                 return WorkerService.serialize(service);
             case 'job':

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

@@ -1,22 +1,22 @@
 export const overrideObjectValues = (obj1: any, obj2: any) => {
-    // Iterate over the keys in obj2
-    for (const key in obj2) {
-        // Check if the key exists in obj1 and if its value is an object
-        if (key in obj1 && typeof obj1[key] === 'object' && typeof obj2[key] === 'object') {
-            // Recursively call the function to handle the nested object
-            obj1[key] = overrideObjectValues(obj1[key], obj2[key]);
-        } else {
-            // Otherwise, just assign the value from obj2 to obj1
-            obj1[key] = obj2[key];
-        }
+  // Iterate over the keys in obj2
+  for (const key in obj2) {
+    // Check if the key exists in obj1 and if its value is an object
+    if (key in obj1 && typeof obj1[key] === 'object' && typeof obj2[key] === 'object') {
+      // Recursively call the function to handle the nested object
+      obj1[key] = overrideObjectValues(obj1[key], obj2[key]);
+    } else {
+      // Otherwise, just assign the value from obj2 to obj1
+      obj1[key] = obj2[key];
     }
+  }
 
-    // Return the merged object
-    return obj1;
+  // Return the merged object
+  return obj1;
 };
 
-export const getGithubAction = (projectID?: number, stackName?: string) => {
-    return `on:
+export const getGithubAction = (projectID?: number, clusterId?: number, stackName?: string) => {
+  return `on:
   push:
     branches:
     - master
@@ -36,10 +36,10 @@ jobs:
       with:
         command: apply -f porter.yaml
       env:
-        PORTER_CLUSTER: "1"
-        PORTER_HOST: https://296e-160-72-72-58.ngrok-free.app
+        PORTER_CLUSTER: "${clusterId}"
+        PORTER_HOST: https://dashboard.getporter.dev
         PORTER_PROJECT: "${projectID}"
         PORTER_STACK_NAME: "${stackName}"
         PORTER_TAG: \${{ steps.vars.outputs.sha_short }}
-        PORTER_TOKEN: \${{ secrets.PORTER_STACK_1_1 }}`;
+        PORTER_TOKEN: \${{ secrets.PORTER_STACK_${projectID}_${clusterId} }}`;
 }