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

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;

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 {

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<Table>();
 
@@ -64,7 +68,7 @@ export const FrequentlyJoinedTables = () => {
     </Space>
   ));
 
-  return (
+  return renderAsExpandableCard ? (
     <ExpandableCard
       cardProps={{
         title: t('label.frequently-joined-table-plural'),
@@ -73,5 +77,7 @@ export const FrequentlyJoinedTables = () => {
       isExpandDisabled={isEmpty(joinedTables)}>
       {content}
     </ExpandableCard>
+  ) : (
+    <>{content}</>
   );
 };

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<TableType>();
 
   const partitionColumnDetails = useMemo(
@@ -80,7 +84,7 @@ export const PartitionedKeys = () => {
     />
   );
 
-  return (
+  return renderAsExpandableCard ? (
     <ExpandableCard
       cardProps={{
         title: t('label.table-partition-plural'),
@@ -88,5 +92,7 @@ export const PartitionedKeys = () => {
       isExpandDisabled={isEmpty(partitionColumnDetails)}>
       {content}
     </ExpandableCard>
+  ) : (
+    content
   );
 };

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<Table>();
@@ -168,13 +172,17 @@ const TableConstraints = () => {
 
   return (
     <>
-      <ExpandableCard
-        cardProps={{
-          title: header,
-        }}
-        isExpandDisabled={isEmpty(data?.tableConstraints)}>
-        {content}
-      </ExpandableCard>
+      {renderAsExpandableCard ? (
+        <ExpandableCard
+          cardProps={{
+            title: header,
+          }}
+          isExpandDisabled={isEmpty(data?.tableConstraints)}>
+          {content}
+        </ExpandableCard>
+      ) : (
+        content
+      )}
       {isModalOpen && (
         <TableConstraintsModal
           constraint={data?.tableConstraints}

openmetadata-ui/src/main/resources/ui/src/utils/GenericWidget/GenericWidgetUtils.tsx

@@ -143,11 +143,10 @@ export const WIDGET_COMPONENTS = {
   ),
   [DetailPageWidgetKeys.TABLE_SCHEMA]: () => <SchemaTable />,
   [DetailPageWidgetKeys.FREQUENTLY_JOINED_TABLES]: () => (
-    <FrequentlyJoinedTables />
+    <FrequentlyJoinedTables renderAsExpandableCard={false} />
   ),
   [DetailPageWidgetKeys.DATA_PRODUCTS]: () => (
     <DataProductsContainer
-      newLook
       dataProducts={tableClassBase.getDummyData().dataProducts ?? []}
       hasPermission={false}
       showHeader={false}
@@ -156,7 +155,9 @@ export const WIDGET_COMPONENTS = {
   [GlossaryTermDetailPageWidgetKeys.TERMS_TABLE]: () => (
     <GlossaryTermTab isGlossary />
   ),
-  [DetailPageWidgetKeys.TABLE_CONSTRAINTS]: () => <TableConstraints />,
+  [DetailPageWidgetKeys.TABLE_CONSTRAINTS]: () => (
+    <TableConstraints renderAsExpandableCard={false} />
+  ),
   [DetailPageWidgetKeys.TOPIC_SCHEMA]: () => <TopicSchemaFields />,
   [DetailPageWidgetKeys.DATA_MODEL]: () => <ModelTab />,
   [DetailPageWidgetKeys.CONTAINER_CHILDREN]: () => (
@@ -186,5 +187,7 @@ export const WIDGET_COMPONENTS = {
   [DetailPageWidgetKeys.STORED_PROCEDURE_CODE]: () => (
     <StoredProcedureCodeCard />
   ),
-  [DetailPageWidgetKeys.PARTITIONED_KEYS]: () => <PartitionedKeys />,
+  [DetailPageWidgetKeys.PARTITIONED_KEYS]: () => (
+    <PartitionedKeys renderAsExpandableCard={false} />
+  ),
 } as const;