Fix customize page layout for Governance and Data Assets (#22766)

* Fix customize page layout for Governance and Data Assets

* minor fix

* fix e2e test

---------

Co-authored-by: Pranita Fulsundar <pfulsundar8@gmail.com>
(cherry picked from commit 30d132156e5344a7a8576a40dd723c493bdabd77)

openmetadata-ui/src/main/resources/ui/playwright/constant/customizeDetail.ts

@@ -33,15 +33,16 @@ export enum ECustomizedGovernance {
 }
 
 export const TABLE_DEFAULT_TABS = [
-  'Schema',
   'Activity Feeds & Tasks',
-  'Sample Data',
+  'Contract',
-  'Queries',
+  'Custom Properties',
   'Data Observability',
   'Lineage',
-  'dbt',
+  'Queries',
+  'Sample Data',
+  'Schema',
   'View Definition',
-  'Custom Properties',
+  'dbt',
 ];
 
 export const TOPIC_DEFAULT_TABS = [

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/CustomizeDetailPage.spec.ts

@@ -388,6 +388,9 @@ test.describe('Persona customization', () => {
           .getByTestId('remove-widget-button')
           .click();
 
+        await adminPage.getByTestId('tab-Custom Properties').click();
+        await adminPage.getByText('Hide').click();
+
         await adminPage.getByRole('button', { name: 'Add tab' }).click();
 
         await adminPage

openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericTab/GenericTab.tsx

@@ -81,6 +81,7 @@ export const GenericTab = ({ type }: GenericTabProps) => {
       verticalCompact
       className={classNames('grid-container bg-grey', {
         'custom-tab': !leftSideWidgetPresent,
+        'height-auto': type === PageType.Glossary,
       })}
       cols={8}
       containerPadding={[0, 0]}

openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericTab/generic-tab.less

@@ -15,7 +15,6 @@
 
 .grid-container {
   position: relative;
-  height: auto !important;
 
   .react-grid-item {
     background: transparent;
@@ -65,3 +64,7 @@
   min-height: 54px; // Minimum height to prevent collapse
   overflow: visible;
 }
+
+.height-auto {
+  height: auto !important;
+}

openmetadata-ui/src/main/resources/ui/src/components/MyData/CustomizableComponents/CustomiseLandingPageHeader/CustomiseLandingPageHeader.tsx

@@ -243,8 +243,31 @@ const CustomiseLandingPageHeader = ({
                 infinite={false}
                 nextArrow={<CustomNextArrow />}
                 prevArrow={<CustomPrevArrow />}
-                slidesToScroll={6}
+                responsive={[
-                slidesToShow={6}>
+                  {
+                    breakpoint: 1900,
+                    settings: {
+                      slidesToShow: 8,
+                      slidesToScroll: 8,
+                    },
+                  },
+                  {
+                    breakpoint: 1600,
+                    settings: {
+                      slidesToShow: 6,
+                      slidesToScroll: 6,
+                    },
+                  },
+                  {
+                    breakpoint: 1300,
+                    settings: {
+                      slidesToShow: 4,
+                      slidesToScroll: 4,
+                    },
+                  },
+                ]}
+                slidesToScroll={10}
+                slidesToShow={10}>
                 {recentlyViewData.map((data, index) => (
                   <div
                     className={classNames('customise-recently-viewed-data', {
@@ -262,7 +285,7 @@ const CustomiseLandingPageHeader = ({
                         {data.icon}
                       </div>
                       <Typography.Text
-                        className="text-sm font-medium text-white wrap-text"
+                        className="text-sm font-medium text-white"
                         ellipsis={{ tooltip: true }}>
                         {data.name}
                       </Typography.Text>

openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/Common/WidgetHeader/WidgetHeader.tsx

@@ -91,7 +91,9 @@ const WidgetHeader = ({
       data-testid="widget-header"
       justify="space-between">
       <Col className="d-flex items-center h-full min-h-8">
-        {icon && <div className="d-flex h-6 w-6 m-r-xs">{icon}</div>}
+        {icon && (
+          <div className="d-flex h-6 w-6 m-r-xs header-title-icon">{icon}</div>
+        )}
         <Typography.Paragraph
           className="widget-title cursor-pointer"
           ellipsis={{ tooltip: true }}

openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/Common/WidgetHeader/widget-header.less

@@ -17,6 +17,12 @@
   box-shadow: 0px 4px 8px -4px rgba(10, 13, 18, 0.08);
   z-index: 1;
 
+  .header-title-icon {
+    svg {
+      color: @grey-600;
+    }
+  }
+
   .widget-title {
     margin: 0;
     font-weight: 500;

openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.test.tsx

@@ -225,7 +225,7 @@ describe('CustomizableLandingPageUtils', () => {
 
       expect(result).toHaveLength(1);
       expect(result[0].i).toBe('ExtraWidget.EmptyWidgetPlaceholder');
-      expect(result[0].h).toBe(4);
+      expect(result[0].h).toBe(2);
     });
 
     it('should add placeholder to existing layout', () => {

openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx

@@ -444,25 +444,19 @@ export const CustomPrevArrow = (props: DOMAttributes<HTMLDivElement>) => (
  */
 export const getLayoutWithEmptyWidgetPlaceholder = (
   layout: WidgetConfig[],
-  emptyWidgetHeight = 4,
+  emptyWidgetHeight = 2,
   emptyWidgetWidth = 1
-) => {
+) => [
-  // Handle empty or null layout
+  ...layout,
-  if (!layout || layout.length === 0) {
+  {
-    return [
+    h: emptyWidgetHeight,
-      {
+    i: LandingPageWidgetKeys.EMPTY_WIDGET_PLACEHOLDER,
-        h: emptyWidgetHeight,
+    w: emptyWidgetWidth,
-        i: LandingPageWidgetKeys.EMPTY_WIDGET_PLACEHOLDER,
+    x: 0,
-        w: emptyWidgetWidth,
+    y: 1000,
-        x: 0,
+    isDraggable: false,
-        y: 0,
+  },
-        isDraggable: false,
+];
-      },
-    ];
-  }
-
-  return ensurePlaceholderAtEnd(layout);
-};
 
 /**
  * Creates a landing page layout with empty widget placeholder