Implement branch filtering on create preview environment

dashboard/src/components/SearchSelector.tsx

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import React, { useMemo, useState } from "react";
 import styled from "styled-components";
+import Loading from "./Loading";
 
 type Props<T = any> = {
   options: T[];
@@ -15,6 +16,7 @@ type Props<T = any> = {
   className?: string;
   renderOptionIcon?: (option: T) => React.ReactNode;
   placeholder?: string;
+  showLoading?: boolean;
 };
 
 function SearchSelector<O = any>({
@@ -30,6 +32,7 @@ function SearchSelector<O = any>({
   className,
   renderOptionIcon,
   placeholder = "Find or add a tag...", // legacy value to not break existing code
+  showLoading = false,
 }: Props<O>) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [filter, setFilter] = useState("");
@@ -64,6 +67,17 @@ function SearchSelector<O = any>({
     );
   }, [filter, options]);
 
+  if (showLoading) {
+    return (
+      <>
+        {label?.length ? <Label>{label}</Label> : null}
+        <InputWrapper className={className}>
+          <Loading />
+        </InputWrapper>
+      </>
+    );
+  }
+
   return (
     <>
       {label?.length ? <Label>{label}</Label> : null}
@@ -156,6 +170,7 @@ const InputWrapper = styled.div`
   background: #ffffff11;
   position: relative;
   width: 100%;
+  min-height: 37px;
 `;
 
 const Input = styled.input`

dashboard/src/main/home/cluster-dashboard/preview-environments/ConnectNewRepo.tsx

@@ -14,6 +14,7 @@ import DashboardHeader from "../DashboardHeader";
 import PullRequestIcon from "assets/pull_request_icon.svg";
 import CheckboxRow from "components/form-components/CheckboxRow";
 import BranchFilterSelector from "./components/BranchFilterSelector";
+import Helper from "components/form-components/Helper";
 
 const ConnectNewRepo: React.FC = () => {
   const { currentProject, currentCluster, setCurrentError } = useContext(
@@ -42,6 +43,9 @@ const ConnectNewRepo: React.FC = () => {
   const [availableBranches, setAvailableBranches] = useState<string[]>([]);
   const [isLoadingBranches, setIsLoadingBranches] = useState(false);
 
+  // Disable new comments data
+  const [isNewCommentsDisabled, setIsNewCommentsDisabled] = useState(false);
+
   useEffect(() => {
     api
       .listEnvironments<Environment[]>(
@@ -67,9 +71,13 @@ const ConnectNewRepo: React.FC = () => {
   }, []);
 
   useEffect(() => {
+    if (!actionConfig.git_repo || !actionConfig.git_repo_id) {
+      return;
+    }
+
     let isSubscribed = true;
-    const branchName = actionConfig.git_branch.split("/")[1];
-    const branchOwner = actionConfig.git_branch.split("/")[0];
+    const repoName = actionConfig.git_repo.split("/")[1];
+    const repoOwner = actionConfig.git_repo.split("/")[0];
     setIsLoadingBranches(true);
     api
       .getBranches<string[]>(
@@ -78,8 +86,8 @@ const ConnectNewRepo: React.FC = () => {
         {
           project_id: currentProject.id,
           kind: "github",
-          name: branchName,
-          owner: branchOwner,
+          name: repoName,
+          owner: repoOwner,
           git_repo_id: actionConfig.git_repo_id,
         }
       )
@@ -108,6 +116,8 @@ const ConnectNewRepo: React.FC = () => {
         {
           name: `preview`,
           mode: enableAutomaticDeployments ? "auto" : "manual",
+          disable_new_comments: isNewCommentsDisabled,
+          git_repo_branches: selectedBranches,
         },
         {
           project_id: currentProject.id,
@@ -165,25 +175,61 @@ const ConnectNewRepo: React.FC = () => {
         />
       </HelperContainer>
 
-      <FlexWrap>
+      <Heading>Automatic pull request deployments</Heading>
+      <Helper>
+        If you enable this option, the new pull requests will be automatically
+        deployed.
+      </Helper>
+      <CheckboxWrapper>
         <CheckboxRow
-          label="Enable automatic deployments"
+          label="Enable automatic deploys"
           checked={enableAutomaticDeployments}
-          toggle={() => setEnableAutomaticDeployments((prev) => !prev)}
+          toggle={() =>
+            setEnableAutomaticDeployments(!enableAutomaticDeployments)
+          }
+          wrapperStyles={{
+            disableMargin: true,
+          }}
+        />
+        <DocsHelper
+          disableMargin
+          tooltipText="Automatically create a Preview Environment for each new pull request in the repository. By default, preview environments must be manually created per-PR."
+        />
+      </CheckboxWrapper>
+
+      <Heading>Disable new comments for new deployments</Heading>
+      <Helper>
+        When enabled new comments will not be created for new deployments.
+        Instead the last comment will be updated.
+      </Helper>
+      <CheckboxWrapper>
+        <CheckboxRow
+          label="Disable new comments for deployments"
+          checked={isNewCommentsDisabled}
+          toggle={() => setIsNewCommentsDisabled(!isNewCommentsDisabled)}
+          wrapperStyles={{
+            disableMargin: true,
+          }}
         />
-        <Div>
-          <DocsHelper
-            disableMargin
-            tooltipText="Automatically create a Preview Environment for each new pull request in the repository. By default, preview environments must be manually created per-PR."
-            placement="top-start"
-          />
-        </Div>
-      </FlexWrap>
+        <DocsHelper
+          disableMargin
+          tooltipText="When checked, comments for every new deployment are disabled. Instead, the most recent comment is updated each time."
+          placement="top-end"
+        />
+      </CheckboxWrapper>
 
+      <Heading>Select allowed branches</Heading>
+      <Helper>
+        If the pull request has a base branch included in this list, it will be
+        allowed to be deployed.
+        <br />
+        (Leave empty to allow all branches)
+      </Helper>
       <BranchFilterSelector
         onChange={setSelectedBranches}
         options={availableBranches}
         value={selectedBranches}
+        showLoading={isLoadingBranches}
       />
 
       <ActionContainer>
@@ -317,3 +363,9 @@ const HeaderSection = styled.div`
     margin-right: 7px;
   }
 `;
+
+const CheckboxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+`;

dashboard/src/main/home/cluster-dashboard/preview-environments/components/BranchFilterSelector.tsx

@@ -1,14 +1,17 @@
 import SearchSelector from "components/SearchSelector";
 import React, { useMemo } from "react";
+import styled from "styled-components";
 
 const BranchFilterSelector = ({
   value,
   options,
   onChange,
+  showLoading,
 }: {
   value: string[];
   options: string[];
   onChange: (value: string[]) => void;
+  showLoading?: boolean;
 }) => {
   const filteredBranches = useMemo(() => {
     if (!options.length) {
@@ -36,13 +39,18 @@ const BranchFilterSelector = ({
     onChange(newSelectedBranches);
   };
 
+  const placeholder = options?.length
+    ? "Find or add a branch..."
+    : "No branches found for current repository.";
+
   return (
     <>
       <SearchSelector
         options={filteredBranches}
         onSelect={(newBranch) => handleAddBranch(newBranch)}
         getOptionLabel={(option) => option}
-        placeholder="Find or add a branch..."
+        placeholder={placeholder}
+        showLoading={showLoading}
       />
       {/* List selected branches  */}
       <ul>

dashboard/src/main/home/cluster-dashboard/preview-environments/environments/EnvironmentSettings.tsx

@@ -147,6 +147,8 @@ const EnvironmentSettings = ({ environmentId }: { environmentId: string }) => {
             <Helper>
               If the pull request has a base branch included in this list, it
               will be allowed to be deployed.
+              <br />
+              (Leave empty to allow all branches)
             </Helper>
             <BranchFilterSelector
               value={selectedBranches}

dashboard/src/shared/api.tsx

@@ -140,6 +140,8 @@ const createEnvironment = baseApi<
   {
     name: string;
     mode: "auto" | "manual";
+    disable_new_comments: boolean;
+    git_repo_branches: string[];
   },
   {
     project_id: number;