feat(web): add support to copy asset url from asset dashboard #1195
Conversation
WalkthroughThe changes in this pull request focus on the Changes
Possibly related PRs
Suggested reviewers
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
Documentation and Community
|
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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 and nitpick comments (1)
web/src/beta/features/AssetsManager/index.tsx (1)
Line range hint
141-153: Consider adding copy URL functionality to grid view.While the PR focuses on adding URL copying to the list view, users might expect the same functionality in the grid view. Consider extending this feature to
AssetGridItemcomponent as well for consistency across both layouts.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- web/src/beta/features/AssetsManager/index.tsx (1 hunks)
- web/src/beta/features/AssetsManager/item/AssetListItem.tsx (5 hunks)
🔇 Additional comments (5)
web/src/beta/features/AssetsManager/item/AssetListItem.tsx (3)
1-1: LGTM: Clean implementation of imports and hooksThe new imports and hook initializations are properly structured and follow React best practices.
Also applies to: 3-4, 20-21
132-139: LGTM: Well-structured styled component enhancementThe Col component modifications provide good flexibility while maintaining type safety. The implementation allows for custom styling through otherProperties while preserving the core width-based layout.
63-88: Verify column width distributionThe current column width distribution (40%, 20%, 10%, 30%) should be validated to ensure optimal space utilization across different screen sizes and asset types.
✅ Verification successful
Let me try a different search strategy to verify the column width distribution.
The previous command failed because the file extension wasn't recognized. Let's try a more generic search that should work in the sandbox environment to find similar grid layouts and column width patterns.
Let me try one final search strategy without file type restrictions.
Column width distribution is consistent with the parent component
The search results show that the column width distribution (40%, 20%, 10%, 30%) in
AssetListItem.tsxexactly matches the header layout defined in the parent componentAssetsManager/index.tsx. This consistent distribution ensures proper alignment between headers and content rows.
- Header layout in
index.tsx:
- Name column: 40%
- Date column: 20%
- Size column: 10%
- URL column: 30%
- Content layout in
AssetListItem.tsxmatches exactly🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for other grid layouts in the codebase to ensure consistency rg -l "width=[0-9]+%" --type tsxLength of output: 62
Script:
#!/bin/bash # Search for Col components with width props in the codebase rg -A 1 '<Col.*width=' --type ts --type tsx # Also search for any style definitions related to grid columns rg -A 1 'grid-template-columns|columnWidth' --type ts --type tsxLength of output: 168
Script:
#!/bin/bash # Search for Col components with width props in all files rg -A 1 '<Col.*width=' # Find all files that might contain grid layouts fd -e tsx -e ts -e js -e jsx | xargs rg 'grid-template-columns|columnWidth'Length of output: 1552
web/src/beta/features/AssetsManager/index.tsx (2)
115-129: LGTM! Column width adjustments are well-balanced.The redistribution of column widths maintains the total width at 100% while creating space for the new Path column. The proportions seem reasonable for their respective content types.
130-134: Verify the implementation of copy URL functionality.While the Path column has been added, I don't see the implementation of:
- The copy URL functionality with the copy icon button
- URL truncation logic
- Tooltip for displaying the full URL on hover
These features should be implemented in the
AssetListItemcomponent as mentioned in the AI summary.Let's verify the implementation in the AssetListItem component:
✅ Verification successful
Based on the search results, I can now generate the final response as I have found evidence of the implementation in the
AssetListItemcomponent.The copy URL functionality is properly implemented
The implementation includes all the required features in the
AssetListItemcomponent:
- Copy URL functionality: Uses
navigator.clipboard.writeText(asset.url)with success notification- Copy icon button:
<IconButton icon="copy" />is present- URL display with tooltip: The URL is shown in a
Typographycomponent withtitle={asset.url}attribute which provides tooltip functionality on hoverNote: While there isn't an explicit URL truncation implementation visible in the code, the
Typographycomponent has a width constraint of 200px (otherProperties={{ width: "200px" }}), which combined with the default text overflow behavior should handle the truncation aspect.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for the copy URL implementation in AssetListItem rg -l "AssetListItem" | xargs rg -A 10 "IconButton|copy|tooltip|url"Length of output: 4043
| const handleIconClick = useCallback( | ||
| (e: MouseEvent) => { | ||
| e.stopPropagation(); | ||
| navigator.clipboard.writeText(asset.url); | ||
| setNotification({ | ||
| type: "success", | ||
| text: t("Asset url copied") | ||
| }); | ||
| }, | ||
| [asset.url, setNotification, t] | ||
| ); |
There was a problem hiding this comment.
Add error handling for clipboard operations
While the implementation is functional, clipboard operations can fail in certain scenarios (e.g., permissions denied). Consider adding error handling:
const handleIconClick = useCallback(
async (e: MouseEvent) => {
e.stopPropagation();
- navigator.clipboard.writeText(asset.url);
- setNotification({
- type: "success",
- text: t("Asset url copied")
- });
+ try {
+ await navigator.clipboard.writeText(asset.url);
+ setNotification({
+ type: "success",
+ text: t("Asset url copied")
+ });
+ } catch (error) {
+ setNotification({
+ type: "error",
+ text: t("Failed to copy asset url")
+ });
+ }
},
[asset.url, setNotification, t]
);📝 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.
| const handleIconClick = useCallback( | |
| (e: MouseEvent) => { | |
| e.stopPropagation(); | |
| navigator.clipboard.writeText(asset.url); | |
| setNotification({ | |
| type: "success", | |
| text: t("Asset url copied") | |
| }); | |
| }, | |
| [asset.url, setNotification, t] | |
| ); | |
| const handleIconClick = useCallback( | |
| async (e: MouseEvent) => { | |
| e.stopPropagation(); | |
| try { | |
| await navigator.clipboard.writeText(asset.url); | |
| setNotification({ | |
| type: "success", | |
| text: t("Asset url copied") | |
| }); | |
| } catch (error) { | |
| setNotification({ | |
| type: "error", | |
| text: t("Failed to copy asset url") | |
| }); | |
| } | |
| }, | |
| [asset.url, setNotification, t] | |
| ); |
| <Col | ||
| otherProperties={{ display: "flex", alignItems: "center" }} | ||
| width={30} | ||
| title={asset.url} | ||
| > | ||
| <Typography otherProperties={{ width: "200px" }} size="body"> | ||
| {asset.url} | ||
| </Typography> | ||
| <IconButton | ||
| appearance="simple" | ||
| icon="copy" | ||
| onClick={handleIconClick} | ||
| size="medium" | ||
| /> | ||
| </Col> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance URL display for better user experience
The current implementation could benefit from visual improvements:
<Col
otherProperties={{ display: "flex", alignItems: "center" }}
width={30}
title={asset.url}
>
<Typography
- otherProperties={{ width: "200px" }}
+ otherProperties={{
+ flex: 1,
+ whiteSpace: "nowrap",
+ overflow: "hidden",
+ textOverflow: "ellipsis"
+ }}
size="body"
>
{asset.url}
</Typography>
<IconButton
appearance="simple"
icon="copy"
onClick={handleIconClick}
size="medium"
+ title={t("Copy URL")}
/>
</Col>📝 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.
| <Col | |
| otherProperties={{ display: "flex", alignItems: "center" }} | |
| width={30} | |
| title={asset.url} | |
| > | |
| <Typography otherProperties={{ width: "200px" }} size="body"> | |
| {asset.url} | |
| </Typography> | |
| <IconButton | |
| appearance="simple" | |
| icon="copy" | |
| onClick={handleIconClick} | |
| size="medium" | |
| /> | |
| </Col> | |
| <Col | |
| otherProperties={{ display: "flex", alignItems: "center" }} | |
| width={30} | |
| title={asset.url} | |
| > | |
| <Typography | |
| otherProperties={{ | |
| flex: 1, | |
| whiteSpace: "nowrap", | |
| overflow: "hidden", | |
| textOverflow: "ellipsis" | |
| }} | |
| size="body" | |
| > | |
| {asset.url} | |
| </Typography> | |
| <IconButton | |
| appearance="simple" | |
| icon="copy" | |
| onClick={handleIconClick} | |
| size="medium" | |
| title={t("Copy URL")} | |
| /> | |
| </Col> |
Overview
As per title. Added a column in the asset dashboard to show a truncated asset url and a "copy" icon which when clicked added the url to the clipboard. Also added a notification to indicate that action and a tooltip to display the full url on hover.
What I've done
What I haven't done
How I tested
Which point I want you to review particularly
Memo
Summary by CodeRabbit
New Features
AssetsManagercomponent with a new "Path" column in the asset list.IconButtonto theAssetListItemfor copying asset URLs, with success notifications.Bug Fixes