Skip to content

Commit 400db52

Browse files
Brijesh619Brijesh619
authored
ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Re… (#683)
* ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Recent Activity, Search Filters, and Popovers for long classification names * ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Recent Activity, Search Filters, and Popovers for long classification names * ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Recent Activity, Search Filters, and Popovers for long classification names
1 parent 9df46eb commit 400db52

38 files changed

Lines changed: 910 additions & 501 deletions

‎dashboard/src/components/DialogShowMoreLess.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -608,8 +608,14 @@ const DialogShowMoreLess = ({
608608
</Typography>
609609
) : (
610610
<Typography fontSize={15}>
611-
Remove: <b>{currentValue.selectedValue}</b> assignment from{" "}
612-
<b>{currentValue.assetName}</b> ?
611+
Remove:{" "}
612+
<b
613+
title={currentValue.selectedValue}
614+
className="text-truncate-inline"
615+
>
616+
{currentValue.selectedValue}
617+
</b>{" "}
618+
assignment from <b>{currentValue.assetName}</b> ?
613619
</Typography>
614620
)}
615621
</CustomModal>

‎dashboard/src/components/FilterQuery.tsx‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,16 @@ export const FilterQuery = ({ value }: any) => {
7474
data-cy={`${obj.id}${key}`}
7575
label={
7676
<>
77-
<Stack direction="row" gap="0.125em">
78-
<Typography className="searchKey">
77+
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
78+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>
7979
{systemAttributes[obj.id]
8080
? systemAttributes[obj.id]
8181
: obj.id}
8282
</Typography>
83-
<Typography className="operator" fontWeight="600">
83+
<Typography className="operator" fontWeight="600" sx={{ flexShrink: 0 }}>
8484
{getDisplayOperator(obj.operator)}{" "}
8585
</Typography>
86-
<Typography className="searchValue">
86+
<Typography className="searchValue" title={filterQueryValue[obj.id] ? filterQueryValue[obj.id][obj.value] : obj.value}>
8787
{filterQueryValue[obj.id]
8888
? filterQueryValue[obj.id][obj.value]
8989
: obj.value}
@@ -97,6 +97,7 @@ export const FilterQuery = ({ value }: any) => {
9797
size="small"
9898
variant="outlined"
9999
clickable
100+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
100101
/>
101102
);
102103
}
@@ -281,11 +282,11 @@ export const FilterQuery = ({ value }: any) => {
281282
data-type="type"
282283
label={
283284
<>
284-
<Stack direction="row">
285-
<Typography className="searchKey" gap="0.125em">
285+
<Stack direction="row" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
286+
<Typography className="searchKey" gap="0.125em" sx={{ flexShrink: 0 }}>
286287
Type:
287288
</Typography>
288-
<Typography className="searchValue">{value.type}</Typography>
289+
<Typography className="searchValue" title={value.type}>{value.type}</Typography>
289290
</Stack>
290291
</>
291292
}
@@ -295,6 +296,7 @@ export const FilterQuery = ({ value }: any) => {
295296
size="small"
296297
variant="outlined"
297298
clickable
299+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
298300
/>
299301
);
300302
let entityFilters: any = attributeFilter.extractUrl({
@@ -341,9 +343,9 @@ export const FilterQuery = ({ value }: any) => {
341343
data-type="tag"
342344
label={
343345
<>
344-
<Stack direction="row" gap="0.125em" alignItems="center">
345-
<Typography className="searchKey">Classification: </Typography>
346-
<Typography className="searchValue">{value.tag}</Typography>
346+
<Stack direction="row" gap="0.125em" alignItems="center" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
347+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Classification: </Typography>
348+
<Typography className="searchValue" title={value.tag} noWrap>{value.tag}</Typography>
347349
</Stack>
348350
</>
349351
}
@@ -353,6 +355,7 @@ export const FilterQuery = ({ value }: any) => {
353355
size="small"
354356
variant="outlined"
355357
clickable
358+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
356359
/>
357360
);
358361
let tagFilters: any = attributeFilter.extractUrl({
@@ -397,9 +400,9 @@ export const FilterQuery = ({ value }: any) => {
397400
data-type="relationshipName"
398401
label={
399402
<>
400-
<Stack direction="row" gap="0.125em">
401-
<Typography className="searchKey">Relationship: </Typography>
402-
<Typography className="searchValue">
403+
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
404+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Relationship: </Typography>
405+
<Typography className="searchValue" title={value.relationshipName}>
403406
{value.relationshipName}
404407
</Typography>
405408
</Stack>
@@ -411,6 +414,7 @@ export const FilterQuery = ({ value }: any) => {
411414
size="small"
412415
variant="outlined"
413416
clickable
417+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
414418
/>
415419
);
416420
let relationshipFilters: any = attributeFilter.extractUrl({
@@ -421,7 +425,7 @@ export const FilterQuery = ({ value }: any) => {
421425
if (value.relationshipFilters) {
422426
const conditionForRelationship: any =
423427
value.relationshipFilters.rules &&
424-
value?.relationshipFilters?.rules?.length === 1
428+
value?.relationshipFilters?.rules?.length === 1
425429
? ""
426430
: "AND";
427431
relationshipKeyValue = (
@@ -461,9 +465,9 @@ export const FilterQuery = ({ value }: any) => {
461465
data-type="term"
462466
label={
463467
<>
464-
<Stack direction="row" gap="0.125em">
465-
<Typography className="searchKey">Term: </Typography>
466-
<Typography className="searchValue">{value.term}</Typography>
468+
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
469+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Term: </Typography>
470+
<Typography className="searchValue" title={value.term}>{value.term}</Typography>
467471
</Stack>
468472
</>
469473
}
@@ -473,6 +477,7 @@ export const FilterQuery = ({ value }: any) => {
473477
size="small"
474478
variant="outlined"
475479
clickable
480+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
476481
/>
477482
);
478483

@@ -488,9 +493,9 @@ export const FilterQuery = ({ value }: any) => {
488493
data-type="query"
489494
label={
490495
<>
491-
<Stack direction="row" gap="0.125em">
492-
<Typography className="searchKey">Query: </Typography>
493-
<Typography className="searchValue">
496+
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
497+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Query: </Typography>
498+
<Typography className="searchValue" title={value.query.trim()}>
494499
{value.query.trim()}
495500
</Typography>
496501
</Stack>
@@ -502,6 +507,7 @@ export const FilterQuery = ({ value }: any) => {
502507
size="small"
503508
variant="outlined"
504509
clickable
510+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
505511
/>
506512
);
507513

@@ -517,9 +523,9 @@ export const FilterQuery = ({ value }: any) => {
517523
data-type="excludeST"
518524
label={
519525
<>
520-
<Stack direction="row" gap="0.125em">
521-
<Typography className="searchKey">Exclude sub-types: </Typography>
522-
<Typography className="searchValue">{value.excludeST}</Typography>
526+
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
527+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Exclude sub-types: </Typography>
528+
<Typography className="searchValue" title={value.excludeST}>{value.excludeST}</Typography>
523529
</Stack>
524530
</>
525531
}
@@ -529,6 +535,7 @@ export const FilterQuery = ({ value }: any) => {
529535
size="small"
530536
variant="outlined"
531537
clickable
538+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
532539
/>
533540
);
534541

@@ -544,11 +551,11 @@ export const FilterQuery = ({ value }: any) => {
544551
data-type="excludeSC"
545552
label={
546553
<>
547-
<Stack direction="row" gap="0.125em">
548-
<Typography className="searchKey">
554+
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
555+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>
549556
Exclude sub-classifications:{" "}
550557
</Typography>
551-
<Typography className="searchValue">{value.excludeSC}</Typography>
558+
<Typography className="searchValue" title={value.excludeSC}>{value.excludeSC}</Typography>
552559
</Stack>
553560
</>
554561
}
@@ -558,6 +565,7 @@ export const FilterQuery = ({ value }: any) => {
558565
size="small"
559566
variant="outlined"
560567
clickable
568+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
561569
/>
562570
);
563571

@@ -573,11 +581,11 @@ export const FilterQuery = ({ value }: any) => {
573581
data-type="includeDE"
574582
label={
575583
<>
576-
<Stack direction="row" gap="0.125em">
577-
<Typography className="searchKey">
584+
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
585+
<Typography className="searchKey" sx={{ flexShrink: 0 }}>
578586
Show historical entities:{" "}
579587
</Typography>
580-
<Typography className="searchValue">{value.includeDE}</Typography>
588+
<Typography className="searchValue" title={value.includeDE}>{value.includeDE}</Typography>
581589
</Stack>
582590
</>
583591
}
@@ -587,6 +595,7 @@ export const FilterQuery = ({ value }: any) => {
587595
size="small"
588596
variant="outlined"
589597
clickable
598+
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
590599
/>
591600
);
592601

‎dashboard/src/components/Forms/FormAutocomplete.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,11 @@ const FormAutocomplete = ({ data, control }: any) => {
110110
<LightTooltip title={`Data Type: (${typeName})`}>
111111
<Typography
112112
color="#666666"
113-
textOverflow="ellipsis"
113+
114114
maxWidth="160px"
115115
overflow="hidden"
116116
fontSize={14}
117-
>{`(${typeName})`}</Typography>
117+
noWrap>{`(${typeName})`}</Typography>
118118
</LightTooltip>
119119
</div>
120120
<Autocomplete

‎dashboard/src/components/Forms/FormCreatableSelect.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@ const FormCreatableSelect = ({ data, control, fieldName }: any) => {
4848
<LightTooltip title={`Data Type: (${typeName})`}>
4949
<Typography
5050
color="#666666"
51-
textOverflow="ellipsis"
51+
5252
maxWidth="160px"
5353
overflow="hidden"
5454
fontSize={14}
55-
>{`(${typeName}) ${cardinality}`}</Typography>
55+
noWrap>{`(${typeName}) ${cardinality}`}</Typography>
5656
</LightTooltip>
5757
</div>
5858
<Autocomplete

‎dashboard/src/components/Forms/FormDatepicker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ const FormDatepicker = ({ data, control, fieldName }: any) => {
6464
<Typography
6565
color="#666666"
6666
overflow="hidden"
67-
textOverflow="ellipsis"
67+
6868
maxWidth="160px"
6969
fontSize={14}
70-
>{`(${typeName})`}</Typography>
70+
noWrap>{`(${typeName})`}</Typography>
7171
</LightTooltip>
7272
</div>
7373
<div className="w-100">

‎dashboard/src/components/Forms/FormInputText.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ const FormInputText = ({
4545
<Typography
4646
color="#666666"
4747
overflow="hidden"
48-
textOverflow="ellipsis"
48+
4949
maxWidth="160px"
5050
fontSize={14}
51-
>{`(${typeName})`}</Typography>
51+
noWrap>{`(${typeName})`}</Typography>
5252
</LightTooltip>
5353
</div>
5454
<TextField

‎dashboard/src/components/Forms/FormSelectBoolean.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@ const FormSelectBoolean = ({ data, control, fieldName }: any) => {
4747
<LightTooltip title={`Data Type: (${typeName})`}>
4848
<Typography
4949
color="#666666"
50-
textOverflow="ellipsis"
50+
5151
overflow="hidden"
5252
maxWidth="160px"
5353
fontSize={14}
54-
>{`(${typeName})`}</Typography>
54+
noWrap>{`(${typeName})`}</Typography>
5555
</LightTooltip>
5656
</div>
5757
<div style={{ width: "100%" }}>

‎dashboard/src/components/Forms/FormSingleSelect.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ const FormSingleSelect = ({
5252

5353
<Typography
5454
color="#666666"
55-
textOverflow="ellipsis"
55+
5656
overflow="hidden"
5757
maxWidth="160px"
5858
fontSize={14}
59-
>{`(${typeName})`}</Typography>
59+
noWrap>{`(${typeName})`}</Typography>
6060
</div>
6161
<div style={{ width: "100%" }} className="form-textfield">
6262
<Select

‎dashboard/src/components/Forms/FormTextArea.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,11 @@ const FormTextArea = ({ data, control }: any) => {
4242
<LightTooltip title={`Data Type: (${typeName})`}>
4343
<Typography
4444
color="#666666"
45-
textOverflow="ellipsis"
45+
4646
maxWidth="160px"
4747
overflow="hidden"
4848
fontSize={14}
49-
>{`(${typeName})`}</Typography>
49+
noWrap>{`(${typeName})`}</Typography>
5050
</LightTooltip>
5151
</div>
5252
<div className="w-100">

0 commit comments

Comments
 (0)