diff --git a/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx b/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx index 72c4f42579..572055f8b9 100644 --- a/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx +++ b/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx @@ -105,11 +105,20 @@ export const SideNavEnvironmentSelector: FC = ( type EnvironmentDropdownMenuProps = Pick< SideNavEnvironmentSelectorProps, - "environments" | "activeEnvironment" | "onSelect" ->; + "activeEnvironment" | "onSelect" +> & { + environments: Environment[]; +}; const EnvironmentDropdownMenu: FC = (props) => { - const { environments = [], activeEnvironment, onSelect } = props; + const { environments, activeEnvironment, onSelect } = props; + + const nonPersonalEnvironments = environments.filter( + (environment) => environment.kind !== "dev", + ); + const personalEnvironment = environments.find( + (environment) => environment.kind === "dev", + ); return ( @@ -117,30 +126,29 @@ const EnvironmentDropdownMenu: FC = (props) => { - {/* - TODO: Add this line when Dev envs are supported - Regular Environments - */} - {environments.map((environment) => - environment.kind !== "dev" ? ( + Regular Environments + {nonPersonalEnvironments.map((environment) => ( + + ))} + + {personalEnvironment ? ( + <> + Personal Environment - ) : ( - <> - Personal Environment - - - ), - )} + + ) : undefined} );