refactor buidpack detection to work for any directory

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

@@ -3,15 +3,10 @@ import styled from "styled-components";
 
 import { ActionConfigType } from "shared/types";
 
-import api from "shared/api";
-import { Context } from "shared/Context";
-
 import RepoList from "./RepoList";
 import BranchList from "./BranchList";
 import ContentsList from "./ContentsList";
 import ActionDetails from "./ActionDetails";
-import Loading from "../Loading";
-import { act } from "react-dom/test-utils";
 
 type Props = {
   actionConfig: ActionConfigType | null;
@@ -38,54 +33,9 @@ const defaultActionConfig: ActionConfigType = {
   git_repo_id: 0,
 };
 
-interface AutoBuildpack {
-  name?: string;
-  valid: boolean;
-}
-
 const ActionConfEditor: React.FC<Props> = (props) => {
-  const [buildpackLoading, setBuildpackLoading] = useState(false);
-  const [autoBuildpack, setAutoBuildpack] = useState<AutoBuildpack>({
-    valid: false,
-  });
-  const { currentProject } = useContext(Context);
-
   const { actionConfig, setBranch, setActionConfig, branch } = props;
 
-  useEffect(() => {
-    if (
-      !actionConfig.git_repo ||
-      !branch ||
-      props.dockerfilePath ||
-      props.folderPath
-    ) {
-      setAutoBuildpack({
-        valid: false,
-      });
-      return;
-    }
-    api
-      .detectBuildpack(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          git_repo_id: actionConfig.git_repo_id,
-          kind: "github",
-          owner: actionConfig.git_repo.split("/")[0],
-          name: actionConfig.git_repo.split("/")[1],
-          branch: branch,
-        }
-      )
-      .then(({ data }) => {
-        setAutoBuildpack(data);
-        setBuildpackLoading(false);
-      })
-      .catch((_) => {
-        setBuildpackLoading(false);
-      });
-  }, [actionConfig.git_repo, branch, props.dockerfilePath, props.folderPath]);
-
   if (!actionConfig.git_repo) {
     return (
       <ExpandedWrapper>
@@ -118,37 +68,16 @@ const ActionConfEditor: React.FC<Props> = (props) => {
       </>
     );
   } else if (!props.dockerfilePath && !props.folderPath) {
-    if (buildpackLoading) {
-      return <Loading />;
-    }
-
     return (
       <>
-        {autoBuildpack && autoBuildpack.valid && (
-          <Banner>
-            <i className="material-icons">info</i>{" "}
-            <p>
-              <b>{autoBuildpack.name}</b> buildpack was{" "}
-              <a
-                href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
-                target="_blank"
-              >
-                detected automatically
-              </a>
-              . Alternatively, select an application folder below:
-            </p>
-          </Banner>
-        )}
-        <ExpandedWrapperAlt>
-          <ContentsList
-            actionConfig={actionConfig}
-            branch={branch}
-            setActionConfig={setActionConfig}
-            setDockerfilePath={(x: string) => props.setDockerfilePath(x)}
-            setProcfilePath={(x: string) => props.setProcfilePath(x)}
-            setFolderPath={(x: string) => props.setFolderPath(x)}
-          />
-        </ExpandedWrapperAlt>
+        <ContentsList
+          actionConfig={actionConfig}
+          branch={branch}
+          setActionConfig={setActionConfig}
+          setDockerfilePath={(x: string) => props.setDockerfilePath(x)}
+          setProcfilePath={(x: string) => props.setProcfilePath(x)}
+          setFolderPath={(x: string) => props.setFolderPath(x)}
+        />
         <Br />
         <BackButton
           width="145px"
@@ -171,18 +100,16 @@ const ActionConfEditor: React.FC<Props> = (props) => {
   ) {
     return (
       <>
-        <ExpandedWrapperAlt>
-          <ContentsList
-            actionConfig={actionConfig}
-            branch={branch}
-            setActionConfig={setActionConfig}
-            procfilePath={props.procfilePath}
-            setDockerfilePath={(x: string) => props.setDockerfilePath(x)}
-            setProcfilePath={(x: string) => props.setProcfilePath(x)}
-            setProcfileProcess={(x: string) => props.setProcfileProcess(x)}
-            setFolderPath={(x: string) => props.setFolderPath(x)}
-          />
-        </ExpandedWrapperAlt>
+        <ContentsList
+          actionConfig={actionConfig}
+          branch={branch}
+          setActionConfig={setActionConfig}
+          procfilePath={props.procfilePath}
+          setDockerfilePath={(x: string) => props.setDockerfilePath(x)}
+          setProcfilePath={(x: string) => props.setProcfilePath(x)}
+          setProcfileProcess={(x: string) => props.setProcfileProcess(x)}
+          setFolderPath={(x: string) => props.setFolderPath(x)}
+        />
         <Br />
         <BackButton
           width="145px"
@@ -280,19 +207,3 @@ const BackButton = styled.div`
     margin-right: 6px;
   }
 `;
-
-const Banner = styled.div`
-  height: 40px;
-  width: 100%;
-  margin: 5px 0 10px;
-  font-size: 13px;
-  display: flex;
-  border-radius: 5px;
-  padding-left: 15px;
-  align-items: center;
-  background: #ffffff11;
-  > i {
-    margin-right: 10px;
-    font-size: 18px;
-  }
-`;

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

@@ -11,6 +11,11 @@ import { FileType, ActionConfigType } from "../../shared/types";
 
 import Loading from "../Loading";
 
+interface AutoBuildpack {
+  name?: string;
+  valid: boolean;
+}
+
 type PropsType = {
   actionConfig: ActionConfigType | null;
   branch: string;
@@ -29,6 +34,7 @@ type StateType = {
   currentDir: string;
   dockerfiles: string[];
   processes: Record<string, string>;
+  autoBuildpack: AutoBuildpack;
 };
 
 export default class ContentsList extends Component<PropsType, StateType> {
@@ -39,6 +45,10 @@ export default class ContentsList extends Component<PropsType, StateType> {
     currentDir: "",
     dockerfiles: [] as string[],
     processes: null as Record<string, string>,
+    autoBuildpack: {
+      valid: false,
+      name: "",
+    },
   };
 
   componentDidMount() {
@@ -90,6 +100,35 @@ export default class ContentsList extends Component<PropsType, StateType> {
         this.setState({ loading: false, error: true });
       });
 
+    api
+      .detectBuildpack(
+        "<token>",
+        {
+          dir: this.state.currentDir || ".",
+        },
+        {
+          project_id: currentProject.id,
+          git_repo_id: actionConfig.git_repo_id,
+          kind: "github",
+          owner: actionConfig.git_repo.split("/")[0],
+          name: actionConfig.git_repo.split("/")[1],
+          branch: branch,
+        }
+      )
+      .then(({ data }) => {
+        this.setState({
+          autoBuildpack: data,
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+        this.setState({
+          autoBuildpack: {
+            valid: false,
+          },
+        });
+      });
+
     let ppath =
       this.props.procfilePath ||
       `${this.state.currentDir ? this.state.currentDir : "."}/Procfile`;
@@ -326,19 +365,36 @@ export default class ContentsList extends Component<PropsType, StateType> {
   render() {
     return (
       <>
-        {this.renderJumpToParent()}
-        {this.renderContentList()}
-        <FlexWrapper>
-          <UseButton onClick={this.handleContinue}>Continue</UseButton>
-          <StatusWrapper
-            href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
-            target="_blank"
-          >
-            <i className="material-icons">help_outline</i>
-            <div>Auto build requirements</div>
-          </StatusWrapper>
-        </FlexWrapper>
-        {this.renderOverlay()}
+        {this.state.autoBuildpack && this.state.autoBuildpack.valid && (
+          <Banner>
+            <i className="material-icons">info</i>{" "}
+            <p>
+              <b>{this.state.autoBuildpack.name}</b> buildpack was{" "}
+              <a
+                href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
+                target="_blank"
+              >
+                detected automatically
+              </a>
+              . Alternatively, select an application folder below:
+            </p>
+          </Banner>
+        )}
+        <ExpandedWrapperAlt>
+          {this.renderJumpToParent()}
+          {this.renderContentList()}
+          <FlexWrapper>
+            <UseButton onClick={this.handleContinue}>Continue</UseButton>
+            <StatusWrapper
+              href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
+              target="_blank"
+            >
+              <i className="material-icons">help_outline</i>
+              <div>Auto build requirements</div>
+            </StatusWrapper>
+          </FlexWrapper>
+          {this.renderOverlay()}
+        </ExpandedWrapperAlt>
       </>
     );
   }
@@ -564,3 +620,30 @@ const LoadingWrapper = styled.div`
   justify-content: center;
   color: #ffffff44;
 `;
+
+const ExpandedWrapper = styled.div`
+  margin-top: 10px;
+  width: 100%;
+  border-radius: 3px;
+  border: 1px solid #ffffff44;
+  max-height: 275px;
+  overflow-y: auto;
+`;
+
+const ExpandedWrapperAlt = styled(ExpandedWrapper)``;
+
+const Banner = styled.div`
+  height: 40px;
+  width: 100%;
+  margin: 5px 0 10px;
+  font-size: 13px;
+  display: flex;
+  border-radius: 5px;
+  padding-left: 15px;
+  align-items: center;
+  background: #ffffff11;
+  > i {
+    margin-right: 10px;
+    font-size: 18px;
+  }
+`;

server/api/git_repo_handler.go

@@ -81,6 +81,7 @@ func (app *App) HandleListRepos(w http.ResponseWriter, r *http.Request) {
 		ListOptions: github.ListOptions{
 			PerPage: 100,
 		},
+		Sort: "updated",
 	}
 
 	allRepos, resp, err := client.Repositories.List(context.Background(), "", opt)
@@ -91,7 +92,7 @@ func (app *App) HandleListRepos(w http.ResponseWriter, r *http.Request) {
 	}
 
 	// make workers to get pages concurrently
-	const WCOUNT = 5
+	const WCOUNT = 1
 	numPages := resp.LastPage + 1
 	var workerErr error
 	var mu sync.Mutex
@@ -106,6 +107,7 @@ func (app *App) HandleListRepos(w http.ResponseWriter, r *http.Request) {
 					Page:    cp,
 					PerPage: 100,
 				},
+				Sort: "updated",
 			}
 
 			repos, _, err := client.Repositories.List(context.Background(), "", cur_opt)
@@ -258,6 +260,7 @@ func (app *App) HandleDetectBuildpack(w http.ResponseWriter, r *http.Request) {
 
 	for i := range directoryContents {
 		name := *directoryContents[i].Path
+		fmt.Println(name)
 		bname, ok := BREQS[name]
 		if ok {
 			matches++