improve sidebars #3142
improve sidebars #3142
Conversation
WalkthroughThe pull request makes multiple updates to several front-end components. In the 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🪛 Biome (1.9.4)frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx[error] 617-618: Missing key property for this element in iterable. The order of the items may change, and having a key can help React identify which item was moved. (lint/correctness/useJsxKeyInIterable) [error] 779-780: Missing key property for this element in iterable. The order of the items may change, and having a key can help React identify which item was moved. (lint/correctness/useJsxKeyInIterable) [error] 812-813: Missing key property for this element in iterable. The order of the items may change, and having a key can help React identify which item was moved. (lint/correctness/useJsxKeyInIterable) [error] 845-846: Missing key property for this element in iterable. The order of the items may change, and having a key can help React identify which item was moved. (lint/correctness/useJsxKeyInIterable) ⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (10)
✨ Finishing Touches
🪧 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: 2
🔭 Outside diff range comments (1)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (1)
3-15:⚠️ Potential issueUnused import detected.
The static analysis shows that
faCircleis imported but never used in the component.-import { - faArrowRotateRight, - faCheckCircle, - faCircle, - faCircleDot, - faClock, - faEyeSlash, - faPlus, - faShare, - faTag, - faTrash -} from "@fortawesome/free-solid-svg-icons"; +import { + faArrowRotateRight, + faCheckCircle, + faCircleDot, + faClock, + faEyeSlash, + faPlus, + faShare, + faTag, + faTrash +} from "@fortawesome/free-solid-svg-icons";🧰 Tools
🪛 GitHub Actions: Check Frontend Type and Lint check
[error] 7-7: 'faCircle' is declared but its value is never read.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
frontend/src/layouts/OrganizationLayout/components/MenuIconButton/MenuIconButton.tsx(1 hunks)frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx(9 hunks)frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx(2 hunks)frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx(2 hunks)frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx(13 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[error] 596-597: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 705-706: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 730-731: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 755-756: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🪛 GitHub Actions: Check Frontend Type and Lint check
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[error] 7-7: 'faCircle' is declared but its value is never read.
🔇 Additional comments (17)
frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx (2)
62-67: Improved time formatting with better readability.The implementation of an IIFE to format time distances is a good enhancement. It properly capitalizes the first letter and adds the "ago" suffix, making the timestamp more readable and user-friendly.
78-78: Updated button variant for consistent styling.Changing the button variant from "star" to "outline_bg" improves visual consistency with the application's design system.
frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx (2)
123-123: Enhanced input security for sensitive data fields.Adding
autoComplete="off",autoCorrect="off", andspellCheck="false"to the API Key input prevents browsers from saving or suggesting sensitive values, which is a security best practice.
158-158: Comprehensive password field security enhancements.The additional attributes (
autoComplete="new-password",autoCorrect="off",spellCheck="false",aria-autocomplete="none",data-form-type="other") provide layered protection against unwanted browser behaviors while improving accessibility and security for password fields.frontend/src/layouts/OrganizationLayout/components/MenuIconButton/MenuIconButton.tsx (2)
23-24: Improved hover interaction and indicator positioning.The wrapping div with conditional hover padding creates a subtle animation effect, and the updated positioning of the indicator (
left-0instead of negative positioning) simplifies the layout while maintaining visual clarity.Also applies to: 42-42
27-32: Refined button styling for better visual feedback.The updated class structure improves the component's appearance by adjusting margins, padding, and conditional styling based on selection state. Removing border radius when selected creates a cleaner look for active items.
frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx (4)
87-90: Added state variables for improved dropdown management.Introducing separate state variables for each dropdown menu allows for more granular control over menu behavior, which enhances the user interaction model.
167-170: Enhanced dropdown interaction with hover behavior.Implementing
onMouseEnterandonMouseLeaveevents for dropdown menus creates a more intuitive and efficient navigation experience, requiring fewer clicks to access menu options.Also applies to: 177-179
260-261: Simplified navigation labels for better clarity.Shortening menu item labels from longer phrases to concise terms ("Secrets", "PKI", "Scanner", "Share", "Admin") improves readability in the compact sidebar while maintaining clarity of purpose.
Also applies to: 273-274, 305-306, 312-313, 325-326
486-492: Improved organization of admin navigation options.Adding proper structure and styling to the Organization Admin Console link enhances visual hierarchy and creates better separation between different types of navigation options.
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (7)
241-296: Improved secret value handling with better UI organization.The drawer title now includes the secret key, providing better context. The form structure has been enhanced with a more intuitive layout, including permission checks and a handy share button.
297-336: Great addition of multiline encoding toggle with helpful tooltip.This feature provides users with control over how multiline secrets are handled, with clear instructions provided via tooltip.
337-386: Improved personal override UI with clear explanation.The redesigned override section now provides a better user experience with clearer labeling and an informative tooltip explaining the functionality.
387-549: Enhanced tags and metadata UI with improved organization.The tags and metadata sections have been nicely restructured with better visual separation and more intuitive controls.
592-671: Excellent version history improvements with copy and restore functionality.The version history section now includes useful features for viewing, copying, and restoring secret values with intuitive toggle controls.
🧰 Tools
🪛 Biome (1.9.4)
[error] 596-597: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
672-774: Improved access list section with better styling and tooltips.The access list now provides clearer information about permissions with improved styling and tooltips showing allowed actions.
🧰 Tools
🪛 Biome (1.9.4)
[error] 705-706: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 730-731: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 755-756: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
775-813: Enhanced action buttons with improved styling.The save and delete buttons have been updated with better styling and appropriate tooltips.
...c/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
Outdated
Show resolved
Hide resolved
...c/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (4)
591-592:⚠️ Potential issueMissing key prop in iterable element.
React requires a unique key prop for elements in an iterable to optimize rendering.
- <div className="flex flex-row"> + <div key={id} className="flex flex-row">🧰 Tools
🪛 Biome (1.9.4)
[error] 591-592: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
700-701:⚠️ Potential issueMissing key props in access list iterables.
React requires a unique key prop for elements in an iterable to optimize rendering.
- <div className="rounded-md bg-bunker-500"> + <div key={user.membershipId} className="rounded-md bg-bunker-500">🧰 Tools
🪛 Biome (1.9.4)
[error] 700-701: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
725-726:⚠️ Potential issueMissing key props in identity iterables.
React requires a unique key prop for elements in an iterable to optimize rendering.
- <div className="rounded-md bg-bunker-500"> + <div key={identity.id} className="rounded-md bg-bunker-500">🧰 Tools
🪛 Biome (1.9.4)
[error] 725-726: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
750-751:⚠️ Potential issueMissing key props in group iterables.
React requires a unique key prop for elements in an iterable to optimize rendering.
- <div className="rounded-md bg-bunker-500"> + <div key={group.id} className="rounded-md bg-bunker-500">🧰 Tools
🪛 Biome (1.9.4)
[error] 750-751: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🧹 Nitpick comments (3)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (3)
607-651: Refactor show/hide functionality to use React state.The current implementation uses DOM manipulation and class toggling, which is not aligned with React's declarative approach. Consider using React state for this functionality.
+ const [showSecretValue, setShowSecretValue] = useState<Record<string, boolean>>({}); + + const toggleSecretVisibility = (id: string, visible: boolean) => { + setShowSecretValue(prev => ({...prev, [id]: visible})); + }; + + // Then in the render: - <div className="hidden group-[.show-value]:inline transition-all duration-200 cursor-pointer relative"> + <div className={`${showSecretValue[id] ? 'inline' : 'hidden'} transition-all duration-200 cursor-pointer relative`}> - onClick={(e) => { - navigator.clipboard.writeText(secretValue || ''); - const target = e.currentTarget; - target.style.borderBottom = '1px dashed'; - target.style.paddingBottom = '-1px'; - - // Create and insert popup - const popup = document.createElement('div'); - popup.className = 'w-16 flex justify-center absolute top-6 left-0 text-xs text-primary-100 bg-mineshaft-800 px-1 py-0.5 rounded-md border border-primary-500/50'; - popup.textContent = 'Copied!'; - target.parentElement?.appendChild(popup); - - // Remove popup and border after delay - setTimeout(() => { - popup.remove(); - target.style.borderBottom = 'none'; - }, 3000); - }} + onClick={() => { + navigator.clipboard.writeText(secretValue || ''); + // Use a Toast notification or React state to show copied message + }}
701-701: Enhance tooltip rendering with a reusable function.The capitalization of allowed actions is repeated in three places. Consider extracting this into a reusable function.
+ // Add this function at the top of the component + const formatAllowedActions = (actions: string[]) => + actions.map(action => action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()).join(", "); // Then use it in all three tooltips - <Tooltip content={user.allowedActions.map(action => action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()).join(", ")} className="z-[100]"> + <Tooltip content={formatAllowedActions(user.allowedActions)} className="z-[100]">🧰 Tools
🪛 Biome (1.9.4)
[error] 700-701: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
85-816: Consider breaking down this large component.This component is quite complex with many responsibilities. Consider breaking it down into smaller, focused sub-components for better maintainability and code organization.
For example, you could create separate components for:
- SecretValueEditor
- SecretMetadataEditor
- SecretTagsManager
- VersionHistoryViewer
- AccessListViewer
This would make the code more manageable and easier to test.
🧰 Tools
🪛 Biome (1.9.4)
[error] 119-119: Avoid the use of spread (
...) syntax on accumulators.Spread syntax should be avoided on accumulators (like those in
.reduce) because it causes a time complexity ofO(n^2).
Consider methods such as .splice or .push instead.(lint/performance/noAccumulatingSpread)
[error] 591-592: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 700-701: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 725-726: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 750-751: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🪛 GitHub Actions: Check Frontend Type and Lint check
[error] 590-590: 'i' is declared but its value is never read.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx(13 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[error] 591-592: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 700-701: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 725-726: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 750-751: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🪛 GitHub Actions: Check Frontend Type and Lint check
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[error] 590-590: 'i' is declared but its value is never read.
🔇 Additional comments (7)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (7)
239-291: UI enhancement: Improved layout with value field and share button.The new layout provides a better user experience with the value field and share button side-by-side, making it easier for users to interact with secret values.
292-331: Great addition: Multi-line encoding toggle with helpful tooltip.The multi-line encoding toggle provides users with control over how multiline secrets are handled, and the tooltip explains the functionality clearly.
343-361: Improved UI: Better layout for override switch with descriptive tooltip.The reorganized personal override switch with an explanatory tooltip makes the functionality more intuitive for users.
382-480: Enhanced UI: Better tags display and management.The redesigned tags section provides improved usability with better grouping and cleaner UI elements.
481-544: Improved UI: Enhanced metadata fields with better structure.The metadata section now has a clearer layout with proper labeling for keys and values, and an improved deletion button.
655-662: Nice feature: Added restore functionality for version history.The restore button is a great addition that provides easy access to restoring previous versions of secrets.
771-808: Updated button styling for consistency.The save and delete buttons now have a more consistent styling with the rest of the UI.
...c/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (2)
590-592:⚠️ Potential issueMissing key prop in iterable elements.
React requires a unique key prop for elements in iterables to optimize rendering performance.
- <div className="flex flex-row"> + <div className="flex flex-row" key={id}>🧰 Tools
🪛 Biome (1.9.4)
[error] 591-592: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
700-701:⚠️ Potential issueMissing key props in access list iterables.
The divs wrapping user, identity, and group items in the access list need unique key props.
Apply this fix for all three instances:
// For users - <div className="rounded-md bg-bunker-500"> + <div key={user.membershipId} className="rounded-md bg-bunker-500"> // For identities - <div className="rounded-md bg-bunker-500"> + <div key={identity.id} className="rounded-md bg-bunker-500"> // For groups - <div className="rounded-md bg-bunker-500"> + <div key={group.id} className="rounded-md bg-bunker-500">🧰 Tools
🪛 Biome (1.9.4)
[error] 700-701: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx(13 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[error] 591-592: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 700-701: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 725-726: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 750-751: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🪛 GitHub Check: Check Frontend Type and Lint check
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[failure] 636-636:
Visible, non-interactive elements with click handlers must have at least one keyboard listener
[failure] 636-636:
Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
🪛 GitHub Actions: Check Frontend Type and Lint check
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[error] 636-636: Visible, non-interactive elements with click handlers must have at least one keyboard listener (jsx-a11y/click-events-have-key-events)
🔇 Additional comments (10)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (10)
239-239: Improved title clarity with dynamic secret key.Adding the secret key to the drawer title improves context for users, making it clearer which secret they're viewing or editing.
242-291: Enhanced value field with better access controls and sharing.The restructured layout with proper permission checks and the addition of a share button improves both security and usability. The Controller pattern ensures form state is properly managed with permission validation.
292-331: Great addition of multi-line encoding toggle with helpful tooltip.The new multi-line encoding option provides better control over how complex secret values are processed. The informative tooltip helps users understand this technical feature.
344-361: Improved personal override control with explanatory tooltip.The redesigned override control with clear labeling and an explanatory tooltip makes this feature more intuitive for users to understand and use correctly.
382-480: Enhanced tag management with better visual organization.The updated tag display with improved layout and visual hierarchy makes tag management more intuitive. The conditional styling based on tag count is a nice touch for better space utilization.
481-543: Improved metadata management with better form controls.The metadata section now has a more structured layout with clear labels, proper spacing, and the ability to add and delete entries easily. The visual hierarchy makes it more user-friendly.
655-662: Great addition of version restoration functionality.The ability to restore previous secret versions directly from the history view is a useful feature that enhances usability.
784-790: Consistent button styling with variant change.The button variant has been changed to "outline_bg" for a more consistent UI appearance throughout the component.
803-805: Improved delete button with clear tooltip and styling.The delete button now has a more distinctive styling with a clear tooltip, making it both more noticeable and safer to use.
74-85: Method signature parameter reordering.The component parameters have been reordered for better organization, placing more commonly used props first. This doesn't affect functionality but improves code readability and maintainability.
...c/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (1)
74-85: Consider documenting the changed parameter order.The order of parameters in the component signature has been rearranged. While this doesn't affect functionality, it might be good to document this change for other developers who might be using this component.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx(13 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
[error] 591-592: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 715-716: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 740-741: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 765-766: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Check Frontend Type and Lint check
🔇 Additional comments (12)
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx (12)
239-239: Nice improvement to the DrawerContent title!Adding the secret key to the title provides better context to users, making it clearer which secret they're currently viewing or editing.
242-291: Good UI enhancement for the secret value section.The restructured layout with the addition of a share button improves usability by making the sharing functionality more accessible. The permission checking with
ProjectPermissionCanensures proper access control.
292-331: Great addition of multiline encoding toggle.Adding the multiline encoding option with a helpful tooltip improves the user experience when dealing with multiline secrets. The permission check ensures proper access control.
344-362: Improved UX for the override feature.The updated layout for the personal value override switch with explanatory tooltip makes this feature more intuitive for users to understand and use.
481-544: Enhanced metadata management UI.The improved layout for metadata fields with individual delete buttons and better visual organization makes managing metadata more intuitive.
590-590: Fix missing key in version history iterator.The map function needs a key prop on the outer div element to help React efficiently update the DOM.
- {secretVersion?.map(({ createdAt, secretValue, version, id }) => ( + {secretVersion?.map(({ createdAt, secretValue, version, id }) => (
591-591: Missing key prop in iterable elements.React requires a unique key prop for elements in an iterable to optimize rendering.
- <div className="flex flex-row"> + <div className="flex flex-row" key={id}>🧰 Tools
🪛 Biome (1.9.4)
[error] 591-592: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
607-666: Well-implemented secret value visibility toggle.The implementation for showing/hiding secret values with proper accessibility support (keyboard navigation) is excellent. The addition of copy functionality with visual feedback improves usability.
670-677: Good addition of version restoration functionality.Adding the ability to restore previous secret versions directly from the history view is a great productivity enhancement.
715-716: Missing key props in access list iterables.The divs wrapping user, identity, and group items in the access list need unique key props.
Apply this fix for all three instances:
// For users - <div className="rounded-md bg-bunker-500"> + <div key={user.membershipId} className="rounded-md bg-bunker-500"> // For identities - <div className="rounded-md bg-bunker-500"> + <div key={identity.id} className="rounded-md bg-bunker-500"> // For groups - <div className="rounded-md bg-bunker-500"> + <div key={group.id} className="rounded-md bg-bunker-500">Also applies to: 740-741, 765-766
🧰 Tools
🪛 Biome (1.9.4)
[error] 715-716: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
716-716: Enhanced tooltip content for access list items.Improving the tooltips to show formatted allowed actions provides better context about each user's, identity's, or group's permissions.
Also applies to: 741-741, 766-766
🧰 Tools
🪛 Biome (1.9.4)
[error] 715-716: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
818-820: Better styling for delete secret button.The improved styling and addition of a tooltip for the delete button enhances usability while maintaining a clear indication of the button's destructive nature.
Description 📣
Type ✨
Tests 🛠️
# Here's some code block to paste some code snippetsSummary by CodeRabbit
Style
New Features