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

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 {
+import { CreateRoadmapModal } from './CreateRoadmapModal';
-  type AllowedCustomRoadmapType,
-  type AllowedRoadmapVisibility,
-  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 && (
         <CreateRoadmapModal
           teamId={teamId}
-          type={type}
           onClose={() => {
             setIsCreatingRoadmap(false);
           }}

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<HTMLInputElement>(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<AllowedCustomRoadmapType>(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) {
           </div>
         </div>
 
-        <div className="mt-4">
-          <label
-            htmlFor="type"
-            className="block text-xs uppercase text-gray-400"
-          >
-            Type
-          </label>
-          <div className="mt-1">
-            <select
-              id="type"
-              name="type"
-              required
-              className="block w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm"
-              value={type}
-              onChange={(e) =>
-                setType(e.target.value as AllowedCustomRoadmapType)
-              }
-            >
-              {allowedCustomRoadmapType.map((type) => (
-                <option key={type} value={type}>
-                  {type.charAt(0).toUpperCase() + type.slice(1)} Based Roadmap
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-
         <div
           className={cn('mt-4 flex justify-between gap-2', teamId && 'mt-8')}
         >

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 (
     <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center">
         <CircleSlash className="mx-auto h-20 w-20 text-gray-400" />
-        <h3 className="mt-4">This roadmap is currently empty.</h3>
+        <h3 className="mt-2">This roadmap is currently empty.</h3>
+
+        {canManage && (
+          <a
+            href={editUrl}
+            className="mt-4 rounded-lg bg-black px-4 py-2 font-medium text-white hover:bg-gray-900"
+          >
+            Edit Roadmap
+          </a>
+        )}
       </div>
     </div>
   );

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) {
                 />
               )}
 
+              <a
+                href={`${import.meta.env.PUBLIC_EDITOR_APP_URL}/${
+                  $currentRoadmap?._id
+                }`}
+                target="_blank"
+                className="inline-flex items-center justify-center rounded-md bg-gray-500 py-1.5 pl-2 pr-2 text-xs font-medium text-white hover:bg-gray-600 sm:px-3 sm:text-sm"
+              >
+                <Shapes className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                <span className="hidden sm:inline-block">Edit Roadmap</span>
+                <span className="sm:hidden">Edit</span>
+              </a>
+              <button
+                onClick={() => setIsSharing(true)}
+                className="inline-flex items-center justify-center rounded-md bg-gray-500 py-1.5 pl-2 pr-2 text-xs font-medium text-white hover:bg-gray-600 sm:px-3 sm:text-sm"
+              >
+                <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                <span className="hidden sm:inline-block">Share Roadmap</span>
+                <span className="sm:hidden">Share</span>
+              </button>
+
               <RoadmapActionButton
                 onDelete={() => {
                   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);
-                }}
               />
             </div>
           )}

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 && <EmptyRoadmap />}
+        {hideRenderer && (
+          <EmptyRoadmap roadmapId={roadmapId} canManage={roadmap.canManage} />
+        )}
       </div>
     </div>
   );

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -13,7 +13,11 @@ export function SkeletonRoadmapHeader() {
 
         <div className="flex justify-between gap-2 sm:gap-0">
           <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
-          <div className="h-7 w-[32px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[89.73px]" />
+          <div className="flex items-center gap-2">
+            <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[137.71px]" />
+            <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[150.34px]" />
+            <div className="h-7 w-[32px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[89.73px]" />
+          </div>
         </div>
 
         <div className="mb-0 mt-4 rounded-md border-0 sm:-mb-[65px] sm:mt-7 sm:border">

src/components/FeaturedItems/FeaturedItems.astro

@@ -42,13 +42,7 @@ const {
       {
         showCreateRoadmap && (
           <li>
-            <CreateRoadmapButton
+            <CreateRoadmapButton client:load className='min-h-[54px]' />
-              client:load
-              className='min-h-[54px]'
-              type={
-                heading.toLowerCase().indexOf('role') > -1 ? 'role' : 'skill'
-              }
-            />
           </li>
         )
       }

src/components/ShareOptions/ShareOptionsModal.tsx

@@ -55,6 +55,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
   const membersCache = useMemo(() => new Map<string, TeamMemberList[]>(), []);
 
   const [visibility, setVisibility] = useState(defaultVisibility);
+  const [isDiscoverable, setIsDiscoverable] = useState(false);
   const [sharedTeamMemberIds, setSharedTeamMemberIds] = useState<string[]>(
     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]"
     >
       <div className="mb-4">
         <h3 className="mb-1 text-xl font-semibold">Update Sharing Settings</h3>
@@ -275,6 +278,18 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
         )}
       </div>
 
+      {visibility !== 'me' && (
+        <>
+          <hr className="-mx-4 my-4" />
+          <div className="mb-2">
+            <DiscoveryCheckbox
+              isDiscoverable={isDiscoverable}
+              setIsDiscoverable={setIsDiscoverable}
+            />
+          </div>
+        </>
+      )}
+
       <div className="mt-2 flex items-center justify-between gap-1.5">
         <button
           className="flex items-center justify-center gap-1.5 rounded-md border px-3.5 py-1.5 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-75"
@@ -344,3 +359,25 @@ function UpdateAction(props: {
     </button>
   );
 }
+
+type DiscoveryCheckboxProps = {
+  isDiscoverable: boolean;
+  setIsDiscoverable: (isDiscoverable: boolean) => void;
+};
+
+function DiscoveryCheckbox(props: DiscoveryCheckboxProps) {
+  const { isDiscoverable, setIsDiscoverable } = props;
+
+  return (
+    <label className="group flex items-center gap-1.5">
+      <input
+        type="checkbox"
+        checked={isDiscoverable}
+        onChange={(e) => setIsDiscoverable(e.target.checked)}
+      />
+      <span className="text-sm text-gray-500 group-hover:text-gray-700">
+        Include on discovery page (when launched)
+      </span>
+    </label>
+  );
+}