From 4395cae6b7b474c16dbd42fbb77c30bf7b4a82c5 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Wed, 11 May 2022 15:04:27 +0530 Subject: [PATCH] Fixed: UI inconsistency as per feedback #4192 (#4840) --- .../DashboardDetails.component.tsx | 444 +++++++++--------- .../DatasetDetails.component.tsx | 350 +++++++------- .../PipelineDetails.component.tsx | 422 ++++++++--------- .../TopicDetails/TopicDetails.component.tsx | 179 +++---- .../components/UserDataCard/UserDataCard.tsx | 4 +- .../components/UserDetails/UserDetails.tsx | 36 +- 6 files changed, 738 insertions(+), 697 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx index 4242efa9903..8bb7784bea1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx @@ -467,235 +467,241 @@ const DashboardDetails = ({ tabs={tabs} /> -
- {activeTab === 1 && ( - <> -
-
- +
+
+ {activeTab === 1 && ( + <> +
+
+ +
-
-
- - - - - - - - - - - {charts.map((chart, index) => ( - - + + ))} + +
Chart NameChart TypeDescriptionTags
- - - - {chart.displayName} +
+ + + + + + + + + + + {charts.map((chart, index) => ( + + - - + + - - - ))} - -
Chart NameChart TypeDescriptionTags
+ + + + {chart.displayName} + + - - - - {chart.chartType} -
-
-
- {chart.description ? ( - - ) : ( - - No description - + +
+ {chart.chartType} + +
+
+
+ {chart.description ? ( + + ) : ( + + No description + + )} +
+ {!deleted && ( + + + )}
- {!deleted && ( - - - - )}
- - 		{ - if (!editChartTags) { - // Fetch tags and terms only once - if (tagList.length === 0 || tagFetchFailed) { - fetchTagsAndGlossaryTerms(); - } - handleEditChartTag(chart, index); - } - }}> - {deleted ? ( -
- -
- ) : ( - - + 		{ + if (!editChartTags) { + // Fetch tags and terms only once + if (tagList.length === 0 || tagFetchFailed) { + fetchTagsAndGlossaryTerms(); } - selectedTags={chart.tags as EntityTags[]} - size="small" - tagList={tagList} - type="label" - onCancel={() => { - handleChartTagSelection(); - }} - onSelectionChange={(tags) => { - handleChartTagSelection(tags); - }}> - {chart.tags?.length ? ( - - ) : ( - - - + handleEditChartTag(chart, index); + } + }}> + {deleted ? ( +
+ +
+ ) : ( + - - )} -
+ isOwner={hasEditAccess()} + permission={Operation.UpdateTags} + position="left" + trigger="click"> + { + handleChartTagSelection(); + }} + onSelectionChange={(tags) => { + handleChartTagSelection(tags); + }}> + {chart.tags?.length ? ( + + ) : ( + + + + )} + + + )} +
+
+ + )} + {activeTab === 2 && ( +
+
+ +
- - )} - {activeTab === 2 && ( + )} + {activeTab === 3 && ( +
+ +
+ )} + {activeTab === 4 && !deleted && ( +
+ +
+ )}
-
- -
+ data-testid="observer-element" + id="observer-element" + ref={elementRef as RefObject}> + {getLoader()}
- )} - {activeTab === 3 && ( -
- -
- )} - {activeTab === 4 && !deleted && ( -
- -
- )} -
}> - {getLoader()}
diff --git 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 index 92712557c0e..1ffb7fb6741 100644 --- 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 @@ -579,187 +579,189 @@ const DatasetDetails: React.FC = ({ setActiveTab={setActiveTabHandler} tabs={tabs} /> - -
- {activeTab === 1 && ( -
-
- +
+ {activeTab === 1 && ( +
+
+ +
+
+ +
+
+ +
+
+ )} + {activeTab === 2 && ( +
+
+ +
+
+ )} + {activeTab === 3 && ( +
+ +
+ )} + {activeTab === 4 && ( +
+
+ +
+
+ )} + {activeTab === 5 && ( +
+ ({ + constraint: col.constraint as string, + colName: col.name, + colType: col.dataTypeDisplay as string, + dataType: col.dataType as string, + colTests: col.columnTests, + }))} + isTableDeleted={deleted} + qualityTestFormHandler={qualityTestFormHandler} + tableProfiles={tableProfile} + /> +
+ )} + + {activeTab === 6 && ( + + )} + + {activeTab === 7 && ( +
+ +
+ )} + {activeTab === 8 && Boolean(dataModel?.sql) && ( +
+ +
+ )} + {activeTab === 9 && !deleted && ( +
+
-
- -
-
- -
-
- )} - {activeTab === 2 && ( + )}
-
- -
+ data-testid="observer-element" + id="observer-element" + ref={elementRef as RefObject}> + {getLoader()}
- )} - {activeTab === 3 && ( -
- -
- )} - {activeTab === 4 && ( -
-
- -
-
- )} - {activeTab === 5 && ( -
- ({ - constraint: col.constraint as string, - colName: col.name, - colType: col.dataTypeDisplay as string, - dataType: col.dataType as string, - colTests: col.columnTests, - }))} - isTableDeleted={deleted} - qualityTestFormHandler={qualityTestFormHandler} - tableProfiles={tableProfile} - /> -
- )} - - {activeTab === 6 && ( - - )} - - {activeTab === 7 && ( -
- -
- )} - {activeTab === 8 && Boolean(dataModel?.sql) && ( -
- -
- )} - {activeTab === 9 && !deleted && ( -
- -
- )} -
}> - {getLoader()}
{threadLink ? ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx index 95f1bdd4265..7dc3ecba288 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx @@ -393,226 +393,230 @@ const PipelineDetails = ({ tabs={tabs} /> -
- {activeTab === 1 && ( - <> -
-
- +
+
+ {activeTab === 1 && ( + <> +
+
+ +
-
-
- {tasks ? ( - - - - - - - - - - {tasks?.map((task, index) => ( - - - + + + ))} + +
Task NameDescriptionTask Type
- - - - {task.displayName} - - - - - -
-
- {task.description ? ( - - ) : ( - - No description{' '} +
+ {tasks ? ( + + + + + + + + + + {tasks?.map((task, index) => ( + + + - - - ))} - -
Task NameDescriptionTask Type
+ + + + {task.displayName} - )} - - {!deleted && ( - - - - - {!isNil( - getFieldThreadElement( + + + + +
+
+ {task.description ? ( + + ) : ( + + No description{' '} + + )} +
+ {!deleted && ( + + + + + {!isNil( + getFieldThreadElement( + task.name, + 'description', + getEntityFieldThreadCounts( + 'tasks', + entityFieldThreadCount + ) as EntityFieldThreads[], + onThreadLinkSelect + ) + ) && + onEntityFieldSelect && + !task.description ? ( + + ) : null} + {getFieldThreadElement( task.name, 'description', getEntityFieldThreadCounts( 'tasks', entityFieldThreadCount ) as EntityFieldThreads[], - onThreadLinkSelect - ) - ) && - onEntityFieldSelect && - !task.description ? ( - - ) : null} - {getFieldThreadElement( - task.name, - 'description', - getEntityFieldThreadCounts( - 'tasks', - entityFieldThreadCount - ) as EntityFieldThreads[], - onThreadLinkSelect, - EntityType.PIPELINE, - pipelineFQN, - `tasks/${task.name}/description`, - Boolean(task.description) - )} - - )} -
- 		{task.taskType}
- ) : ( -
- No task data is available -
- )} + onThreadLinkSelect, + EntityType.PIPELINE, + pipelineFQN, + `tasks/${task.name}/description`, + Boolean(task.description) + )} + + )} +
+
+ {task.taskType} +
+ ) : ( +
+ No task data is available +
+ )} +
+ + )} + {activeTab === 2 && ( +
+
+ +
- - )} - {activeTab === 2 && ( + )} + {activeTab === 3 && ( + + )} + {activeTab === 4 && ( +
+ +
+ )} + {activeTab === 5 && !deleted && ( +
+ +
+ )}
-
- -
+ data-testid="observer-element" + id="observer-element" + ref={elementRef as RefObject}> + {getLoader()}
- )} - {activeTab === 3 && ( - - )} - {activeTab === 4 && ( -
- -
- )} - {activeTab === 5 && !deleted && ( -
- -
- )} -
}> - {getLoader()}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx index 428887587f0..60fb2be9422 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx @@ -387,99 +387,100 @@ const TopicDetails: React.FC = ({ setActiveTab={setActiveTabHandler} tabs={tabs} /> - -
- {activeTab === 1 && ( - <> -
-
- -
-
- {schemaText ? ( - - {getInfoBadge([{ key: 'Schema', value: schemaType }])} -
- +
+
+ {activeTab === 1 && ( + <> +
+
+
- - ) : ( -
- No schema data available
- )} - - )} - {activeTab === 2 && ( + {schemaText ? ( + + {getInfoBadge([{ key: 'Schema', value: schemaType }])} +
+ +
+ + ) : ( +
+ No schema data available +
+ )} + + )} + {activeTab === 2 && ( +
+
+ +
+
+ )} + {activeTab === 3 && ( +
+ +
+ )} + {activeTab === 4 && ( +
+ +
+ )} + {activeTab === 5 && !deleted && ( +
+ +
+ )}
-
- -
+ data-testid="observer-element" + id="observer-element" + ref={elementRef as RefObject}> + {getLoader()}
- )} - {activeTab === 3 && ( -
- -
- )} - {activeTab === 4 && ( -
- -
- )} - {activeTab === 5 && !deleted && ( -
- -
- )} -
}> - {getLoader()}
{threadLink ? ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx index 4df7304854f..46be87ac34b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx @@ -25,7 +25,7 @@ type Item = { email: string; isActiveUser?: boolean; profilePhoto?: string; - teamCount?: string; + teamCount?: string | JSX.Element; }; type Props = { @@ -73,7 +73,7 @@ const UserDataCard = ({ item, onClick, onDelete, showTeams = true }: Props) => { )}

{item.email}

- {showTeams &&

Teams: {item.teamCount}

} + {showTeams &&
Teams: {item.teamCount}
}
{!isNil(onDelete) && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx index 2ace2f8e369..57f88ebb9b2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx @@ -18,6 +18,7 @@ import { getUserPath } from '../../constants/constants'; import { EntityReference, User } from '../../generated/entity/teams/user'; import { getEntityName } from '../../utils/CommonUtils'; import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder'; +import PopOver from '../common/popover/PopOver'; import Searchbar from '../common/searchbar/Searchbar'; import Loader from '../Loader/Loader'; import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal'; @@ -66,6 +67,35 @@ const UserDetails = ({ setDeletingUser(undefined); }; + const getTeamsText = (teams: EntityReference[]) => { + return teams.length > 1 ? ( + + {getEntityName(teams[0])}, &{' '} + + {teams.map((t, i) => { + return i >= 1 ? ( + + {getEntityName(t)} + + ) : null; + })} + + } + position="bottom" + theme="light" + trigger="mouseenter"> + + {teams.length - 1} more + + + + ) : ( + `${getEntityName(teams[0])}` + ); + }; + const getUserCards = () => { return isUsersLoading ? ( @@ -84,10 +114,8 @@ const UserDetails = ({ isActiveUser: !user.deleted, profilePhoto: user.profile?.images?.image || '', teamCount: - user.teams && user.teams?.length - ? user.teams - ?.map((team) => team.displayName ?? team.name) - ?.join(', ') + user.teams && user.teams.length + ? getTeamsText(user.teams) : 'No teams', };