disable auto detect porter.yaml on dashboard and organization (#3179)

dashboard/src/main/home/app-dashboard/build-settings/AdvancedBuildSettings.tsx

@@ -6,7 +6,7 @@ import Input from "components/porter/Input";
 import AnimateHeight from "react-animate-height";
 import Select from "components/porter/Select";
 import { PorterApp } from "../types/porterApp";
-import BuildpackStack from "./BuildpackStack";
+import BuildpackSettings from "./buildpacks/BuildpackSettings";
 import _ from "lodash";
 
 interface AdvancedBuildSettingsProps {
@@ -74,7 +74,7 @@ const AdvancedBuildSettings: React.FC<AdvancedBuildSettingsProps> = ({
               />
               <Spacer y={0.5} />
             </>
-            : <BuildpackStack
+            : <BuildpackSettings
               porterApp={porterApp}
               updatePorterApp={updatePorterApp}
               autoDetectBuildpacks={autoDetectBuildpacks}

dashboard/src/main/home/app-dashboard/build-settings/BuildSettingsTab.tsx

@@ -159,7 +159,7 @@ const BuildSettingsTab: React.FC<Props> = ({
         porterApp={porterApp}
         updatePorterApp={(attrs: Partial<PorterApp>) => setTempPorterApp(PorterApp.setAttributes(porterApp, attrs))}
         setPorterYaml={() => { }}
-        autoDetectBuildpacks={false}
+        autoDetectionOn={false}
         canChangeRepo={false}
       />
       <Spacer y={1} />

dashboard/src/main/home/app-dashboard/build-settings/BuildpackCard.tsx

@@ -1,166 +0,0 @@
-import React from "react";
-import { Buildpack } from "./BuildpackStack";
-import { DeviconsNameList } from "assets/devicons-name-list";
-import styled, { keyframes } from "styled-components";
-import { Draggable } from "react-beautiful-dnd";
-
-interface Props {
-    buildpack: Buildpack;
-    action: 'add' | 'remove';
-    onClickFn: (buildpack: string) => void;
-    index: number;
-    draggable: boolean;
-}
-
-const BuildpackCard: React.FC<Props> = ({
-    buildpack,
-    action,
-    onClickFn,
-    index,
-    draggable,
-}) => {
-    const [languageName] = buildpack.name?.split("/").reverse();
-
-    const devicon = DeviconsNameList.find(
-        (devicon) => languageName.toLowerCase() === devicon.name
-    );
-
-    const icon = `devicon-${devicon?.name}-plain colored`;
-
-    return (
-        draggable ?
-            <Draggable
-                draggableId={buildpack.name}
-                index={index}
-                key={buildpack.name}
-            >
-                {(provided) => (
-                    <StyledCard
-                        marginBottom="5px"
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                        ref={provided.innerRef}
-                        key={buildpack.name}
-                    >
-                        <ContentContainer>
-                            <Icon disableMarginRight={devicon == null} className={icon} />
-                            <EventInformation>
-                                <EventName>{buildpack?.name}</EventName>
-                            </EventInformation>
-                        </ContentContainer>
-                        <ActionContainer>
-                            <ActionButton
-                                onClick={() => onClickFn(buildpack.buildpack)}
-                            >
-                                <span className="material-icons">{action === "remove" ? "delete" : "add"}</span>
-                            </ActionButton>
-
-                        </ActionContainer>
-                    </StyledCard>
-                )}
-            </Draggable>
-            :
-            <StyledCard marginBottom="5px" key={buildpack.name}>
-                <ContentContainer>
-                    <Icon disableMarginRight={devicon == null} className={icon} />
-                    <EventInformation>
-                        <EventName>{buildpack?.name}</EventName>
-                    </EventInformation>
-                </ContentContainer>
-                <ActionContainer>
-                    <ActionButton
-                        onClick={() => onClickFn(buildpack.buildpack)}
-                    >
-                        <span className="material-icons">{action === "remove" ? "delete" : "add"}</span>
-                    </ActionButton>
-
-                </ActionContainer>
-            </StyledCard>
-    );
-}
-
-export default BuildpackCard;
-
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-
-const StyledCard = styled.div<{ marginBottom?: string }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid #494b4f;
-  background: ${({ theme }) => theme.fg};
-  margin-bottom: ${(props) => props.marginBottom || "30px"};
-  border-radius: 8px;
-  padding: 14px;
-  overflow: hidden;
-  height: 60px;
-  font-size: 13px;
-  animation: ${fadeIn} 0.5s;
-`;
-
-const ContentContainer = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-`;
-
-const Icon = styled.span<{ disableMarginRight: boolean }>`
-  font-size: 20px;
-  margin-left: 10px;
-  ${(props) => {
-        if (!props.disableMarginRight) {
-            return "margin-right: 20px";
-        }
-    }}
-`;
-
-const EventInformation = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  height: 100%;
-`;
-
-const EventName = styled.div`
-  font-family: "Work Sans", sans-serif;
-  font-weight: 500;
-  color: #ffffff;
-`;
-
-const ActionContainer = styled.div`
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  height: 100%;
-`;
-
-const ActionButton = styled.button`
-  position: relative;
-  border: none;
-  background: none;
-  color: white;
-  padding: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  cursor: pointer;
-  color: #aaaabb;
-
-  :hover {
-    background: #ffffff11;
-    border: 1px solid #ffffff44;
-  }
-
-  > span {
-    font-size: 20px;
-  }
-`;

dashboard/src/main/home/app-dashboard/build-settings/DetectContentsList.tsx → dashboard/src/main/home/app-dashboard/build-settings/DetectDockerfileAndPorterYaml.tsx

@@ -20,7 +20,7 @@ type PropsType = {
   updatePorterApp: (attrs: Partial<PorterApp>) => void;
 };
 
-const DetectContentsList: React.FC<PropsType> = ({
+const DetectDockerfileAndPorterYaml: React.FC<PropsType> = ({
   setPorterYaml,
   porterApp,
   updatePorterApp,
@@ -246,7 +246,7 @@ const DetectContentsList: React.FC<PropsType> = ({
   );
 };
 
-export default DetectContentsList;
+export default DetectDockerfileAndPorterYaml;
 
 const Code = styled.span`
   font-family: monospace;

dashboard/src/main/home/app-dashboard/build-settings/SharedBuildSettings.tsx

@@ -4,7 +4,7 @@ import Text from "components/porter/Text";
 import React from "react";
 import styled from "styled-components";
 import { PorterApp } from "../types/porterApp";
-import DetectContentsList from "./DetectContentsList";
+import DetectDockerfileAndPorterYaml from "./DetectDockerfileAndPorterYaml";
 import RepositorySelector from "./RepositorySelector";
 import BranchSelector from "./BranchSelector";
 import AdvancedBuildSettings from "./AdvancedBuildSettings";
@@ -13,7 +13,7 @@ type Props = {
   setPorterYaml: (yaml: string, filename: string) => void;
   updatePorterApp: (attrs: Partial<PorterApp>) => void;
   porterApp: PorterApp;
-  autoDetectBuildpacks: boolean;
+  autoDetectionOn: boolean;
   canChangeRepo: boolean;
 };
 
@@ -21,7 +21,7 @@ const SharedBuildSettings: React.FC<Props> = ({
   setPorterYaml,
   updatePorterApp,
   porterApp,
-  autoDetectBuildpacks,
+  autoDetectionOn,
   canChangeRepo,
 }) => {
   return (
@@ -122,15 +122,18 @@ const SharedBuildSettings: React.FC<Props> = ({
                 setValue={(val: string) => updatePorterApp({ build_context: val })}
               />
               <Spacer y={1} />
-              <DetectContentsList
-                setPorterYaml={setPorterYaml}
-                porterApp={porterApp}
-                updatePorterApp={updatePorterApp}
-              />
+              {/* TODO: refactor everything from the below 'component' into this file */}
+              {autoDetectionOn && (
+                <DetectDockerfileAndPorterYaml
+                  setPorterYaml={setPorterYaml}
+                  porterApp={porterApp}
+                  updatePorterApp={updatePorterApp}
+                />
+              )}
               <AdvancedBuildSettings
                 porterApp={porterApp}
                 updatePorterApp={updatePorterApp}
-                autoDetectBuildpacks={autoDetectBuildpacks}
+                autoDetectBuildpacks={autoDetectionOn}
               />
             </>
           )}

dashboard/src/main/home/app-dashboard/build-settings/AddCustomBuildpackComponent.tsx → dashboard/src/main/home/app-dashboard/build-settings/buildpacks/AddCustomBuildpackComponent.tsx

@@ -1,7 +1,7 @@
 import InputRow from "components/form-components/InputRow";
 import React, { useState } from "react";
 import styled, { keyframes } from "styled-components";
-import { Buildpack } from "./BuildpackStack";
+import { Buildpack } from "./BuildpackSettings";
 
 function isValidURL(url: string): boolean {
   const pattern = /^(https?:\/\/)?([\w.-]+)\.([a-z]{2,})(:\d{2,5})?([\/\w.-]*)*\/?$/i;

dashboard/src/main/home/app-dashboard/build-settings/buildpacks/BuildpackCard.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import { Buildpack } from "./BuildpackSettings";
+import { DeviconsNameList } from "assets/devicons-name-list";
+import styled, { keyframes } from "styled-components";
+import { Draggable } from "react-beautiful-dnd";
+
+interface Props {
+  buildpack: Buildpack;
+  action: 'add' | 'remove';
+  onClickFn: (buildpack: string) => void;
+  index: number;
+  draggable: boolean;
+}
+
+const BuildpackCard: React.FC<Props> = ({
+  buildpack,
+  action,
+  onClickFn,
+  index,
+  draggable,
+}) => {
+  const [languageName] = buildpack.name?.split("/").reverse();
+
+  const devicon = DeviconsNameList.find(
+    (devicon) => languageName.toLowerCase() === devicon.name
+  );
+
+  const icon = `devicon-${devicon?.name}-plain colored`;
+
+  return (
+    draggable ?
+      <Draggable
+        draggableId={buildpack.name}
+        index={index}
+        key={buildpack.name}
+      >
+        {(provided) => (
+          <StyledCard
+            marginBottom="5px"
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            ref={provided.innerRef}
+            key={buildpack.name}
+          >
+            <ContentContainer>
+              <Icon disableMarginRight={devicon == null} className={icon} />
+              <EventInformation>
+                <EventName>{buildpack?.name}</EventName>
+              </EventInformation>
+            </ContentContainer>
+            <ActionContainer>
+              <ActionButton
+                onClick={() => onClickFn(buildpack.buildpack)}
+              >
+                <span className="material-icons">{action === "remove" ? "delete" : "add"}</span>
+              </ActionButton>
+
+            </ActionContainer>
+          </StyledCard>
+        )}
+      </Draggable>
+      :
+      <StyledCard marginBottom="5px" key={buildpack.name}>
+        <ContentContainer>
+          <Icon disableMarginRight={devicon == null} className={icon} />
+          <EventInformation>
+            <EventName>{buildpack?.name}</EventName>
+          </EventInformation>
+        </ContentContainer>
+        <ActionContainer>
+          <ActionButton
+            onClick={() => onClickFn(buildpack.buildpack)}
+          >
+            <span className="material-icons">{action === "remove" ? "delete" : "add"}</span>
+          </ActionButton>
+
+        </ActionContainer>
+      </StyledCard>
+  );
+}
+
+export default BuildpackCard;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const StyledCard = styled.div<{ marginBottom?: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid #494b4f;
+  background: ${({ theme }) => theme.fg};
+  margin-bottom: ${(props) => props.marginBottom || "30px"};
+  border-radius: 8px;
+  padding: 14px;
+  overflow: hidden;
+  height: 60px;
+  font-size: 13px;
+  animation: ${fadeIn} 0.5s;
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+`;
+
+const Icon = styled.span<{ disableMarginRight: boolean }>`
+  font-size: 20px;
+  margin-left: 10px;
+  ${(props) => {
+    if (!props.disableMarginRight) {
+      return "margin-right: 20px";
+    }
+  }}
+`;
+
+const EventInformation = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+`;
+
+const EventName = styled.div`
+  font-family: "Work Sans", sans-serif;
+  font-weight: 500;
+  color: #ffffff;
+`;
+
+const ActionContainer = styled.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  height: 100%;
+`;
+
+const ActionButton = styled.button`
+  position: relative;
+  border: none;
+  background: none;
+  color: white;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  color: #aaaabb;
+
+  :hover {
+    background: #ffffff11;
+    border: 1px solid #ffffff44;
+  }
+
+  > span {
+    font-size: 20px;
+  }
+`;

dashboard/src/main/home/app-dashboard/build-settings/BuildpackList.tsx → dashboard/src/main/home/app-dashboard/build-settings/buildpacks/BuildpackList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { PorterApp } from "../types/porterApp";
-import { Buildpack } from "./BuildpackStack";
+import { PorterApp } from "../../types/porterApp";
+import { Buildpack } from "./BuildpackSettings";
 import BuildpackCard from "./BuildpackCard";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";

dashboard/src/main/home/app-dashboard/build-settings/BuildpackStack.tsx → dashboard/src/main/home/app-dashboard/build-settings/buildpacks/BuildpackSettings.tsx

@@ -11,7 +11,7 @@ import Modal from "components/porter/Modal";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import Error from "components/porter/Error";
-import { PorterApp } from "../types/porterApp";
+import { PorterApp } from "../../types/porterApp";
 import AddCustomBuildpackComponent from "./AddCustomBuildpackComponent";
 import BuildpackList from "./BuildpackList";
 import Icon from "components/porter/Icon";
@@ -53,7 +53,7 @@ const BUILDPACK_TO_NAME: { [key: string]: string } = {
   "heroku/go": "Go",
 };
 
-const BuildpackStack: React.FC<{
+const BuildpackSettings: React.FC<{
   porterApp: PorterApp;
   updatePorterApp: (attrs: Partial<PorterApp>) => void;
   autoDetectBuildpacks: boolean;
@@ -302,7 +302,7 @@ const BuildpackStack: React.FC<{
     );
   };
 
-export default BuildpackStack;
+export default BuildpackSettings;
 
 
 const Shade = styled.div`

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

@@ -42,7 +42,7 @@ const SourceSettings: React.FC<Props> = ({
             setPorterYaml={setPorterYaml}
             porterApp={porterApp}
             updatePorterApp={(attrs: Partial<PorterApp>) => setPorterApp(PorterApp.setAttributes(porterApp, attrs))}
-            autoDetectBuildpacks={true}
+            autoDetectionOn={true}
             canChangeRepo={true}
           />
         ) : (