touchups to build settings to make it look closer to other elements (#2998)

dashboard/src/components/SearchBar.tsx

@@ -25,6 +25,7 @@ const SearchBar: React.FC<Props> = ({
           value={searchInput}
           onChange={(e: any) => {
             setSearchInput(e.target.value);
+            setSearchFilter(e.target.value);
           }}
           onKeyPress={({ key }) => {
             if (key === "Enter") {
@@ -73,7 +74,7 @@ const ButtonWrapper = styled.div`
     props.disabled ? "#aaaabbee" : "#616FEEcc"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-      props.disabled ? "" : "#505edddd"};
+    props.disabled ? "" : "#505edddd"};
   }
   height: 40px;
   display: flex;

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

@@ -8,6 +8,7 @@ import BranchList from "./BranchList";
 import ContentsList from "./ContentsList";
 import ActionDetails from "./ActionDetails";
 import InputRow from "../form-components/InputRow";
+import Input from "components/porter/Input";
 
 type Props = {
   actionConfig: ActionConfigType | null;
@@ -50,12 +51,14 @@ const ActionConfEditorStack: React.FC<Props> = (props) => {
   }
   return (
     <>
-      <InputRow
+      <Input
         disabled={true}
-        label="Branch"
+        label="Specify your branch."
         type="text"
         width="100%"
         value={props?.branch}
+        setValue={() => { }}
+        placeholder=""
       />
       <BackButton
         width="145px"

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

@@ -5,6 +5,7 @@ import { ActionConfigType } from "shared/types";
 
 import RepoList from "./RepoList";
 import InputRow from "../form-components/InputRow";
+import Input from "components/porter/Input";
 
 type Props = {
   actionConfig: ActionConfigType | null;
@@ -44,12 +45,13 @@ const ActionConfEditorStack: React.FC<Props> = ({
   } else {
     return (
       <>
-        <InputRow
+        <Input
           disabled={true}
-          label="Git repository"
-          type="text"
+          label="Specify your Git repository."
           width="100%"
           value={actionConfig?.git_repo}
+          setValue={() => { }}
+          placeholder=""
         />
         <BackButton
           width="135px"

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

@@ -37,7 +37,7 @@ const BranchList: React.FC<Props> = ({
   useEffect(() => {
     // Get branches
     if (!actionConfig) {
-      return () => {};
+      return () => { };
     }
 
     if (actionConfig?.kind === "github") {
@@ -99,14 +99,19 @@ const BranchList: React.FC<Props> = ({
       return <LoadingWrapper>Error loading branches</LoadingWrapper>;
     }
 
-    let results =
-      searchFilter != null
-        ? branches.filter((branch) => {
-            return branch
-              .toLowerCase()
-              .includes(searchFilter.toLowerCase() || "");
-          })
-        : sortBranches(branches).slice(0, 10);
+    let results = searchFilter != null
+      ? branches
+        .filter((branch) => {
+          return branch.toLowerCase().includes(
+            searchFilter.toLowerCase()
+          );
+        })
+        .sort((a: string, b: string) => {
+          const aIndex = a.toLowerCase().indexOf(searchFilter.toLowerCase());
+          const bIndex = b.toLowerCase().indexOf(searchFilter.toLowerCase());
+          return aIndex - bIndex;
+        })
+      : sortBranches(branches).slice(0, 10);
 
     if (results.length == 0) {
       return <LoadingWrapper>No matching Branches found.</LoadingWrapper>;

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

@@ -22,15 +22,15 @@ type Props = {
 
 type Provider =
   | {
-      provider: "github";
-      name: string;
-      installation_id: number;
-    }
+    provider: "github";
+    name: string;
+    installation_id: number;
+  }
   | {
-      provider: "gitlab";
-      instance_url: string;
-      integration_id: number;
-    };
+    provider: "gitlab";
+    instance_url: string;
+    integration_id: number;
+  };
 
 // Sort provider by name if it's github or instance url if it's gitlab
 const sortProviders = (providers: Provider[]) => {
@@ -110,7 +110,7 @@ const RepoList: React.FC<Props> = ({
 
       const repos = res.data.map((repo) => ({ ...repo, GHRepoID: repoId }));
       return repos;
-    } catch (error) {}
+    } catch (error) { }
   };
 
   const loadGitlabRepos = async (integrationId: number) => {
@@ -126,7 +126,7 @@ const RepoList: React.FC<Props> = ({
         GitIntegrationId: integrationId,
       }));
       return repos;
-    } catch (error) {}
+    } catch (error) { }
   };
 
   const loadRepos = (provider: any) => {
@@ -237,14 +237,19 @@ const RepoList: React.FC<Props> = ({
     }
 
     // show 10 most recently used repos if user hasn't searched anything yet
-    let results =
-      searchFilter != null
-        ? repos.filter((repo: RepoType) => {
-            return repo.FullName.toLowerCase().includes(
-              searchFilter.toLowerCase() || ""
-            );
-          })
-        : repos.slice(0, 10);
+    let results = searchFilter != null
+      ? repos
+        .filter((repo: RepoType) => {
+          return repo.FullName.toLowerCase().includes(
+            searchFilter.toLowerCase()
+          );
+        })
+        .sort((a: RepoType, b: RepoType) => {
+          const aIndex = a.FullName.toLowerCase().indexOf(searchFilter.toLowerCase());
+          const bIndex = b.FullName.toLowerCase().indexOf(searchFilter.toLowerCase());
+          return aIndex - bIndex;
+        })
+      : repos.slice(0, 10);
 
     if (results.length == 0) {
       return <LoadingWrapper>No matching Github repos found.</LoadingWrapper>;
@@ -353,7 +358,7 @@ const ConnectToGithubButton = styled.a`
     props.disabled ? "#aaaabbee" : "#2E3338"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-      props.disabled ? "" : "#353a3e"};
+    props.disabled ? "" : "#353a3e"};
   }
 
   > i {

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

@@ -226,13 +226,16 @@ const BuildSettingsTabStack: React.FC<Props> = ({
   return (
     <>
       <Text size={16}>Build settings</Text>
-      <InputRow
+      <Spacer y={0.5} />
+      <Input
         disabled={true}
-        label="Git repository"
-        type="text"
+        label="Specify your Git repository."
         width="100%"
         value={actionConfig?.git_repo}
+        setValue={() => { }}
+        placeholder=""
       />
+      <Spacer y={0.5} />
       {/* <DarkMatter antiHeight="-1px" /> */}
       {actionConfig.git_repo && (
         <>
@@ -253,7 +256,6 @@ const BuildSettingsTabStack: React.FC<Props> = ({
           />
         </>
       )}
-      <Spacer y={0.3} />
       {actionConfig.git_repo && branch && (
         <>
           <Spacer y={1} />

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

@@ -52,7 +52,6 @@ const SharedBuildSettings: React.FC<Props> = ({
     <>
       <Text size={16}>Build settings</Text>
       <Spacer y={0.5} />
-      <Text color="helper">Select your Github repository.</Text>
       <ActionConfEditorStack
         actionConfig={actionConfig}
         setActionConfig={(actionConfig: ActionConfigType) => {
@@ -72,7 +71,6 @@ const SharedBuildSettings: React.FC<Props> = ({
       {actionConfig.git_repo && (
         <>
           <Spacer y={1} />
-          <Text color="helper">Select your branch.</Text>
           <ActionConfBranchSelector
             actionConfig={actionConfig}
             branch={branch}

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

@@ -83,15 +83,15 @@ interface GithubAppAccessData {
 }
 type Provider =
   | {
-      provider: "github";
-      name: string;
-      installation_id: number;
-    }
+    provider: "github";
+    name: string;
+    installation_id: number;
+  }
   | {
-      provider: "gitlab";
-      instance_url: string;
-      integration_id: number;
-    };
+    provider: "gitlab";
+    instance_url: string;
+    integration_id: number;
+  };
 const NewAppFlow: React.FC<Props> = ({ ...props }) => {
   const [templateName, setTemplateName] = useState("");
 
@@ -139,7 +139,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
     setAccessData(data);
     setShowGithubConnectModal(
       !hasClickedDoNotConnect &&
-        (accessError || !data.accounts || data.accounts?.length === 0)
+      (accessError || !data.accounts || data.accounts?.length === 0)
     );
   };
 
@@ -147,7 +147,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
     setAccessError(error);
     setShowGithubConnectModal(
       !hasClickedDoNotConnect &&
-        (error || !accessData.accounts || accessData.accounts?.length === 0)
+      (error || !accessData.accounts || accessData.accounts?.length === 0)
     );
   };
   const validatePorterYaml = (yamlString: string) => {
@@ -182,9 +182,8 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       ) {
         setDetected({
           detected: true,
-          message: `Detected ${
-            Object.keys(porterYamlToJson.apps).length
-          } apps from porter.yaml`,
+          message: `Detected ${Object.keys(porterYamlToJson.apps).length
+            } apps from porter.yaml`,
         });
       } else {
         setDetected({
@@ -300,11 +299,11 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       const base64Encoded = btoa(yamlString);
       const imageInfo = imageUrl
         ? {
-            image_info: {
-              repository: imageUrl,
-              tag: imageTag,
-            },
-          }
+          image_info: {
+            repository: imageUrl,
+            tag: imageTag,
+          },
+        }
         : {};
 
       await api.createPorterApp(
@@ -483,7 +482,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   Application services{" "}
                   {detected && formState.serviceList.length > 0 && (
                     <AppearingDiv>
-                      <Text color={detected.detected ? "#4797ff" : "#fcba03"}>
+                      <Text color={detected.detected ? "#8590ff" : "#fcba03"}>
                         {detected.detected ? (
                           <I className="material-icons">check</I>
                         ) : (
@@ -699,7 +698,7 @@ const ConnectToGithubButton = styled.a`
     props.disabled ? "#aaaabbee" : "#2E3338"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-      props.disabled ? "" : "#353a3e"};
+    props.disabled ? "" : "#353a3e"};
   }
 
   > i {

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

@@ -170,11 +170,11 @@ const WebTabs: React.FC<Props> = ({
         currentTab={currentTab}
         setCurrentTab={(value: string) => {
           if (value === 'main') {
-            setHeight(287);
+            setHeight(288);
           } else if (value === 'resources') {
             setHeight(713);
           } else if (value === 'advanced') {
-            setHeight(158);
+            setHeight(159);
           }
           setCurrentTab(value);
         }}

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

@@ -133,7 +133,7 @@ const WorkerTabs: React.FC<Props> = ({
         currentTab={currentTab}
         setCurrentTab={(value: string) => {
           if (value === 'main') {
-            setHeight(158);
+            setHeight(159);
           } else if (value === 'resources') {
             setHeight(713);
           }