ellipsize Row contents

cisagov · Sep 13, 2023 · 9efe5cd · 9efe5cd
1 parent 4162a96
commit 9efe5cd
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 11 deletions.
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Beacon/BeaconRow.tsx b/applications/client/src/views/Campaign/Explore/Panels/Beacon/BeaconRow.tsx
@@ -131,7 +131,7 @@ export const BeaconRow = observer<BeaconRowProps>(({ beacon, ...props }) => {
 					shape={beacon.meta?.[0]?.current?.shape || undefined}
 					color={beacon.meta?.[0]?.current?.color || undefined}
 				/>
-				<Txt cy-test="beacon-display-name" normal>
+				<Txt cy-test="beacon-display-name" normal ellipsize>
 					{beacon?.computedNameWithHost || `${beacon.server?.computedName}`}
 				</Txt>
 			</RowTitle>

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentsList.tsx b/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentsList.tsx
@@ -86,6 +86,7 @@ export const CommentsList = observer<CommentsListProps>(({ sort }) => {
 							bold={['all', 'favorited'].includes(presentationItem.id)}
 							muted={presentationItem.id === 'procedural'}
 							italic={presentationItem.id === 'procedural'}
+							ellipsize
 						>
 							{rowTitle(presentationItem)}
 						</Txt>

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Host/HostOrServerRow.tsx b/applications/client/src/views/Campaign/Explore/Panels/Host/HostOrServerRow.tsx
@@ -167,7 +167,7 @@ export const HostOrServerRow = observer<HostOrServerRowProps>(({ host, ...props
 					}
 				/>
 				{host.cobaltStrikeServer && <Txt muted>Server:</Txt>}
-				<Txt cy-test="hostName" bold={!!host.cobaltStrikeServer}>
+				<Txt cy-test="hostName" bold={!!host.cobaltStrikeServer} ellipsize>
 					{host.computedName}
 				</Txt>
 			</RowTitle>

diff --git a/applications/client/src/views/Campaign/Explore/Panels/OperatorsList.tsx b/applications/client/src/views/Campaign/Explore/Panels/OperatorsList.tsx
@@ -2,7 +2,7 @@ import { createSorter, dateShortFormat, isDefined, semanticIcons, VirtualizedLis
 import type { SortType } from '@redeye/client/store';
 import { SortDirection, useStore } from '@redeye/client/store';
 import type { InfoType } from '@redeye/client/types/explore';
-import { FlexSplitter } from '@redeye/ui-styles';
+import { FlexSplitter, Txt } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
 import { defaultInfoRowHeight, IconLabel, InfoRow, MessageRow, RowTime, RowTitle } from '../components';
@@ -29,7 +29,9 @@ export const OperatorsList = observer<OperatorsListProps>(({ ...props }) => {
 							{store.settings.momentTz(operator.startTime)?.format(dateShortFormat)}&mdash;
 							{store.settings.momentTz(operator.endTime)?.format(dateShortFormat)}
 						</RowTime>
-						<RowTitle>{operator.name}</RowTitle>
+						<RowTitle>
+							<Txt ellipsize>{operator.name}</Txt>
+						</RowTitle>
 						<FlexSplitter />
 						<IconLabel
 							cy-test="row-command-count"

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Overview/OverviewCommandTypesList.tsx b/applications/client/src/views/Campaign/Explore/Panels/Overview/OverviewCommandTypesList.tsx
@@ -2,7 +2,7 @@ import { createSorter, isDefined, semanticIcons, VirtualizedList } from '@redeye
 import type { CommandTypeCountModel, SortType } from '@redeye/client/store';
 import { SortDirection, useStore } from '@redeye/client/store';
 import { defaultInfoRowHeight, IconLabel, InfoRow, MessageRow, RowTitle } from '@redeye/client/views';
-import { FlexSplitter } from '@redeye/ui-styles';
+import { FlexSplitter, Txt } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
 
@@ -22,7 +22,9 @@ export const OverviewCommandTypesList = observer<OverviewProps>(({ sort }) => {
 			) : (
 				commandTypes.map((commandTypeCount) => (
 					<InfoRow cy-test="commands" key={commandTypeCount.id} onClick={() => commandTypeCount.select()}>
-						<RowTitle>{commandTypeCount.text}</RowTitle>
+						<RowTitle>
+							<Txt ellipsize>{commandTypeCount.text}</Txt>
+						</RowTitle>
 						<FlexSplitter />
 						<IconLabel
 							cy-test="row-command-count"

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Overview/OverviewOperatorsList.tsx b/applications/client/src/views/Campaign/Explore/Panels/Overview/OverviewOperatorsList.tsx
@@ -2,7 +2,7 @@ import { createSorter, dateShortFormat, isDefined, semanticIcons, VirtualizedLis
 import type { OperatorModel, SortType } from '@redeye/client/store';
 import { SortDirection, useStore } from '@redeye/client/store';
 import { defaultInfoRowHeight, IconLabel, InfoRow, MessageRow, RowTime, RowTitle } from '@redeye/client/views';
-import { FlexSplitter } from '@redeye/ui-styles';
+import { FlexSplitter, Txt } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
 
@@ -26,7 +26,9 @@ export const OverviewOperatorsList = observer<OverviewProps>(({ sort }) => {
 							{store.settings.momentTz(operator.startTime)?.format(dateShortFormat)}&mdash;
 							{store.settings.momentTz(operator.endTime)?.format(dateShortFormat)}
 						</RowTime>
-						<RowTitle>{operator.name}</RowTitle>
+						<RowTitle>
+							<Txt ellipsize>{operator.name}</Txt>
+						</RowTitle>
 						<FlexSplitter />
 						<IconLabel
 							cy-test="row-command-count"

diff --git a/applications/client/src/views/Campaign/Explore/components/RowComponents.tsx b/applications/client/src/views/Campaign/Explore/components/RowComponents.tsx
@@ -28,5 +28,5 @@ export const RowTime = observer(({ state: timeStatus, ...props }: TxtProps & { s
 });
 
 export const RowTitle = (props: FlexProps) => (
-	<Flex align="center" gap={4} css={{ fontWeight: CoreTokens.FontWeightBold }} {...props} />
+	<Flex align="center" gap={4} overflowHidden fill css={{ fontWeight: CoreTokens.FontWeightBold }} {...props} />
 );
diff --git a/applications/client/src/views/Campaign/Presentation/PresentationTopicItem.tsx b/applications/client/src/views/Campaign/Presentation/PresentationTopicItem.tsx
@@ -4,7 +4,7 @@ import { CarbonIcon } from '@redeye/client/components';
 import type { PresentationItemModel } from '@redeye/client/store';
 import { useStore } from '@redeye/client/store';
 import { InfoRow, RowTitle } from '@redeye/client/views';
-import { CoreTokens, HeroButton, UtilityStyles } from '@redeye/ui-styles';
+import { CoreTokens, HeroButton, Txt, UtilityStyles } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
 import { IconLabel } from '..';
@@ -47,7 +47,7 @@ export const PresentationTopicItem = observer<PresentationTopicItemProps>(({ pre
 					`}
 					icon={getIcon(presentationItem)}
 				/>
-				{presentationItem.key}
+				<Txt ellipsize>{presentationItem.key}</Txt>
 			</RowTitle>
 			<IconLabel cy-test="count" value={presentationItem.count} icon={Chat16} title="Comments" />
 			<HeroButton