Skip to content

ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Re… #683

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Brijesh619 wants to merge 1 commit into
base: master
Choose a base branch
from
+843 −486
Open

ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Re… #683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions dashboard/src/components/DialogShowMoreLess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,8 +608,14 @@ const DialogShowMoreLess = ({
</Typography>
) : (
<Typography fontSize={15}>
Remove: <b>{currentValue.selectedValue}</b> assignment from{" "}
<b>{currentValue.assetName}</b> ?
Remove:{" "}
<b
title={currentValue.selectedValue}
className="text-truncate-inline"
>
{currentValue.selectedValue}
</b>{" "}
assignment from <b>{currentValue.assetName}</b> ?
</Typography>
)}
</CustomModal>
Expand Down
67 changes: 38 additions & 29 deletions dashboard/src/components/FilterQuery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,16 @@ export const FilterQuery = ({ value }: any) => {
data-cy={`${obj.id}${key}`}
label={
<>
<Stack direction="row" gap="0.125em">
<Typography className="searchKey">
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>
{systemAttributes[obj.id]
? systemAttributes[obj.id]
: obj.id}
</Typography>
<Typography className="operator" fontWeight="600">
<Typography className="operator" fontWeight="600" sx={{ flexShrink: 0 }}>
{getDisplayOperator(obj.operator)}{" "}
</Typography>
<Typography className="searchValue">
<Typography className="searchValue" title={filterQueryValue[obj.id] ? filterQueryValue[obj.id][obj.value] : obj.value}>
{filterQueryValue[obj.id]
? filterQueryValue[obj.id][obj.value]
: obj.value}
Expand All @@ -97,6 +97,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);
}
Expand Down Expand Up @@ -281,11 +282,11 @@ export const FilterQuery = ({ value }: any) => {
data-type="type"
label={
<>
<Stack direction="row">
<Typography className="searchKey" gap="0.125em">
<Stack direction="row" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" gap="0.125em" sx={{ flexShrink: 0 }}>
Type:
</Typography>
<Typography className="searchValue">{value.type}</Typography>
<Typography className="searchValue" title={value.type}>{value.type}</Typography>
</Stack>
</>
}
Expand All @@ -295,6 +296,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);
let entityFilters: any = attributeFilter.extractUrl({
Expand Down Expand Up @@ -341,9 +343,9 @@ export const FilterQuery = ({ value }: any) => {
data-type="tag"
label={
<>
<Stack direction="row" gap="0.125em" alignItems="center">
<Typography className="searchKey">Classification: </Typography>
<Typography className="searchValue">{value.tag}</Typography>
<Stack direction="row" gap="0.125em" alignItems="center" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Classification: </Typography>
<Typography className="searchValue" title={value.tag} noWrap>{value.tag}</Typography>
</Stack>
</>
}
Expand All @@ -353,6 +355,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);
let tagFilters: any = attributeFilter.extractUrl({
Expand Down Expand Up @@ -397,9 +400,9 @@ export const FilterQuery = ({ value }: any) => {
data-type="relationshipName"
label={
<>
<Stack direction="row" gap="0.125em">
<Typography className="searchKey">Relationship: </Typography>
<Typography className="searchValue">
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Relationship: </Typography>
<Typography className="searchValue" title={value.relationshipName}>
{value.relationshipName}
</Typography>
</Stack>
Expand All @@ -411,6 +414,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);
let relationshipFilters: any = attributeFilter.extractUrl({
Expand All @@ -421,7 +425,7 @@ export const FilterQuery = ({ value }: any) => {
if (value.relationshipFilters) {
const conditionForRelationship: any =
value.relationshipFilters.rules &&
value?.relationshipFilters?.rules?.length === 1
value?.relationshipFilters?.rules?.length === 1
? ""
: "AND";
relationshipKeyValue = (
Expand Down Expand Up @@ -461,9 +465,9 @@ export const FilterQuery = ({ value }: any) => {
data-type="term"
label={
<>
<Stack direction="row" gap="0.125em">
<Typography className="searchKey">Term: </Typography>
<Typography className="searchValue">{value.term}</Typography>
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Term: </Typography>
<Typography className="searchValue" title={value.term}>{value.term}</Typography>
</Stack>
</>
}
Expand All @@ -473,6 +477,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);

Expand All @@ -488,9 +493,9 @@ export const FilterQuery = ({ value }: any) => {
data-type="query"
label={
<>
<Stack direction="row" gap="0.125em">
<Typography className="searchKey">Query: </Typography>
<Typography className="searchValue">
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Query: </Typography>
<Typography className="searchValue" title={value.query.trim()}>
{value.query.trim()}
</Typography>
</Stack>
Expand All @@ -502,6 +507,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);

Expand All @@ -517,9 +523,9 @@ export const FilterQuery = ({ value }: any) => {
data-type="excludeST"
label={
<>
<Stack direction="row" gap="0.125em">
<Typography className="searchKey">Exclude sub-types: </Typography>
<Typography className="searchValue">{value.excludeST}</Typography>
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>Exclude sub-types: </Typography>
<Typography className="searchValue" title={value.excludeST}>{value.excludeST}</Typography>
</Stack>
</>
}
Expand All @@ -529,6 +535,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);

Expand All @@ -544,11 +551,11 @@ export const FilterQuery = ({ value }: any) => {
data-type="excludeSC"
label={
<>
<Stack direction="row" gap="0.125em">
<Typography className="searchKey">
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>
Exclude sub-classifications:{" "}
</Typography>
<Typography className="searchValue">{value.excludeSC}</Typography>
<Typography className="searchValue" title={value.excludeSC}>{value.excludeSC}</Typography>
</Stack>
</>
}
Expand All @@ -558,6 +565,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);

Expand All @@ -573,11 +581,11 @@ export const FilterQuery = ({ value }: any) => {
data-type="includeDE"
label={
<>
<Stack direction="row" gap="0.125em">
<Typography className="searchKey">
<Stack direction="row" gap="0.125em" sx={{ maxWidth: '100%', overflow: 'hidden' }}>
<Typography className="searchKey" sx={{ flexShrink: 0 }}>
Show historical entities:{" "}
</Typography>
<Typography className="searchValue">{value.includeDE}</Typography>
<Typography className="searchValue" title={value.includeDE}>{value.includeDE}</Typography>
</Stack>
</>
}
Expand All @@ -587,6 +595,7 @@ export const FilterQuery = ({ value }: any) => {
size="small"
variant="outlined"
clickable
sx={{ maxWidth: '100%', '& .MuiChip-label': { overflow: 'hidden', display: 'flex', alignItems: 'center' } }}
/>
);

Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Forms/FormAutocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,11 @@ const FormAutocomplete = ({ data, control }: any) => {
<LightTooltip title={`Data Type: (${typeName})`}>
<Typography
color="#666666"
textOverflow="ellipsis"

maxWidth="160px"
overflow="hidden"
fontSize={14}
>{`(${typeName})`}</Typography>
noWrap>{`(${typeName})`}</Typography>
</LightTooltip>
</div>
<Autocomplete
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Forms/FormCreatableSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ const FormCreatableSelect = ({ data, control, fieldName }: any) => {
<LightTooltip title={`Data Type: (${typeName})`}>
<Typography
color="#666666"
textOverflow="ellipsis"

maxWidth="160px"
overflow="hidden"
fontSize={14}
>{`(${typeName}) ${cardinality}`}</Typography>
noWrap>{`(${typeName}) ${cardinality}`}</Typography>
</LightTooltip>
</div>
<Autocomplete
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Forms/FormDatepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ const FormDatepicker = ({ data, control, fieldName }: any) => {
<Typography
color="#666666"
overflow="hidden"
textOverflow="ellipsis"

maxWidth="160px"
fontSize={14}
>{`(${typeName})`}</Typography>
noWrap>{`(${typeName})`}</Typography>
</LightTooltip>
</div>
<div className="w-100">
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Forms/FormInputText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ const FormInputText = ({
<Typography
color="#666666"
overflow="hidden"
textOverflow="ellipsis"

maxWidth="160px"
fontSize={14}
>{`(${typeName})`}</Typography>
noWrap>{`(${typeName})`}</Typography>
</LightTooltip>
</div>
<TextField
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Forms/FormSelectBoolean.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ const FormSelectBoolean = ({ data, control, fieldName }: any) => {
<LightTooltip title={`Data Type: (${typeName})`}>
<Typography
color="#666666"
textOverflow="ellipsis"

overflow="hidden"
maxWidth="160px"
fontSize={14}
>{`(${typeName})`}</Typography>
noWrap>{`(${typeName})`}</Typography>
</LightTooltip>
</div>
<div style={{ width: "100%" }}>
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Forms/FormSingleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,11 @@ const FormSingleSelect = ({

<Typography
color="#666666"
textOverflow="ellipsis"

overflow="hidden"
maxWidth="160px"
fontSize={14}
>{`(${typeName})`}</Typography>
noWrap>{`(${typeName})`}</Typography>
</div>
<div style={{ width: "100%" }} className="form-textfield">
<Select
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Forms/FormTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ const FormTextArea = ({ data, control }: any) => {
<LightTooltip title={`Data Type: (${typeName})`}>
<Typography
color="#666666"
textOverflow="ellipsis"

maxWidth="160px"
overflow="hidden"
fontSize={14}
>{`(${typeName})`}</Typography>
noWrap>{`(${typeName})`}</Typography>
</LightTooltip>
</div>
<div className="w-100">
Expand Down
Loading
Loading