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
2025-08-28 10:56:02 +00:00 · 2022-12-19 19:09:11 +05:30 · 2022-12-19 19:09:11 +05:30 · cfcddf13c8
commit cfcddf13c8
parent a3495c67f0
7 changed files with 201 additions and 174 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
+++ b/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
-                className="tab-details-container tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full"
-                id="schemaDetails">
-                <div className="tw-col-span-3">
+              <div className="tab-details-container">
+                <Row id="schemaDetails">
+                  <Col span={17}>
                    <Description
                      description={description}
                      entityFieldTasks={getEntityFieldThreadCounts(
@ -695,14 +695,16 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                      onEntityFieldSelect={onEntityFieldSelect}
                      onThreadLinkSelect={onThreadLinkSelect}
                    />
-                </div>
-                <div className="tw-col-span-1 tw-border tw-border-main tw-rounded-md">
+                  </Col>
+                  <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 && (
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx
+++ b/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 && (
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
+++ b/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
-            classes="w-max-1080 h-full p-t-md"
-            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-            layout={PageLayoutType['2ColRTL']}
-            rightPanel={getServiceIngestionStepGuide(
-              activeIngestionStep,
-              true,
-              `${serviceData?.name || ''}_${ingestionType}`,
-              '',
-              ingestionType as PipelineType,
-              isDeployed(),
-              false,
-              isAirflowRunning
-            )}>
+          <PageLayoutV1 center>
+            <Space direction="vertical" size="middle">
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
              <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>
      );
    }
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
+++ b/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
-        classes="w-max-1080 h-full p-t-xss"
-        header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-        layout={PageLayoutType['2ColRTL']}
-        rightPanel={fetchRightPanel()}>
+      <PageLayoutV1 center>
+        <Space direction="vertical" size="middle">
+          <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
          <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>
    );
  };

--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
+++ b/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
-            classes="w-max-1080 h-full p-t-xss"
-            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-            layout={PageLayoutType['2ColRTL']}
-            rightPanel={getServiceIngestionStepGuide(
-              activeIngestionStep,
-              true,
-              ingestionData?.name || '',
-              '',
-              ingestionType as PipelineType,
-              isDeployed(),
-              true,
-              isAirflowRunning
-            )}>
+          <PageLayoutV1 center>
+            <Space direction="vertical" size="middle">
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
              <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>
      );
    }
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
+++ b/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%;
 }
--- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
+++ b/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 */;
 }