feat(web): template store integrate with api's #3475
Conversation
NV-2361 🏪 [Template store] Integrate the FE with blueprints APIs
What?We've created the mock data for the blueprints on the FE so far. In this ticket we would like to integrate the FE functionality with the Blueprints API. Why? (Context)We want to use real API, not mocked data. Definition of DoneThe FE fetches and creates the templates from the blueprints API. |
| export class GroupedBlueprint { | ||
| name: string; | ||
| blueprints: INotificationTemplate[]; | ||
| } |
There was a problem hiding this comment.
moved this interface to shared package, because I do reuse it on the FE
| export const useCreateTemplateFromBlueprint = ( | ||
| options: UseMutationOptions<INotificationTemplate, any, { blueprint: INotificationTemplate }> = {} | ||
| ) => { | ||
| const { mutate, ...rest } = useMutation<INotificationTemplate, any, { blueprint: INotificationTemplate }>( | ||
| ({ blueprint }) => createTemplate(mapBlueprintToTemplate(blueprint)), | ||
| { ...options } | ||
| ); | ||
|
|
||
| return { | ||
| createTemplateFromBlueprint: mutate, | ||
| ...rest, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
create template from the blueprint hook, there is an important mapping at the top from INotificationTemplate to ICreateNotificationTemplateDto which is expected by the BE endpoint
| } | ||
|
|
||
| const STEPS: IFormStep[] = [ |
There was a problem hiding this comment.
removed mock data
| const mapGroup = (group: IGroupedBlueprint): IBlueprintsGrouped => ({ | ||
| name: group.name, | ||
| blueprints: group.blueprints.map((template) => { | ||
| const { name, iconName } = getTemplateDetails(template.name); | ||
|
|
||
| return { | ||
| ...template, | ||
| name, | ||
| iconName, | ||
| }; | ||
| }), | ||
| }); |
There was a problem hiding this comment.
this function just walks through the blueprints and extracts the name and icon from the template name, and then adds these properties to the IBlueprintTemplate object
| @@ -139,24 +141,25 @@ export const TemplatesListNoData = ({ | |||
| : blueprints?.map((template, index) => ( | |||
| <Popover | |||
| key={template.name} | |||
| opened={template.id === templateId} | |||
| opened={template._id === templateId && !!template.description} | |||
There was a problem hiding this comment.
when there is no description do not show the popover
| target={ | ||
| <Card | ||
| data-can-be-hidden={index === 2} | ||
| data-test-id="second-workflow-tile" | ||
| disabled={readonly} | ||
| disabled={readonly || isCreating} |
There was a problem hiding this comment.
if the user has clicked on the popular template card and we are creating the template then the card should be disabled
| const { blueprintsGroupedAndPopular: { general, popular } = {}, isLoading: areBlueprintsLoading } = | ||
| useFetchBlueprints(); |
| const { createTemplateFromBlueprint, isLoading: isCreatingTemplateFromBlueprint } = useCreateTemplateFromBlueprint({ | ||
| onSuccess: (template) => { | ||
| navigate(`${parseUrl(ROUTES.TEMPLATES_EDIT_TEMPLATEID, { templateId: template._id ?? '' })}`); | ||
| }, | ||
| onError: () => { | ||
| errorMessage('Something went wrong while creating template from blueprint, please try again later.'); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
create the blueprint hook, on the success we will redirect to the editor
| const templatePayload = mapBlueprintToTemplateCreatePayload(); | ||
|
|
||
| return createTemplate(templatePayload); | ||
| const { createTemplateFromBlueprint, isLoading: isCreating } = useCreateTemplateFromBlueprint({ |
There was a problem hiding this comment.
reuse the useCreateTemplateFromBlueprint hook
| @@ -63,22 +66,24 @@ export const CreateWorkflowDropdown = ({ | |||
| : blueprints?.map((template, index) => ( | |||
| <Popover | |||
| key={template.name} | |||
| opened={template.id === templateId} | |||
| opened={template._id === templateId && !!template.description} | |||
There was a problem hiding this comment.
when there is no description in the template do not show the popover for the popular templates dropdown items
apps/web/src/api/hooks/notification-templates/useCreateTemplateFromBlueprint.ts
Show resolved
Hide resolved
| useFetchBlueprints(); | ||
| const { createTemplateFromBlueprint, isLoading: isCreatingTemplateFromBlueprint } = useCreateTemplateFromBlueprint({ | ||
| onSuccess: (template) => { | ||
| navigate(`${parseUrl(ROUTES.TEMPLATES_EDIT_TEMPLATEID, { templateId: template._id ?? '' })}`); |
There was a problem hiding this comment.
What will happen here if template._id is not valid?
There was a problem hiding this comment.
If template._id is not valid it means that we have a problem on the API because we are not returning it :) or someone has used this hook with a "not saved" template.
| const hasTemplates = templates && templates.length > 0; | ||
|
|
||
| const { TemplatesStoreModal, openModal } = useTemplatesStoreModal({ groupedBlueprints }); | ||
| const { TemplatesStoreModal, openModal } = useTemplatesStoreModal({ general }); |
There was a problem hiding this comment.
Never realized that we are not presenting the popular in the Template Store, raised a question HERE
There was a problem hiding this comment.
To me, the popular templates are a subset of the general.
What change does this PR introduce?
In this PR I've integrated the FE Template Store with the blueprint APIs:
Why was this change needed?
Template Store PRD.
Other information (Screenshots)
Screen.Recording.2023-05-23.at.10.30.15.mov