From be863a22c98cc5bb6c71bab4b0e9c4ddb9ead0a1 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 12 Jun 2023 16:39:56 +0200 Subject: [PATCH] Truncate comment user name when too long (#274) --- front/package-lock.json | 336 ++++++++++++++++++ .../components/comments/CommentHeader.tsx | 4 + .../__stories__/CommentChip.stories.tsx | 2 +- .../__stories__/CommentHeader.stories.tsx | 30 +- .../board/__stories__/Board.stories.tsx | 2 +- .../__stories__/AutosizeTextInput.stories.tsx | 2 +- .../__stories__/TableHeader.stories.tsx | 2 +- .../__stories__/RightDrawerTopBar.stories.tsx | 2 +- .../__stories__/UserAvatar.stories.tsx | 2 +- 9 files changed, 375 insertions(+), 7 deletions(-) diff --git a/front/package-lock.json b/front/package-lock.json index 1fcfcc61eb..5efc23e7db 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -3266,6 +3266,54 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" }, + "node_modules/@esbuild/android-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz", + "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz", + "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz", + "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@esbuild/darwin-arm64": { "version": "0.17.19", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz", @@ -3282,6 +3330,278 @@ "node": ">=12" } }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz", + "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz", + "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz", + "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz", + "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz", + "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz", + "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz", + "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz", + "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz", + "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz", + "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz", + "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz", + "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz", + "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz", + "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz", + "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz", + "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz", + "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -17688,6 +18008,22 @@ "esbuild": ">=0.12 <1" } }, + "node_modules/esbuild/node_modules/@esbuild/linux-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz", + "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", diff --git a/front/src/modules/comments/components/comments/CommentHeader.tsx b/front/src/modules/comments/components/comments/CommentHeader.tsx index 7a761f0ce9..9db3677e1e 100644 --- a/front/src/modules/comments/components/comments/CommentHeader.tsx +++ b/front/src/modules/comments/components/comments/CommentHeader.tsx @@ -30,6 +30,10 @@ const StyledName = styled.div` font-size: 13px; font-weight: 400; color: ${(props) => props.theme.text80}; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 160px; `; const StyledDate = styled.div` diff --git a/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx b/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx index 2d73ee47fd..99b6db2d55 100644 --- a/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx +++ b/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx @@ -7,7 +7,7 @@ import { CellCommentChip } from '../CellCommentChip'; import { CommentChip } from '../CommentChip'; const meta: Meta = { - title: 'Components/Comments/CellCommentChip', + title: 'Comments/CellCommentChip', component: CellCommentChip, }; diff --git a/front/src/modules/comments/components/comments/__stories__/CommentHeader.stories.tsx b/front/src/modules/comments/components/comments/__stories__/CommentHeader.stories.tsx index 43baf59f69..5799701580 100644 --- a/front/src/modules/comments/components/comments/__stories__/CommentHeader.stories.tsx +++ b/front/src/modules/comments/components/comments/__stories__/CommentHeader.stories.tsx @@ -9,7 +9,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; import { CommentHeader } from '../CommentHeader'; const meta: Meta = { - title: 'Components/Comments/CommentHeader', + title: 'Comments/CommentHeader', component: CommentHeader, }; @@ -28,6 +28,19 @@ const mockComment: Pick = { createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '', }; +const mockCommentWithLongName: Pick< + CommentForDrawer, + 'id' | 'author' | 'createdAt' +> = { + id: v4(), + author: { + id: v4(), + displayName: mockUser.displayName + ' with a very long suffix' ?? '', + avatarUrl: mockUser.avatarUrl, + }, + createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '', +}; + export const Default: Story = { render: getRenderWrapperForComponent( , ), }; + +export const WithLongUserName: Story = { + render: getRenderWrapperForComponent( + , + ), +}; diff --git a/front/src/modules/ui/components/board/__stories__/Board.stories.tsx b/front/src/modules/ui/components/board/__stories__/Board.stories.tsx index 8f951bcfbd..21468690eb 100644 --- a/front/src/modules/ui/components/board/__stories__/Board.stories.tsx +++ b/front/src/modules/ui/components/board/__stories__/Board.stories.tsx @@ -6,7 +6,7 @@ import { Board } from '../Board'; import { initialBoard, items } from './mock-data'; const meta: Meta = { - title: 'Components/Board', + title: 'UI/Board/Board', component: Board, }; diff --git a/front/src/modules/ui/components/inputs/__stories__/AutosizeTextInput.stories.tsx b/front/src/modules/ui/components/inputs/__stories__/AutosizeTextInput.stories.tsx index 5eb0cafe19..c8003c999f 100644 --- a/front/src/modules/ui/components/inputs/__stories__/AutosizeTextInput.stories.tsx +++ b/front/src/modules/ui/components/inputs/__stories__/AutosizeTextInput.stories.tsx @@ -5,7 +5,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; import { AutosizeTextInput } from '../AutosizeTextInput'; const meta: Meta = { - title: 'Components/Common/AutosizeTextInput', + title: 'UI/Inputs/AutosizeTextInput', component: AutosizeTextInput, }; diff --git a/front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx b/front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx index 46bd64245c..500066d8a3 100644 --- a/front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx +++ b/front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx @@ -12,7 +12,7 @@ import { availableSorts } from '../../../../../../pages/companies/companies-sort import { TableHeader } from '../TableHeader'; const meta: Meta = { - title: 'Components/Table/TableHeader', + title: 'UI/Table/TableHeader', component: TableHeader, }; diff --git a/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx b/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx index d2506da7f6..36c78b639a 100644 --- a/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx @@ -6,7 +6,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; import { RightDrawerTopBar } from '../RightDrawerTopBar'; const meta: Meta = { - title: 'Components/RightDrawer/RightDrawerTopBar', + title: 'UI/RightDrawer/RightDrawerTopBar', component: RightDrawerTopBar, argTypes: { title: { diff --git a/front/src/modules/users/components/__stories__/UserAvatar.stories.tsx b/front/src/modules/users/components/__stories__/UserAvatar.stories.tsx index 7277cf8c66..d524c63412 100644 --- a/front/src/modules/users/components/__stories__/UserAvatar.stories.tsx +++ b/front/src/modules/users/components/__stories__/UserAvatar.stories.tsx @@ -5,7 +5,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; import { UserAvatar } from '../UserAvatar'; const meta: Meta = { - title: 'Components/User/UserAvatar', + title: 'Users/UserAvatar', component: UserAvatar, };