-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(atomic): user actions timeline component created (#4272)
## [SFINT-5616](https://coveord.atlassian.net/browse/SFINT-5616) ### Atomic Insight User Actions Timeline component created. - This component displays all the actions performed by a user around the time they created a case. The actions are grouped into multiple sessions, including the session during which the case was created, the sessions preceding the case creation, and the sessions following the case creation. - The User actions timeline display the ticket creation session, 2 following sessions and 2 preceding sessions. - E2E Playwright tests added to cover the logic of this component. https://github.com/user-attachments/assets/06a8a8ad-095e-41f6-a056-ba5bf3e169b8 ### Link to mockups: https://www.figma.com/design/Jwu7iQEeG6en4vm4zN6Nav/Atomic-Insight-Panel?node-id=39-24173&node-type=FRAME&t=EX4rw364jAc2ZyZK-0 [SFINT-5616]: https://coveord.atlassian.net/browse/SFINT-5616?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: GitHub Actions Bot <>
- Loading branch information
Showing
23 changed files
with
919 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1640,6 +1640,23 @@ export namespace Components { | |
| */ | ||
| "userActions": Array<IUserAction>; | ||
| } | ||
| /** | ||
| * This component displays all the actions performed by a user around the time they created a case. | ||
| * The actions are grouped into multiple sessions, including the session during which the case was created, | ||
| * the sessions preceding the case creation and the sessions following the case creation. | ||
| * @component | ||
| * @example <AtomicInsightUserActionsTimeline userId={'123'} caseCreationDate={'2024-08-15T10:00:00Z'} /> | ||
| */ | ||
| interface AtomicInsightUserActionsTimeline { | ||
| /** | ||
| * The date and time when the case was created. For example "2024-01-01T00:00:00Z" | ||
| */ | ||
| "ticketCreationDateTime": string; | ||
| /** | ||
| * The ID of the user whose actions are being displayed. For example in email format "[email protected]". | ||
| */ | ||
| "userId": string; | ||
| } | ||
| interface AtomicIpxBody { | ||
| "displayFooterSlot": boolean; | ||
| "isOpen"?: boolean; | ||
|
|
@@ -4570,6 +4587,19 @@ declare global { | |
| prototype: HTMLAtomicInsightUserActionsSessionElement; | ||
| new (): HTMLAtomicInsightUserActionsSessionElement; | ||
| }; | ||
| /** | ||
| * This component displays all the actions performed by a user around the time they created a case. | ||
| * The actions are grouped into multiple sessions, including the session during which the case was created, | ||
| * the sessions preceding the case creation and the sessions following the case creation. | ||
| * @component | ||
| * @example <AtomicInsightUserActionsTimeline userId={'123'} caseCreationDate={'2024-08-15T10:00:00Z'} /> | ||
| */ | ||
| interface HTMLAtomicInsightUserActionsTimelineElement extends Components.AtomicInsightUserActionsTimeline, HTMLStencilElement { | ||
| } | ||
| var HTMLAtomicInsightUserActionsTimelineElement: { | ||
| prototype: HTMLAtomicInsightUserActionsTimelineElement; | ||
| new (): HTMLAtomicInsightUserActionsTimelineElement; | ||
| }; | ||
| interface HTMLAtomicIpxBodyElementEventMap { | ||
| "animationEnded": never; | ||
| } | ||
|
|
@@ -5940,6 +5970,7 @@ declare global { | |
| "atomic-insight-tabs": HTMLAtomicInsightTabsElement; | ||
| "atomic-insight-timeframe-facet": HTMLAtomicInsightTimeframeFacetElement; | ||
| "atomic-insight-user-actions-session": HTMLAtomicInsightUserActionsSessionElement; | ||
| "atomic-insight-user-actions-timeline": HTMLAtomicInsightUserActionsTimelineElement; | ||
| "atomic-ipx-body": HTMLAtomicIpxBodyElement; | ||
| "atomic-ipx-button": HTMLAtomicIpxButtonElement; | ||
| "atomic-ipx-embedded": HTMLAtomicIpxEmbeddedElement; | ||
|
|
@@ -7546,6 +7577,23 @@ declare namespace LocalJSX { | |
| */ | ||
| "userActions": Array<IUserAction>; | ||
| } | ||
| /** | ||
| * This component displays all the actions performed by a user around the time they created a case. | ||
| * The actions are grouped into multiple sessions, including the session during which the case was created, | ||
| * the sessions preceding the case creation and the sessions following the case creation. | ||
| * @component | ||
| * @example <AtomicInsightUserActionsTimeline userId={'123'} caseCreationDate={'2024-08-15T10:00:00Z'} /> | ||
| */ | ||
| interface AtomicInsightUserActionsTimeline { | ||
| /** | ||
| * The date and time when the case was created. For example "2024-01-01T00:00:00Z" | ||
| */ | ||
| "ticketCreationDateTime": string; | ||
| /** | ||
| * The ID of the user whose actions are being displayed. For example in email format "[email protected]". | ||
| */ | ||
| "userId": string; | ||
| } | ||
| interface AtomicIpxBody { | ||
| "displayFooterSlot"?: boolean; | ||
| "isOpen"?: boolean; | ||
|
|
@@ -9579,6 +9627,7 @@ declare namespace LocalJSX { | |
| "atomic-insight-tabs": AtomicInsightTabs; | ||
| "atomic-insight-timeframe-facet": AtomicInsightTimeframeFacet; | ||
| "atomic-insight-user-actions-session": AtomicInsightUserActionsSession; | ||
| "atomic-insight-user-actions-timeline": AtomicInsightUserActionsTimeline; | ||
| "atomic-ipx-body": AtomicIpxBody; | ||
| "atomic-ipx-button": AtomicIpxButton; | ||
| "atomic-ipx-embedded": AtomicIpxEmbedded; | ||
|
|
@@ -9980,6 +10029,14 @@ declare module "@stencil/core" { | |
| * @example <atomic-insight-user-actions-session userActions={actions} startTimestamp={1723035731}></atomic-insight-user-actions-session> | ||
| */ | ||
| "atomic-insight-user-actions-session": LocalJSX.AtomicInsightUserActionsSession & JSXBase.HTMLAttributes<HTMLAtomicInsightUserActionsSessionElement>; | ||
| /** | ||
| * This component displays all the actions performed by a user around the time they created a case. | ||
| * The actions are grouped into multiple sessions, including the session during which the case was created, | ||
| * the sessions preceding the case creation and the sessions following the case creation. | ||
| * @component | ||
| * @example <AtomicInsightUserActionsTimeline userId={'123'} caseCreationDate={'2024-08-15T10:00:00Z'} /> | ||
| */ | ||
| "atomic-insight-user-actions-timeline": LocalJSX.AtomicInsightUserActionsTimeline & JSXBase.HTMLAttributes<HTMLAtomicInsightUserActionsTimelineElement>; | ||
| "atomic-ipx-body": LocalJSX.AtomicIpxBody & JSXBase.HTMLAttributes<HTMLAtomicIpxBodyElement>; | ||
| "atomic-ipx-button": LocalJSX.AtomicIpxButton & JSXBase.HTMLAttributes<HTMLAtomicIpxButtonElement>; | ||
| "atomic-ipx-embedded": LocalJSX.AtomicIpxEmbedded & JSXBase.HTMLAttributes<HTMLAtomicIpxEmbeddedElement>; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
...atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.new.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters'; | ||
| import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component'; | ||
| import type {Meta, StoryObj as Story} from '@storybook/web-components'; | ||
| import {wrapInInsightInterface} from '../../../../../storybookUtils/insight/insight-interface-wrapper'; | ||
|
|
||
| const {decorator, play} = wrapInInsightInterface(); | ||
|
|
||
| const meta: Meta = { | ||
| component: 'atomic-insight-user-actions-timeline', | ||
| title: 'Atomic/Insight/UserActionsTimelines', | ||
| id: 'atomic-insight-user-actions-timeline', | ||
|
|
||
| render: renderComponent, | ||
| decorators: [decorator], | ||
| parameters, | ||
| play, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const Default: Story = { | ||
| name: 'atomic-insight-user-actions-timeline', | ||
| play: async (context) => { | ||
| await play(context); | ||
| }, | ||
| }; |
6 changes: 6 additions & 0 deletions
6
...er-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.pcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| @import '../../../../global/global.pcss'; | ||
|
|
||
| .separator { | ||
| height: 1px; | ||
| background-color: #e0e1dd; | ||
| } |
Oops, something went wrong.