Merge pull request #1217 from hinashi/feature/long_name_tooltip

Added tooltip for long entry name

frontend/src/components/common/ClipboardCopyButton.tsx

@@ -0,0 +1,30 @@
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { ClickAwayListener, IconButton, Tooltip } from "@mui/material";
+import React, { FC, useState } from "react";
+
+interface Props {
+  name: string;
+}
+
+export const ClipboardCopyButton: FC<Props> = ({ name }) => {
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <ClickAwayListener onClickAway={() => setOpen(false)}>
+      <Tooltip
+        title="名前をコピーしました"
+        open={open}
+        disableHoverListener
+        disableFocusListener
+      >
+        <IconButton
+          onClick={() => {
+            global.navigator.clipboard.writeText(name);
+            setOpen(true);
+          }}
+        >
+          <ContentCopyIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+    </ClickAwayListener>
+  );
+};

frontend/src/components/entity/EntityListCard.tsx

@@ -6,6 +6,7 @@ import {
   CardContent,
   CardHeader,
   IconButton,
+  Tooltip,
   Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -15,6 +16,7 @@ import { Link } from "react-router-dom";
 import { EntityControlMenu } from "./EntityControlMenu";
 
 import { entityEntriesPath } from "Routes";
+import { ClipboardCopyButton } from "components/common/ClipboardCopyButton";
 import { EntryImportModal } from "components/entry/EntryImportModal";
 
 const EntityNote = styled(Typography)(({ theme }) => ({
@@ -67,17 +69,21 @@ export const EntityListCard: FC<Props> = ({ entity, setToggle }) => {
       <StyledCardHeader
         title={
           <CardActionArea component={Link} to={entityEntriesPath(entity.id)}>
-            <EntityName variant="h6">{entity.name}</EntityName>
+            <Tooltip title={entity.name} placement="bottom-start">
+              <EntityName variant="h6">{entity.name}</EntityName>
+            </Tooltip>
           </CardActionArea>
         }
         action={
           <>
+            <ClipboardCopyButton name={entity.name} />
+
             <IconButton
               onClick={(e) => {
                 setAnchorElem(e.currentTarget);
               }}
             >
-              <MoreVertIcon />
+              <MoreVertIcon fontSize="small" />
             </IconButton>
             <EntityControlMenu
               entityId={entity.id}

frontend/src/components/entry/EntryListCard.tsx

@@ -5,13 +5,15 @@ import {
   CardActionArea,
   CardHeader,
   IconButton,
+  Tooltip,
   Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import React, { FC, useState } from "react";
 import { Link } from "react-router-dom";
 
 import { entryDetailsPath } from "Routes";
+import { ClipboardCopyButton } from "components/common/ClipboardCopyButton";
 import { EntryControlMenu } from "components/entry/EntryControlMenu";
 
 const StyledCard = styled(Card)(({}) => ({
@@ -51,13 +53,17 @@ export const EntryListCard: FC<Props> = ({ entityId, entry, setToggle }) => {
             component={Link}
             to={entryDetailsPath(entityId, entry.id)}
           >
-            <EntryName variant="h6">{entry.name}</EntryName>
+            <Tooltip title={entry.name} placement="bottom-start">
+              <EntryName variant="h6">{entry.name}</EntryName>
+            </Tooltip>
           </CardActionArea>
         }
         action={
           <>
+            <ClipboardCopyButton name={entry.name} />
+
             <IconButton onClick={(e) => setAnchorElem(e.currentTarget)}>
-              <MoreVertIcon />
+              <MoreVertIcon fontSize="small" />
             </IconButton>
             <EntryControlMenu
               entityId={entityId}

frontend/src/components/user/UserList.test.tsx

@@ -106,8 +106,8 @@ describe("UserList", () => {
 
     act(() => {
       // open a menu for user1
-      // NOTE there are 2 buttons (user1 menu, user2 menu)
-      screen.getAllByRole("button")[0].click();
+      // NOTE there are 4 buttons (user1 copy, user1 menu, user2 copy, user2 menu)
+      screen.getAllByRole("button")[1].click();
     });
     act(() => {
       screen.getByRole("menuitem", { name: "削除" }).click();

frontend/src/components/user/UserList.tsx

@@ -8,25 +8,43 @@ import {
   CardHeader,
   Grid,
   IconButton,
+  Tooltip,
   Typography,
 } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import React, { FC, useMemo, useState } from "react";
 import { Link, useHistory, useLocation } from "react-router-dom";
 
-import { useAsyncWithThrow } from "../../hooks/useAsyncWithThrow";
-
 import { UserControlMenu } from "./UserControlMenu";
 
 import { newUserPath, userPath } from "Routes";
+import { ClipboardCopyButton } from "components/common/ClipboardCopyButton";
 import { Loading } from "components/common/Loading";
 import { PaginationFooter } from "components/common/PaginationFooter";
 import { SearchBox } from "components/common/SearchBox";
+import { useAsyncWithThrow } from "hooks/useAsyncWithThrow";
 import { usePage } from "hooks/usePage";
 import { aironeApiClient } from "repository/AironeApiClient";
 import { UserList as ConstUserList } from "services/Constants";
 import { ServerContext } from "services/ServerContext";
 import { normalizeToMatch } from "services/StringUtil";
 
+const StyledCardHeader = styled(CardHeader)(({}) => ({
+  p: "0px",
+  mt: "24px",
+  mx: "16px",
+  mb: "16px",
+  ".MuiCardHeader-content": {
+    width: "80%",
+  },
+}));
+
+const UserName = styled(Typography)(({}) => ({
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+}));
+
 export const UserList: FC = ({}) => {
   const location = useLocation();
   const history = useHistory();
@@ -97,32 +115,18 @@ export const UserList: FC = ({}) => {
             return (
               <Grid item xs={4} key={user.id}>
                 <Card sx={{ height: "100%" }}>
-                  <CardHeader
-                    sx={{
-                      p: "0px",
-                      mt: "24px",
-                      mx: "16px",
-                      mb: "16px",
-                      ".MuiCardHeader-content": {
-                        width: "80%",
-                      },
-                    }}
+                  <StyledCardHeader
                     title={
                       <CardActionArea component={Link} to={userPath(user.id)}>
-                        <Typography
-                          variant="h6"
-                          sx={{
-                            textOverflow: "ellipsis",
-                            overflow: "hidden",
-                            whiteSpace: "nowrap",
-                          }}
-                        >
-                          {user.username}
-                        </Typography>
+                        <Tooltip title={user.username} placement="bottom-start">
+                          <UserName>{user.username}</UserName>
+                        </Tooltip>
                       </CardActionArea>
                     }
                     action={
                       <>
+                        <ClipboardCopyButton name={user.username} />
+
                         <IconButton
                           onClick={(e) => {
                             setUserAnchorEls({
@@ -131,7 +135,7 @@ export const UserList: FC = ({}) => {
                             });
                           }}
                         >
-                          <MoreVertIcon />
+                          <MoreVertIcon fontSize="small" />
                         </IconButton>
                         <UserControlMenu
                           user={user}