pawarprasad123 commented on code in PR #683:
URL: https://github.com/apache/atlas/pull/683#discussion_r3585329036
##########
dashboard/src/index.scss:
##########
@@ -230,3 +241,102 @@ textarea {
textarea::placeholder {
opacity: 0.7;
}
+
+.Toastify__toast-body {
+ word-break: break-all;
+}
+
+.text-truncate {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ display: block !important;
+ min-width: 0 !important;
+}
+
+.text-truncate-flex {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ flex: 1 1 0% !important;
+ min-width: 0 !important;
+}
+
+.MuiTypography-noWrap {
+ min-width: 0 !important;
+}
+
+.w-100 {
+ width: 100% !important;
+}
+
+.text-left {
+ text-align: left !important;
+}
+
+.fw-600 {
+ font-weight: 600 !important;
+}
+
+.recent-activity-truncate {
+ display: inline-block !important;
+ max-width: 300px !important;
+ vertical-align: bottom !important;
+}
+
+.d-inline-block {
+ display: inline-block !important;
+}
+
+.align-bottom {
+ vertical-align: bottom !important;
+}
+
+.text-truncate-block {
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.text-truncate-inline {
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ vertical-align: bottom;
+}
+
+.flex-center-gap {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ width: 100%;
+}
+
+.text-black-no-decoration {
+ color: black !important;
+ text-decoration: none !important;
+}
+
+.max-100 {
+ max-width: 100% !important;
+}
+
+.fw-normal {
+ font-weight: normal !important;
+}
+
+.text-left {
+ text-align: left !important;
+}
+
+.fw-600 {
+ font-weight: 600 !important;
+}
+
+.min-w-0 {
+ min-width: 0 !important;
+}
Review Comment:
Unit tests are failing (11 tests)
TagCustomValueEditor and TypeCustomValueEditor crash when
params.inputProps.style is undefined:
TypeError: Cannot read properties of undefined (reading 'style')
at ...params.inputProps.style
Affected suites:
TagCustomValueEditor.test.tsx — 4 failures
TypeCustomValueEditor.test.tsx — 7 failures
style: {
...(params.inputProps?.style ?? {}),
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
}
##########
dashboard/src/index.scss:
##########
@@ -230,3 +241,102 @@ textarea {
textarea::placeholder {
opacity: 0.7;
}
+
+.Toastify__toast-body {
+ word-break: break-all;
+}
+
+.text-truncate {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ display: block !important;
+ min-width: 0 !important;
+}
+
+.text-truncate-flex {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ flex: 1 1 0% !important;
+ min-width: 0 !important;
+}
+
+.MuiTypography-noWrap {
+ min-width: 0 !important;
+}
+
+.w-100 {
+ width: 100% !important;
+}
+
+.text-left {
+ text-align: left !important;
+}
+
+.fw-600 {
+ font-weight: 600 !important;
+}
+
+.recent-activity-truncate {
+ display: inline-block !important;
+ max-width: 300px !important;
+ vertical-align: bottom !important;
+}
+
+.d-inline-block {
+ display: inline-block !important;
+}
+
+.align-bottom {
+ vertical-align: bottom !important;
+}
+
+.text-truncate-block {
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.text-truncate-inline {
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ vertical-align: bottom;
+}
+
+.flex-center-gap {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ width: 100%;
+}
+
+.text-black-no-decoration {
+ color: black !important;
+ text-decoration: none !important;
+}
+
+.max-100 {
+ max-width: 100% !important;
+}
+
+.fw-normal {
+ font-weight: normal !important;
+}
+
+.text-left {
+ text-align: left !important;
+}
+
+.fw-600 {
+ font-weight: 600 !important;
+}
+
+.min-w-0 {
+ min-width: 0 !important;
+}
Review Comment:
QuickSearch.tsx uses fw-bold for highlighted search text, but index.scss
only defines .fw-normal and .fw-600:
className={part.highlight ? "fw-bold" : "fw-normal"}
Impact: Search match highlighting will not appear bold — a functional
regression.
Fix: Add to index.scss:
.fw-bold {
font-weight: 700 !important;
}
##########
dashboard/src/index.scss:
##########
@@ -230,3 +241,102 @@ textarea {
textarea::placeholder {
opacity: 0.7;
}
+
+.Toastify__toast-body {
+ word-break: break-all;
+}
+
+.text-truncate {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ display: block !important;
+ min-width: 0 !important;
+}
+
+.text-truncate-flex {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ flex: 1 1 0% !important;
+ min-width: 0 !important;
+}
+
+.MuiTypography-noWrap {
+ min-width: 0 !important;
+}
+
+.w-100 {
+ width: 100% !important;
+}
+
+.text-left {
+ text-align: left !important;
+}
+
+.fw-600 {
+ font-weight: 600 !important;
+}
+
+.recent-activity-truncate {
+ display: inline-block !important;
+ max-width: 300px !important;
+ vertical-align: bottom !important;
+}
+
+.d-inline-block {
+ display: inline-block !important;
+}
+
+.align-bottom {
+ vertical-align: bottom !important;
+}
+
+.text-truncate-block {
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.text-truncate-inline {
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ vertical-align: bottom;
+}
+
+.flex-center-gap {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ width: 100%;
+}
+
+.text-black-no-decoration {
+ color: black !important;
+ text-decoration: none !important;
+}
+
+.max-100 {
+ max-width: 100% !important;
+}
+
+.fw-normal {
+ font-weight: normal !important;
+}
+
+.text-left {
+ text-align: left !important;
+}
+
+.fw-600 {
+ font-weight: 600 !important;
+}
+
+.min-w-0 {
+ min-width: 0 !important;
+}
Review Comment:
The same renderOption + inline style block is copy-pasted across 6+ files:
TagCustomValueEditor.tsx
TypeCustomValueEditor.tsx (twice)
AddTag.tsx
ClassificationForm.tsx
ClassificationsTab.tsx
Recommendation: Extract once:
// e.g. TruncatedAutocompleteOption.tsx
const TruncatedAutocompleteOption = ({ props, label }: { props:
React.HTMLAttributes<HTMLLIElement>; label: string }) => (
<li {...props} title={label} className={props.className}>
<span className="text-truncate-block">{label}</span>
</li>
)
--------
Or add a single SCSS class:
.autocomplete-option-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
width: 100%;
}
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
