Implement filter for already selected repos

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

@@ -20,6 +20,7 @@ type Props = {
   setActionConfig: (x: ActionConfigType) => void;
   userId?: number;
   readOnly: boolean;
+  filteredRepos?: string[];
 };
 
 const RepoList: React.FC<Props> = ({
@@ -27,6 +28,7 @@ const RepoList: React.FC<Props> = ({
   setActionConfig,
   userId,
   readOnly,
+  filteredRepos,
 }) => {
   const [repos, setRepos] = useState<RepoType[]>([]);
   const [repoLoading, setRepoLoading] = useState(true);
@@ -123,7 +125,6 @@ const RepoList: React.FC<Props> = ({
       });
   }, []);
 
-
   // clear out actionConfig and SelectedRepository if new search is performed
   useEffect(() => {
     setActionConfig({
@@ -132,15 +133,15 @@ const RepoList: React.FC<Props> = ({
       git_branch: null,
       git_repo_id: 0,
     });
-    setSelectedRepo(null)
-  }, [searchFilter])
+    setSelectedRepo(null);
+  }, [searchFilter]);
 
   const setRepo = (x: RepoType) => {
     let updatedConfig = actionConfig;
     updatedConfig.git_repo = x.FullName;
     updatedConfig.git_repo_id = x.GHRepoID;
     setActionConfig(updatedConfig);
-    setSelectedRepo(x.FullName)
+    setSelectedRepo(x.FullName);
   };
 
   const renderRepoList = () => {
@@ -191,16 +192,20 @@ const RepoList: React.FC<Props> = ({
       return <LoadingWrapper>No matching Github repos found.</LoadingWrapper>;
     } else {
       return results.map((repo: RepoType, i: number) => {
+        const shouldDisable = !!filteredRepos.find(
+          (filteredRepo) => repo.FullName === filteredRepo
+        );
         return (
           <RepoName
             key={i}
             isSelected={repo.FullName === selectedRepo}
             lastItem={i === repos.length - 1}
             onClick={() => setRepo(repo)}
-            readOnly={readOnly}
+            readOnly={readOnly || shouldDisable}
           >
             <img src={github} alt={"github icon"} />
             {repo.FullName}
+            {shouldDisable && ` - This repo was already added`}
           </RepoName>
         );
       });

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

@@ -12,15 +12,15 @@ import styled from "styled-components";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import { useRouting } from "shared/routing";
-
-const porterYamlDocsLink =
-  "https://docs.porter.run/preview-environments/porter-yaml-reference";
+import { Environment } from "../EnvironmentList";
 
 const ConnectNewRepo: React.FC = () => {
   const { currentProject, currentCluster, setCurrentError } = useContext(
     Context
   );
   const [repo, setRepo] = useState(null);
+  const [filteredRepos, setFilteredRepos] = useState<string[]>([]);
+
   const [status, setStatus] = useState(null);
   const { pushFiltered } = useRouting();
 
@@ -36,6 +36,30 @@ const ConnectNewRepo: React.FC = () => {
 
   const { url } = useRouteMatch();
 
+  useEffect(() => {
+    api
+      .listEnvironments<Environment[]>(
+        "<token>",
+        {},
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+        }
+      )
+      .then(({ data }) => {
+        console.log("github account", data);
+
+        if (!Array.isArray(data)) {
+          throw Error("Data is not an array");
+        }
+        const newFilteredRepos = data.map((env) => {
+          return `${env.git_repo_owner}/${env.git_repo_name}`;
+        });
+        setFilteredRepos(newFilteredRepos || []);
+      })
+      .catch(() => {});
+  }, []);
+
   const addRepo = () => {
     let [owner, repoName] = repo.split("/");
     setStatus("loading");
@@ -84,6 +108,7 @@ const ConnectNewRepo: React.FC = () => {
           setRepo(a.git_repo);
         }}
         readOnly={false}
+        filteredRepos={filteredRepos}
       />
       <HelperContainer>
         Note: you will need to add a <CodeBlock>porter.yaml</CodeBlock> file to