Skip to content

chore: update new brand empty states#7543

Merged
anmolsinghbhatia merged 1 commit intobrand-revampfrom
chore-updated_empty_states
Aug 5, 2025
Merged

chore: update new brand empty states#7543
anmolsinghbhatia merged 1 commit intobrand-revampfrom
chore-updated_empty_states

Conversation

@vamsikrishnamathala
Copy link
Member

@vamsikrishnamathala vamsikrishnamathala commented Aug 5, 2025

Description

This update adds the new branding empty states.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • Feature (non-breaking change which adds functionality)
  • Improvement (change that would cause existing functionality to not work as expected)
  • Code refactoring
  • Performance improvements
  • Documentation update

Screenshots and Media (if applicable)

Test Scenarios

References

Summary by CodeRabbit

  • New Features
    • Updated empty state visuals for workspaces with no projects, drafts, or filtered results by using dynamically resolved asset paths for images.
  • Refactor
    • Replaced static SVG imports with dynamic asset path resolution for empty state images across various components, improving asset management and consistency.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 5, 2025

Walkthrough

Asset handling for empty state images in several UI components has been refactored. Static SVG imports have been replaced with dynamically resolved asset paths using a hook. Additionally, the asset path for the workspace draft empty state has been updated to a new location. No logic, control flow, or exported entity signatures were changed.

Changes

Cohort / File(s) Change Summary
Workspace Draft Empty State Asset Path
apps/web/core/components/issues/workspace-draft/root.tsx
Updates the empty state asset path from "/empty-state/onboarding/projects" to "/empty-state/draft/draft-issues-empty".
Dynamic Asset Path Resolution for Empty State Images
apps/web/core/components/pages/pages-list-main-content.tsx, apps/web/core/components/project/card-list.tsx
Replaces static SVG imports for empty state images with asset paths dynamically resolved via a hook; updates image rendering accordingly.

Sequence Diagram(s)

sequenceDiagram
    participant UIComponent as UI Component
    participant AssetHook as useResolvedAssetPath
    participant Image as Image Component

    UIComponent->>AssetHook: Request asset path for image
    AssetHook-->>UIComponent: Return resolved asset path
    UIComponent->>Image: Render with resolved asset path as src
Loading

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

🧹chore, ready to merge

Suggested reviewers

  • anmolsinghbhatia
  • prateekshourya29

Poem

🐇
Hopping through the code with glee,
Images now resolved dynamically!
No more static paths in sight,
Assets load just right.
Empty states now shine anew—
A tidy change, from me to you!

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore-updated_empty_states

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@vamsikrishnamathala vamsikrishnamathala changed the base branch from preview to brand-revamp August 5, 2025 10:12
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dffe3a8 and 83f2883.

⛔ Files ignored due to path filters (17)
  • apps/web/public/empty-state/empty-updates-light.png is excluded by !**/*.png
  • apps/web/public/empty-state/pages/all-filters-dark.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/pages/all-filters-light.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/pages/all-filters.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/pages/name-filter-dark.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/pages/name-filter-light.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/pages/name-filter.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/project-settings/estimates-dark.png is excluded by !**/*.png
  • apps/web/public/empty-state/project-settings/estimates-light.png is excluded by !**/*.png
  • apps/web/public/empty-state/project-settings/updates-dark.png is excluded by !**/*.png
  • apps/web/public/empty-state/project-settings/updates-light.png is excluded by !**/*.png
  • apps/web/public/empty-state/project/all-filters-dark.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/project/all-filters-light.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/project/all-filters.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/project/name-filter-dark.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/project/name-filter-light.svg is excluded by !**/*.svg
  • apps/web/public/empty-state/project/name-filter.svg is excluded by !**/*.svg
📒 Files selected for processing (3)
  • apps/web/core/components/issues/workspace-draft/root.tsx (1 hunks)
  • apps/web/core/components/pages/pages-list-main-content.tsx (1 hunks)
  • apps/web/core/components/project/card-list.tsx (1 hunks)
🧰 Additional context used
🧠 Learnings (9)
📓 Common learnings
Learnt from: prateekshourya29
PR: makeplane/plane#7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
Learnt from: mathalav55
PR: makeplane/plane#6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/archive.tsx:11-14
Timestamp: 2024-11-28T07:02:54.664Z
Learning: When components are still located in `core`, it's appropriate for files to import them using `@/components/...`, and the migration to the new import paths is not necessary in such cases.
Learnt from: mathalav55
PR: makeplane/plane#6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/read.tsx:11-12
Timestamp: 2024-11-28T07:02:15.514Z
Learning: Some components are still in core and have not been moved yet, so their import paths remain the same.
📚 Learning: in the plane codebase serializers, workspace_id is not consistently passed in serializer context, so...
Learnt from: NarayanBavisetti
PR: makeplane/plane#7460
File: apps/api/plane/app/serializers/draft.py:112-122
Timestamp: 2025-07-23T18:18:06.875Z
Learning: In the Plane codebase serializers, workspace_id is not consistently passed in serializer context, so parent issue validation in DraftIssueCreateSerializer only checks project_id rather than both workspace_id and project_id. The existing project member authentication system already validates that users can only access projects they belong to, providing sufficient security without risking breaking functionality by adding workspace_id validation where the context might not be available.

Applied to files:

  • apps/web/core/components/issues/workspace-draft/root.tsx
📚 Learning: when reviewing breadcrumb components that accept projectid or similar props, check if empty strings ...
Learnt from: prateekshourya29
PR: makeplane/plane#7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.

Applied to files:

  • apps/web/core/components/issues/workspace-draft/root.tsx
  • apps/web/core/components/project/card-list.tsx
📚 Learning: in the plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making i...
Learnt from: vamsikrishnamathala
PR: makeplane/plane#7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.

Applied to files:

  • apps/web/core/components/issues/workspace-draft/root.tsx
  • apps/web/core/components/project/card-list.tsx
  • apps/web/core/components/pages/pages-list-main-content.tsx
📚 Learning: all role enums in this codebase (euserpermissions, euserworkspaceroles, euserprojectroles) use the s...
Learnt from: prateekshourya29
PR: makeplane/plane#7094
File: web/core/store/user/base-permissions.store.ts:196-201
Timestamp: 2025-05-28T09:53:44.635Z
Learning: All role enums in this codebase (EUserPermissions, EUserWorkspaceRoles, EUserProjectRoles) use the same consistent numeric values: ADMIN = 20, MEMBER = 15, GUEST = 5. None of these enums have a value of 0, so truthy checks work correctly with these enum values.

Applied to files:

  • apps/web/core/components/issues/workspace-draft/root.tsx
📚 Learning: in the updateissuedates method of baseissuesstore (web/core/store/issue/helpers/base-issues.store.ts...
Learnt from: vamsikrishnamathala
PR: makeplane/plane#7214
File: web/core/store/issue/helpers/base-issues.store.ts:117-117
Timestamp: 2025-06-16T07:23:39.497Z
Learning: In the updateIssueDates method of BaseIssuesStore (web/core/store/issue/helpers/base-issues.store.ts), the projectId parameter is intentionally made optional to support override implementations in subclasses. The base implementation requires projectId and includes an early return check, but making it optional allows derived classes to override the method with different parameter requirements.

Applied to files:

  • apps/web/core/components/issues/workspace-draft/root.tsx
📚 Learning: the `getprojectlabelids` function in the label store handles undefined projectid internally, so it's...
Learnt from: prateekshourya29
PR: makeplane/plane#7363
File: apps/web/core/components/issues/select/dropdown.tsx:9-11
Timestamp: 2025-07-08T13:41:01.659Z
Learning: The `getProjectLabelIds` function in the label store handles undefined projectId internally, so it's safe to pass undefined values to it without explicit checks in the calling component.

Applied to files:

  • apps/web/core/components/issues/workspace-draft/root.tsx
  • apps/web/core/components/project/card-list.tsx
📚 Learning: when components are still located in `core`, it's appropriate for files to import them using `@/comp...
Learnt from: mathalav55
PR: makeplane/plane#6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/archive.tsx:11-14
Timestamp: 2024-11-28T07:02:54.664Z
Learning: When components are still located in `core`, it's appropriate for files to import them using `@/components/...`, and the migration to the new import paths is not necessary in such cases.

Applied to files:

  • apps/web/core/components/project/card-list.tsx
  • apps/web/core/components/pages/pages-list-main-content.tsx
📚 Learning: in packages/ui/.storybook/main.ts, the webpackfinal function intentionally overrides the css loader ...
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.

Applied to files:

  • apps/web/core/components/pages/pages-list-main-content.tsx
🪛 Biome (2.1.2)
apps/web/core/components/project/card-list.tsx

[error] 74-74: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)


[error] 78-78: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)

apps/web/core/components/pages/pages-list-main-content.tsx

[error] 112-112: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)


[error] 113-113: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: Analyze (javascript)
  • GitHub Check: Analyze (python)
  • GitHub Check: Build and lint web apps
  • GitHub Check: Build and lint web apps
🔇 Additional comments (1)
apps/web/core/components/issues/workspace-draft/root.tsx (1)

44-44: Asset path change looks good

useResolvedAssetPath is invoked at the top level (before any early return), so hook-ordering rules are preserved, and the new branded empty-state asset path is resolved exactly once per render.

@anmolsinghbhatia anmolsinghbhatia merged commit 462c641 into brand-revamp Aug 5, 2025
5 of 8 checks passed
@anmolsinghbhatia anmolsinghbhatia deleted the chore-updated_empty_states branch August 5, 2025 10:27
sriramveeraghanta pushed a commit that referenced this pull request Aug 6, 2025
* chore: empty state asset and theme improvement (#7542)

* chore: empty state asset and theme improvement

* chore: upgrade modal improvement and code refactor

* feat: onboarding revamp and theme changes (#7541)

* refactor: consolidate password strength indicator into shared UI package

* chore: remove old password strength meter implementations

* chore: update package dependencies for password strength refactor

* chore: code refactor

* chore: brand logo added

* chore:  terms and conditions refactor

* chore: auth form refactor

* chore: oauth enhancements and refactor

* chore: plane new logos added

* chore: auth input form field added to ui package

* chore: password input component added

* chore: web auth refactor

* chore: update brand colors and remove onboarding-specific styles

* chore: clean up unused assets

* chore: profile menu text overflow

* chore: theme related changes

* chore: logo spinner updated

* chore: onboarding constant and types updated

* chore: theme changes and code refactor

* feat: onboarding flow revamp

* fix:  build error and code refactoring

* chore: code refactor

* fix: build error

* chore: consent option added to onboarding and code refactor

* fix: build fix

* chore: code refactor

* chore: auth screen revamp and code refactor

* chore: onboarding enhancements

* chore: code refactor

* chore: onboarding logic improvement

* chore: code refactor

* fix: onboarding pre release improvements

* chore: color token updated

* chore: color token updated

* chore: auth screen line height and size improvements

* chore: input height updated

* chore: n-progress theme updated

* chore: theme and logo enhancements

* chore: space auth and code refactor

* chore: update new brand empty states (#7543)

* [WEB-4585]chore: branding updates (#7540)

* chore: updated logo, og image, and loaders

* chore: updated branding colors

* chore: tour modal logo

* chore: updated logo spinner size

* chore: updated email templates logos and colors

* chore: code refactor

* fix: removed conditional hook render

* fix: space app loader

---------

Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>
@coderabbitai coderabbitai bot mentioned this pull request Sep 8, 2025
1 task
@coderabbitai coderabbitai bot mentioned this pull request Oct 6, 2025
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants