This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch atlas-2.5
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/atlas-2.5 by this push:
new 7d92a1026 ATLAS-5042: [React UI] Entity detail page - UI alignment,
styling, and scroll issues (#359)
7d92a1026 is described below
commit 7d92a1026f68d3908001fa80aeed6d409726ea10
Author: Brijesh Bhalala <[email protected]>
AuthorDate: Thu May 29 11:34:10 2025 +0530
ATLAS-5042: [React UI] Entity detail page - UI alignment, styling, and
scroll issues (#359)
---
dashboard/src/components/Forms/FormTextArea.tsx | 9 ---------
dashboard/src/components/commonComponents.tsx | 2 +-
dashboard/src/index.scss | 4 ++++
dashboard/src/styles/formFields.scss | 7 +++++++
dashboard/src/styles/propertiesTab.scss | 1 +
dashboard/src/styles/relationshipLineage.scss | 1 +
dashboard/src/views/Classification/ClassificationForm.tsx | 1 +
.../PropertiesTab/UserDefinedProperties.tsx | 11 -----------
dashboard/src/views/Glossary/GlossaryForm.tsx | 13 +------------
9 files changed, 16 insertions(+), 33 deletions(-)
diff --git a/dashboard/src/components/Forms/FormTextArea.tsx
b/dashboard/src/components/Forms/FormTextArea.tsx
index 810f8d7ec..7a5d33411 100644
--- a/dashboard/src/components/Forms/FormTextArea.tsx
+++ b/dashboard/src/components/Forms/FormTextArea.tsx
@@ -50,15 +50,6 @@ const FormTextArea = ({ data, control }: any) => {
</LightTooltip>
</div>
<div className="w-100">
- {/* <TextArea
- maxRows={4}
- aria-label="maximum height"
- placeholder={name}
- onChange={onChange}
- minRows={2}
- className="form-textfield form-textarea-field"
- value={value}
- /> */}
<textarea
placeholder={name}
onChange={onChange}
diff --git a/dashboard/src/components/commonComponents.tsx
b/dashboard/src/components/commonComponents.tsx
index 91bb105dd..6db34530b 100644
--- a/dashboard/src/components/commonComponents.tsx
+++ b/dashboard/src/components/commonComponents.tsx
@@ -199,7 +199,7 @@ export const ExtractObject = (props: any) => {
}}
style={{
width: "unset !important",
- whiteSpace: "nowrap",
+ whiteSpace: "normal",
color: deleteIcon ? "#bb5838" : "#4a90e2"
}}
>
diff --git a/dashboard/src/index.scss b/dashboard/src/index.scss
index bbd5261a2..edb0a7bae 100644
--- a/dashboard/src/index.scss
+++ b/dashboard/src/index.scss
@@ -230,3 +230,7 @@ textarea {
.hide {
display: none !important;
}
+
+textarea::placeholder {
+ opacity: 0.7;
+}
diff --git a/dashboard/src/styles/formFields.scss
b/dashboard/src/styles/formFields.scss
index 8ed01afc0..f05af1cbb 100644
--- a/dashboard/src/styles/formFields.scss
+++ b/dashboard/src/styles/formFields.scss
@@ -46,6 +46,13 @@
width: 100%;
flex: 1;
margin-bottom: 0.5rem !important;
+ height: 34px;
+ border-radius: 3px;
+ outline: none;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ padding: 6px 12px;
+ min-height: 34px;
+ width: 100%;
}
.form-textfield-label {
diff --git a/dashboard/src/styles/propertiesTab.scss
b/dashboard/src/styles/propertiesTab.scss
index 1ed652f51..843aed5e7 100644
--- a/dashboard/src/styles/propertiesTab.scss
+++ b/dashboard/src/styles/propertiesTab.scss
@@ -57,4 +57,5 @@
.attribute-value-text > a {
width: 100% !important;
+ word-break: break-all;
}
diff --git a/dashboard/src/styles/relationshipLineage.scss
b/dashboard/src/styles/relationshipLineage.scss
index d851ad605..287615ec4 100644
--- a/dashboard/src/styles/relationshipLineage.scss
+++ b/dashboard/src/styles/relationshipLineage.scss
@@ -45,5 +45,6 @@
.value-text {
a {
width: 100% !important;
+ word-break: break-all;
}
}
diff --git a/dashboard/src/views/Classification/ClassificationForm.tsx
b/dashboard/src/views/Classification/ClassificationForm.tsx
index 5ae1102a8..61bd4582d 100644
--- a/dashboard/src/views/Classification/ClassificationForm.tsx
+++ b/dashboard/src/views/Classification/ClassificationForm.tsx
@@ -328,6 +328,7 @@ const ClassificationForm = ({
) : (
<textarea
{...field}
+ className="form-textarea-field"
placeholder={"Long Description"}
value={sanitizeHtmlContent(descriptionValue)}
onChange={(e) => {
diff --git
a/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/UserDefinedProperties.tsx
b/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/UserDefinedProperties.tsx
index d8a1e1fa6..e5f0ca839 100644
---
a/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/UserDefinedProperties.tsx
+++
b/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/UserDefinedProperties.tsx
@@ -353,17 +353,6 @@ const UserDefinedProperties = ({ loading,
customAttributes, entity }: any) => {
<>
<div style={{ flex: "1" }}>
<textarea
- style={{
- height: "34px",
- borderRadius: "3px",
- outline: "none",
- border: "1px solid rgba(0,0,0,0.12)",
- padding: "6px 12px",
- minHeight: "34px",
- width: "100%",
- marginTop: "8px !important",
- marginBottom: "8px !important"
- }}
maxRows={3}
rows={1}
aria-label="maximum height"
diff --git a/dashboard/src/views/Glossary/GlossaryForm.tsx
b/dashboard/src/views/Glossary/GlossaryForm.tsx
index 260644a75..bdbae34c8 100644
--- a/dashboard/src/views/Glossary/GlossaryForm.tsx
+++ b/dashboard/src/views/Glossary/GlossaryForm.tsx
@@ -153,20 +153,9 @@ const GlossaryForm = (props: {
/>
</div>
) : (
- // <TextArea
- // {...field}
- // minRows={4}
- // placeholder={"Long Description"}
- // onChange={(e) => {
- // e.stopPropagation();
- // const value = e.target.value;
- // field.onChange(value);
- // setValue("description", value);
- // }}
- // style={{ width: "100%" }}
- // />
<textarea
{...field}
+ className="form-textarea-field"
placeholder={"Long Description"}
onChange={(e) => {
e.stopPropagation();
