diff --git a/dashboard/src/components/DialogShowMoreLess.tsx b/dashboard/src/components/DialogShowMoreLess.tsx index ebe35f9f242..2e7ab3a23e9 100644 --- a/dashboard/src/components/DialogShowMoreLess.tsx +++ b/dashboard/src/components/DialogShowMoreLess.tsx @@ -608,8 +608,14 @@ const DialogShowMoreLess = ({ ) : ( - Remove: {currentValue.selectedValue} assignment from{" "} - {currentValue.assetName} ? + Remove:{" "} + + {currentValue.selectedValue} + {" "} + assignment from {currentValue.assetName} ? )} diff --git a/dashboard/src/components/FilterQuery.tsx b/dashboard/src/components/FilterQuery.tsx index 20351c33a6f..057f37340db 100644 --- a/dashboard/src/components/FilterQuery.tsx +++ b/dashboard/src/components/FilterQuery.tsx @@ -74,16 +74,16 @@ export const FilterQuery = ({ value }: any) => { data-cy={`${obj.id}${key}`} label={ <> - - + + {systemAttributes[obj.id] ? systemAttributes[obj.id] : obj.id} - + {getDisplayOperator(obj.operator)}{" "} - + {filterQueryValue[obj.id] ? filterQueryValue[obj.id][obj.value] : obj.value} @@ -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' } }} /> ); } @@ -281,11 +282,11 @@ export const FilterQuery = ({ value }: any) => { data-type="type" label={ <> - - + + Type: - {value.type} + {value.type} } @@ -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({ @@ -341,9 +343,9 @@ export const FilterQuery = ({ value }: any) => { data-type="tag" label={ <> - - Classification: - {value.tag} + + Classification: + {value.tag} } @@ -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({ @@ -397,9 +400,9 @@ export const FilterQuery = ({ value }: any) => { data-type="relationshipName" label={ <> - - Relationship: - + + Relationship: + {value.relationshipName} @@ -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({ @@ -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 = ( @@ -461,9 +465,9 @@ export const FilterQuery = ({ value }: any) => { data-type="term" label={ <> - - Term: - {value.term} + + Term: + {value.term} } @@ -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' } }} /> ); @@ -488,9 +493,9 @@ export const FilterQuery = ({ value }: any) => { data-type="query" label={ <> - - Query: - + + Query: + {value.query.trim()} @@ -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' } }} /> ); @@ -517,9 +523,9 @@ export const FilterQuery = ({ value }: any) => { data-type="excludeST" label={ <> - - Exclude sub-types: - {value.excludeST} + + Exclude sub-types: + {value.excludeST} } @@ -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' } }} /> ); @@ -544,11 +551,11 @@ export const FilterQuery = ({ value }: any) => { data-type="excludeSC" label={ <> - - + + Exclude sub-classifications:{" "} - {value.excludeSC} + {value.excludeSC} } @@ -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' } }} /> ); @@ -573,11 +581,11 @@ export const FilterQuery = ({ value }: any) => { data-type="includeDE" label={ <> - - + + Show historical entities:{" "} - {value.includeDE} + {value.includeDE} } @@ -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' } }} /> ); diff --git a/dashboard/src/components/Forms/FormAutocomplete.tsx b/dashboard/src/components/Forms/FormAutocomplete.tsx index 188b1c867ab..c1735c2efc9 100644 --- a/dashboard/src/components/Forms/FormAutocomplete.tsx +++ b/dashboard/src/components/Forms/FormAutocomplete.tsx @@ -110,11 +110,11 @@ const FormAutocomplete = ({ data, control }: any) => { {`(${typeName})`} + noWrap>{`(${typeName})`} { {`(${typeName}) ${cardinality}`} + noWrap>{`(${typeName}) ${cardinality}`} { {`(${typeName})`} + noWrap>{`(${typeName})`}
diff --git a/dashboard/src/components/Forms/FormInputText.tsx b/dashboard/src/components/Forms/FormInputText.tsx index 73b4cc2c294..582a04f0168 100644 --- a/dashboard/src/components/Forms/FormInputText.tsx +++ b/dashboard/src/components/Forms/FormInputText.tsx @@ -45,10 +45,10 @@ const FormInputText = ({ {`(${typeName})`} + noWrap>{`(${typeName})`}
{ {`(${typeName})`} + noWrap>{`(${typeName})`}
diff --git a/dashboard/src/components/Forms/FormSingleSelect.tsx b/dashboard/src/components/Forms/FormSingleSelect.tsx index a55fd18e43e..97cf6ba7255 100644 --- a/dashboard/src/components/Forms/FormSingleSelect.tsx +++ b/dashboard/src/components/Forms/FormSingleSelect.tsx @@ -52,11 +52,11 @@ const FormSingleSelect = ({ {`(${typeName})`} + noWrap>{`(${typeName})`}
+ + +
- {dataTypeSelector.map((type) => ( - - {type} - - ))} - - {shouldShowToggle && ( - ( - <> - - - - - )} - /> - )} -
+ + {shouldShowToggle && ( + ( + <> + + + + + )} + /> + )} +
- { - e.stopPropagation(); - remove(index); - }} - > - - -
+ { + e.stopPropagation(); + remove(index); + }} + > + + +
); })} {/* */} diff --git a/dashboard/src/views/DashboardOverview/ClassificationCoverage.tsx b/dashboard/src/views/DashboardOverview/ClassificationCoverage.tsx index 21fc1858865..03c27b94dca 100644 --- a/dashboard/src/views/DashboardOverview/ClassificationCoverage.tsx +++ b/dashboard/src/views/DashboardOverview/ClassificationCoverage.tsx @@ -373,7 +373,12 @@ const ClassificationCoverage = memo( fontSize: "0.875rem", fontWeight: 500, cursor: "pointer", + display: "block", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap" }} + title={name} > {name} diff --git a/dashboard/src/views/DashboardOverview/RecentActivity.tsx b/dashboard/src/views/DashboardOverview/RecentActivity.tsx index fdd5be1500c..d5145489974 100644 --- a/dashboard/src/views/DashboardOverview/RecentActivity.tsx +++ b/dashboard/src/views/DashboardOverview/RecentActivity.tsx @@ -326,7 +326,7 @@ const RecentActivity = memo(() => { "&:last-child": { borderBottom: "none" } }} > - + {entityName ? ( <> {typeDefPayload ? ( @@ -346,6 +346,12 @@ const RecentActivity = memo(() => { padding: 0, font: "inherit", "&:hover": { textDecoration: "underline" }, + display: "inline-block", + maxWidth: "300px", + textOverflow: "ellipsis", + overflow: "hidden", + whiteSpace: "nowrap", + verticalAlign: "bottom" }} > {entityName} @@ -357,13 +363,19 @@ const RecentActivity = memo(() => { sx={{ color: "primary.main", textDecoration: "none", - "&:hover": { textDecoration: "underline" } + "&:hover": { textDecoration: "underline" }, + display: "inline-block", + maxWidth: "300px", + textOverflow: "ellipsis", + overflow: "hidden", + whiteSpace: "nowrap", + verticalAlign: "bottom" }} > {entityName} ) : ( - entityName + {entityName} )} {" "} {typeLabel} {actionPhrase} by{" "} diff --git a/dashboard/src/views/DetailPage/DetailPageAttributes.tsx b/dashboard/src/views/DetailPage/DetailPageAttributes.tsx index 6aac958b823..c56ccf81efc 100644 --- a/dashboard/src/views/DetailPage/DetailPageAttributes.tsx +++ b/dashboard/src/views/DetailPage/DetailPageAttributes.tsx @@ -135,16 +135,18 @@ const DetailPageAttribute = ({ variant="outlined" > - - {name}{" "} - + + + {name}{" "} + + {isEmpty(bmguid) && ( { extractKeyValueFromEntity(entity); return ( <> - + Name: {!isEmpty(entity) ? `${name} (${entityName})` : entityName} @@ -70,9 +73,13 @@ const AuditTableDetails = ({ componentProps, row }: any) => { let customAttr = parseDetailsObject.customAttributes; return ( <> - {name == "-" - ? parseDetailsObject.typeName - : updateName(name, {})} +
+ {name == "-" + ? parseDetailsObject.typeName + : updateName(name, {})} +
= ({ let newClassifications = structuredClone(classifications); let options = !isEmpty(newClassifications) ? (checked ? newClassifications : tags?.self)?.map( - (obj: { typeName: string }) => obj.typeName - ) + (obj: { typeName: string }) => obj.typeName + ) : []; const classificationData = [...["All"], ...options].sort(); @@ -96,14 +96,14 @@ const ClassificationsTab: React.FC = ({ ? customSortBy(newClassifications, ["typeName"]) : [] : !isEmpty(tags?.self) - ? customSortBy(tags?.self, ["typeName"]) - : []; + ? customSortBy(tags?.self, ["typeName"]) + : []; let tableData = !isEmpty(classificationName) ? classificationName == "All" ? data : data.filter( - (obj: { typeName: string }) => obj.typeName == classificationName - ) + (obj: { typeName: string }) => obj.typeName == classificationName + ) : data; const handleCloseTagModal = () => { @@ -164,11 +164,12 @@ const ClassificationsTab: React.FC = ({ return ( {values.typeName} @@ -210,13 +211,19 @@ const ClassificationsTab: React.FC = ({ {" "} - {values?.typeName} + + {" "} + {values?.typeName}{" "} + ); @@ -251,27 +258,27 @@ const ClassificationsTab: React.FC = ({ {(guid == values?.entityGuid || (guid != values?.entityGuid && values.entityStatus == "DELETED")) && ( - - ) => { - e.stopPropagation(); - setOpenModal(true); - let { name } = extractKeyValueFromEntity(entity); - setCurrentValue({ - selectedValue: values.typeName, - assetName: name - }); - }} - data-cy="addTag" - > - - - - )} + + ) => { + e.stopPropagation(); + setOpenModal(true); + let { name } = extractKeyValueFromEntity(entity); + setCurrentValue({ + selectedValue: values.typeName, + assetName: name + }); + }} + data-cy="addTag" + > + + + + )} {guid == values?.entityGuid && ( = ({ value={classificationName} onChange={(_e: any, newValue: string) => { handleChange(newValue as string); + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } }} isOptionEqualToValue={(option, value) => option === value} getOptionLabel={(option) => option} options={classificationData} id="entity-classification" className="classification-table-autocomplete" + componentsProps={{ + paper: { + sx: { + maxWidth: "100%", + overflowX: "hidden" + } + } + }} + renderOption={(props, option: any) => { + return ( +
  • + {option} +
  • + ); + }} renderInput={(params) => ( - + )} disableClearable /> @@ -389,8 +429,14 @@ const ClassificationsTab: React.FC = ({ button2Loading={removeAssignmentLoading} > - Remove: {currentValue.selectedValue} assignment from{" "} - {currentValue.assetName} ? + Remove:{" "} + + {currentValue.selectedValue} + {" "} + assignment from {currentValue.assetName} ? )} diff --git a/dashboard/src/views/SideBar/Import/ImportLayout.tsx b/dashboard/src/views/SideBar/Import/ImportLayout.tsx index a0ef5e85154..f7eb351b449 100644 --- a/dashboard/src/views/SideBar/Import/ImportLayout.tsx +++ b/dashboard/src/views/SideBar/Import/ImportLayout.tsx @@ -144,14 +144,11 @@ const ImportLayout = ({ + noWrap> {file.name}
    diff --git a/dashboard/src/views/Statistics/ClassificationStats.tsx b/dashboard/src/views/Statistics/ClassificationStats.tsx index 7f6e88aa3af..d3ba8e38bbd 100644 --- a/dashboard/src/views/Statistics/ClassificationStats.tsx +++ b/dashboard/src/views/Statistics/ClassificationStats.tsx @@ -126,7 +126,9 @@ const ClassificationStats = ({ handleClose }: any) => { ) : ( Object.entries(tagEntitiesData).map(([key, value]: any) => ( - {key} + +
    {key}
    +