From 0addc56123818aba26e921dcd9367bc940ac743f Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 25 Jul 2023 18:24:10 +0100 Subject: [PATCH] Update the select roadmaps modal --- src/components/CommandMenu/CommandMenu.tsx | 1 + src/components/CreateTeam/RoadmapSelector.tsx | 69 +++++++------- .../CreateTeam/SelectRoadmapModal.tsx | 94 +++++++++++++------ .../CreateTeam/SelectRoadmapModalItem.tsx | 34 +++++++ src/components/CreateTeam/Step2.tsx | 5 +- src/pages/pages.json.ts | 3 + 6 files changed, 141 insertions(+), 65 deletions(-) create mode 100644 src/components/CreateTeam/SelectRoadmapModalItem.tsx diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx index 522134de8..f380ad8bf 100644 --- a/src/components/CommandMenu/CommandMenu.tsx +++ b/src/components/CommandMenu/CommandMenu.tsx @@ -18,6 +18,7 @@ export type PageType = { group: string; icon?: string; isProtected?: boolean; + metadata?: Record; }; const defaultPages: PageType[] = [ diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx index 96860b062..5eeb2a0d1 100644 --- a/src/components/CreateTeam/RoadmapSelector.tsx +++ b/src/components/CreateTeam/RoadmapSelector.tsx @@ -1,8 +1,7 @@ import { useEffect, useState } from 'preact/hooks'; import { httpGet, httpPut } from '../../lib/http'; import type { PageType } from '../CommandMenu/CommandMenu'; -import PlusIcon from '../../icons/plus.svg'; -import PlusWhiteIcon from '../../icons/plus-white.svg'; +import ChevronDownIcon from '../../icons/chevron-down.svg'; import { pageProgressMessage } from '../../stores/page'; import type { TeamDocument } from './CreateTeamForm'; import { UpdateTeamResourceModal } from './UpdateTeamResourceModal'; @@ -145,26 +144,41 @@ export function RoadmapSelector(props: RoadmapSelectorProps) { /> )} - {!teamResourceConfig.length && ( -
- - No roadmaps selected. - -

- Please search and add roadmaps from below -

-
- +
{ + setShowSelectRoadmapModal(true); + }} + > + {teamResourceConfig.length > 0 && ( +
+

+ {teamResourceConfig.length} roadmaps selected +

+

+ Click to add or change selection +

-
+ )} + + {!teamResourceConfig.length && ( +
+

Click to select roadmaps

+
+ )} + + {'roadmap'} +
+ + {!teamResourceConfig.length && ( +

+ No roadmaps selected. +

)} {teamResourceConfig.length > 0 && ( @@ -216,19 +230,6 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
); })} - )} diff --git a/src/components/CreateTeam/SelectRoadmapModal.tsx b/src/components/CreateTeam/SelectRoadmapModal.tsx index 27fd56d71..cf4a33856 100644 --- a/src/components/CreateTeam/SelectRoadmapModal.tsx +++ b/src/components/CreateTeam/SelectRoadmapModal.tsx @@ -2,9 +2,9 @@ import { useEffect, useRef, useState } from 'preact/hooks'; import { useKeydown } from '../../hooks/use-keydown'; import { useOutsideClick } from '../../hooks/use-outside-click'; import type { PageType } from '../CommandMenu/CommandMenu'; -import { useToast } from '../../hooks/use-toast'; import type { TeamResourceConfig } from './RoadmapSelector'; import CloseIcon from '../../icons/close.svg'; +import { SelectRoadmapModalItem } from './SelectRoadmapModalItem'; export type SelectRoadmapModalProps = { teamId: string; @@ -23,8 +23,8 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) { onRoadmapRemove, teamResourceConfig, } = props; - const toast = useToast(); const popupBodyEl = useRef(null); + const searchInputEl = useRef(null); const [searchResults, setSearchResults] = useState(allRoadmaps); const [searchText, setSearchText] = useState(''); @@ -37,6 +37,14 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) { onClose(); }); + useEffect(() => { + if (!searchInputEl.current) { + return; + } + + searchInputEl.current.focus(); + }, [searchInputEl]); + useEffect(() => { if (searchText.length === 0) { setSearchResults(allRoadmaps); @@ -52,43 +60,54 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) { setSearchResults(searchResults); }, [searchText, allRoadmaps]); + const roleBasedRoadmaps = searchResults.filter((roadmap) => + roadmap?.metadata?.tags?.includes('role-roadmap') + ); + const skillBasedRoadmaps = searchResults.filter((roadmap) => + roadmap?.metadata?.tags?.includes('skill-roadmap') + ); + return (
-
+
setSearchText((e.target as HTMLInputElement).value)} /> -
-
- {searchResults.map((roadmap) => { - const isSelected = teamResourceConfig.find( - (r) => r.resourceId === roadmap.id - ); - return ( -
- {roadmap.title} - -
+ /> + ); + })} +
+ )} + + Skill Based Roadmaps + +
+ {skillBasedRoadmaps.map((roadmap) => { + const isSelected = !!teamResourceConfig.find( + (r) => r.resourceId === roadmap.id + ); + + return ( + { + if (isSelected) { + onRoadmapRemove(roadmap.id); + } else { + onRoadmapAdd(roadmap.id); + } + }} + /> ); })} - {searchResults.length === 0 && ( -
No roadmaps found
- )}
diff --git a/src/components/CreateTeam/SelectRoadmapModalItem.tsx b/src/components/CreateTeam/SelectRoadmapModalItem.tsx new file mode 100644 index 000000000..e2a579e94 --- /dev/null +++ b/src/components/CreateTeam/SelectRoadmapModalItem.tsx @@ -0,0 +1,34 @@ +import type { SelectRoadmapModalProps } from './SelectRoadmapModal'; + +type SelectRoadmapModalItemProps = { + title: string; + isSelected: boolean; + onClick: () => void; +}; + +export function SelectRoadmapModalItem(props: SelectRoadmapModalItemProps) { + const { isSelected, onClick, title } = props; + return ( + + ); +} diff --git a/src/components/CreateTeam/Step2.tsx b/src/components/CreateTeam/Step2.tsx index 723456cd8..1e7c37141 100644 --- a/src/components/CreateTeam/Step2.tsx +++ b/src/components/CreateTeam/Step2.tsx @@ -17,10 +17,9 @@ export function Step2(props: Step2Props) { <>
-

Select Roadmaps

+

Select Roadmaps

- Picks the roadmaps to be made available to your team for tracking. - You can always add more later. + You can always add and customize your roadmaps later.

diff --git a/src/pages/pages.json.ts b/src/pages/pages.json.ts index 49146fb76..ef972fbe1 100644 --- a/src/pages/pages.json.ts +++ b/src/pages/pages.json.ts @@ -16,6 +16,9 @@ export async function get() { url: `/${roadmap.id}`, title: roadmap.frontmatter.briefTitle, group: 'Roadmaps', + metadata: { + tags: roadmap.frontmatter.tags, + }, })), ...bestPractices.map((bestPractice) => ({ id: bestPractice.id,