expanded stub

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

@@ -89,7 +89,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);
@@ -114,7 +113,9 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
     };
   };
   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;
@@ -122,26 +123,44 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       parsedYaml = yaml.load(yamlString);
       const parsedData = PorterYamlSchema.parse(parsedYaml);
       const porterYaml = parsedData as z.infer<typeof PorterYamlSchema>;
-      setPorterJson(porterYaml)
+      setPorterJson(porterYaml);
       // go through key value pairs and create services from them
       const newServices = [];
       for (const [name, app] of Object.entries(porterYaml.apps)) {
         if (app.type) {
-          newServices.push(createDefaultService(name, app.type, { readOnly: true, value: app.run }))
-        } else if (name.includes('web')) {
-          newServices.push(createDefaultService(name, 'web', { readOnly: true, value: app.run }))
+          newServices.push(
+            createDefaultService(name, app.type, {
+              readOnly: true,
+              value: app.run,
+            })
+          );
+        } else if (name.includes("web")) {
+          newServices.push(
+            createDefaultService(name, "web", {
+              readOnly: true,
+              value: app.run,
+            })
+          );
         } else {
-          newServices.push(createDefaultService(name, 'worker', { readOnly: true, value: app.run }))
+          newServices.push(
+            createDefaultService(name, "worker", {
+              readOnly: true,
+              value: app.run,
+            })
+          );
         }
       }
-      setFormState({ ...formState, serviceList: [...formState.serviceList, ...newServices] });
+      setFormState({
+        ...formState,
+        serviceList: [...formState.serviceList, ...newServices],
+      });
       if (Validators.serviceList(formState.serviceList)) {
         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) => {
@@ -179,7 +198,6 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
           builder: "heroku",
           buildpacks: "nodejs,ruby",
           dockerfile: dockerfilePath,
-
         },
         {
           cluster_id: currentCluster.id,
@@ -261,8 +279,6 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   setActionConfig={setActionConfig}
                   branch={branch}
                   setBranch={setBranch}
-                  procfileProcess={procfileProcess}
-                  setProcfileProcess={setProcfileProcess}
                   dockerfilePath={dockerfilePath}
                   setDockerfilePath={setDockerfilePath}
                   folderPath={folderPath}
@@ -272,19 +288,24 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   setBuildConfig={setBuildConfig}
                   porterYaml={porterYaml}
                   setPorterYaml={(newYaml: string) => {
-                    validatePorterYaml(newYaml)
+                    validatePorterYaml(newYaml);
                   }}
                 />
               </>,
               <>
                 <Text size={16}>Application services</Text>
                 <Spacer y={0.5} />
-                {porterJson && porterJson.apps && Object.keys(porterJson.apps).length > 0 &&
-                  <AppearingDiv>
-                    <Text size={16} color={"green"}>Autodetected {Object.keys(porterJson.apps).length} services from porter.yml</Text>
-                    <Spacer y={1} />
-                  </AppearingDiv>
-                }
+                {porterJson &&
+                  porterJson.apps &&
+                  Object.keys(porterJson.apps).length > 0 && (
+                    <AppearingDiv>
+                      <Text size={16} color={"green"}>
+                        Autodetected {Object.keys(porterJson.apps).length}{" "}
+                        services from porter.yml
+                      </Text>
+                      <Spacer y={1} />
+                    </AppearingDiv>
+                  )}
                 <Services
                   setServices={(services: any[]) => {
                     setFormState({ ...formState, serviceList: services });

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

@@ -89,6 +89,7 @@ const Services: React.FC<ServicesProps> = ({ services, setServices }) => {
             width="300px"
             value={serviceName}
             error={
+              serviceName != "" &&
               !isServiceNameValid(serviceName) &&
               'Lowercase letters, numbers, and "-" only.'
             }
@@ -99,7 +100,10 @@ const Services: React.FC<ServicesProps> = ({ services, setServices }) => {
             onClick={() => {
               setServices([
                 ...services,
-                createDefaultService(serviceName, serviceType, { readOnly: false, value: '' }),
+                createDefaultService(serviceName, serviceType, {
+                  readOnly: false,
+                  value: "",
+                }),
               ]);
               setShowAddServiceModal(false);
               setServiceName("");

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;
+`;