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
2025-08-01 06:50:26 +02:00 · 2023-10-09 13:44:30 +06:00
parent 93c2043f23
commit 036b34c6f3
8 changed files with 91 additions and 66 deletions
--- 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 && (
        <CreateRoadmapModal
          teamId={teamId}
-          type={type}
          onClose={() => {
            setIsCreatingRoadmap(false);
          }}
--- 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<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')}
        >
--- 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 (
    <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>
  );
--- 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) {
                />
              )}

+              <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>
          )}
--- 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 && <EmptyRoadmap />}
+        {hideRenderer && (
+          <EmptyRoadmap roadmapId={roadmapId} canManage={roadmap.canManage} />
+        )}
      </div>
    </div>
  );
--- a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
+++ b/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">
--- a/src/components/FeaturedItems/FeaturedItems.astro
+++ b/src/components/FeaturedItems/FeaturedItems.astro
@@ -42,13 +42,7 @@ const {
      {
        showCreateRoadmap && (
          <li>
-            <CreateRoadmapButton
-              client:load
-              className='min-h-[54px]'
-              type={
-                heading.toLowerCase().indexOf('role') > -1 ? 'role' : 'skill'
-              }
-            />
+            <CreateRoadmapButton client:load className='min-h-[54px]' />
          </li>
        )
      }
--- 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<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>
+  );
+}