feat(web): templates store use feature flag #3515
Conversation
…2-hide-template-store-behind-a-feature-flag
| @@ -66,8 +66,7 @@ export const POPULAR_TEMPLATES_GROUPED = { | |||
| { | |||
| _id: '1', | |||
| name: ':fa-regular fa-message: Comments', | |||
| description: | |||
| 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quas totam quod beatae. Ipsam quasi fugiat commodi adipisci eligendi necessitatibus cumque aliquam, dicta natus cupiditate suscipit voluptatum rerum debitis. Ipsum!', | |||
| description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quas totam quod beatae.', | |||
There was a problem hiding this comment.
the description should be less or equal 100 characters
| active: true, | ||
| draft: false, | ||
| critical: false, | ||
| preferenceSettings: { | ||
| chat: true, | ||
| email: true, | ||
| in_app: true, | ||
| push: true, | ||
| sms: true, | ||
| }, |
| return ( | ||
| storedBlueprint | ||
| ? storedBlueprint | ||
| : { | ||
| ...localBlueprint, | ||
| _notificationGroupId: firstBlueprint._notificationGroupId, | ||
| notificationGroup: firstBlueprint.notificationGroup, | ||
| } | ||
| ) as INotificationTemplate; |
There was a problem hiding this comment.
Basically, the popular blueprints are hardcoded constants that don't have the notification group and this raises an API error when creating the workflow from it on the FE...
I'm not sure what is the best way to bypass this, but here I'm assigning the first blueprint notification group...
There was a problem hiding this comment.
Due to our decision last week (don't use hardcoded data directly on the client) the only thing that we will need is the ID, so we won't have this issue.
| @@ -0,0 +1,76 @@ | |||
| import styled from '@emotion/styled'; | |||
There was a problem hiding this comment.
reverted the old view shown when there is no workflows, where we have two tiles: "Create Workflow" and "Try the Digest playground"
| {isTemplateStoreEnabled ? ( | ||
| <> | ||
| <When truthy={hasTemplates}> | ||
| <Table | ||
| onRowClick={onRowClick} | ||
| loading={isLoading || areNotificationGroupLoading} | ||
| data-test-id="notifications-template" | ||
| columns={columns} | ||
| data={templates} | ||
| pagination={{ | ||
| pageSize: pageSize, | ||
| current: page, | ||
| total: totalTemplatesCount, | ||
| onPageChange: handleTableChange, | ||
| }} | ||
| /> | ||
| </When> | ||
| <When truthy={!hasTemplates}> | ||
| <TemplatesListNoData | ||
| readonly={readonly} | ||
| blueprints={popular?.blueprints} | ||
| isLoading={areBlueprintsLoading} | ||
| isCreating={isCreatingTemplateFromBlueprint} | ||
| allTemplatesDisabled={areBlueprintsLoading || !hasGroups} | ||
| onBlankWorkflowClick={() => handleRedirectToCreateTemplate(false)} | ||
| onTemplateClick={handleOnBlueprintClick} | ||
| onAllTemplatesClick={openModal} | ||
| /> | ||
| </When> | ||
| </> |
There was a problem hiding this comment.
when templates store feature flag enabled
| noDataPlaceholder={ | ||
| <TemplatesListNoDataOld | ||
| onCreateClick={() => handleRedirectToCreateTemplate(false)} | ||
| onTryDigestClick={handleCreateDigestDemoWorkflow} | ||
| tryDigestDisabled={isTryDigestDisabled} | ||
| /> | ||
| } |
There was a problem hiding this comment.
when the templates store feature flag is disabled
p-fernandez
force-pushed
the
nv-2242-hide-template-store-behind-a-feature-flag
branch
from
a2b5dd1
to
0336544
Compare
p-fernandez
force-pushed
the
nv-2242-hide-template-store-behind-a-feature-flag
branch
from
0336544
to
ee2ee4f
Compare
… nv-2385-templates-store-use-feature-flag
p-fernandez
force-pushed
the
nv-2242-hide-template-store-behind-a-feature-flag
branch
2 times, most recently
from
9f469d2
to
2b7b782
Compare
… nv-2385-templates-store-use-feature-flag
|
|
||
| const STEPS = [ | ||
| const STEPS: INotificationTemplateStep[] = [ |
There was a problem hiding this comment.
I've noticed that after clicking on "Use template" button the Workflow Editor shows some errors on the steps, so I've fixed them here
| {popular.map((group) => ( | ||
| <TemplatesGroup key={group.name}> | ||
| <GroupName>{group.name}</GroupName> | ||
| {group.blueprints.map((template) => { | ||
| return ( | ||
| <TemplateItem key={template.name} onClick={() => handleTemplateClick(template)}> | ||
| <FontAwesomeIcon icon={template.iconName} /> | ||
| <span>{template.name}</span> | ||
| </TemplateItem> | ||
| ); | ||
| })} | ||
| </TemplatesGroup> | ||
| ))} |
There was a problem hiding this comment.
forgot to show the popular blueprints the the Templates Store modal, they will be rendered at the top
| const isTemplateStoreEnabled = useIsTemplateStoreEnabled(); | ||
| const hasGroups = general && general.length > 0; | ||
| const hasPopular = !!(popular && popular?.blueprints.length > 0); | ||
| const hasGroupsOrPopular = hasGroups || hasPopular; | ||
| const isOpened = opened && hasGroupsOrPopular && isTemplateStoreEnabled; |
There was a problem hiding this comment.
Looks like all this information could be living in its own hook for tidiness, though I acknowledge the reusability might be non existent.
…re-use-feature-flag # Conflicts: # apps/api/src/app/blueprint/usecases/get-grouped-blueprints/consts.ts # apps/api/src/app/blueprint/usecases/get-grouped-blueprints/get-grouped-blueprints.usecase.ts # apps/web/src/pages/templates/components/templates-store/TemplatesStoreModal.tsx
What change does this PR introduce?
Templates Store uses the feature flag.
Why was this change needed?
Templates Store PRD.
Other information (Screenshots)
Screen.Recording.2023-05-26.at.13.52.21.mov