diff --git a/src/components/CreateTeam/NotDropdown.tsx b/src/components/CreateTeam/NotDropdown.tsx
new file mode 100644
index 000000000..cac0a35ca
--- /dev/null
+++ b/src/components/CreateTeam/NotDropdown.tsx
@@ -0,0 +1,47 @@
+import ChevronDownIcon from '../../icons/chevron-down.svg';
+
+type NotDropdownProps = {
+ onClick: () => void;
+ selectedCount: number;
+ singularName: string;
+ pluralName: string;
+};
+
+export function NotDropdown(props: NotDropdownProps) {
+ const { onClick, selectedCount, singularName, pluralName } = props;
+
+ const singularOrPlural = selectedCount === 1 ? singularName : pluralName;
+
+ return (
+
+ {selectedCount > 0 && (
+
+
+ {selectedCount} {singularOrPlural} selected
+
+
+ Click to add or change selection
+
+
+ )}
+
+ {selectedCount === 0 && (
+
+
+ Click to select {pluralName}
+
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx
index 0dc617a97..5e278de1e 100644
--- a/src/components/CreateTeam/RoadmapSelector.tsx
+++ b/src/components/CreateTeam/RoadmapSelector.tsx
@@ -6,6 +6,7 @@ import { pageProgressMessage } from '../../stores/page';
import type { TeamDocument } from './CreateTeamForm';
import { UpdateTeamResourceModal } from './UpdateTeamResourceModal';
import { SelectRoadmapModal } from './SelectRoadmapModal';
+import { NotDropdown } from './NotDropdown';
export type TeamResourceConfig = {
resourceId: string;
@@ -144,34 +145,14 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
/>
)}
- {
- setShowSelectRoadmapModal(true);
- }}
- >
- {teamResourceConfig.length > 0 && (
-
-
- {teamResourceConfig.length} roadmaps selected
-
-
- Click to add or change selection
-
-
- )}
-
- {!teamResourceConfig.length && (
-
-
Click to select roadmaps
-
- )}
-
-
+
{
+ setShowSelectRoadmapModal(true);
+ }}
+ selectedCount={teamResourceConfig.length}
+ singularName={'roadmap'}
+ pluralName={'roadmaps'}
/>
diff --git a/src/components/TeamRoadmaps.tsx b/src/components/TeamRoadmaps.tsx
index 880994b3f..7122ada30 100644
--- a/src/components/TeamRoadmaps.tsx
+++ b/src/components/TeamRoadmaps.tsx
@@ -213,6 +213,19 @@ export function TeamRoadmaps() {
return (
{addRoadmapModal}
+
+
+ {resourceConfigs.length} roadmap(s) selected
+
+ {canManageCurrentTeam && (
+
+ )}
+