From d7da180503238e9e294d99b67ad0a7a23b6bf1cc Mon Sep 17 00:00:00 2001
From: yug-shah0106 <57866661+yug-shah0106@users.noreply.github.com>
Date: Fri, 24 Jun 2022 21:05:51 +0530
Subject: [PATCH]  [issues-5528] UI improvements (#5629)

---
 .../AddService/AddService.component.tsx       | 67 ++++++++--------
 .../components/Explore/Explore.component.tsx  | 63 +++++++--------
 .../ServiceConfig/ServiceConfig.tsx           |  2 +-
 .../ServiceConnectionDetails.component.tsx    |  2 +-
 .../TeamsAndUsers/TeamsAndUsers.component.tsx |  4 +-
 .../AddIngestionPage.component.tsx            | 76 +++++++++---------
 .../EditIngestionPage.component.tsx           | 80 ++++++++++---------
 7 files changed, 150 insertions(+), 144 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
index ed13311825f..2951721abcd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
@@ -265,38 +265,41 @@ const AddService = ({
   };
 
   return (
-    <PageLayout
-      classes="tw-max-w-full-hd tw-h-full tw-pt-4"
-      header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-      layout={PageLayoutType['2ColRTL']}
-      rightPanel={fetchRightPanel()}>
-      <div className="tw-form-container">
-        {addIngestion ? (
-          <AddIngestion
-            isAirflowSetup
-            activeIngestionStep={activeIngestionStep}
-            handleCancelClick={() => handleAddIngestion(false)}
-            handleViewServiceClick={handleViewServiceClick}
-            heading={`Add ${capitalize(PipelineType.Metadata)} Ingestion`}
-            ingestionAction={ingestionAction}
-            ingestionProgress={ingestionProgress}
-            isIngestionCreated={isIngestionCreated}
-            isIngestionDeployed={isIngestionDeployed}
-            pipelineType={PipelineType.Metadata}
-            serviceCategory={serviceCategory}
-            serviceData={newServiceData as DataObj}
-            setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
-            showDeployButton={showDeployButton}
-            status={FormSubmitType.ADD}
-            onAddIngestionSave={onAddIngestionSave}
-            onAirflowStatusCheck={onAirflowStatusCheck}
-            onIngestionDeploy={onIngestionDeploy}
-          />
-        ) : (
-          addNewService()
-        )}
-      </div>
-    </PageLayout>
+    <div className="tw-self-center">
+      {' '}
+      <PageLayout
+        classes="tw-max-w-full-hd tw-h-full tw-pt-4"
+        header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
+        layout={PageLayoutType['2ColRTL']}
+        rightPanel={fetchRightPanel()}>
+        <div className="tw-form-container">
+          {addIngestion ? (
+            <AddIngestion
+              isAirflowSetup
+              activeIngestionStep={activeIngestionStep}
+              handleCancelClick={() => handleAddIngestion(false)}
+              handleViewServiceClick={handleViewServiceClick}
+              heading={`Add ${capitalize(PipelineType.Metadata)} Ingestion`}
+              ingestionAction={ingestionAction}
+              ingestionProgress={ingestionProgress}
+              isIngestionCreated={isIngestionCreated}
+              isIngestionDeployed={isIngestionDeployed}
+              pipelineType={PipelineType.Metadata}
+              serviceCategory={serviceCategory}
+              serviceData={newServiceData as DataObj}
+              setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
+              showDeployButton={showDeployButton}
+              status={FormSubmitType.ADD}
+              onAddIngestionSave={onAddIngestionSave}
+              onAirflowStatusCheck={onAirflowStatusCheck}
+              onIngestionDeploy={onIngestionDeploy}
+            />
+          ) : (
+            addNewService()
+          )}
+        </div>
+      </PageLayout>
+    </div>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
index 0f3e52ebdb1..4a86e19d422 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@@ -657,38 +657,37 @@ const Explore: React.FC<ExploreProps> = ({
 
   const fetchLeftPanel = () => {
     return (
-      <div className="tw-h-full">
-        <Card
-          data-testid="data-summary-container"
-          style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}>
-          <Fragment>
-            <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
-              <Button
-                className={classNames('tw-underline tw-pb-4')}
-                disabled={!getFilterCount(filters)}
-                size="custom"
-                theme="primary"
-                variant="link"
-                onClick={() => resetFilters(true)}>
-                Clear All
-              </Button>
-            </div>
-            <div className="tw-filter-seperator" />
-            {!error && (
-              <FacetFilter
-                aggregations={getAggrWithDefaultValue(
-                  aggregations,
-                  visibleFilters
-                )}
-                filters={getFacetedFilter()}
-                showDeletedOnly={showDeleted}
-                onSelectDeleted={handleShowDeleted}
-                onSelectHandler={handleSelectedFilter}
-              />
-            )}
-          </Fragment>
-        </Card>
-      </div>
+      <Card
+        className="tw-h-full"
+        data-testid="data-summary-container"
+        style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}>
+        <Fragment>
+          <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
+            <Button
+              className={classNames('tw-underline tw-pb-4')}
+              disabled={!getFilterCount(filters)}
+              size="custom"
+              theme="primary"
+              variant="link"
+              onClick={() => resetFilters(true)}>
+              Clear All
+            </Button>
+          </div>
+          <div className="tw-filter-seperator" />
+          {!error && (
+            <FacetFilter
+              aggregations={getAggrWithDefaultValue(
+                aggregations,
+                visibleFilters
+              )}
+              filters={getFacetedFilter()}
+              showDeletedOnly={showDeleted}
+              onSelectDeleted={handleShowDeleted}
+              onSelectHandler={handleSelectedFilter}
+            />
+          )}
+        </Fragment>
+      </Card>
     );
   };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
index 5e6c805e3ac..76d6b05c16b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
@@ -87,7 +87,7 @@ const ServiceConfig = ({
   return (
     <div className="tw-bg-white tw-h-full">
       <div
-        className="tw-max-w-xl tw-mx-auto tw-pb-6"
+        className="tw-max-w-xl tw-pb-6"
         data-testid="service-config"
         id="serviceConfig">
         <div className="tw-mx-auto">{getDynamicFields()}</div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx
index 5af4f368bd6..eed2de6656c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx
@@ -95,7 +95,7 @@ const ServiceConnectionDetails = ({
         return (
           <div className="tw-w-1/2 tw-flex tw-nowrap tw-mb-3" key={key}>
             <div className="tw-w-1/3 tw-flex">
-              <p className="tw-text-gray-400 tw-m-0">{title || key}:</p>
+              <p className="tw-text-gray-500 tw-m-0">{title || key}:</p>
               <PopOver
                 delay={0}
                 position="bottom"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
index 3e9029bd8f0..b2e802821cf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
@@ -132,7 +132,7 @@ const TeamsAndUsers = ({
                     currentTeam?.name
                   )}`}>
                   <p
-                    className="tag-category label-category tw-self-center tw-truncate tw-w-52"
+                    className="tag-category label-category tw-self-center tw-truncate"
                     data-testid="team-name"
                     title={team.displayName ?? team.name}>
                     {team.displayName ?? team.name}
@@ -185,7 +185,7 @@ const TeamsAndUsers = ({
                     activeUserTab
                   )}`}>
                   <p
-                    className="tag-category label-category tw-self-center tw-truncate tw-w-52"
+                    className="tag-category label-category tw-self-center tw-truncate"
                     data-testid="user-type"
                     title={capitalize(user.name)}>
                     {capitalize(user.name)}
diff --git 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
index 88b8e68ffa1..53f32b51da9 100644
--- 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
@@ -241,43 +241,45 @@ const AddIngestionPage = () => {
       );
     } else {
       return (
-        <PageLayout
-          classes="tw-max-w-full-hd tw-h-full tw-pt-4"
-          header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-          layout={PageLayoutType['2ColRTL']}
-          rightPanel={getServiceIngestionStepGuide(
-            activeIngestionStep,
-            true,
-            `${serviceData?.name || ''}_${ingestionType}`,
-            '',
-            ingestionType as PipelineType,
-            isDeployed(),
-            false,
-            isAirflowRunning
-          )}>
-          <div className="tw-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>
-        </PageLayout>
+        <div className="tw-self-center">
+          <PageLayout
+            classes="tw-max-w-full-hd tw-h-full tw-pt-4"
+            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
+            layout={PageLayoutType['2ColRTL']}
+            rightPanel={getServiceIngestionStepGuide(
+              activeIngestionStep,
+              true,
+              `${serviceData?.name || ''}_${ingestionType}`,
+              '',
+              ingestionType as PipelineType,
+              isDeployed(),
+              false,
+              isAirflowRunning
+            )}>
+            <div className="tw-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>
+          </PageLayout>
+        </div>
       );
     }
   };
diff --git 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
index 11e7a9e0302..b288b9d3290 100644
--- 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
@@ -274,45 +274,47 @@ const EditIngestionPage = () => {
       return <ErrorPlaceHolder>{errorMsg}</ErrorPlaceHolder>;
     } else {
       return (
-        <PageLayout
-          classes="tw-max-w-full-hd tw-h-full tw-pt-4"
-          header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-          layout={PageLayoutType['2ColRTL']}
-          rightPanel={getServiceIngestionStepGuide(
-            activeIngestionStep,
-            true,
-            ingestionData?.name || '',
-            '',
-            ingestionType as PipelineType,
-            isDeployed(),
-            true,
-            isAirflowRunning
-          )}>
-          <div className="tw-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>
-        </PageLayout>
+        <div className="tw-self-center">
+          <PageLayout
+            classes="tw-max-w-full-hd tw-h-full tw-pt-4"
+            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
+            layout={PageLayoutType['2ColRTL']}
+            rightPanel={getServiceIngestionStepGuide(
+              activeIngestionStep,
+              true,
+              ingestionData?.name || '',
+              '',
+              ingestionType as PipelineType,
+              isDeployed(),
+              true,
+              isAirflowRunning
+            )}>
+            <div className="tw-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>
+          </PageLayout>
+        </div>
       );
     }
   };