From 036b34c6f33b350165c6d606a00d92a0aaa15fdc Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Mon, 9 Oct 2023 13:44:30 +0600 Subject: [PATCH] Implement Custom Roadmap minor features (#4565) * Remove roadmap type * Add Edit Roadmap button * Add Edit Roadmap permission * Add Edit and Share roadmap button * Remove Margin * Implement Discoverable Checkbox * Add Loading State for buttons --- .../CreateRoadmap/CreateRoadmapButton.tsx | 10 +---- .../CreateRoadmap/CreateRoadmapModal.tsx | 36 +---------------- src/components/CustomRoadmap/EmptyRoadmap.tsx | 21 +++++++++- .../CustomRoadmap/RoadmapHeader.tsx | 31 ++++++++++----- .../CustomRoadmap/RoadmapRenderer.tsx | 6 +-- .../CustomRoadmap/SkeletonRoadmapHeader.tsx | 6 ++- .../FeaturedItems/FeaturedItems.astro | 8 +--- .../ShareOptions/ShareOptionsModal.tsx | 39 ++++++++++++++++++- 8 files changed, 91 insertions(+), 66 deletions(-) diff --git a/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx b/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx index eeffd1a02..039fe3655 100644 --- a/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx +++ b/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx @@ -2,22 +2,17 @@ import { Plus } from 'lucide-react'; import { isLoggedIn } from '../../../lib/jwt'; import { showLoginPopup } from '../../../lib/popup'; import { cn } from '../../../lib/classname'; -import { - type AllowedCustomRoadmapType, - type AllowedRoadmapVisibility, - CreateRoadmapModal, -} from './CreateRoadmapModal'; +import { CreateRoadmapModal } from './CreateRoadmapModal'; import { useState } from 'react'; type CreateRoadmapButtonProps = { className?: string; - type?: AllowedCustomRoadmapType; text?: string; teamId?: string; }; export function CreateRoadmapButton(props: CreateRoadmapButtonProps) { - const { teamId, className, type, text = 'Create your own Roadmap' } = props; + const { teamId, className, text = 'Create your own Roadmap' } = props; const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false); @@ -34,7 +29,6 @@ export function CreateRoadmapButton(props: CreateRoadmapButtonProps) { {isCreatingRoadmap && ( { setIsCreatingRoadmap(false); }} diff --git a/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx b/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx index 98cfae263..0fe09f324 100644 --- a/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx +++ b/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx @@ -10,7 +10,6 @@ import { Modal } from '../../Modal'; import { useToast } from '../../../hooks/use-toast'; import { httpPost } from '../../../lib/http'; import { cn } from '../../../lib/classname'; -import { allowedVisibilityLabels } from '../ShareRoadmapModal'; export const allowedRoadmapVisibility = [ 'me', @@ -46,12 +45,11 @@ interface CreateRoadmapModalProps { onClose: () => void; onCreated?: (roadmap: RoadmapDocument) => void; teamId?: string; - type?: AllowedCustomRoadmapType; visibility?: AllowedRoadmapVisibility; } export function CreateRoadmapModal(props: CreateRoadmapModalProps) { - const { onClose, onCreated, teamId, type: defaultType = 'role' } = props; + const { onClose, onCreated, teamId } = props; const titleRef = useRef(null); const toast = useToast(); @@ -59,7 +57,6 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) { const [isLoading, setIsLoading] = useState(false); const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); - const [type, setType] = useState(defaultType); const isInvalidDescription = description?.trim().length > 80; async function handleSubmit( @@ -71,7 +68,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) { return; } - if (title.trim() === '' || isInvalidDescription || !type) { + if (title.trim() === '' || isInvalidDescription) { toast.error('Please fill all the fields'); return; } @@ -82,7 +79,6 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) { { title, description, - type, ...(teamId && { teamId, }), @@ -114,7 +110,6 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) { setTitle(''); setDescription(''); - setType('role'); setIsLoading(false); } @@ -182,33 +177,6 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) { -
- -
- -
-
-
diff --git a/src/components/CustomRoadmap/EmptyRoadmap.tsx b/src/components/CustomRoadmap/EmptyRoadmap.tsx index 1985a8f00..e9b6587c6 100644 --- a/src/components/CustomRoadmap/EmptyRoadmap.tsx +++ b/src/components/CustomRoadmap/EmptyRoadmap.tsx @@ -1,11 +1,28 @@ import { CircleSlash } from 'lucide-react'; -export function EmptyRoadmap() { +type EmptyRoadmapProps = { + roadmapId: string; + canManage: boolean; +}; + +export function EmptyRoadmap(props: EmptyRoadmapProps) { + const { roadmapId, canManage } = props; + const editUrl = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmapId}`; + return (
-

This roadmap is currently empty.

+

This roadmap is currently empty.

+ + {canManage && ( + + Edit Roadmap + + )}
); diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx index 03ac2fc36..34554ba82 100644 --- a/src/components/CustomRoadmap/RoadmapHeader.tsx +++ b/src/components/CustomRoadmap/RoadmapHeader.tsx @@ -8,6 +8,7 @@ import { httpDelete, httpPut } from '../../lib/http'; import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector'; import { useToast } from '../../hooks/use-toast'; import { RoadmapActionButton } from './RoadmapActionButton'; +import { Lock, Shapes } from 'lucide-react'; type RoadmapHeaderProps = {}; @@ -137,6 +138,26 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { /> )} + + + Edit Roadmap + Edit + + + { const confirmation = window.confirm( @@ -149,16 +170,6 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { deleteResource().finally(() => null); }} - onCustomize={() => { - const editorLink = `${ - import.meta.env.PUBLIC_EDITOR_APP_URL - }/${$currentRoadmap?._id}`; - - window.open(editorLink, '_blank'); - }} - onUpdateSharing={() => { - setIsSharing(true); - }} />
)} diff --git a/src/components/CustomRoadmap/RoadmapRenderer.tsx b/src/components/CustomRoadmap/RoadmapRenderer.tsx index 07418c563..88cc22b0f 100644 --- a/src/components/CustomRoadmap/RoadmapRenderer.tsx +++ b/src/components/CustomRoadmap/RoadmapRenderer.tsx @@ -12,8 +12,6 @@ import { pageProgressMessage } from '../../stores/page'; import { useToast } from '../../hooks/use-toast'; import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal'; import { EmptyRoadmap } from './EmptyRoadmap'; -import { isLoggedIn } from '../../lib/jwt'; -import { httpPost } from '../../lib/http'; type RoadmapRendererProps = { roadmap: RoadmapDocument; @@ -170,7 +168,9 @@ export function RoadmapRenderer(props: RoadmapRendererProps) { }); }} /> - {hideRenderer && } + {hideRenderer && ( + + )} ); diff --git a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx b/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx index 594f16ac7..1a034b6da 100644 --- a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx +++ b/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx @@ -13,7 +13,11 @@ export function SkeletonRoadmapHeader() {
-
+
+
+
+
+
diff --git a/src/components/FeaturedItems/FeaturedItems.astro b/src/components/FeaturedItems/FeaturedItems.astro index 0e4ed39d1..563023aea 100644 --- a/src/components/FeaturedItems/FeaturedItems.astro +++ b/src/components/FeaturedItems/FeaturedItems.astro @@ -42,13 +42,7 @@ const { { showCreateRoadmap && (
  • - -1 ? 'role' : 'skill' - } - /> +
    • ) } diff --git a/src/components/ShareOptions/ShareOptionsModal.tsx b/src/components/ShareOptions/ShareOptionsModal.tsx index 73f47f2ab..55ab934bc 100644 --- a/src/components/ShareOptions/ShareOptionsModal.tsx +++ b/src/components/ShareOptions/ShareOptionsModal.tsx @@ -55,6 +55,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) { const membersCache = useMemo(() => new Map(), []); const [visibility, setVisibility] = useState(defaultVisibility); + const [isDiscoverable, setIsDiscoverable] = useState(false); const [sharedTeamMemberIds, setSharedTeamMemberIds] = useState( defaultSharedMemberIds ); @@ -107,6 +108,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) { visibility, sharedFriendIds, sharedTeamMemberIds, + isDiscoverable, } ); @@ -132,6 +134,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) { { teamId, sharedTeamMemberIds, + isDiscoverable, } ); @@ -167,7 +170,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) { onClose(); }} wrapperClassName="max-w-3xl" - bodyClassName="p-4 flex flex-col min-h-[400px]" + bodyClassName="p-4 flex flex-col min-h-[440px]" >

    Update Sharing Settings

    @@ -275,6 +278,18 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) { )}
    + {visibility !== 'me' && ( + <> +
    +
    + +
    + + )} +