From 5a3e5adc6038e29ab0a6b3993933cc6577a584df Mon Sep 17 00:00:00 2001 From: Shrushti Polekar Date: Wed, 28 May 2025 16:28:54 +0530 Subject: [PATCH] Fix(ui) : Persona customization widgets style issues (#21415) * fix table widgets overflow issue for persona customization * fix widget header border radius * fix data products widget style for persona customization * minor style update * render normal content instead of expandable card for few widgets --- .../GenericWidget/generic-widget.less | 1 + .../customize-details-page.less | 2 ++ .../FrequentlyJoinedTables.component.tsx | 10 ++++++-- .../PartitionedKeys.component.tsx | 10 ++++++-- .../TableConstraints/TableConstraints.tsx | 24 ++++++++++++------- .../GenericWidget/GenericWidgetUtils.tsx | 11 +++++---- 6 files changed, 42 insertions(+), 16 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericWidget/generic-widget.less b/openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericWidget/generic-widget.less index ca48d48ff84..55b1e2919b0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericWidget/generic-widget.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericWidget/generic-widget.less @@ -15,6 +15,7 @@ .generic-widget-card { height: 100%; + padding-bottom: @size-md !important; .ant-card-head { background-color: @grey-100; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomizeDetailsPage/customize-details-page.less b/openmetadata-ui/src/main/resources/ui/src/pages/CustomizeDetailsPage/customize-details-page.less index 3477d3b0588..b2483ff5f3a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomizeDetailsPage/customize-details-page.less +++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomizeDetailsPage/customize-details-page.less @@ -10,6 +10,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import (reference) url('../../styles/variables.less'); .customize-details-page { box-shadow: 0px 4px 6px -2px #0a0d1208; box-shadow: 0px 12px 16px -4px #0a0d1214; @@ -21,6 +22,7 @@ .ant-card-head { border: none; + border-radius: @size-sm; } .customize-page-header { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/FrequentlyJoinedTables/FrequentlyJoinedTables.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/FrequentlyJoinedTables/FrequentlyJoinedTables.component.tsx index f19bc46a9e6..aaf1702549d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/FrequentlyJoinedTables/FrequentlyJoinedTables.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/FrequentlyJoinedTables/FrequentlyJoinedTables.component.tsx @@ -29,7 +29,11 @@ export type Joined = JoinedWith & { name: string; }; -export const FrequentlyJoinedTables = () => { +export const FrequentlyJoinedTables = ({ + renderAsExpandableCard = true, +}: { + renderAsExpandableCard?: boolean; +}) => { const { t } = useTranslation(); const { data, filterWidgets } = useGenericContext(); @@ -64,7 +68,7 @@ export const FrequentlyJoinedTables = () => { )); - return ( + return renderAsExpandableCard ? ( { isExpandDisabled={isEmpty(joinedTables)}> {content} + ) : ( + <>{content} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/PartitionedKeys/PartitionedKeys.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/PartitionedKeys/PartitionedKeys.component.tsx index bfeab5cf660..39fbe8e6e08 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/PartitionedKeys/PartitionedKeys.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/PartitionedKeys/PartitionedKeys.component.tsx @@ -23,7 +23,11 @@ import { Table as TableType, } from '../../../generated/entity/data/table'; -export const PartitionedKeys = () => { +export const PartitionedKeys = ({ + renderAsExpandableCard = true, +}: { + renderAsExpandableCard?: boolean; +}) => { const { data, filterWidgets } = useGenericContext(); const partitionColumnDetails = useMemo( @@ -80,7 +84,7 @@ export const PartitionedKeys = () => { /> ); - return ( + return renderAsExpandableCard ? ( { isExpandDisabled={isEmpty(partitionColumnDetails)}> {content} + ) : ( + content ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx index f23673edefd..9b75f45de4a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx @@ -32,7 +32,11 @@ import ForeignKeyConstraint from './ForeignKeyConstraint'; import './table-constraints.less'; import TableConstraintsModal from './TableConstraintsModal/TableConstraintsModal.component'; -const TableConstraints = () => { +const TableConstraints = ({ + renderAsExpandableCard = true, +}: { + renderAsExpandableCard?: boolean; +}) => { const { t } = useTranslation(); const [isModalOpen, setIsModalOpen] = useState(false); const { data, permissions, onUpdate } = useGenericContext
(); @@ -168,13 +172,17 @@ const TableConstraints = () => { return ( <> - - {content} - + {renderAsExpandableCard ? ( + + {content} + + ) : ( + content + )} {isModalOpen && ( , [DetailPageWidgetKeys.FREQUENTLY_JOINED_TABLES]: () => ( - + ), [DetailPageWidgetKeys.DATA_PRODUCTS]: () => ( ( ), - [DetailPageWidgetKeys.TABLE_CONSTRAINTS]: () => , + [DetailPageWidgetKeys.TABLE_CONSTRAINTS]: () => ( + + ), [DetailPageWidgetKeys.TOPIC_SCHEMA]: () => , [DetailPageWidgetKeys.DATA_MODEL]: () => , [DetailPageWidgetKeys.CONTAINER_CHILDREN]: () => ( @@ -186,5 +187,7 @@ export const WIDGET_COMPONENTS = { [DetailPageWidgetKeys.STORED_PROCEDURE_CODE]: () => ( ), - [DetailPageWidgetKeys.PARTITIONED_KEYS]: () => , + [DetailPageWidgetKeys.PARTITIONED_KEYS]: () => ( + + ), } as const;