finish up API connection and minor cleanup

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

@@ -1,12 +1,17 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useContext } from "react";
 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;
@@ -26,11 +31,6 @@ type Props = {
   selectedRegistry: any;
 };
 
-type StateType = {
-  loading: boolean;
-  error: boolean;
-};
-
 const defaultActionConfig: ActionConfigType = {
   git_repo: "",
   image_repo_uri: "",
@@ -38,16 +38,50 @@ const defaultActionConfig: ActionConfigType = {
   git_repo_id: 0,
 };
 
+interface AutoBuildpack {
+  name?: string;
+  valid: boolean;
+}
+
 const ActionConfEditor: React.FC<Props> = (props) => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(false);
+  const [buildpackLoading, setBuildpackLoading] = useState(false);
+  const [autoBuildpack, setAutoBuildpack] = useState<AutoBuildpack>({
+    valid: false,
+  });
+  const { currentProject } = useContext(Context);
 
-  const { actionConfig, setBranch, setActionConfig } = props;
+  const { actionConfig, setBranch, setActionConfig, branch } = props;
 
-  // set values for faster testing (SHOULD BE REMOVED)
-  actionConfig.git_repo = "igalakhov/flask-porter-test";
-  actionConfig.git_repo_id = 4;
-  let branch = "main";
+  useEffect(() => {
+    if (
+      !actionConfig.git_repo ||
+      !branch ||
+      props.dockerfilePath ||
+      props.folderPath
+    ) {
+      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 (
@@ -81,18 +115,27 @@ const ActionConfEditor: React.FC<Props> = (props) => {
       </>
     );
   } else if (!props.dockerfilePath && !props.folderPath) {
+    if (buildpackLoading) {
+      return <Loading />;
+    }
+
     return (
       <>
-        <AutoBuildpackInfo>
-          <b>Python</b> buildpack was detected automatically
-          <a
-            href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
-            target="_blank"
-          >
-            <i className="material-icons">help_outline</i>
-          </a>
-          . Alternatively, select an application folder below:
-        </AutoBuildpackInfo>
+        {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}
@@ -171,14 +214,6 @@ const ActionConfEditor: React.FC<Props> = (props) => {
 
 export default ActionConfEditor;
 
-const AutoBuildpackInfo = styled.p`
-  font-size: 13;
-  margin-top: 0;
-  i {
-    font-size: 10px;
-  }
-`;
-
 const Br = styled.div`
   width: 100%;
   height: 8px;
@@ -242,3 +277,19 @@ 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/RepoList.tsx

@@ -102,13 +102,9 @@ const RepoList: React.FC<Props> = ({
   }, []);
 
   const setRepo = (x: RepoType) => {
-    console.log(x);
-    console.log(repos);
     let updatedConfig = actionConfig;
     updatedConfig.git_repo = x.FullName;
     updatedConfig.git_repo_id = x.GHRepoID;
-    console.log(updatedConfig.git_repo);
-    console.log(updatedConfig.git_repo_id);
     setActionConfig(updatedConfig);
   };
 

dashboard/src/shared/api.tsx

@@ -290,6 +290,20 @@ const destroyCluster = baseApi<
   return `/api/projects/${pathParams.project_id}/infra/${pathParams.infra_id}/eks/destroy`;
 });
 
+const detectBuildpack = baseApi<
+  {},
+  {
+    project_id: number;
+    git_repo_id: number;
+    kind: string;
+    owner: string;
+    name: string;
+    branch: string;
+  }
+>("GET", (pathParams) => {
+  return `/api/projects/${pathParams.project_id}/gitrepos/${pathParams.git_repo_id}/repos/${pathParams.kind}/${pathParams.owner}/${pathParams.name}/${pathParams.branch}/buildpack/detect`;
+});
+
 const getBranchContents = baseApi<
   {
     dir: string;
@@ -837,6 +851,7 @@ export default {
   destroyEKS,
   destroyGKE,
   destroyDOKS,
+  detectBuildpack,
   getBranchContents,
   getBranches,
   getCapabilities,