[issues-5528] UI improvements (#5629)

2025-10-31 10:39:30 +00:00 · 2022-06-24 21:05:51 +05:30 · 2022-06-24 21:05:51 +05:30 · d7da180503
commit d7da180503
parent 3e18f842e1
7 changed files with 150 additions and 144 deletions
--- 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>
  );
 };

--- 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>
    );
  };

--- 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>
--- 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"
--- 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)}
--- 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>
      );
    }
  };
--- 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>
      );
    }
  };