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-27 18:36:08 +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,75 +666,77 @@ 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">
-                  <Description
-                    description={description}
-                    entityFieldTasks={getEntityFieldThreadCounts(
-                      EntityField.DESCRIPTION,
-                      entityFieldTaskCount
-                    )}
-                    entityFieldThreads={getEntityFieldThreadCounts(
-                      EntityField.DESCRIPTION,
-                      entityFieldThreadCount
-                    )}
-                    entityFqn={datasetFQN}
-                    entityName={entityName}
-                    entityType={EntityType.TABLE}
-                    hasEditAccess={
-                      tablePermissions.EditAll ||
-                      tablePermissions.EditDescription
-                    }
-                    isEdit={isEdit}
-                    isReadOnly={deleted}
-                    owner={owner}
-                    onCancel={onCancel}
-                    onDescriptionEdit={onDescriptionEdit}
-                    onDescriptionUpdate={onDescriptionUpdate}
-                    onEntityFieldSelect={onEntityFieldSelect}
-                    onThreadLinkSelect={onThreadLinkSelect}
-                  />
-                </div>
-                <div className="tw-col-span-1 tw-border tw-border-main tw-rounded-md">
-                  <FrequentlyJoinedTables
-                    header="Frequently Joined Tables"
-                    tableList={getFrequentlyJoinedWithTables()}
-                  />
-                </div>
-                <div className="tw-col-span-full">
-                  <SchemaTab
-                    columnName={getPartialNameFromTableFQN(
-                      datasetFQN,
-                      [FqnPart['Column']],
-                      FQN_SEPARATOR_CHAR
-                    )}
-                    columns={columns}
-                    entityFieldTasks={getEntityFieldThreadCounts(
-                      EntityField.COLUMNS,
-                      entityFieldTaskCount
-                    )}
-                    entityFieldThreads={getEntityFieldThreadCounts(
-                      EntityField.COLUMNS,
-                      entityFieldThreadCount
-                    )}
-                    entityFqn={datasetFQN}
-                    hasDescriptionEditAccess={
-                      tablePermissions.EditAll ||
-                      tablePermissions.EditDescription
-                    }
-                    hasTagEditAccess={
-                      tablePermissions.EditAll || tablePermissions.EditTags
-                    }
-                    isReadOnly={deleted}
-                    joins={tableJoinData.columnJoins as ColumnJoins[]}
-                    tableConstraints={tableDetails.tableConstraints}
-                    onEntityFieldSelect={onEntityFieldSelect}
-                    onThreadLinkSelect={onThreadLinkSelect}
-                    onUpdate={onColumnsUpdate}
-                  />
-                </div>
+              <div className="tab-details-container">
+                <Row id="schemaDetails">
+                  <Col span={17}>
+                    <Description
+                      description={description}
+                      entityFieldTasks={getEntityFieldThreadCounts(
+                        EntityField.DESCRIPTION,
+                        entityFieldTaskCount
+                      )}
+                      entityFieldThreads={getEntityFieldThreadCounts(
+                        EntityField.DESCRIPTION,
+                        entityFieldThreadCount
+                      )}
+                      entityFqn={datasetFQN}
+                      entityName={entityName}
+                      entityType={EntityType.TABLE}
+                      hasEditAccess={
+                        tablePermissions.EditAll ||
+                        tablePermissions.EditDescription
+                      }
+                      isEdit={isEdit}
+                      isReadOnly={deleted}
+                      owner={owner}
+                      onCancel={onCancel}
+                      onDescriptionEdit={onDescriptionEdit}
+                      onDescriptionUpdate={onDescriptionUpdate}
+                      onEntityFieldSelect={onEntityFieldSelect}
+                      onThreadLinkSelect={onThreadLinkSelect}
+                    />
+                  </Col>
+                  <Col offset={1} span={6}>
+                    <div className="border-1 border-main rounded-6">
+                      <FrequentlyJoinedTables
+                        header="Frequently Joined Tables"
+                        tableList={getFrequentlyJoinedWithTables()}
+                      />
+                    </div>
+                  </Col>
+                  <Col className="m-t-md" span={24}>
+                    <SchemaTab
+                      columnName={getPartialNameFromTableFQN(
+                        datasetFQN,
+                        [FqnPart['Column']],
+                        FQN_SEPARATOR_CHAR
+                      )}
+                      columns={columns}
+                      entityFieldTasks={getEntityFieldThreadCounts(
+                        EntityField.COLUMNS,
+                        entityFieldTaskCount
+                      )}
+                      entityFieldThreads={getEntityFieldThreadCounts(
+                        EntityField.COLUMNS,
+                        entityFieldThreadCount
+                      )}
+                      entityFqn={datasetFQN}
+                      hasDescriptionEditAccess={
+                        tablePermissions.EditAll ||
+                        tablePermissions.EditDescription
+                      }
+                      hasTagEditAccess={
+                        tablePermissions.EditAll || tablePermissions.EditTags
+                      }
+                      isReadOnly={deleted}
+                      joins={tableJoinData.columnJoins as ColumnJoins[]}
+                      tableConstraints={tableDetails.tableConstraints}
+                      onEntityFieldSelect={onEntityFieldSelect}
+                      onThreadLinkSelect={onThreadLinkSelect}
+                      onUpdate={onColumnsUpdate}
+                    />
+                  </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,43 +258,47 @@ 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
-            )}>
-            <div className="form-container">
-              <AddIngestion
-                activeIngestionStep={activeIngestionStep}
-                handleCancelClick={goToService}
-                handleViewServiceClick={goToService}
-                heading={`Add ${capitalize(ingestionType)} Ingestion`}
-                ingestionAction={ingestionAction}
-                ingestionProgress={ingestionProgress}
-                isAirflowSetup={isAirflowRunning}
-                isIngestionCreated={isIngestionCreated}
-                isIngestionDeployed={isIngestionDeployed}
-                pipelineType={ingestionType as PipelineType}
-                serviceCategory={serviceCategory as ServiceCategory}
-                serviceData={serviceData as DataObj}
-                setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
-                showDeployButton={showIngestionButton}
-                status={FormSubmitType.ADD}
-                onAddIngestionSave={onAddIngestionSave}
-                onAirflowStatusCheck={onAirflowStatusCheck}
-                onIngestionDeploy={onIngestionDeploy}
-              />
+          <PageLayoutV1 center>
+            <Space direction="vertical" size="middle">
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
+              <div className="form-container">
+                <AddIngestion
+                  activeIngestionStep={activeIngestionStep}
+                  handleCancelClick={goToService}
+                  handleViewServiceClick={goToService}
+                  heading={`Add ${capitalize(ingestionType)} Ingestion`}
+                  ingestionAction={ingestionAction}
+                  ingestionProgress={ingestionProgress}
+                  isAirflowSetup={isAirflowRunning}
+                  isIngestionCreated={isIngestionCreated}
+                  isIngestionDeployed={isIngestionDeployed}
+                  pipelineType={ingestionType as PipelineType}
+                  serviceCategory={serviceCategory as ServiceCategory}
+                  serviceData={serviceData as DataObj}
+                  setActiveIngestionStep={(step) =>
+                    setActiveIngestionStep(step)
+                  }
+                  showDeployButton={showIngestionButton}
+                  status={FormSubmitType.ADD}
+                  onAddIngestionSave={onAddIngestionSave}
+                  onAirflowStatusCheck={onAirflowStatusCheck}
+                  onIngestionDeploy={onIngestionDeploy}
+                />
+              </div>
+            </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>
-          </PageLayout>
+          </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,28 +149,28 @@ 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()}>
-        <div className="form-container">
-          <Typography.Title level={5}>
-            {`Edit ${serviceFQN} Service Connection`}
-          </Typography.Title>
-          <ServiceConfig
-            data={serviceDetails as ServicesData}
-            disableTestConnection={
-              ServiceCategory.METADATA_SERVICES === serviceCategory &&
-              OPENMETADATA === serviceFQN
-            }
-            handleUpdate={handleConfigUpdate}
-            serviceCategory={serviceCategory as ServiceCategory}
-            serviceFQN={serviceFQN}
-            serviceType={serviceDetails?.serviceType || ''}
-          />
-        </div>
-      </PageLayout>
+      <PageLayoutV1 center>
+        <Space direction="vertical" size="middle">
+          <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
+          <div className="form-container">
+            <Typography.Title level={5}>
+              {`Edit ${serviceFQN} Service Connection`}
+            </Typography.Title>
+            <ServiceConfig
+              data={serviceDetails as ServicesData}
+              disableTestConnection={
+                ServiceCategory.METADATA_SERVICES === serviceCategory &&
+                OPENMETADATA === serviceFQN
+              }
+              handleUpdate={handleConfigUpdate}
+              serviceCategory={serviceCategory as ServiceCategory}
+              serviceFQN={serviceFQN}
+              serviceType={serviceDetails?.serviceType || ''}
+            />
+          </div>
+        </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,45 +288,49 @@ 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
-            )}>
-            <div className="form-container">
-              <AddIngestion
-                activeIngestionStep={activeIngestionStep}
-                data={ingestionData}
-                handleCancelClick={goToService}
-                handleViewServiceClick={goToService}
-                heading={`Edit ${capitalize(ingestionType)} Ingestion`}
-                ingestionAction={ingestionAction}
-                ingestionProgress={ingestionProgress}
-                isAirflowSetup={isAirflowRunning}
-                isIngestionCreated={isIngestionCreated}
-                isIngestionDeployed={isIngestionDeployed}
-                pipelineType={ingestionType as PipelineType}
-                serviceCategory={serviceCategory as ServiceCategory}
-                serviceData={serviceData as DataObj}
-                setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
-                showDeployButton={showIngestionButton}
-                status={FormSubmitType.EDIT}
-                onAirflowStatusCheck={onAirflowStatusCheck}
-                onIngestionDeploy={onIngestionDeploy}
-                onSuccessSave={goToService}
-                onUpdateIngestion={onEditIngestionSave}
-              />
+          <PageLayoutV1 center>
+            <Space direction="vertical" size="middle">
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
+              <div className="form-container">
+                <AddIngestion
+                  activeIngestionStep={activeIngestionStep}
+                  data={ingestionData}
+                  handleCancelClick={goToService}
+                  handleViewServiceClick={goToService}
+                  heading={`Edit ${capitalize(ingestionType)} Ingestion`}
+                  ingestionAction={ingestionAction}
+                  ingestionProgress={ingestionProgress}
+                  isAirflowSetup={isAirflowRunning}
+                  isIngestionCreated={isIngestionCreated}
+                  isIngestionDeployed={isIngestionDeployed}
+                  pipelineType={ingestionType as PipelineType}
+                  serviceCategory={serviceCategory as ServiceCategory}
+                  serviceData={serviceData as DataObj}
+                  setActiveIngestionStep={(step) =>
+                    setActiveIngestionStep(step)
+                  }
+                  showDeployButton={showIngestionButton}
+                  status={FormSubmitType.EDIT}
+                  onAirflowStatusCheck={onAirflowStatusCheck}
+                  onIngestionDeploy={onIngestionDeploy}
+                  onSuccessSave={goToService}
+                  onUpdateIngestion={onEditIngestionSave}
+                />
+              </div>
+            </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>
-          </PageLayout>
+          </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 */;
 }