Merge pull request #4732 from 3drepo/ISSUE_4720

ISSUE #4720 - truncate ticket's title when viewing groups
3drepo · Jan 31, 2024 · 4c8fd38 · 4c8fd38
2 parents 105c71f + 99fe450
commit 4c8fd38
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/...ets/ticketDetails/ticketDetails.styles.ts → ...etDetailsCard/ticketDetailsCard.styles.ts b/...ets/ticketDetails/ticketDetails.styles.ts → ...etDetailsCard/ticketDetailsCard.styles.ts
@@ -16,8 +16,13 @@
  */
 
 import ChevronIcon from '@assets/icons/outlined/thin_chevron-outlined.svg';
+import { CardHeader } from '@components/viewer/cards/card.styles';
 import styled from 'styled-components';
 
+export const GroupsCardHeader = styled(CardHeader)`
+	gap: 0;
+`;
+
 const CommonChevronStyle = styled(ChevronIcon)`
 	&& {
 		height: 10px;
@@ -33,3 +38,11 @@ export const ChevronRight = styled(CommonChevronStyle)`
 	transform: rotate(-90deg);
 	margin-left: 2px;
 `;
+
+export const BreakableText = styled.div`
+	margin-left: 5px;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
diff --git a/...tDetails/ticketsDetailsCard.component.tsx → ...ailsCard/ticketsDetailsCard.component.tsx b/...tDetails/ticketsDetailsCard.component.tsx → ...ailsCard/ticketsDetailsCard.component.tsx
@@ -30,13 +30,13 @@ import { dirtyValues, filterErrors, nullifyEmptyObjects, removeEmptyObjects } fr
 import { FormattedMessage } from 'react-intl';
 import { InputController } from '@controls/inputs/inputController.component';
 import { goToView } from '@/v5/helpers/viewpoint.helpers';
+import { Viewpoint } from '@/v5/store/tickets/tickets.types';
 import { TicketsCardViews } from '../tickets.constants';
 import { TicketForm } from '../ticketsForm/ticketForm.component';
-import { ChevronLeft, ChevronRight } from './ticketDetails.styles';
+import { BreakableText, ChevronLeft, ChevronRight, GroupsCardHeader } from './ticketDetailsCard.styles';
 import { TicketGroups } from '../ticketsForm/ticketGroups/ticketGroups.component';
 import { TicketContext, TicketDetailsView } from '../ticket.context';
 import { useSearchParam } from '../../../useSearchParam';
-import { Viewpoint } from '@/v5/store/tickets/tickets.types';
 
 enum IndexChange {
 	PREV = -1,
@@ -157,10 +157,11 @@ export const TicketDetailsCard = () => {
 				{view === TicketDetailsView.Groups
 					&& (
 						<>
-							<CardHeader>
+							<GroupsCardHeader>
 								<ArrowBack onClick={onClickBackFromGroups} />
-								{ticket.title}:<FormattedMessage id="ticket.groups.header" defaultMessage="Groups" />
-							</CardHeader>
+								<BreakableText>{ticket.title}</BreakableText>
+								<span>:<FormattedMessage id="ticket.groups.header" defaultMessage="Groups" /></span>
+							</GroupsCardHeader>
 							<InputController
 								Input={TicketGroups}
 								name={viewProps.name}

diff --git a/frontend/src/v5/ui/routes/viewer/tickets/tickets.component.tsx b/frontend/src/v5/ui/routes/viewer/tickets/tickets.component.tsx
@@ -31,7 +31,7 @@ import { ContainersHooksSelectors, FederationsHooksSelectors, TicketsCardHooksSe
 import { TicketsActionsDispatchers, TicketsCardActionsDispatchers, UsersActionsDispatchers } from '@/v5/services/actionsDispatchers';
 import { AdditionalProperties, TicketsCardViews } from './tickets.constants';
 import { TicketsListCard } from './ticketsList/ticketsListCard.component';
-import { TicketDetailsCard } from './ticketDetails/ticketsDetailsCard.component';
+import { TicketDetailsCard } from './ticketDetailsCard/ticketsDetailsCard.component';
 import { NewTicketCard } from './newTicket/newTicket.component';
 import { ViewerParams } from '../../routes.constants';
 import { TicketContext, TicketContextComponent, TicketDetailsView } from './ticket.context';