[WEB-2688] chore: added icons and splitted issue header #6195
Conversation
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
WalkthroughThe changes in this pull request primarily involve adding new exports and components related to project links and icons. The Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (13)
packages/types/src/project/project_link.d.ts (2)
9-9: Consider adding type safety to metadata fieldUsing
anytype reduces type safety. Consider defining a specific interface for the metadata structure if known, or useRecord<string, unknown>as a safer alternative toany.- metadata: any; + metadata: Record<string, unknown>;
12-12: Remove unnecessary commentThe comment "//need" appears to be a leftover note and should be removed.
- //needweb/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx (1)
3-3: Consider consistent naming with IssuesHeader componentThe component name
ProjectIssueHeader(singular) is inconsistent with the importedIssuesHeader(plural). Consider renaming toProjectIssuesHeaderfor consistency.-export const ProjectIssueHeader = () => <IssuesHeader />; +export const ProjectIssuesHeader = () => <IssuesHeader />;web/core/components/dropdowns/member/avatar.tsx (1)
Line range hint
32-34: Add null check for userDetails before accessing avatar_urlThe current implementation might cause issues if
userDetailsis undefined.- return <Avatar key={userId} src={getFileURL(userDetails.avatar_url)} name={userDetails.display_name} />; + return ( + <Avatar + key={userId} + src={getFileURL(userDetails?.avatar_url)} + name={userDetails?.display_name} + /> + );web/ce/components/issues/header.tsx (3)
39-40: Consider moving URL construction to a utility functionThe URL construction logic could be moved to a helper function for better reusability and testing.
+const getPublishedURL = (spaceBaseUrl: string, spaceBasePath: string, anchor?: string) => { + const baseUrl = spaceBaseUrl.trim() === "" ? window.location.origin : spaceBaseUrl; + return `${baseUrl}${spaceBasePath}/issues/${anchor}`; +}; - const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH; - const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`; + const publishedURL = getPublishedURL(SPACE_BASE_URL, SPACE_BASE_PATH, currentProjectDetails?.anchor);
91-96: Add aria-label to improve accessibilityThe external link should have an aria-label for better screen reader support.
<a href={publishedURL} className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100" target="_blank" rel="noopener noreferrer" + aria-label="View public issues page" >
23-130: Consider splitting the component for better maintainabilityThe component has multiple responsibilities and could be split into smaller, more focused components:
- Header navigation (breadcrumbs)
- Issue count display
- Public link section
- Action buttons section
This would improve maintainability and testing.
Would you like me to provide an example of how to split this component?
packages/ui/src/icons/activity-icon.tsx (1)
5-22: LGTM with suggestions for accessibility improvementsThe implementation looks good, but consider enhancing accessibility:
Add ARIA attributes and title for screen readers:
export const ActivityIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => ( <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Activity" > + <title>Activity</title> <g clip-path="url(#clip0_15681_9387)">packages/ui/src/icons/index.ts (1)
Line range hint
1-49: Remove duplicate export and consider maintaining alphabetical orderThere are two issues to address:
- The
info-iconis exported twice (see line 29 and line 31)- New exports are added at the end instead of maintaining alphabetical order
Consider this reorganization:
-export * from "./info-icon"; export * from "./dropdown-icon"; // ... other exports ... -export * from "./info-icon"; // Remove duplicate // ... other exports ... +export * from "./activity-icon"; +export * from "./at-risk-icon"; +export * from "./off-track-icon"; +export * from "./on-track-icon"; +export * from "./overview-icon"; +export * from "./updates-icon";packages/ui/src/icons/overview-icon.tsx (1)
5-21: Consider maintaining consistency with ActivityIcon implementationTwo suggestions for improvement:
- Props handling differs from ActivityIcon (explicit defaults vs rest props)
- Fill color is hardcoded, limiting theme customization
Consider these improvements:
-export const OverviewIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className = "" }) => ( +export const OverviewIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => ( <svg - width={width} - height={height} + width="16" + height="16" className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" + {...rest} > <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H3.5C9.02267 2.5 13.5 6.97733 13.5 12.5V13C13.5 13.1326 13.4473 13.2598 13.3536 13.3536C13.2598 13.4473 13.1326 13.5 13 13.5H12.5C12.3674 13.5 12.2402 13.4473 12.1464 13.3536C12.0527 13.2598 12 13.1326 12 13V12.5C12 7.80533 8.19467 4 3.5 4H3C2.86739 4 2.74021 3.94732 2.64645 3.85355C2.55268 3.75979 2.5 3.63261 2.5 3.5V3ZM2.5 7.5C2.5 7.36739 2.55268 7.24022 2.64645 7.14645C2.74021 7.05268 2.86739 7 3 7H3.5C4.22227 7 4.93747 7.14226 5.60476 7.41866C6.27205 7.69506 6.87837 8.10019 7.38909 8.61091C7.89981 9.12164 8.30494 9.72795 8.58134 10.3952C8.85774 11.0625 9 11.7777 9 12.5V13C9 13.1326 8.94732 13.2598 8.85355 13.3536C8.75978 13.4473 8.63261 13.5 8.5 13.5H8C7.86739 13.5 7.74022 13.4473 7.64645 13.3536C7.55268 13.2598 7.5 13.1326 7.5 13V12.5C7.5 11.4391 7.07857 10.4217 6.32843 9.67157C5.57828 8.92143 4.56087 8.5 3.5 8.5H3C2.86739 8.5 2.74021 8.44732 2.64645 8.35355C2.55268 8.25978 2.5 8.13261 2.5 8V7.5ZM2.5 12.5C2.5 12.2348 2.60536 11.9804 2.79289 11.7929C2.98043 11.6054 3.23478 11.5 3.5 11.5C3.76522 11.5 4.01957 11.6054 4.20711 11.7929C4.39464 11.9804 4.5 12.2348 4.5 12.5C4.5 12.7652 4.39464 13.0196 4.20711 13.2071C4.01957 13.3946 3.76522 13.5 3.5 13.5C3.23478 13.5 2.98043 13.3946 2.79289 13.2071C2.60536 13.0196 2.5 12.7652 2.5 12.5Z" - fill="#455068" + fill="currentColor" /> </svg> );packages/ui/src/icons/updates-icon.tsx (1)
1-18: Standardize icon component implementationsTo maintain consistency across the icon library, consider standardizing the implementation pattern across all icon components:
- Use consistent prop handling:
- Include width, height, className, and rest props
- Use consistent defaults
- Implement consistent accessibility patterns
- Use consistent SVG attribute naming (camelCase)
- Consider creating a base icon component or higher-order component to share common logic
Example base implementation:
interface BaseIconProps extends ISvgIcons { className?: string; ariaLabel: string; } const BaseIcon: React.FC<BaseIconProps> = ({ width = "16", height = "16", className = "text-current", ariaLabel, ...rest }) => ( <svg width={width} height={height} role="img" aria-label={ariaLabel} className={className} {...rest} > {/* children */} </svg> );packages/ui/src/icons/on-track-icon.tsx (2)
5-5: Consider adding ARIA attributes for accessibility.The icon might need appropriate ARIA attributes to improve accessibility. Consider adding
role="img"andaria-labelto describe the icon's purpose.-export const OnTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( +export const OnTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( + <svg + role="img" + aria-label="On track status indicator"
42-46: Consider making the clip-path ID unique.The hardcoded clip-path ID
clip0_21157_107468could potentially clash if multiple instances of the icon are used on the same page. Consider generating a unique ID per instance.+const uniqueId = `clip-${Math.random().toString(36).substr(2, 9)}`; + export const OnTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> ... - <g clip-path="url(#clip0_21157_107468)"> + <g clip-path={`url(#${uniqueId})`}> ... <defs> - <clipPath id="clip0_21157_107468"> + <clipPath id={uniqueId}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
packages/hooks/src/index.ts(1 hunks)packages/types/src/project/index.ts(1 hunks)packages/types/src/project/project_link.d.ts(1 hunks)packages/ui/src/icons/activity-icon.tsx(1 hunks)packages/ui/src/icons/at-risk-icon.tsx(1 hunks)packages/ui/src/icons/index.ts(1 hunks)packages/ui/src/icons/off-track-icon.tsx(1 hunks)packages/ui/src/icons/on-track-icon.tsx(1 hunks)packages/ui/src/icons/overview-icon.tsx(1 hunks)packages/ui/src/icons/updates-icon.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx(1 hunks)web/ce/components/issues/header.tsx(1 hunks)web/ce/components/issues/index.ts(1 hunks)web/core/components/dropdowns/member/avatar.tsx(3 hunks)web/core/constants/event-tracker.ts(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- web/ce/components/issues/index.ts
- packages/hooks/src/index.ts
🔇 Additional comments (9)
packages/types/src/project/index.ts (1)
3-3: LGTM!
The new export follows the established pattern and maintains alphabetical ordering.
packages/types/src/project/project_link.d.ts (2)
1-4: LGTM!
The type definition is clear and well-structured, accurately representing editable fields for a project link.
16-22: LGTM!
The mapping types are well-structured and serve clear purposes. The naming convention is consistent and descriptive.
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx (1)
1-3: LGTM! Clean refactor moving complexity to a dedicated component.
The simplification improves maintainability by delegating the header logic to a specialized component.
web/core/components/dropdowns/member/avatar.tsx (2)
17-17: LGTM! Good enhancement adding size flexibility
The addition of the size prop with support for both predefined sizes and custom numbers improves component reusability.
51-51: LGTM! Good use of cn utility for className management
The use of the cn utility from @plane/editor improves class name management flexibility.
web/core/constants/event-tracker.ts (1)
11-12: LGTM: Type enhancement aligns with existing patterns
The addition of optional updates and path properties to EventProps type maintains consistency with IssueEventProps and supports the existing implementation of getIssueEventPayload.
packages/ui/src/icons/on-track-icon.tsx (2)
1-3: LGTM! Clean and minimal imports.
16-41: LGTM! Well-structured SVG paths.
The paths are well-defined with appropriate use of fill-rule and clip-rule for the checkmark design.
web/core/constants/event-tracker.ts
Outdated
| @@ -206,7 +208,7 @@ export const PRODUCT_TOUR_COMPLETED = "Product tour completed"; | |||
| export const PRODUCT_TOUR_SKIPPED = "Product tour skipped"; | |||
| // Dashboard Events | |||
| export const CHANGELOG_REDIRECTED = "Changelog redirected"; | |||
| export const GITHUB_REDIRECTED = "GitHub redirected"; | |||
| export const GITHUB_REDIRECTED = "Github redirected"; | |||
There was a problem hiding this comment.
Maintain correct GitHub capitalization
The official brand name is "GitHub" (with a capital 'H'), not "Github". This should be preserved for consistency with GitHub's branding guidelines.
Apply this diff to fix the capitalization:
-export const GITHUB_REDIRECTED = "Github redirected";
+export const GITHUB_REDIRECTED = "GitHub redirected";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const GITHUB_REDIRECTED = "Github redirected"; | |
| export const GITHUB_REDIRECTED = "GitHub redirected"; |
Comment on lines
+5
to
+29
| export const AtRiskIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( | ||
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | ||
| fill="#CC7700" | ||
| /> | ||
| <path | ||
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | ||
| stroke="#F3F4F7" | ||
| stroke-width="2" | ||
| /> | ||
| <g clip-path="url(#clip0_21157_25600)"> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M10.0369 15.3346H10.667C11.0352 15.3346 11.3337 15.6331 11.3337 16.0013C11.3337 16.3695 11.0352 16.668 10.667 16.668H10.0369C10.3686 19.6679 12.912 22.0013 16.0003 22.0013C19.0887 22.0013 21.6321 19.6679 21.9637 16.668H21.3337C20.9655 16.668 20.667 16.3695 20.667 16.0013C20.667 15.6331 20.9655 15.3346 21.3337 15.3346H21.9637C21.6321 12.3347 19.0887 10.0013 16.0003 10.0013C12.912 10.0013 10.3686 12.3347 10.0369 15.3346ZM8.66699 16.0013C8.66699 11.9512 11.9502 8.66797 16.0003 8.66797C20.0504 8.66797 23.3337 11.9512 23.3337 16.0013C23.3337 20.0514 20.0504 23.3346 16.0003 23.3346C11.9502 23.3346 8.66699 20.0514 8.66699 16.0013ZM16.0003 12.668C16.3685 12.668 16.667 12.9664 16.667 13.3346V16.0013C16.667 16.3695 16.3685 16.668 16.0003 16.668C15.6321 16.668 15.3337 16.3695 15.3337 16.0013V13.3346C15.3337 12.9664 15.6321 12.668 16.0003 12.668ZM15.3337 18.668C15.3337 18.2998 15.6321 18.0013 16.0003 18.0013H16.007C16.3752 18.0013 16.6737 18.2998 16.6737 18.668C16.6737 19.0362 16.3752 19.3346 16.007 19.3346H16.0003C15.6321 19.3346 15.3337 19.0362 15.3337 18.668Z" | ||
| fill="white" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_21157_25600"> | ||
| <rect width="16" height="16" fill="white" transform="translate(8 8)" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes and fix prop usage
The component has several areas for improvement:
- The width/height props aren't being used in the SVG element
- Missing accessibility attributes
- Inconsistent attribute naming convention (stroke-width vs strokeWidth)
Apply these improvements:
export const AtRiskIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
<svg
- width="32"
- height="32"
+ width={width}
+ height={height}
viewBox="0 0 32 32"
+ role="img"
+ aria-label="At Risk Icon"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
fill="#CC7700"
/>
<path
d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
stroke="#F3F4F7"
- stroke-width="2"
+ strokeWidth="2"
/>Committable suggestion skipped: line range outside the PR's diff.
Comment on lines
+5
to
+29
| export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( | ||
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | ||
| fill="#CC0000" | ||
| /> | ||
| <path | ||
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | ||
| stroke="#F3F4F7" | ||
| stroke-width="2" | ||
| /> | ||
| <g clip-path="url(#clip0_21157_78200)"> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M10.0369 15.3346H10.667C11.0352 15.3346 11.3337 15.6331 11.3337 16.0013C11.3337 16.3695 11.0352 16.668 10.667 16.668H10.0369C10.3686 19.6679 12.912 22.0013 16.0003 22.0013C19.0887 22.0013 21.6321 19.6679 21.9637 16.668H21.3337C20.9655 16.668 20.667 16.3695 20.667 16.0013C20.667 15.6331 20.9655 15.3346 21.3337 15.3346H21.9637C21.6321 12.3347 19.0887 10.0013 16.0003 10.0013C12.912 10.0013 10.3686 12.3347 10.0369 15.3346ZM8.66699 16.0013C8.66699 11.9512 11.9502 8.66797 16.0003 8.66797C20.0504 8.66797 23.3337 11.9512 23.3337 16.0013C23.3337 20.0514 20.0504 23.3346 16.0003 23.3346C11.9502 23.3346 8.66699 20.0514 8.66699 16.0013ZM14.667 12.668C15.0352 12.668 15.3337 12.9664 15.3337 13.3346V16.0013C15.3337 16.3695 15.0352 16.668 14.667 16.668C14.2988 16.668 14.0003 16.3695 14.0003 16.0013V13.3346C14.0003 12.9664 14.2988 12.668 14.667 12.668ZM17.3337 12.668C17.7018 12.668 18.0003 12.9664 18.0003 13.3346V16.0013C18.0003 16.3695 17.7018 16.668 17.3337 16.668C16.9655 16.668 16.667 16.3695 16.667 16.0013V13.3346C16.667 12.9664 16.9655 12.668 17.3337 12.668ZM14.0003 18.668C14.0003 18.2998 14.2988 18.0013 14.667 18.0013H14.6737C15.0418 18.0013 15.3403 18.2998 15.3403 18.668C15.3403 19.0362 15.0418 19.3346 14.6737 19.3346H14.667C14.2988 19.3346 14.0003 19.0362 14.0003 18.668ZM16.667 18.668C16.667 18.2998 16.9655 18.0013 17.3337 18.0013H17.3403C17.7085 18.0013 18.007 18.2998 18.007 18.668C18.007 19.0362 17.7085 19.3346 17.3403 19.3346H17.3337C16.9655 19.3346 16.667 19.0362 16.667 18.668Z" | ||
| fill="white" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_21157_78200"> | ||
| <rect width="16" height="16" fill="white" transform="translate(8 8)" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize SVG and add accessibility attributes
Similar to AtRiskIcon, this component needs accessibility improvements. Additionally, the SVG structure could be optimized.
Apply these improvements:
export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
<svg
- width="32"
- height="32"
+ width={width}
+ height={height}
viewBox="0 0 32 32"
+ role="img"
+ aria-label="Off Track Icon"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
fill="#CC0000"
+ stroke="#F3F4F7"
+ strokeWidth="2"
/>
- <path
- d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
- stroke="#F3F4F7"
- stroke-width="2"
- />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | |
| fill="#CC0000" | |
| /> | |
| <path | |
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | |
| stroke="#F3F4F7" | |
| stroke-width="2" | |
| /> | |
| <g clip-path="url(#clip0_21157_78200)"> | |
| <path | |
| fill-rule="evenodd" | |
| clip-rule="evenodd" | |
| d="M10.0369 15.3346H10.667C11.0352 15.3346 11.3337 15.6331 11.3337 16.0013C11.3337 16.3695 11.0352 16.668 10.667 16.668H10.0369C10.3686 19.6679 12.912 22.0013 16.0003 22.0013C19.0887 22.0013 21.6321 19.6679 21.9637 16.668H21.3337C20.9655 16.668 20.667 16.3695 20.667 16.0013C20.667 15.6331 20.9655 15.3346 21.3337 15.3346H21.9637C21.6321 12.3347 19.0887 10.0013 16.0003 10.0013C12.912 10.0013 10.3686 12.3347 10.0369 15.3346ZM8.66699 16.0013C8.66699 11.9512 11.9502 8.66797 16.0003 8.66797C20.0504 8.66797 23.3337 11.9512 23.3337 16.0013C23.3337 20.0514 20.0504 23.3346 16.0003 23.3346C11.9502 23.3346 8.66699 20.0514 8.66699 16.0013ZM14.667 12.668C15.0352 12.668 15.3337 12.9664 15.3337 13.3346V16.0013C15.3337 16.3695 15.0352 16.668 14.667 16.668C14.2988 16.668 14.0003 16.3695 14.0003 16.0013V13.3346C14.0003 12.9664 14.2988 12.668 14.667 12.668ZM17.3337 12.668C17.7018 12.668 18.0003 12.9664 18.0003 13.3346V16.0013C18.0003 16.3695 17.7018 16.668 17.3337 16.668C16.9655 16.668 16.667 16.3695 16.667 16.0013V13.3346C16.667 12.9664 16.9655 12.668 17.3337 12.668ZM14.0003 18.668C14.0003 18.2998 14.2988 18.0013 14.667 18.0013H14.6737C15.0418 18.0013 15.3403 18.2998 15.3403 18.668C15.3403 19.0362 15.0418 19.3346 14.6737 19.3346H14.667C14.2988 19.3346 14.0003 19.0362 14.0003 18.668ZM16.667 18.668C16.667 18.2998 16.9655 18.0013 17.3337 18.0013H17.3403C17.7085 18.0013 18.007 18.2998 18.007 18.668C18.007 19.0362 17.7085 19.3346 17.3403 19.3346H17.3337C16.9655 19.3346 16.667 19.0362 16.667 18.668Z" | |
| fill="white" | |
| /> | |
| </g> | |
| <defs> | |
| <clipPath id="clip0_21157_78200"> | |
| <rect width="16" height="16" fill="white" transform="translate(8 8)" /> | |
| </clipPath> | |
| </defs> | |
| </svg> | |
| export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( | |
| <svg | |
| width={width} | |
| height={height} | |
| viewBox="0 0 32 32" | |
| role="img" | |
| aria-label="Off Track Icon" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | |
| fill="#CC0000" | |
| stroke="#F3F4F7" | |
| strokeWidth="2" | |
| /> | |
| <g clip-path="url(#clip0_21157_78200)"> | |
| <path | |
| fill-rule="evenodd" | |
| clip-rule="evenodd" | |
| d="M10.0369 15.3346H10.667C11.0352 15.3346 11.3337 15.6331 11.3337 16.0013C11.3337 16.3695 11.0352 16.668 10.667 16.668H10.0369C10.3686 19.6679 12.912 22.0013 16.0003 22.0013C19.0887 22.0013 21.6321 19.6679 21.9637 16.668H21.3337C20.9655 16.668 20.667 16.3695 20.667 16.0013C20.667 15.6331 20.9655 15.3346 21.3337 15.3346H21.9637C21.6321 12.3347 19.0887 10.0013 16.0003 10.0013C12.912 10.0013 10.3686 12.3347 10.0369 15.3346ZM8.66699 16.0013C8.66699 11.9512 11.9502 8.66797 16.0003 8.66797C20.0504 8.66797 23.3337 11.9512 23.3337 16.0013C23.3337 20.0514 20.0504 23.3346 16.0003 23.3346C11.9502 23.3346 8.66699 20.0514 8.66699 16.0013ZM14.667 12.668C15.0352 12.668 15.3337 12.9664 15.3337 13.3346V16.0013C15.3337 16.3695 15.0352 16.668 14.667 16.668C14.2988 16.668 14.0003 16.3695 14.0003 16.0013V13.3346C14.0003 12.9664 14.2988 12.668 14.667 12.668ZM17.3337 12.668C17.7018 12.668 18.0003 12.9664 18.0003 13.3346V16.0013C18.0003 16.3695 17.7018 16.668 17.3337 16.668C16.9655 16.668 16.667 16.3695 16.667 16.0013V13.3346C16.667 12.9664 16.9655 12.668 17.3337 12.668ZM14.0003 18.668C14.0003 18.2998 14.2988 18.0013 14.667 18.0013H14.6737C15.0418 18.0013 15.3403 18.2998 15.3403 18.668C15.3403 19.0362 15.0418 19.3346 14.6737 19.3346H14.667C14.2988 19.3346 14.0003 19.0362 14.0003 18.668ZM16.667 18.668C16.667 18.2998 16.9655 18.0013 17.3337 18.0013H17.3403C17.7085 18.0013 18.007 18.2998 18.007 18.668C18.007 19.0362 17.7085 19.3346 17.3403 19.3346H17.3337C16.9655 19.3346 16.667 19.0362 16.667 18.668Z" | |
| fill="white" | |
| /> | |
| </g> | |
| <defs> | |
| <clipPath id="clip0_21157_78200"> | |
| <rect width="16" height="16" fill="white" transform="translate(8 8)" /> | |
| </clipPath> | |
| </defs> | |
| </svg> | |
| ) |
Comment on lines
+5
to
+18
| export const UpdatesIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => ( | ||
| <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z" | ||
| fill="#8591AD" | ||
| /> | ||
| <path | ||
| d="M3.83994 11.4947C3.8926 11.4554 3.93701 11.4062 3.97064 11.3497C4.00426 11.2933 4.02645 11.2308 4.03592 11.1658C4.04539 11.1008 4.04197 11.0346 4.02584 10.9709C4.00972 10.9072 3.98121 10.8473 3.94194 10.7947C3.90268 10.742 3.85342 10.6976 3.797 10.664C3.74057 10.6304 3.67807 10.6082 3.61307 10.5987C3.54807 10.5892 3.48184 10.5927 3.41816 10.6088C3.35448 10.6249 3.2946 10.6534 3.24194 10.6927C2.73054 11.0731 2.33288 11.5861 2.092 12.1762C1.85111 12.7663 1.77617 13.4111 1.87528 14.0407C1.89139 14.1455 1.94045 14.2426 2.01536 14.3177C2.09026 14.3929 2.18713 14.4422 2.29194 14.4587C2.92163 14.5577 3.56641 14.4827 4.15652 14.2417C4.74664 14.0007 5.25961 13.6029 5.63994 13.0913C5.68047 13.0388 5.71015 12.9788 5.72723 12.9147C5.74432 12.8506 5.74848 12.7837 5.73948 12.718C5.73047 12.6522 5.70847 12.589 5.67476 12.5318C5.64105 12.4747 5.59631 12.4248 5.54315 12.3852C5.48998 12.3455 5.42945 12.3168 5.36508 12.3007C5.30071 12.2847 5.23379 12.2816 5.16821 12.2917C5.10264 12.3017 5.03973 12.3248 4.98314 12.3594C4.92655 12.394 4.87742 12.4395 4.83861 12.4933C4.60612 12.806 4.30366 13.0599 3.95544 13.2347C3.60722 13.4095 3.22291 13.5004 2.83328 13.5C2.83328 12.68 3.22794 11.9513 3.83994 11.4947Z" | ||
| fill="#8591AD" | ||
| /> | ||
| </svg> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Standardize icon implementation and add accessibility
This component has better prop handling but needs improvements for consistency with other icons:
- Non-standard width (17) might cause alignment issues
- Missing accessibility attributes
- Inconsistent attribute naming
Apply these improvements:
-export const UpdatesIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+export const UpdatesIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className = "text-current", ...rest }) => (
<svg
- width="17"
- height="16"
+ width={width}
+ height={height}
viewBox="0 0 17 16"
+ role="img"
+ aria-label="Updates Icon"
fill="none"
xmlns="http://www.w3.org/2000/svg"
+ className={className}
+ {...rest}
>
<path
- fill-rule="evenodd"
- clip-rule="evenodd"
+ fillRule="evenodd"
+ clipRule="evenodd"
d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const UpdatesIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => ( | |
| <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| fill-rule="evenodd" | |
| clip-rule="evenodd" | |
| d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z" | |
| fill="#8591AD" | |
| /> | |
| <path | |
| d="M3.83994 11.4947C3.8926 11.4554 3.93701 11.4062 3.97064 11.3497C4.00426 11.2933 4.02645 11.2308 4.03592 11.1658C4.04539 11.1008 4.04197 11.0346 4.02584 10.9709C4.00972 10.9072 3.98121 10.8473 3.94194 10.7947C3.90268 10.742 3.85342 10.6976 3.797 10.664C3.74057 10.6304 3.67807 10.6082 3.61307 10.5987C3.54807 10.5892 3.48184 10.5927 3.41816 10.6088C3.35448 10.6249 3.2946 10.6534 3.24194 10.6927C2.73054 11.0731 2.33288 11.5861 2.092 12.1762C1.85111 12.7663 1.77617 13.4111 1.87528 14.0407C1.89139 14.1455 1.94045 14.2426 2.01536 14.3177C2.09026 14.3929 2.18713 14.4422 2.29194 14.4587C2.92163 14.5577 3.56641 14.4827 4.15652 14.2417C4.74664 14.0007 5.25961 13.6029 5.63994 13.0913C5.68047 13.0388 5.71015 12.9788 5.72723 12.9147C5.74432 12.8506 5.74848 12.7837 5.73948 12.718C5.73047 12.6522 5.70847 12.589 5.67476 12.5318C5.64105 12.4747 5.59631 12.4248 5.54315 12.3852C5.48998 12.3455 5.42945 12.3168 5.36508 12.3007C5.30071 12.2847 5.23379 12.2816 5.16821 12.2917C5.10264 12.3017 5.03973 12.3248 4.98314 12.3594C4.92655 12.394 4.87742 12.4395 4.83861 12.4933C4.60612 12.806 4.30366 13.0599 3.95544 13.2347C3.60722 13.4095 3.22291 13.5004 2.83328 13.5C2.83328 12.68 3.22794 11.9513 3.83994 11.4947Z" | |
| fill="#8591AD" | |
| /> | |
| </svg> | |
| ); | |
| export const UpdatesIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className = "text-current", ...rest }) => ( | |
| <svg | |
| width={width} | |
| height={height} | |
| viewBox="0 0 17 16" | |
| role="img" | |
| aria-label="Updates Icon" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| className={className} | |
| {...rest} | |
| > | |
| <path | |
| fillRule="evenodd" | |
| clipRule="evenodd" | |
| d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z" | |
| fill="#8591AD" | |
| /> | |
| <path | |
| d="M3.83994 11.4947C3.8926 11.4554 3.93701 11.4062 3.97064 11.3497C4.00426 11.2933 4.02645 11.2308 4.03592 11.1658C4.04539 11.1008 4.04197 11.0346 4.02584 10.9709C4.00972 10.9072 3.98121 10.8473 3.94194 10.7947C3.90268 10.742 3.85342 10.6976 3.797 10.664C3.74057 10.6304 3.67807 10.6082 3.61307 10.5987C3.54807 10.5892 3.48184 10.5927 3.41816 10.6088C3.35448 10.6249 3.2946 10.6534 3.24194 10.6927C2.73054 11.0731 2.33288 11.5861 2.092 12.1762C1.85111 12.7663 1.77617 13.4111 1.87528 14.0407C1.89139 14.1455 1.94045 14.2426 2.01536 14.3177C2.09026 14.3929 2.18713 14.4422 2.29194 14.4587C2.92163 14.5577 3.56641 14.4827 4.15652 14.2417C4.74664 14.0007 5.25961 13.6029 5.63994 13.0913C5.68047 13.0388 5.71015 12.9788 5.72723 12.9147C5.74432 12.8506 5.74848 12.7837 5.73948 12.718C5.73047 12.6522 5.70847 12.589 5.67476 12.5318C5.64105 12.4747 5.59631 12.4248 5.54315 12.3852C5.48998 12.3455 5.42945 12.3168 5.36508 12.3007C5.30071 12.2847 5.23379 12.2816 5.16821 12.2917C5.10264 12.3017 5.03973 12.3248 4.98314 12.3594C4.92655 12.394 4.87742 12.4395 4.83861 12.4933C4.60612 12.806 4.30366 13.0599 3.95544 13.2347C3.60722 13.4095 3.22291 13.5004 2.83328 13.5C2.83328 12.68 3.22794 11.9513 3.83994 11.4947Z" | |
| fill="#8591AD" | |
| /> | |
| </svg> | |
| ); |
Comment on lines
+6
to
+15
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | ||
| fill="#1FAD40" | ||
| /> | ||
| <path | ||
| d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z" | ||
| stroke="#F3F4F7" | ||
| stroke-width="2" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider improvements to SVG structure.
- The
widthandheightprops aren't being utilized. The SVG has hardcoded dimensions of 32. - Consider making the colors themeable for better customization support.
- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
- fill="#1FAD40"
+ fill="currentColor"
/>Committable suggestion skipped: line range outside the PR's diff.
SatishGandham
approved these changes
Dec 13, 2024
pushya22
changed the title
This was referenced Dec 17, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
ActivityIcon,AtRiskIcon,OffTrackIcon,OnTrackIcon,OverviewIcon, andUpdatesIcon.IssuesHeadercomponent for enhanced issue management display.Enhancements
sizeproperty.Bug Fixes
ProjectIssuesHeaderfor simplified rendering and improved performance.Documentation