yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-12-13 00:22:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI : Fix the missing drag icon from Teams Table (#9429)

Browse Source 
* Fix the drag icon from Teams Table

* added drag option in expandable config

* remove unwanted css changes
This commit is contained in:
Ashish Gupta 2022-12-21 09:52:51 +05:30 committed by GitHub
parent 03edd9df56
commit 4fdf14f2da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
View File

@ -134,7 +134,7 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
const expandableConfig: ExpandableConfig<Team> = useMemo(
() => ({
...getTableExpandableConfig<Team>(),
...getTableExpandableConfig<Team>(true),
onExpand: (isOpen, record) => {
if (isOpen && isEmpty(record.children)) {
onTeamExpand(false, record.fullyQualifiedName, true);

31
openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less
View File

@ -54,40 +54,9 @@
td {
border-right: none;
background: @white;
.drag-icon {
width: 12px;
height: 12px;
margin-right: 6px;
display: inline-flex;
visibility: hidden;
}
.expand-icon {
cursor: pointer;
}
.expand-cell-icon-container {
display: inline-flex;
margin-right: 8px;
}
.expand-cell-empty-icon-container {
width: 16px;
height: 16px;
display: inline-flex;
}
}
.ant-table-cell-with-append {
display: flex;
align-items: center;
}
.ant-table-cell-row-hover {
background: @body-dark-bg-color;
.drag-icon {
visibility: initial;
}
}
}
}

5
openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
View File

@ -1017,11 +1017,12 @@ const ServicePage: FunctionComponent = () => {
isRecursiveDelete
afterDeleteAction={() =>
history.push(
`/settings/services/${
getSettingPath(
GlobalSettingsMenuCategory.SERVICES,
SERVICE_CATEGORY_TYPE[
serviceCategory as keyof typeof SERVICE_CATEGORY_TYPE
]
}`
)
)
}
allowSoftDelete={false}

29
openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
View File

@ -9,6 +9,35 @@
.ant-table-bordered {
table {
border: 1px solid #dde3ea;
tbody {
tr {
td {
.drag-icon {
width: 12px;
height: 12px;
margin-right: 2px;
display: inline-flex;
visibility: hidden;
}
.expand-icon {
cursor: pointer;
}
.expand-cell-empty-icon-container {
width: 16px;
height: 16px;
display: inline-flex;
}
}
}
.ant-table-cell-row-hover {
.drag-icon {
visibility: initial;
}
}
}
}
.ant-table-container > .ant-table-content > table > tbody > tr > td {
border-right: none;

31
openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
View File

@ -19,6 +19,7 @@ import { upperCase } from 'lodash';
import { EntityTags } from 'Models';
import React from 'react';
import { ReactComponent as DashboardIcon } from '../assets/svg/dashboard-grey.svg';
import { ReactComponent as DragIcon } from '../assets/svg/drag.svg';
import { ReactComponent as DropDownIcon } from '../assets/svg/DropDown.svg';
import { ReactComponent as RightArrowIcon } from '../assets/svg/ic-right-arrow.svg';
import { ReactComponent as MlModelIcon } from '../assets/svg/mlmodal.svg';
@ -369,17 +370,29 @@ export const getTestResultBadgeIcon = (status?: TestCaseStatus) => {
}
};
export function getTableExpandableConfig<T>(): ExpandableConfig<T> {
export function getTableExpandableConfig<T>(
isDraggable?: boolean
): ExpandableConfig<T> {
const expandableConfig: ExpandableConfig<T> = {
expandIcon: ({ expanded, onExpand, expandable, record }) =>
expandable && (
<Icon
className="mr-1"
component={expanded ? DropDownIcon : RightArrowIcon}
data-testid="expand-icon"
size={16}
onClick={(e) => onExpand(record, e)}
/>
expandable ? (
<>
{isDraggable && <Icon className="drag-icon" component={DragIcon} />}
<Icon
className="mr-1"
component={expanded ? DropDownIcon : RightArrowIcon}
data-testid="expand-icon"
size={16}
onClick={(e) => onExpand(record, e)}
/>
</>
) : (
isDraggable && (
<>
<Icon className="drag-icon" component={DragIcon} />
<div className="expand-cell-empty-icon-container" />
</>
)
),
};