filter previews from app instances when getting base (#4680)

dashboard/package-lock.json

@@ -170,8 +170,8 @@
         "webpack-dev-server": "^3.11.0"
       },
       "engines": {
-        "node": ">=16 <17",
-        "npm": "9.7.2"
+        "node": ">=20 <21",
+        "npm": "10.5.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/ConfigurableAppList.tsx

@@ -10,6 +10,7 @@ import Image from "components/porter/Image";
 import SearchBar from "components/porter/SearchBar";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
+import { useDeploymentTargetList } from "lib/hooks/useDeploymentTarget";
 import { useAppInstances } from "lib/hooks/useLatestAppRevisions";
 import { useTemplateEnvs } from "lib/hooks/useTemplateEnvs";
 
@@ -29,23 +30,28 @@ export const ConfigurableAppList: React.FC = () => {
     projectId: currentProject?.id ?? 0,
     clusterId: currentCluster?.id ?? 0,
   });
+  const { deploymentTargetList } = useDeploymentTargetList({ preview: false });
 
   const { environments, status } = useTemplateEnvs();
 
-  const envsWithExistingAppInstance = useMemo(() => {
-    return environments
-      .map((env) => {
-        const existingAppInstance = appInstances.find(
-          (inst) => inst.name === env.name
-        );
-
-        return {
-          ...env,
-          existingAppInstance,
-        };
-      })
-      .filter((ev) => ev.name.includes(searchValue));
-  }, [environments, appInstances, searchValue]);
+  const filteredEnvs = useMemo(() => {
+    const activeAppInstances = appInstances.filter((ai) =>
+      deploymentTargetList.some((dt) => dt.id === ai.deployment_target.id)
+    );
+
+    const withBaseAppInstance = environments.map((env) => {
+      const existingAppInstance = activeAppInstances.find(
+        (ai) => ai.name === env.name
+      );
+
+      return {
+        ...env,
+        existingAppInstance,
+      };
+    });
+
+    return withBaseAppInstance;
+  }, [environments, deploymentTargetList, searchValue]);
 
   if (status === "loading") {
     return <Loading offset="-150px" />;
@@ -101,7 +107,7 @@ export const ConfigurableAppList: React.FC = () => {
       </Container>
       <Spacer y={1} />
       <List>
-        {envsWithExistingAppInstance.map((ev) => (
+        {filteredEnvs.map((ev) => (
           <ConfigurableAppRow
             key={ev.name}
             setEditingApp={() => {