diff --git a/.server-changes/env-selector-dropdown-auto-revalidate.md b/.server-changes/env-selector-dropdown-auto-revalidate.md new file mode 100644 index 0000000000..3210d8a149 --- /dev/null +++ b/.server-changes/env-selector-dropdown-auto-revalidate.md @@ -0,0 +1,6 @@ +--- +area: webapp +type: improvement +--- + +The environment and branch selector dropdown will automatically revalidate (poll) while it's open so that new branches show up. diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx index 58c3aae5a0..862ea02dea 100644 --- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx +++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx @@ -2,7 +2,7 @@ import { ChevronRightIcon, Cog8ToothIcon } from "@heroicons/react/20/solid"; import { DEFAULT_DEV_BRANCH } from "@trigger.dev/core/v3/utils/gitBranch"; import { isBranchableEnvironment } from "~/utils/branchableEnvironment"; import { DropdownIcon } from "~/assets/icons/DropdownIcon"; -import { useNavigation } from "@remix-run/react"; +import { useNavigation, useRevalidator } from "@remix-run/react"; import { useEffect, useRef, useState } from "react"; import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons"; import { useEnvironment } from "~/hooks/useEnvironment"; @@ -52,11 +52,20 @@ export function EnvironmentSelector({ const [isMenuOpen, setIsMenuOpen] = useState(false); const navigation = useNavigation(); const { urlForEnvironment } = useEnvironmentSwitcher(); + const revalidator = useRevalidator(); useEffect(() => { setIsMenuOpen(false); }, [navigation.location?.pathname]); + // Fetch immediately on open so the list is fresh right away + useEffect(() => { + if (isMenuOpen && revalidator.state !== "loading") { + revalidator.revalidate(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isMenuOpen]); + const hasStaging = project.environments.some((env) => env.type === "STAGING"); return ( setIsMenuOpen(open)} open={isMenuOpen}>