Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix UI-UX #15313

Merged
merged 9 commits into from
Feb 23, 2024
Merged

Fix UI-UX #15313

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bae8eee
incident manager edit displayName loading
harsh-vador Feb 22, 2024
e145c4c
no data placeholder for no search data
harsh-vador Feb 22, 2024
8c72468
code refactor
harsh-vador Feb 22, 2024
fbc049f
Merge branch 'fix-ui-ux' into fix-ui-ux
harsh-vador Feb 22, 2024
66648d3
Merge branch 'fix-ui-ux' into fix-ui-ux
harsh-vador Feb 23, 2024
d90ca5f
address comments
harsh-vador Feb 23, 2024
b9a6357
fetch latest data in tagsPage
harsh-vador Feb 23, 2024
cee7485
fix edit description icon alignment
harsh-vador Feb 23, 2024
dc5af35
Merge remote-tracking branch 'omd/fix-ui-ux' into fix-ui-ux
harsh-vador Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 92 additions & 64 deletions ...ain/resources/ui/src/components/DataQuality/AddTestCaseList/AddTestCaseList.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,19 @@
* limitations under the License.
*/
import { Button, Checkbox, Col, List, Row, Space, Typography } from 'antd';
import { isEmpty } from 'lodash';
import VirtualList from 'rc-virtual-list';
import React, { UIEventHandler, useCallback, useEffect, useState } from 'react';
import React, {
UIEventHandler,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { getTableTabPath, PAGE_SIZE } from '../../../constants/constants';
import { ERROR_PLACEHOLDER_TYPE } from '../../../enums/common.enum';
import { SearchIndex } from '../../../enums/search.enum';
import { TestCase } from '../../../generated/tests/testCase';
import {
Expand All @@ -27,6 +35,7 @@ import { getNameFromFQN } from '../../../utils/CommonUtils';
import { getEntityName } from '../../../utils/EntityUtils';
import { replacePlus } from '../../../utils/StringsUtils';
import { getEntityFqnFromEntityLink } from '../../../utils/TableUtils';
import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
import Loader from '../../common/Loader/Loader';
import Searchbar from '../../common/SearchBarComponent/SearchBar.component';
import { AddTestCaseModalProps } from './AddTestCaseList.interface';
Expand Down Expand Up @@ -151,6 +160,87 @@ export const AddTestCaseList = ({
fetchTestCases({ searchText: searchTerm });
}, [searchTerm]);

const renderList = useMemo(() => {
if (!isLoading && isEmpty(items)) {
return (
<Col span={24}>
<Space align="center" className="w-full" direction="vertical">
<ErrorPlaceHolder
className="mt-0-important"
type={ERROR_PLACEHOLDER_TYPE.FILTER}
/>
</Space>
</Col>
);
} else {
return (
<Col span={24}>
<List loading={{ spinning: false, indicator: <Loader /> }}>
harsh-vador marked this conversation as resolved.
Show resolved Hide resolved
<VirtualList
data={items}
height={500}
itemKey="id"
onScroll={onScroll}>
{({ _source: test }) => {
const tableFqn = getEntityFqnFromEntityLink(test.entityLink);
const tableName = getNameFromFQN(tableFqn);
const isColumn = test.entityLink.includes('::columns::');

return (
<Space
className="m-b-md border rounded-4 p-sm cursor-pointer"
direction="vertical"
onClick={() => handleCardClick(test)}>
<Space className="justify-between w-full">
<Typography.Paragraph
className="m-0 font-medium text-base w-max-500"
data-testid={test.name}
ellipsis={{ tooltip: true }}>
{getEntityName(test)}
</Typography.Paragraph>

<Checkbox checked={selectedItems?.has(test.id ?? '')} />
</Space>
<Typography.Paragraph
className="m-0 w-max-500"
ellipsis={{ tooltip: true }}>
{getEntityName(test.testDefinition)}
</Typography.Paragraph>
<Typography.Paragraph className="m-0">
<Link
data-testid="table-link"
to={getTableTabPath(tableFqn, 'profiler')}
onClick={(e) => e.stopPropagation()}>
{tableName}
</Link>
</Typography.Paragraph>
{isColumn && (
<Space>
<Typography.Text className="font-medium text-xs">{`${t(
'label.column'
)}:`}</Typography.Text>
<Typography.Text className="text-grey-muted text-xs">
{getNameFromFQN(
replacePlus(
getEntityFqnFromEntityLink(
test.entityLink,
isColumn
)
)
) ?? '--'}
</Typography.Text>
</Space>
)}
</Space>
);
}}
</VirtualList>
</List>
</Col>
);
}
}, [items, selectedItems, isLoading]);

return (
<Row gutter={[0, 16]}>
<Col span={24}>
Expand All @@ -165,69 +255,7 @@ export const AddTestCaseList = ({
onSearch={handleSearch}
/>
</Col>
<Col span={24}>
<List loading={{ spinning: false, indicator: <Loader /> }}>
<VirtualList
data={items}
height={500}
itemKey="id"
onScroll={onScroll}>
{({ _source: test }) => {
const tableFqn = getEntityFqnFromEntityLink(test.entityLink);
const tableName = getNameFromFQN(tableFqn);
const isColumn = test.entityLink.includes('::columns::');

return (
<Space
className="m-b-md border rounded-4 p-sm cursor-pointer"
direction="vertical"
onClick={() => handleCardClick(test)}>
<Space className="justify-between w-full">
<Typography.Paragraph
className="m-0 font-medium text-base w-max-500"
data-testid={test.name}
ellipsis={{ tooltip: true }}>
{getEntityName(test)}
</Typography.Paragraph>

<Checkbox checked={selectedItems?.has(test.id ?? '')} />
</Space>
<Typography.Paragraph
className="m-0 w-max-500"
ellipsis={{ tooltip: true }}>
{getEntityName(test.testDefinition)}
</Typography.Paragraph>
<Typography.Paragraph className="m-0">
<Link
data-testid="table-link"
to={getTableTabPath(tableFqn, 'profiler')}
onClick={(e) => e.stopPropagation()}>
{tableName}
</Link>
</Typography.Paragraph>
{isColumn && (
<Space>
<Typography.Text className="font-medium text-xs">{`${t(
'label.column'
)}:`}</Typography.Text>
<Typography.Text className="text-grey-muted text-xs">
{getNameFromFQN(
replacePlus(
getEntityFqnFromEntityLink(
test.entityLink,
isColumn
)
)
) ?? '--'}
</Typography.Text>
</Space>
)}
</Space>
);
}}
</VirtualList>
</List>
</Col>
{renderList}
<Col className="d-flex justify-end items-center p-y-xss" span={24}>
<Button data-testid="cancel" type="link" onClick={onCancel}>
{cancelText ?? t('label.cancel')}
Expand Down
5 changes: 3 additions & 2 deletions ...src/main/resources/ui/src/components/common/EntityPageInfos/ManageButton/ManageButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

import { Button, Dropdown, Modal, Tooltip, Typography } from 'antd';
import { ItemType } from 'antd/lib/menu/hooks/useItems';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import React, { FC, useCallback, useMemo, useState } from 'react';
Expand Down Expand Up @@ -89,11 +90,11 @@ const ManageButton: FC<ManageButtonProps> = ({
if (!onEditDisplayName) {
return;
}

setIsDisplayNameEditing(true);
try {
await onEditDisplayName(data);
} catch (error) {
showErrorToast(error);
showErrorToast(error as AxiosError);
} finally {
setIsDisplayNameEditing(false);
}
Expand Down
22 changes: 13 additions & 9 deletions ...rces/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,17 +207,21 @@ const IncidentManagerDetailPage = () => {
};

const handleDisplayNameChange = async (entityName?: EntityName) => {
const data = testCaseData.data;
if (data) {
const updatedTestCase = {
...data,
...entityName,
};
const jsonPatch = compare(data, updatedTestCase);
try {
const data = testCaseData.data;
if (data) {
const updatedTestCase = {
...data,
...entityName,
};
const jsonPatch = compare(data, updatedTestCase);

if (jsonPatch.length && data.id) {
updateTestCase(data.id, jsonPatch);
if (jsonPatch.length && data.id) {
await updateTestCase(data.id, jsonPatch);
}
}
} catch (error) {
showErrorToast(error as AxiosError);
}
};

Expand Down
Loading