fix merge conflicts

dashboard/src/components/repo-selector/BuildpackStack.tsx

@@ -47,11 +47,10 @@ export const BuildpackStack: React.FC<{
   branch: string;
   hide: boolean;
   onChange: (config: BuildConfig) => void;
-}> = ({ actionConfig, folderPath, branch, hide, onChange }) => {
+}> = ({ actionConfig, folderPath, branch, hide, builder, onChange }) => {
   const { currentProject } = useContext(Context);
 
   const [builders, setBuilders] = useState<DetectedBuildpack[]>(null);
-  const [selectedBuilder, setSelectedBuilder] = useState<string>(null);
 
   const [stacks, setStacks] = useState<string[]>(null);
   const [selectedStack, setSelectedStack] = useState<string>(null);
@@ -109,13 +108,14 @@ export const BuildpackStack: React.FC<{
     let buildConfig: BuildConfig = {} as BuildConfig;
 
     buildConfig.builder = selectedStack;
+    console.log(buildConfig);
     buildConfig.buildpacks = selectedBuildpacks?.map((buildpack) => {
       return buildpack.buildpack;
     });
     if (typeof onChange === "function") {
       onChange(buildConfig);
     }
-  }, [selectedBuilder, selectedStack, selectedBuildpacks]);
+  }, [builder, selectedStack, selectedBuildpacks]);
 
   const detectBuildpack = () => {
     if (actionConfig.kind === "gitlab") {

dashboard/src/components/repo-selector/DetectContentsList.tsx

@@ -25,12 +25,9 @@ type PropsType = {
   branch: string;
   dockerfilePath?: string;
   folderPath: string;
-  procfilePath?: string;
   porterYaml?: string;
   setActionConfig: (x: ActionConfigType) => void;
-  setProcfileProcess?: (x: string) => void;
   setDockerfilePath: (x: string) => void;
-  setProcfilePath: (x: string) => void;
   setFolderPath: (x: string) => void;
   setBuildConfig: (x: any) => void;
   setPorterYaml: (x: any) => void;
@@ -66,7 +63,6 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
     if (porterYamlItem) {
       fetchAndSetPorterYaml("porter.yaml");
     }
-
   }, [contents, fetchAndSetPorterYaml]);
 
   useEffect(() => {
@@ -106,6 +102,8 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
       if (fileName.includes("Dockerfile")) {
         return (
           <AdvancedBuildSettings
+            dockerfilePath={props.dockerfilePath}
+            setDockerfilePath={props.setDockerfilePath}
             setBuildConfig={props.setBuildConfig}
             autoBuildPack={autoBuildpack}
             showSettings={false}
@@ -261,6 +259,8 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
       {renderContentList()}
       {props.dockerfilePath == null || props.dockerfilePath == "" ? (
         <AdvancedBuildSettings
+          dockerfilePath={props.dockerfilePath}
+          setDockerfilePath={props.setDockerfilePath}
           setBuildConfig={props.setBuildConfig}
           autoBuildPack={autoBuildpack}
           showSettings={false}
@@ -457,7 +457,7 @@ const Item = styled.div`
   font-size: 13px;
   border-bottom: 1px solid
     ${(props: { lastItem: boolean; isSelected?: boolean }) =>
-    props.lastItem ? "#00000000" : "#606166"};
+      props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;
@@ -488,7 +488,7 @@ const FileItem = styled(Item)`
     props.isADocker ? "#fff" : "#ffffff55"};
   :hover {
     background: ${(props: { isADocker?: boolean }) =>
-    props.isADocker ? "#ffffff22" : "#ffffff11"};
+      props.isADocker ? "#ffffff22" : "#ffffff11"};
   }
 `;
 

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

@@ -8,6 +8,7 @@ import AnimateHeight from "react-animate-height";
 import { DeviconsNameList } from "assets/devicons-name-list";
 import { BuildpackStack } from "components/repo-selector/BuildpackStack";
 import { ActionConfigType } from "shared/types";
+import SelectRow from "components/form-components/SelectRow";
 
 interface AutoBuildpack {
   name?: string;
@@ -21,6 +22,8 @@ interface AdvancedBuildSettingsProps {
   actionConfig: ActionConfigType | null;
   branch: string;
   folderPath: string;
+  dockerfilePath?: string;
+  setDockerfilePath: (x: string) => void;
   setBuildConfig: (x: any) => void;
 }
 
@@ -48,18 +51,9 @@ const AdvancedBuildSettings: React.FC<AdvancedBuildSettingsProps> = (props) => {
         <Spacer y={0.5} />
         <Input
           placeholder="ex: ./Dockerfile"
-          value=""
+          value={props.dockerfilePath}
           width="300px"
-          setValue={(e) => {}}
-        />
-        <Spacer y={0.5} />
-        <Text color="helper">Specify your Docker build context.</Text>
-        <Spacer y={0.5} />
-        <Input
-          placeholder="ex: academic-sophon"
-          value="./"
-          width="300px"
-          setValue={(e) => {}}
+          setValue={props.setDockerfilePath}
         />
         <Spacer y={0.5} />
       </>
@@ -106,14 +100,17 @@ const AdvancedBuildSettings: React.FC<AdvancedBuildSettingsProps> = (props) => {
 
       <AnimateHeight height={showSettings ? "auto" : 0} duration={1000}>
         <StyledSourceBox>
-          <SelectWrapper>
-            <SelectLabel>Select Build Context</SelectLabel>
-            <StyledSelect value={buildView} onChange={handleSelectChange}>
-              <option value="docker">Docker</option>
-              <option value="buildpacks">Buildpacks</option>
-            </StyledSelect>
-          </SelectWrapper>
-          <Spacer y={0.5} />
+          <SelectRow
+            value={buildView}
+            width="100%"
+            options={[
+              { value: "docker", label: "Docker" },
+              { value: "buildpacks", label: "Buildpacks" },
+            ]}
+            setActiveValue={(option) => setBuildView(option)}
+            label="Select your Build Context"
+          />
+
           {buildView === "docker" ? createDockerView() : createBuildpackView()}
         </StyledSourceBox>
       </AnimateHeight>
@@ -134,6 +131,7 @@ const StyledAdvancedBuildSettings = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-top: 15px;
   border-radius: 5px;
   height: 40px;
   font-size: 13px;

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

@@ -90,7 +90,6 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
   const [actionConfig, setActionConfig] = useState<GithubActionConfigType>({
     ...defaultActionConfig,
   });
-  const [procfileProcess, setProcfileProcess] = useState("");
   const [branch, setBranch] = useState("");
   const [repoType, setRepoType] = useState("");
   const [dockerfilePath, setDockerfilePath] = useState(null);
@@ -99,7 +98,9 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
   const [buildConfig, setBuildConfig] = useState();
   const [porterYaml, setPorterYaml] = useState("");
   const [showGHAModal, setShowGHAModal] = useState<boolean>(false);
-  const [porterJson, setPorterJson] = useState<z.infer<typeof PorterYamlSchema>>(null);
+  const [porterJson, setPorterJson] = useState<
+    z.infer<typeof PorterYamlSchema>
+  >(null);
 
   const validatePorterYaml = (yamlString: string) => {
     let parsedYaml;
@@ -129,9 +130,9 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
         setCurrentStep(Math.max(currentStep, 4));
       }
     } catch (error) {
-      console.log("Error converting porter yaml file to input: " + error)
+      console.log("Error converting porter yaml file to input: " + error);
     }
-  }
+  };
 
   // Deploys a Helm chart and writes build settings to the DB
   const isAppNameValid = (name: string) => {
@@ -169,7 +170,6 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
           builder: "heroku",
           buildpacks: "nodejs,ruby",
           dockerfile: dockerfilePath,
-
         },
         {
           cluster_id: currentCluster.id,
@@ -306,8 +306,6 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   setActionConfig={setActionConfig}
                   branch={branch}
                   setBranch={setBranch}
-                  procfileProcess={procfileProcess}
-                  setProcfileProcess={setProcfileProcess}
                   dockerfilePath={dockerfilePath}
                   setDockerfilePath={setDockerfilePath}
                   folderPath={folderPath}
@@ -317,7 +315,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   setBuildConfig={setBuildConfig}
                   porterYaml={porterYaml}
                   setPorterYaml={(newYaml: string) => {
-                    validatePorterYaml(newYaml)
+                    validatePorterYaml(newYaml);
                   }}
                 />
               </>,
@@ -378,8 +376,11 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
               */
               <Button
                 onClick={() => {
+                  // TODO: remove
+                  deployPorterApp();
+
                   if (imageUrl) {
-                    deployPorterApp();
+                    // deployPorterApp();
                   } else {
                     setShowGHAModal(true);
                   }

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

@@ -27,8 +27,13 @@ const Services: React.FC<ServicesProps> = ({ services, setServices }) => {
   const [serviceType, setServiceType] = useState<ServiceType>("web");
   const isServiceNameValid = (name: string) => {
     const regex = /^[a-z0-9-]+$/;
+
     return regex.test(name);
   };
+  const isServiceNameDuplicate = (name: string) => {
+    const serviceNames = services.map((service) => service.name);
+    return serviceNames.includes(name);
+  };
 
   return (
     <>
@@ -89,8 +94,11 @@ const Services: React.FC<ServicesProps> = ({ services, setServices }) => {
             width="300px"
             value={serviceName}
             error={
-              !isServiceNameValid(serviceName) &&
-              'Lowercase letters, numbers, and "-" only.'
+              (serviceName != "" &&
+                !isServiceNameValid(serviceName) &&
+                'Lowercase letters, numbers, and "-" only.') ||
+              (isServiceNameDuplicate(serviceName) &&
+                "Service name is duplicate")
             }
             setValue={setServiceName}
           />
@@ -105,7 +113,10 @@ const Services: React.FC<ServicesProps> = ({ services, setServices }) => {
               setServiceName("");
               setServiceType("web");
             }}
-            disabled={!isServiceNameValid(serviceName)}
+            disabled={
+              !isServiceNameValid(serviceName) ||
+              isServiceNameDuplicate(serviceName)
+            }
           >
             <I className="material-icons">add</I> Add service
           </Button>

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

@@ -12,7 +12,8 @@ import { RouteComponentProps } from "react-router";
 import { Context } from "shared/Context";
 import ActionConfBranchSelector from "components/repo-selector/ActionConfBranchSelector";
 import DetectContentsList from "components/repo-selector/DetectContentsList";
-
+import { pushFiltered } from "shared/routing";
+import ImageSelector from "components/image-selector/ImageSelector";
 type Props = {
   source: SourceType | undefined;
   imageUrl: string;
@@ -23,8 +24,6 @@ type Props = {
   setActionConfig: (
     x: ActionConfigType | ((prevState: ActionConfigType) => ActionConfigType)
   ) => void;
-  procfileProcess: string;
-  setProcfileProcess: (x: string) => void;
   branch: string;
   setBranch: (x: string) => void;
   dockerfilePath: string | null;
@@ -46,18 +45,16 @@ const SourceSettings: React.FC<Props> = ({
   setImageTag,
   actionConfig,
   setActionConfig,
-  setProcfileProcess,
   branch,
   setBranch,
   dockerfilePath,
   setDockerfilePath,
-  procfilePath,
-  setProcfilePath,
   folderPath,
   setFolderPath,
   setBuildConfig,
   porterYaml,
   setPorterYaml,
+  ...props
 }) => {
   const renderGithubSettings = () => {
     return (
@@ -120,12 +117,9 @@ const SourceSettings: React.FC<Props> = ({
             actionConfig={actionConfig}
             branch={branch}
             dockerfilePath={dockerfilePath}
-            procfilePath={procfilePath}
             folderPath={folderPath}
             setActionConfig={setActionConfig}
             setDockerfilePath={setDockerfilePath}
-            setProcfilePath={setProcfilePath}
-            setProcfileProcess={setProcfileProcess}
             setFolderPath={setFolderPath}
             setBuildConfig={setBuildConfig}
             porterYaml={porterYaml}
@@ -139,7 +133,7 @@ const SourceSettings: React.FC<Props> = ({
   const renderDockerSettings = () => {
     return (
       <>
-        <Text size={16}>Registry settings</Text>
+        {/* /* <Text size={16}>Registry settings</Text>
         <Spacer y={0.5} />
         <Text color="helper">
           Specify the complete registry URL for your Docker image:
@@ -150,7 +144,40 @@ const SourceSettings: React.FC<Props> = ({
           value={imageUrl}
           width="300px"
           setValue={setImageUrl}
-        />
+        /> */}
+
+        <StyledSourceBox>
+          {/* <CloseButton
+            onClick={() => {
+              setSourceType("");
+              setImageUrl("");
+              setImageTag("");
+            }}
+          >
+            <i className="material-icons">close</i>
+          </CloseButton> */}
+          <Subtitle>
+            Specify the container image you would like to connect to this
+            template.
+            <Highlight
+              onClick={() =>
+                pushFiltered(props, "/integrations/registry", ["project_id"])
+              }
+            >
+              Manage Docker registries
+            </Highlight>
+            <Required>*</Required>
+          </Subtitle>
+          <DarkMatter antiHeight="-4px" />
+          <ImageSelector
+            selectedTag={imageTag}
+            selectedImageUrl={imageUrl}
+            setSelectedImageUrl={setImageUrl}
+            setSelectedTag={setImageTag}
+            forceExpanded={true}
+          />
+          <br />
+        </StyledSourceBox>
       </>
     );
   };
@@ -191,3 +218,46 @@ const Required = styled.div`
   color: #fc4976;
   display: inline-block;
 `;
+
+const CloseButton = styled.div`
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  border-radius: 50%;
+  right: 12px;
+  top: 10px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+
+  > i {
+    font-size: 20px;
+    color: #aaaabb;
+  }
+`;
+const Highlight = styled.a`
+  color: #8590ff;
+  text-decoration: none;
+  margin-left: 5px;
+  cursor: pointer;
+  display: inline;
+`;
+
+const StyledSourceBox = styled.div`
+  width: 100%;
+  color: #ffffff;
+  padding: 14px 35px 20px;
+  position: relative;
+  font-size: 13px;
+  margin-top: 6px;
+  margin-bottom: 25px;
+  border-radius: 5px;
+  background: ${(props) => props.theme.fg};
+  border: 1px solid #494b4f;
+`;