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} +

+
+ )} + + {singularName} +
+ ); +} 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

-
- )} - - {'roadmap'} + { + 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 && ( + + )} +
{changingRoadmapId && (