Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dashboard): Activity feed panel #7238

Merged
merged 11 commits into from
Dec 12, 2024
Merged

Conversation

scopsy
Copy link
Contributor

@scopsy scopsy commented Dec 8, 2024

What changed? Why was the change needed?

This PR utilized the existing API without any extra changes there.

  • Activity Feed Item panel

Not in scope: Filters, Workflow Editor connectivity

Screenshots

https://www.loom.com/share/0923c3816bbc49fbae494c24266d5c98

CleanShot 2024-12-09 at 14 31 14@2x
CleanShot 2024-12-09 at 14 31 05@2x

CleanShot 2024-12-09 at 14 31 09@2x

Expand for optional sections

Related enterprise PR

Special notes for your reviewer

Copy link

netlify bot commented Dec 8, 2024

Deploy Preview for dashboard-v2-novu-staging ready!

Name Link
🔨 Latest commit 7cf8a5c
🔍 Latest deploy log https://app.netlify.com/sites/dashboard-v2-novu-staging/deploys/67570d023da8620008f6091b
😎 Deploy Preview https://deploy-preview-7238.dashboard-v2.novu-staging.co
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@scopsy scopsy changed the title feat(dashboard): Activity feed page feat(dashboard): Activity feed page - DRAFT Dec 8, 2024
Copy link

netlify bot commented Dec 8, 2024

Deploy Preview for dev-web-novu ready!

Name Link
🔨 Latest commit 7cf8a5c
🔍 Latest deploy log https://app.netlify.com/sites/dev-web-novu/deploys/67570d02d001340007777a98
😎 Deploy Preview https://deploy-preview-7238.dashboard.novu-staging.co
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@scopsy scopsy requested a review from LetItRock December 10, 2024 11:58
Comment on lines +107 to +186
TODO: Missing backend support for digest events widget
{job.type === 'digest' && job.digest?.events && (
<ActivityDetailCard title="Digest Events" expandable={true} open>
<div className="min-w-0 max-w-full font-mono">
{job.digest.events.map((event: DigestEvent, index: number) => (
<div key={index} className="group flex items-center gap-2 rounded-sm px-1 py-1.5 hover:bg-neutral-100">
<RiCheckboxCircleLine className="text-success h-4 w-4 shrink-0" />
<div className="flex items-center gap-2 truncate">
<span className="truncate text-xs text-neutral-500">{event.type}</span>
<span className="text-xs text-neutral-400">
{`${format(new Date(job.updatedAt), 'HH:mm')} UTC`}
</span>
</div>
</div>
))}
</div>
</ActivityDetailCard>
)} */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How much effort is to enrich the API accordingly?

apps/dashboard/src/pages/activity-feed.tsx Outdated Show resolved Hide resolved
apps/dashboard/src/pages/activity-feed.tsx Outdated Show resolved Hide resolved
);
}

function LoadingSkeleton() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we have it as a separate component, then whenever we update the layout of the panel or change anything in there, we will need to "remember" to make the same adjustments for the skeleton. Ideally, we should reuse the same layout component or have skeletons embedded into the ActivityPanel.

apps/dashboard/src/components/activity/activity-panel.tsx Outdated Show resolved Hide resolved
apps/dashboard/src/components/activity/activity-panel.tsx Outdated Show resolved Hide resolved
apps/dashboard/src/components/activity/activity-panel.tsx Outdated Show resolved Hide resolved

export function ActivityDetailCard({ title, timestamp, expandable = false, open, children }: ActivityDetailCardProps) {
const [internalOpen, setInternalOpen] = useState(false);
const isExpanded = open ?? internalOpen;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have the accordion primitive that we can use for the nice animation. However, I don't know if it will require doing some updates.

@scopsy scopsy merged commit c2cdd53 into new-activity-feed-page Dec 12, 2024
8 checks passed
@scopsy scopsy deleted the activity-feed-page branch December 12, 2024 07:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants