Allow creating custom roadmaps (#4486)

* wip: custom roadmap renderer

* wip: custom roadmap events

* wip: roadmap content

* wip: svg styles

* wip: custom roadmap progress

* Render progress

* Shortcut progress

* Progress Tracking styles

* wip: edit and share button

* fix: disabled the share button

* wip: content links rendering

* Fix progress share

* Replace disabled with `canShare`

* wip: show custom roadmaps

* wip: users all roadmaps

* fix: create roadmap api

* chore: roadmap sidebar icon

* wip: content links

* Update links color

* Create roadmap home

* Create Roadmap button

* Roadmap type

* chore: share progress modal

* wip: share roadmap

* wip: change visibility

* chore: custom roadmap progress in activity

* wip: custom roadmap share progress

* chore: friend's roadmap

* wip: custom roadmap skeleton

* chore: roadmap title

* Restricted Page

* fix: skeleton loading width

* Fix create roadmap button

* chore: remove user id

* chore: pick roadmap and share

* chore: open new tab on create roadmap

* chore: change share title

* chore: use team id from params

* chore: team roadmap create modal

* chore: create team roadmap

* chore: custom roadmap modal

* chore: placeholde roadmaps

* chore: roadmap hint

* chore: visibility label

* chore: public roadmap

* chore: empty screen

* chore: team progress

* chore: create roadmap responsive

* chore: form error

* chore: multi user history

* wip: manage custom roadmap

* chore: empty roadmap list

* chore: custom roadmap visit

* chore: shared roadmaps

* chore: shared roadmaps

* chore: empty screen and topic title

* chore: show progress bar

* Implement Error in topic details

* Add Modal close button

* fix: link groups

* Refactor roadmap creation

* Refactor roadmap creation

* Refactor team creation

* Refactor team roadmaps

* Refactor team creation roadmap selection

* Refactor

* Refactor team roadmap loading

* Refactor team roadmaps

* Refactor team roadmaps listing

* Refactor Account dropdown

* Updates

* Refactor Account dropdown

* Fix Team name overflow

* Change Icon color

* Update team dropdown

* Minor UI fixes

* Fix minor UI

* Flicker fix in team dropdown

* Roadmap action dropdown with responsiveness

* Team roadmaps listing

* Update team settings

* Team roadmaps listing

* fix: remove visibility change

* Update roadmap options modal

* Add dummy renderer

* Add renderer script

* Add generate renderer script

* Add generate renderer

* wip: add share settings

* Update

* Update UI

* Update Minor UI

* Fix team issue

* Update Personal roadmaps UI

* Add Roadmap Secret

* Update teams type

* Rearrange sections

* Change Secret name

* Add action button on roadmap detail page

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

src/components/UserProgress/UserProgressModal.tsx

@@ -11,12 +11,14 @@ import { deleteUrlParam, getUrlParams } from '../../lib/browser';
 import { useAuth } from '../../hooks/use-auth';
 import { Spinner } from '../ReactIcons/Spinner';
 import { ErrorIcon } from '../ReactIcons/ErrorIcon';
+import { renderFlowJSON } from '../../../renderer/renderer';
 
 export type ProgressMapProps = {
   userId?: string;
   resourceId: string;
   resourceType: ResourceType;
   onClose?: () => void;
+  isCustomResource?: boolean;
 };
 
 type UserProgressResponse = {
@@ -38,6 +40,7 @@ export function UserProgressModal(props: ProgressMapProps) {
     resourceType,
     userId: propUserId,
     onClose: onModalClose,
+    isCustomResource,
   } = props;
 
   const { s: userId = propUserId } = getUrlParams();
@@ -66,6 +69,12 @@ export function UserProgressModal(props: ProgressMapProps) {
     resourceJsonUrl += `/best-practices/${resourceId}.json`;
   }
 
+  if (isCustomResource) {
+    resourceJsonUrl = `${
+      import.meta.env.PUBLIC_API_URL
+    }/v1-get-roadmap/${resourceId}`;
+  }
+
   async function getUserProgress(
     userId: string,
     resourceType: string,
@@ -92,6 +101,12 @@ export function UserProgressModal(props: ProgressMapProps) {
       throw error || new Error('Something went wrong. Please try again!');
     }
 
+    if (isCustomResource) {
+      return await renderFlowJSON({
+        nodes: roadmapJson?.nodes || [],
+        edges: roadmapJson?.edges || [],
+      });
+    }
     return await wireframeJSONToSVG(roadmapJson, {
       fontURL: '/fonts/balsamiq.woff2',
     });
@@ -165,6 +180,14 @@ export function UserProgressModal(props: ProgressMapProps) {
           el.removeAttribute('data-group-id');
         });
 
+        svg.querySelectorAll('[data-node-id]').forEach((el) => {
+          el.removeAttribute('data-node-id');
+        });
+
+        svg.querySelectorAll('[data-type]').forEach((el) => {
+          el.removeAttribute('data-type');
+        });
+
         setResourceSvg(svg);
         setProgressResponse(user);
       })