UI : Fix alignment and spacing issue (#9379)

* Fix alignment and spacing issue

* fix spacing issue while adding and editing ingestion

* added center support in PageLayoutV1

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Col, Row } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { isEqual, isNil, isUndefined } from 'lodash';
@@ -665,10 +666,9 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
           />
           <div className="tw-flex-grow tw-flex tw-flex-col tw-py-4">
             {activeTab === 1 && (
-              <div
+              <div className="tab-details-container">
-                className="tab-details-container tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full"
+                <Row id="schemaDetails">
-                id="schemaDetails">
+                  <Col span={17}>
-                <div className="tw-col-span-3">
                     <Description
                       description={description}
                       entityFieldTasks={getEntityFieldThreadCounts(
@@ -695,14 +695,16 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                       onEntityFieldSelect={onEntityFieldSelect}
                       onThreadLinkSelect={onThreadLinkSelect}
                     />
-                </div>
+                  </Col>
-                <div className="tw-col-span-1 tw-border tw-border-main tw-rounded-md">
+                  <Col offset={1} span={6}>
+                    <div className="border-1 border-main rounded-6">
                       <FrequentlyJoinedTables
                         header="Frequently Joined Tables"
                         tableList={getFrequentlyJoinedWithTables()}
                       />
                     </div>
-                <div className="tw-col-span-full">
+                  </Col>
+                  <Col className="m-t-md" span={24}>
                     <SchemaTab
                       columnName={getPartialNameFromTableFQN(
                         datasetFQN,
@@ -733,7 +735,8 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                       onThreadLinkSelect={onThreadLinkSelect}
                       onUpdate={onColumnsUpdate}
                     />
-                </div>
+                  </Col>
+                </Row>
               </div>
             )}
             {activeTab === 2 && (

openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx

@@ -12,6 +12,7 @@
  */
 
 import { Col, Row } from 'antd';
+import classNames from 'classnames';
 import React, { FC, HTMLAttributes, ReactNode } from 'react';
 import './../../styles/layout/page-layout.less';
 
@@ -19,6 +20,7 @@ interface PageLayoutProp extends HTMLAttributes<HTMLDivElement> {
   leftPanel?: ReactNode;
   header?: ReactNode;
   rightPanel?: ReactNode;
+  center?: boolean;
 }
 
 export const pageContainerStyles = {
@@ -33,6 +35,7 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
   children,
   rightPanel,
   className,
+  center = false,
 }: PageLayoutProp) => {
   return (
     <Row className={className} gutter={[16, 16]} style={pageContainerStyles}>
@@ -45,14 +48,21 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
         </Col>
       )}
       <Col
-        className="page-layout-v1-center page-layout-v1-vertical-scroll"
+        className={classNames(
+          'page-layout-v1-center page-layout-v1-vertical-scroll',
+          {
+            'flex justify-center': center,
+          }
+        )}
         flex={
           leftPanel && rightPanel
             ? 'calc(100% - 568px)'
             : leftPanel || rightPanel
             ? 'calc(100% - 284px)'
             : '100%'
-        }>
+        }
+        offset={center ? 3 : 0}
+        span={center ? 18 : 24}>
         {children}
       </Col>
       {rightPanel && (

openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Space } from 'antd';
 import { AxiosError } from 'axios';
 import { capitalize, startCase } from 'lodash';
 import { ServiceTypes } from 'Models';
@@ -29,7 +30,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import Loader from '../../components/Loader/Loader';
 import {
   DEPLOYED_PROGRESS_VAL,
@@ -40,7 +41,6 @@ import {
 import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
 import { FormSubmitType } from '../../enums/form.enum';
 import { IngestionActionMessage } from '../../enums/ingestion.enum';
-import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
 import { PipelineType } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
@@ -258,20 +258,9 @@ const AddIngestionPage = () => {
     } else {
       return (
         <div className="self-center">
-          <PageLayout
+          <PageLayoutV1 center>
-            classes="w-max-1080 h-full p-t-md"
+            <Space direction="vertical" size="middle">
-            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
-            layout={PageLayoutType['2ColRTL']}
-            rightPanel={getServiceIngestionStepGuide(
-              activeIngestionStep,
-              true,
-              `${serviceData?.name || ''}_${ingestionType}`,
-              '',
-              ingestionType as PipelineType,
-              isDeployed(),
-              false,
-              isAirflowRunning
-            )}>
               <div className="form-container">
                 <AddIngestion
                   activeIngestionStep={activeIngestionStep}
@@ -286,7 +275,9 @@ const AddIngestionPage = () => {
                   pipelineType={ingestionType as PipelineType}
                   serviceCategory={serviceCategory as ServiceCategory}
                   serviceData={serviceData as DataObj}
-                setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
+                  setActiveIngestionStep={(step) =>
+                    setActiveIngestionStep(step)
+                  }
                   showDeployButton={showIngestionButton}
                   status={FormSubmitType.ADD}
                   onAddIngestionSave={onAddIngestionSave}
@@ -294,7 +285,20 @@ const AddIngestionPage = () => {
                   onIngestionDeploy={onIngestionDeploy}
                 />
               </div>
-          </PageLayout>
+            </Space>
+            <div className="m-t-xlg p-x-lg w-800" data-testid="right-panel">
+              {getServiceIngestionStepGuide(
+                activeIngestionStep,
+                true,
+                `${serviceData?.name || ''}_${ingestionType}`,
+                '',
+                ingestionType as PipelineType,
+                isDeployed(),
+                false,
+                isAirflowRunning
+              )}
+            </div>
+          </PageLayoutV1>
         </div>
       );
     }

openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Typography } from 'antd';
+import { Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { startCase } from 'lodash';
 import { ServiceOption, ServicesData, ServiceTypes } from 'Models';
@@ -22,13 +22,12 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import Loader from '../../components/Loader/Loader';
 import ServiceConfig from '../../components/ServiceConfig/ServiceConfig';
 import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
 import { addServiceGuide } from '../../constants/service-guide.constant';
 import { OPENMETADATA } from '../../constants/Services.constant';
-import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { ConfigData, ServicesType } from '../../interface/service.interface';
 import jsonData from '../../jsons/en';
@@ -150,11 +149,9 @@ function EditConnectionFormPage() {
         {getEntityMissingError(serviceCategory, serviceFQN)}
       </ErrorPlaceHolder>
     ) : (
-      <PageLayout
+      <PageLayoutV1 center>
-        classes="w-max-1080 h-full p-t-xss"
+        <Space direction="vertical" size="middle">
-        header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
+          <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
-        layout={PageLayoutType['2ColRTL']}
-        rightPanel={fetchRightPanel()}>
           <div className="form-container">
             <Typography.Title level={5}>
               {`Edit ${serviceFQN} Service Connection`}
@@ -171,7 +168,9 @@ function EditConnectionFormPage() {
               serviceType={serviceDetails?.serviceType || ''}
             />
           </div>
-      </PageLayout>
+        </Space>
+        <div className="m-t-xlg p-x-lg w-800">{fetchRightPanel()}</div>
+      </PageLayoutV1>
     );
   };
 

openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Space } from 'antd';
 import { AxiosError } from 'axios';
 import { capitalize, startCase } from 'lodash';
 import { ServiceTypes } from 'Models';
@@ -28,7 +29,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import Loader from '../../components/Loader/Loader';
 import {
   DEPLOYED_PROGRESS_VAL,
@@ -39,7 +40,6 @@ import {
 import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
 import { FormSubmitType } from '../../enums/form.enum';
 import { IngestionActionMessage } from '../../enums/ingestion.enum';
-import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
 import {
@@ -288,20 +288,9 @@ const EditIngestionPage = () => {
     } else {
       return (
         <div className="self-center">
-          <PageLayout
+          <PageLayoutV1 center>
-            classes="w-max-1080 h-full p-t-xss"
+            <Space direction="vertical" size="middle">
-            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
-            layout={PageLayoutType['2ColRTL']}
-            rightPanel={getServiceIngestionStepGuide(
-              activeIngestionStep,
-              true,
-              ingestionData?.name || '',
-              '',
-              ingestionType as PipelineType,
-              isDeployed(),
-              true,
-              isAirflowRunning
-            )}>
               <div className="form-container">
                 <AddIngestion
                   activeIngestionStep={activeIngestionStep}
@@ -317,7 +306,9 @@ const EditIngestionPage = () => {
                   pipelineType={ingestionType as PipelineType}
                   serviceCategory={serviceCategory as ServiceCategory}
                   serviceData={serviceData as DataObj}
-                setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
+                  setActiveIngestionStep={(step) =>
+                    setActiveIngestionStep(step)
+                  }
                   showDeployButton={showIngestionButton}
                   status={FormSubmitType.EDIT}
                   onAirflowStatusCheck={onAirflowStatusCheck}
@@ -326,7 +317,20 @@ const EditIngestionPage = () => {
                   onUpdateIngestion={onEditIngestionSave}
                 />
               </div>
-          </PageLayout>
+            </Space>
+            <div className="m-t-xlg p-x-lg w-800" data-testid="right-panel">
+              {getServiceIngestionStepGuide(
+                activeIngestionStep,
+                true,
+                ingestionData?.name || '',
+                '',
+                ingestionType as PipelineType,
+                isDeployed(),
+                true,
+                isAirflowRunning
+              )}
+            </div>
+          </PageLayoutV1>
         </div>
       );
     }

openmetadata-ui/src/main/resources/ui/src/styles/components/size.less

@@ -47,6 +47,9 @@
 .w-48 {
   width: 12rem;
 }
+.w-800 {
+  width: 800px;
+}
 .w-11-12 {
   width: 91.666667%;
 }

openmetadata-ui/src/main/resources/ui/src/styles/spacing.less

@@ -140,6 +140,10 @@
 .m-t-lg {
   margin-top: @margin-lg;
 }
+.m-t-xlg {
+  margin-top: @margin-xlg;
+}
+
 .mt-44 {
   margin-top: 11rem /* 176px */;
 }