From a3689cad54784f2c66edabc2268e618abf9333db Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Thu, 28 Mar 2024 16:32:31 +0530 Subject: [PATCH] fix the ui around domain label, data filter and search index table entity stats (#15720) * fix the ui around domain label, data filter and searchindex table entity stats * remove unwanted file change * changes as per comments * changes as per comments * fix the missing dependency --- .../Execution/Execution.component.tsx | 2 +- .../Pipeline/Execution/execution.less | 16 +++++++++--- .../UserProfileDetails.component.tsx | 21 ++++++++-------- .../DomainLabel/DomainLabel.component.tsx | 25 +++++++++++-------- .../DomainLabel/DomainLabel.interface.ts | 1 + ...Utils.test.ts => ApplicationUtils.test.ts} | 8 +++++- .../ui/src/utils/ApplicationUtils.tsx | 3 ++- 7 files changed, 49 insertions(+), 27 deletions(-) rename openmetadata-ui/src/main/resources/ui/src/utils/{ApplicaionUtils.test.ts => ApplicationUtils.test.ts} (82%) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx index 9d62a70b205..7d7d23b48da 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx @@ -177,7 +177,7 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => { onClick={() => { setIsClickedCalendar(true); }}> - + {!datesSelected && ( )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less index 5676d4dcb2f..3946cc818b8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less @@ -11,21 +11,31 @@ * limitations under the License. */ -.executions-date-picker { +.ant-picker-range.executions-date-picker { + padding: 0 6px 0 0; + max-width: 200px; .ant-picker-range-separator { display: none; } .ant-picker-clear { - right: 4px; + right: -6px; + } + + .ant-picker-active-bar { + margin-left: 0; + width: 85px !important; } } .range-picker-button-width { - @apply delay-100; max-width: 130px; position: relative; } .range-picker-button { padding: 0px 8px; + + .date-container { + display: inline-flex; + } } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx index 0bfccf33e8f..237c8216e50 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx @@ -241,22 +241,21 @@ const UserProfileDetails = ({ const userDomainRender = useMemo( () => ( - +
{`${t( 'label.domain' )} :`} - - - - + +
), [userData.domain] ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx index d6f27aefa2c..e2d69eabaf0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx @@ -10,7 +10,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Space, Typography } from 'antd'; +import { Typography } from 'antd'; import { AxiosError } from 'axios'; import classNames from 'classnames'; import { compare } from 'fast-json-patch'; @@ -41,6 +41,7 @@ export const DomainLabel = ({ entityType, entityFqn, entityId, + textClassName, showDomainHeading = false, }: DomainLabelProps) => { const { t } = useTranslation(); @@ -74,7 +75,7 @@ export const DomainLabel = ({ showErrorToast(err as AxiosError); } }, - [entityType, entityFqn, afterDomainUpdateAction] + [entityType, entityId, entityFqn, afterDomainUpdateAction] ); useEffect(() => { @@ -87,7 +88,8 @@ export const DomainLabel = ({ @@ -101,14 +103,15 @@ export const DomainLabel = ({ {t('label.no-entity', { entity: t('label.domain') })} ); } - }, [activeDomain, domainDisplayName]); + }, [activeDomain, domainDisplayName, showDomainHeading, textClassName]); const selectableList = useMemo(() => { return ( @@ -120,7 +123,7 @@ export const DomainLabel = ({ /> ) ); - }, [hasPermission, activeDomain]); + }, [hasPermission, activeDomain, handleDomainSave]); const label = useMemo(() => { if (showDomainHeading) { @@ -133,7 +136,7 @@ export const DomainLabel = ({ {selectableList} - +
{domainLink} - +
); } return ( - +
+
); }, [activeDomain, hasPermission, selectableList]); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.interface.ts index e7fe6eef119..f712833c927 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.interface.ts @@ -23,5 +23,6 @@ export type DomainLabelProps = { entityType: EntityType; entityFqn: string; entityId: string; + textClassName?: string; showDomainHeading?: boolean; }; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicaionUtils.test.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.test.ts similarity index 82% rename from openmetadata-ui/src/main/resources/ui/src/utils/ApplicaionUtils.test.ts rename to openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.test.ts index e481b95e59b..e01114a1a5a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicaionUtils.test.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.test.ts @@ -11,6 +11,7 @@ * limitations under the License. */ +import { upperFirst } from 'lodash'; import { getEntityStatsData } from './ApplicationUtils'; import { MOCK_APPLICATION_ENTITY_STATS, @@ -21,6 +22,11 @@ describe('ApplicationUtils tests', () => { it('getEntityStatsData should return stats data in array', () => { const resultData = getEntityStatsData(MOCK_APPLICATION_ENTITY_STATS); - expect(resultData).toEqual(MOCK_APPLICATION_ENTITY_STATS_DATA); + expect(resultData).toEqual( + MOCK_APPLICATION_ENTITY_STATS_DATA.map((data) => ({ + ...data, + name: upperFirst(data.name), + })) + ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.tsx index 677c21616b7..2941ee78808 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.tsx @@ -10,6 +10,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { upperFirst } from 'lodash'; import { StatusType } from '../components/common/StatusBadge/StatusBadge.interface'; import { EntityStats, @@ -54,7 +55,7 @@ export const getStatusFromPipelineState = (status: PipelineState) => { export const getEntityStatsData = (data: EntityStats): EntityStatsData[] => { return Object.keys(data).map((key) => ({ - name: key, + name: upperFirst(key), ...data[key as EntityTypeSearchIndex], })); };