diff --git a/src/components/CustomRoadmap/PersonalRoadmapList.tsx b/src/components/CustomRoadmap/PersonalRoadmapList.tsx index 5aa918b99..182df84d0 100644 --- a/src/components/CustomRoadmap/PersonalRoadmapList.tsx +++ b/src/components/CustomRoadmap/PersonalRoadmapList.tsx @@ -7,6 +7,7 @@ import { Globe, LockIcon, Users, + PenSquare, } from 'lucide-react'; import { useToast } from '../../hooks/use-toast'; import { @@ -142,7 +143,7 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) { return (
  • @@ -184,6 +185,16 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) { Visit + + + Edit +
  • ); diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx index 07b1ade4c..8b09ea8cc 100644 --- a/src/components/CustomRoadmap/RoadmapHeader.tsx +++ b/src/components/CustomRoadmap/RoadmapHeader.tsx @@ -9,6 +9,8 @@ import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector'; import { useToast } from '../../hooks/use-toast'; import { RoadmapActionButton } from './RoadmapActionButton'; import { Lock, Shapes } from 'lucide-react'; +import { Modal } from '../Modal'; +import { ShareSuccess } from '../ShareOptions/ShareSuccess'; type RoadmapHeaderProps = {}; @@ -22,9 +24,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { _id: roadmapId, creator, team, + visibility, } = useStore(currentRoadmap) || {}; const [isSharing, setIsSharing] = useState(false); + const [isSharingWithOthers, setIsSharingWithOthers] = useState(false); const toast = useToast(); async function deleteResource() { @@ -65,6 +69,22 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${creator?.avatar}` : '/images/default-avatar.png'; + const sharingWithOthersModal = isSharingWithOthers && ( + setIsSharingWithOthers(false)} + wrapperClassName="max-w-lg" + bodyClassName="p-4 flex flex-col" + > + setIsSharingWithOthers(false)} + isSharingWithOthers={true} + /> + + ); + return (
    @@ -117,63 +137,78 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { Subscribe
    - {$canManageCurrentRoadmap && ( -
    - {isSharing && $currentRoadmap && ( - setIsSharing(false)} - onShareSettingsUpdate={(settings) => { - currentRoadmap.set({ - ...$currentRoadmap, - ...settings, - }); +
    + {$canManageCurrentRoadmap && ( + <> + {isSharing && $currentRoadmap && ( + setIsSharing(false)} + onShareSettingsUpdate={(settings) => { + currentRoadmap.set({ + ...$currentRoadmap, + ...settings, + }); + }} + /> + )} + + + + Edit Roadmap + Edit + + + + { + const confirmation = window.confirm( + 'Are you sure you want to delete this roadmap?' + ); + + if (!confirmation) { + return; + } + + deleteResource().finally(() => null); }} /> - )} - - - - Edit Roadmap - Edit - - - - { - const confirmation = window.confirm( - 'Are you sure you want to delete this roadmap?' - ); - - if (!confirmation) { - return; - } - - deleteResource().finally(() => null); - }} - /> -
    - )} + + )} + + {!$canManageCurrentRoadmap && visibility === 'public' && ( + <> + {sharingWithOthersModal} + + + )} +
    void; visibility: AllowedRoadmapVisibility; description?: string; + isSharingWithOthers?: boolean; }; export function ShareSuccess(props: ShareSuccessProps) { - const { roadmapId, onClose, description, visibility } = props; + const { + roadmapId, + onClose, + description, + visibility, + isSharingWithOthers = false, + } = props; const baseUrl = import.meta.env.DEV ? 'http://localhost:3000' @@ -42,7 +49,11 @@ export function ShareSuccess(props: ShareSuccessProps) {
    -

    Sharing Settings Updated

    + {isSharingWithOthers ? ( +

    Sharing with Others

    + ) : ( +

    Sharing Settings Updated

    + )}
    -

    - You can share the above link with anyone who has access -

    + {isSharingWithOthers ? ( +

    + You can share the above link with anyone +

    + ) : ( +

    + You can share the above link with anyone who has access +

    + )} {visibility === 'public' && ( <>
    - Or + Or
    diff --git a/src/components/TeamRoadmapsList/TeamRoadmaps.tsx b/src/components/TeamRoadmapsList/TeamRoadmaps.tsx index 7867c5c0a..c96fd55b3 100644 --- a/src/components/TeamRoadmapsList/TeamRoadmaps.tsx +++ b/src/components/TeamRoadmapsList/TeamRoadmaps.tsx @@ -27,6 +27,7 @@ import { import { RoadmapActionDropdown } from './RoadmapActionDropdown'; import { UpdateTeamResourceModal } from '../CreateTeam/UpdateTeamResourceModal'; import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal'; +import { cn } from '../../lib/classname'; export function TeamRoadmaps() { const { t: teamId } = getUrlParams(); @@ -428,7 +429,12 @@ export function TeamRoadmaps() { return (
    @@ -479,6 +485,18 @@ export function TeamRoadmaps() { Visit + {canManageCurrentTeam && ( + + + Edit + + )}
    );