chore: update new brand empty states#7543
Conversation
WalkthroughAsset 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
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
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/empty-state/empty-updates-light.pngis excluded by!**/*.pngapps/web/public/empty-state/pages/all-filters-dark.svgis excluded by!**/*.svgapps/web/public/empty-state/pages/all-filters-light.svgis excluded by!**/*.svgapps/web/public/empty-state/pages/all-filters.svgis excluded by!**/*.svgapps/web/public/empty-state/pages/name-filter-dark.svgis excluded by!**/*.svgapps/web/public/empty-state/pages/name-filter-light.svgis excluded by!**/*.svgapps/web/public/empty-state/pages/name-filter.svgis excluded by!**/*.svgapps/web/public/empty-state/project-settings/estimates-dark.pngis excluded by!**/*.pngapps/web/public/empty-state/project-settings/estimates-light.pngis excluded by!**/*.pngapps/web/public/empty-state/project-settings/updates-dark.pngis excluded by!**/*.pngapps/web/public/empty-state/project-settings/updates-light.pngis excluded by!**/*.pngapps/web/public/empty-state/project/all-filters-dark.svgis excluded by!**/*.svgapps/web/public/empty-state/project/all-filters-light.svgis excluded by!**/*.svgapps/web/public/empty-state/project/all-filters.svgis excluded by!**/*.svgapps/web/public/empty-state/project/name-filter-dark.svgis excluded by!**/*.svgapps/web/public/empty-state/project/name-filter-light.svgis excluded by!**/*.svgapps/web/public/empty-state/project/name-filter.svgis 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.tsxapps/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.tsxapps/web/core/components/project/card-list.tsxapps/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.tsxapps/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.tsxapps/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
useResolvedAssetPathis invoked at the top level (before any earlyreturn), so hook-ordering rules are preserved, and the new branded empty-state asset path is resolved exactly once per render.
* 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>
Description
This update adds the new branding empty states.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit