feat(web): add support to copy asset url from asset dashboard (#1195)

Co-authored-by: lby <[email protected]>

web/src/beta/features/AssetsManager/index.tsx

@@ -117,16 +117,21 @@ const AssetsManager: FC<AssetsManagerProps> = ({
                       {t("Name")}
                     </Typography>
                   </Col>
-                  <Col width={30}>
+                  <Col width={20}>
                     <Typography weight="bold" size="body">
                       {t("Uploaded At")}
                     </Typography>
                   </Col>
-                  <Col width={30}>
+                  <Col width={20}>
                     <Typography weight="bold" size="body">
                       {t("Size")}
                     </Typography>
                   </Col>
+                  <Col width={10}>
+                    <Typography weight="bold" size="body">
+                      {t("Path")}
+                    </Typography>
+                  </Col>
                 </ListHeader>
               )}
               <AssetsWrapper ref={assetsWrapperRef}>

web/src/beta/features/AssetsManager/item/AssetListItem.tsx

@@ -1,5 +1,7 @@
-import { Icon, Typography } from "@reearth/beta/lib/reearth-ui";
+import { Icon, IconButton, Typography } from "@reearth/beta/lib/reearth-ui";
 import { formatRelativeTime } from "@reearth/beta/utils/time";
+import { useT } from "@reearth/services/i18n";
+import { useNotification } from "@reearth/services/state";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, MouseEvent, useCallback, useMemo } from "react";
 
@@ -15,6 +17,8 @@ const AssetListItem: FC<AssetItemProps> = ({
     () => selectedAssetIds.includes(asset.id),
     [selectedAssetIds, asset.id]
   );
+  const t = useT();
+  const [, setNotification] = useNotification();
 
   const type = useMemo(() => getAssetType(asset), [asset]);
 
@@ -28,6 +32,18 @@ const AssetListItem: FC<AssetItemProps> = ({
     [asset, onSelect]
   );
 
+  const handleIconClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      navigator.clipboard.writeText(asset.url);
+      setNotification({
+        type: "success",
+        text: t("Asset URL copied to clipboard")
+      });
+    },
+    [asset.url, setNotification, t]
+  );
+
   const formattedDate = useMemo(
     () => formatRelativeTime(new Date(asset.createdAt)),
     [asset.createdAt]
@@ -44,15 +60,25 @@ const AssetListItem: FC<AssetItemProps> = ({
           size={20}
         />
       </Thumbnail>
-      <AssetName>
-        <Typography size="body">{asset.name}</Typography>
-      </AssetName>
-      <Col width={30}>
+      <Col width={50}>
+        <AssetName>
+          <Typography size="body">{asset.name}</Typography>
+        </AssetName>
+      </Col>
+      <Col width={20}>
         <Typography size="body">{formattedDate}</Typography>
       </Col>
-      <Col width={30}>
+      <Col width={20}>
         <Typography size="body">{formattedSize}</Typography>
       </Col>
+      <Col width={10} title={asset.url}>
+        <IconButton
+          appearance="simple"
+          icon="copy"
+          onClick={handleIconClick}
+          size="medium"
+        />
+      </Col>
     </Wrapper>
   );
 };
@@ -91,15 +117,19 @@ const AssetName = styled("div")(() => ({
   wordBreak: "break-word",
   overflow: "hidden",
   textOverflow: "ellipsis",
-  width: "50%",
+  width: "100%",
   flexGrow: 0,
   flexShrink: 0
 }));
 
-const Col = styled("div")<{ width: number }>(({ width }) => ({
+const Col = styled("div")<{
+  width: number;
+}>(({ width }) => ({
   width: `${width}%`,
   flexGrow: 0,
-  flexShrink: 0
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center"
 }));
 
 function formatBytes(bytes: number): string {

web/src/beta/features/Dashboard/ContentsContainer/index.tsx

@@ -34,7 +34,7 @@ const ContentsContainer: FC<ContainerProps> = ({
 const Wrapper = styled("div")(({ theme }) => ({
   flex: 1,
   background: theme.bg[0],
-  width: "100%"
+  minWidth: 760
 }));
 
 export default ContentsContainer;

web/src/services/i18n/translations/en.yml

@@ -29,7 +29,9 @@ Assets selected: ''
 Asset selected: ''
 Uploaded At: ''
 Size: ''
+Path: ''
 No Asset has been uploaded yet: ''
+Asset URL copied to clipboard: ''
 Use Name or Email: ''
 Find Member: ''
 No Member match your search.: ''
@@ -68,8 +70,6 @@ Please type your project name to continue.: ''
 Switch Workspace: ''
 Personal: ''
 Team Workspace: ''
-Workspace Settings: ''
-Account Settings: ''
 Log Out: ''
 Re:Earth Visualizer: ''
 Page: ''
@@ -310,6 +310,8 @@ This will permanently delete the workspace and all related projects, assets and
 Please type your workspace name to continue.: ''
 You are going to delete a workspace.: ''
 Please to make sure you don’t have any projects in your workspace, then you can continue.: ''
+Workspace Settings: ''
+Account Settings: ''
 Write your story :): ''
 Normal: ''
 Heading 1: ''

web/src/services/i18n/translations/ja.yml

@@ -29,7 +29,9 @@ Assets selected: ''
 Asset selected: ''
 Uploaded At: ''
 Size: ''
+Path: パス
 No Asset has been uploaded yet: ''
+Asset URL copied to clipboard: ''
 Use Name or Email: ''
 Find Member: ''
 No Member match your search.: ''
@@ -68,8 +70,6 @@ Please type your project name to continue.: ''
 Switch Workspace: ''
 Personal: ''
 Team Workspace: ''
-Workspace Settings: ''
-Account Settings: ''
 Log Out: ''
 Re:Earth Visualizer: ''
 Page: ''
@@ -310,6 +310,8 @@ This will permanently delete the workspace and all related projects, assets and
 Please type your workspace name to continue.: ''
 You are going to delete a workspace.: ''
 Please to make sure you don’t have any projects in your workspace, then you can continue.: ''
+Workspace Settings: ''
+Account Settings: ''
 Write your story :): ''
 Normal: ''
 Heading 1: ''