Porter.yaml is now able to be changed (#3041)

dashboard/src/components/porter/Input.tsx

@@ -7,7 +7,7 @@ type Props = {
   placeholder: string;
   width?: string;
   value: string;
-  setValue: (value: string) => void;
+  setValue?: (value: string) => void;
   label?: string | React.ReactNode;
   height?: string;
   type?: string;
@@ -15,6 +15,7 @@ type Props = {
   children?: React.ReactNode;
   disabled?: boolean;
   disabledTooltip?: string;
+  onValueChange?: (value: string) => void;
 };
 
 const Input: React.FC<Props> = ({
@@ -29,63 +30,60 @@ const Input: React.FC<Props> = ({
   children,
   disabled,
   disabledTooltip,
+  onValueChange,
 }) => {
-  return (
-    disabled && disabledTooltip ?
-      <Tooltip content={disabledTooltip} position="right">
-        <Block width={width}>
-          {
-            label && (
-              <Label>{label}</Label>
-            )
-          }
-          <StyledInput
-            value={value}
-            onChange={e => setValue(e.target.value)}
-            placeholder={placeholder}
-            width={width}
-            height={height}
-            type={type || "text"}
-            hasError={(error && true) || (error === "")}
-            disabled={disabled ? disabled : false}
-          />
-          {
-            error && (
-              <Error>
-                <i className="material-icons">error</i>
-                {error}
-              </Error>
-            )
-          }
-          {children}
-        </Block>
-      </Tooltip> :
-      <Block width={width} >
-        {
-          label && (
-            <Label>{label}</Label>
-          )
-        }
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    if (onValueChange) {
+      onValueChange(inputValue);
+    } else {
+      setValue(inputValue);
+    }
+  };
+  return disabled && disabledTooltip ? (
+    <Tooltip content={disabledTooltip} position="right">
+      <Block width={width}>
+        {label && <Label>{label}</Label>}
         <StyledInput
           value={value}
-          onChange={e => setValue(e.target.value)}
+          onChange={handleChange}
           placeholder={placeholder}
           width={width}
           height={height}
           type={type || "text"}
-          hasError={(error && true) || (error === "")}
+          hasError={(error && true) || error === ""}
           disabled={disabled ? disabled : false}
         />
-        {
-          error && (
-            <Error>
-              <i className="material-icons">error</i>
-              {error}
-            </Error>
-          )
-        }
+        {error && (
+          <Error>
+            <i className="material-icons">error</i>
+            {error}
+          </Error>
+        )}
         {children}
-      </Block >
+      </Block>
+    </Tooltip>
+  ) : (
+    <Block width={width}>
+      {label && <Label>{label}</Label>}
+      <StyledInput
+        value={value}
+        onChange={handleChange}
+        placeholder={placeholder}
+        width={width}
+        height={height}
+        type={type || "text"}
+        hasError={(error && true) || error === ""}
+        disabled={disabled ? disabled : false}
+      />
+      {error && (
+        <Error>
+          <i className="material-icons">error</i>
+          {error}
+        </Error>
+      )}
+      {children}
+    </Block>
   );
 };
 
@@ -96,7 +94,7 @@ const Block = styled.div<{
 }>`
   display: block;
   position: relative;
-  width: ${props => props.width || "200px"};
+  width: ${(props) => props.width || "200px"};
 `;
 
 const Label = styled.div`
@@ -118,27 +116,28 @@ const Error = styled.div`
   }
 `;
 
-
 const StyledInput = styled.input<{
   width: string;
   height: string;
   hasError: boolean;
   disabled: boolean;
 }>`
-  height: ${props => props.height || "35px"};
+  height: ${(props) => props.height || "35px"};
   padding: 5px 10px;
-  width: ${props => props.width || "200px"};
-  color: ${props => props.disabled ? "#aaaabb" : "#ffffff"};
+  width: ${(props) => props.width || "200px"};
+  color: ${(props) => (props.disabled ? "#aaaabb" : "#ffffff")};
   font-size: 13px;
   outline: none;
   border-radius: 5px;
   background: #26292e;
-  cursor: ${props => props.disabled ? "not-allowed" : ""};
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "")};
 
-  border: 1px solid ${props => props.hasError ? "#ff3b62" : "#494b4f"};
-  ${props => !props.disabled && `
+  border: 1px solid ${(props) => (props.hasError ? "#ff3b62" : "#494b4f")};
+  ${(props) =>
+    !props.disabled &&
+    `
     :hover {
       border: 1px solid ${props.hasError ? "#ff3b62" : "#7a7b80"};
     }
   `}
-`;
+`;

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

@@ -6,6 +6,8 @@ import info from "assets/info.svg";
 import close from "assets/close.png";
 import Button from "components/porter/Button";
 import api from "../../shared/api";
+import Error from "components/porter/Error";
+
 import { Context } from "../../shared/Context";
 import { ActionConfigType, BuildConfig, FileType } from "../../shared/types";
 
@@ -46,6 +48,9 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
   const [error, setError] = useState(false);
   const [contents, setContents] = useState<FileType[]>([]);
   const [currentDir, setCurrentDir] = useState("");
+  const [changedPorterYaml, setChangedPorterYaml] = useState(true);
+  const [displayInput, setDisplayInput] = useState(false);
+  const [buttonStatus, setButtonStatus] = useState<React.ReactNode>("");
 
   const [autoBuildpack, setAutoBuildpack] = useState<AutoBuildpack>({
     valid: false,
@@ -57,9 +62,12 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
   const context = useContext(Context);
   const fetchAndSetPorterYaml = useCallback(async (fileName: string) => {
     try {
+      setButtonStatus("loading");
       const response = await fetchPorterYamlContent(fileName);
       props.setPorterYaml(atob(response.data));
+      setButtonStatus("success");
     } catch (error) {
+      setButtonStatus(<Error message="Unable to detect porter.yaml" />);
       console.error("Error fetching porter.yaml content:", error);
     }
   }, []);
@@ -203,7 +211,18 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
       );
     }
   };
-
+  const handleInputChange = (newValue: string) => {
+    props.setPorterYamlPath(newValue);
+    setChangedPorterYaml(newValue === "");
+    if (!displayInput && newValue !== "") {
+      setDisplayInput(true);
+    }
+  };
+  const handleUpdatePorterYamlPath = () => {
+    props.setPorterYamlPath(props.porterYamlPath);
+    fetchAndSetPorterYaml(props.porterYamlPath);
+    set;
+  };
   const updateContents = async () => {
     try {
       const res = await fetchContents();
@@ -257,14 +276,17 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
       <Spacer y={1} />
       <span>
         <Text color="helper">
-          We were unable to find porter.yaml in your root directory. We recommend that you
-        </Text>{" "}<a
+          We were unable to find porter.yaml in your root directory. We
+          recommend that you
+        </Text>{" "}
+        <a
           href="https://docs.porter.run/deploying-applications/application-porter-yaml-reference"
           target="_blank"
           rel="noopener noreferrer"
         >
           add porter.yaml
-        </a>{" "}<Text color="helper">
+        </a>{" "}
+        <Text color="helper">
           to your root directory or specify the subdirectory path here.
         </Text>
       </span>
@@ -308,6 +330,31 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
       )}
       {renderContentList() && (
         <>
+          {props.porterYamlPath != "porter.yaml" &&
+            (displayInput || props.porterYamlPath) && (
+              <>
+                <Text color="helper">Porter.yaml path:</Text>
+                <Spacer y={0.5} />
+                <Input
+                  disabled={false}
+                  placeholder="ex: ./"
+                  value={props.porterYamlPath}
+                  width="100%"
+                  onValueChange={handleInputChange}
+                />
+                <Spacer y={0.5} />
+                <Button
+                  onClick={handleUpdatePorterYamlPath}
+                  loadingText="Submitting..."
+                  color={changedPorterYaml ? "#ffffff11" : "#616fee"}
+                  status={buttonStatus}
+                  disabled={changedPorterYaml}
+                >
+                  Update Path
+                </Button>
+                <Spacer y={1} />
+              </>
+            )}
           <AdvancedBuildSettings
             dockerfilePath={props.dockerfilePath}
             setDockerfilePath={props.setDockerfilePath}

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

@@ -113,20 +113,6 @@ const SharedBuildSettings: React.FC<Props> = ({
           />
           <Spacer y={1} />
 
-          {porterYamlPath != "porter.yaml" && porterYamlPath && (
-            <>
-              <Text color="helper">Porter.yaml path:</Text>
-              <Spacer y={0.5} />
-              <Input
-                disabled={true}
-                placeholder="ex: ./"
-                value={porterYamlPath}
-                width="100%"
-                setValue={setPorterYamlPath}
-              />
-              <Spacer y={1} />
-            </>
-          )}
           <DetectContentsList
             actionConfig={actionConfig}
             branch={branch}

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

@@ -360,7 +360,8 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
           git_branch: branch,
           git_repo_id: actionConfig?.git_repo_id,
           build_context: folderPath,
-          builder: buildView === "buildpacks" ? (buildConfig as any)?.builder : "",
+          builder:
+            buildView === "buildpacks" ? (buildConfig as any)?.builder : "",
           buildpacks:
             buildView === "buildpacks"
               ? (buildConfig as any)?.buildpacks?.join(",") ?? ""
@@ -588,6 +589,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
               <Button
                 onClick={() => {
                   if (imageUrl) {
+                    console.log(porterYaml);
                     deployPorterApp();
                   } else {
                     setDeploymentError(undefined);