Skip to content

Commit

Permalink
chore(ui): improve ui / ux around patch api calls (#15293)
Browse files Browse the repository at this point in the history
* chore(ui): improve ui / ux around patch api calls

* domain loading changes

* add loading state to entityReName modal

* added loading state for following

* setLoading false in entityName modal

* delete style fix

* updated vote loading and delete loading for queries

* fixed loading issue in profilerSettingsModal

* fixed no data placeholder issue while loading in thread drawer

* fix glossary term related changes

* fix glossary term related changes

* fix: Spaces and Tabs of YAML (#15309)

* fix: Simplify the logic for get cypress filter step

* ui/ux fix

* added tooltip on icons

* localizaion keys

* minor changes

* fixed profiler picture loading issue

* Fix UI-UX (#15313)

* incident manager edit displayName loading

* no data placeholder for no search data

* code refactor

* address comments

* fetch latest data in tagsPage

* fix edit description icon alignment

* edit icon fix

* fixed failing unit test

* revert version tests

* addressing comment

---------

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Co-authored-by: Akash Jain <15995028+akash-jain-10@users.noreply.github.com>
Co-authored-by: Ashish Gupta <ashish@getcollate.io>
Co-authored-by: Harsh Vador <58542468+harsh-vador@users.noreply.github.com>
  • Loading branch information
5 people committed Feb 26, 2024
1 parent e25745c commit 1a0c630
Showing 72 changed files with 1,327 additions and 1,082 deletions.
Original file line number Diff line number Diff line change
@@ -57,7 +57,6 @@ import {
} from '../Utils/Owner';
import { assignTags, removeTags, udpateTags } from '../Utils/Tags';
import { addTier, removeTier, updateTier } from '../Utils/Tier';
import { validateDomain } from '../Utils/Versions';
import { downVoteEntity, upVoteEntity } from '../Utils/Voting';

const description =
@@ -363,7 +362,6 @@ class EntityClass {

assignDomain() {
addDomainToEntity(domainDetails1.displayName);
validateDomain(domainDetails1.displayName, this.endPoint);
}

updateDomain() {
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -278,7 +278,8 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
</Fragment>
) : (
<Fragment>
{showNewConversation || isEqual(threads.length, 0) ? (
{showNewConversation ||
(isEqual(threads.length, 0) && !isThreadLoading) ? (
<>
{isConversationType && (
<Space className="w-full" direction="vertical">
@@ -293,7 +294,7 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
/>
</Space>
)}
{(isAnnouncementType || isTaskType) && (
{(isAnnouncementType || isTaskType) && !isThreadLoading && (
<ErrorPlaceHolder
className="mt-24"
type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
Original file line number Diff line number Diff line change
@@ -11,12 +11,20 @@
* 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 Loader from '../../components/Loader/Loader';
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 {
@@ -28,6 +36,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 Searchbar from '../common/SearchBarComponent/SearchBar.component';
import { AddTestCaseModalProps } from './AddTestCaseList.interface';

@@ -151,6 +160,91 @@ 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: isLoading,
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>
);
}
}, [items, selectedItems, isLoading]);

return (
<Row gutter={[0, 16]}>
<Col span={24}>
@@ -165,69 +259,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')}
Original file line number Diff line number Diff line change
@@ -449,13 +449,22 @@ const ClassificationDetails = forwardRef(
)}

<ButtonGroup size="small">
<Button
className="w-16 p-0"
data-testid="version-button"
icon={<Icon component={VersionIcon} />}
onClick={versionHandler}>
<Typography.Text>{currentVersion}</Typography.Text>
</Button>
<Tooltip
title={t(
`label.${
isVersionView
? 'exit-version-history'
: 'version-plural-history'
}`
)}>
<Button
className="w-16 p-0"
data-testid="version-button"
icon={<Icon component={VersionIcon} />}
onClick={versionHandler}>
<Typography.Text>{currentVersion}</Typography.Text>
</Button>
</Tooltip>
{showManageButton && (
<ManageButton
isRecursiveDelete
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ import Icon from '@ant-design/icons';
import { Button, Col, Divider, Row, Space, Tooltip, Typography } from 'antd';
import ButtonGroup from 'antd/lib/button/button-group';
import { AxiosError } from 'axios';
import { isEmpty } from 'lodash';
import { capitalize, isEmpty } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
@@ -136,6 +136,7 @@ export const DataAssetsHeader = ({
const { onCopyToClipBoard } = useClipboard(window.location.href);
const [parentContainers, setParentContainers] = useState<Container[]>([]);
const [isBreadcrumbLoading, setIsBreadcrumbLoading] = useState(false);
const [isFollowingLoading, setIsFollowingLoading] = useState(false);
const history = useHistory();
const icon = useMemo(
() =>
@@ -273,7 +274,7 @@ export const DataAssetsHeader = ({

const handleShareButtonClick = async () => {
await onCopyToClipBoard();
setCopyTooltip(t('message.copy-to-clipboard'));
setCopyTooltip(t('message.link-copy-to-clipboard'));
setTimeout(() => setCopyTooltip(''), 2000);
};

@@ -292,8 +293,8 @@ export const DataAssetsHeader = ({
}
}, [isDataAssetsWithServiceField, dataAsset]);

const handleVoteChange = (data: VotingDataProps) => {
onUpdateVote?.(data, dataAsset.id ?? '');
const handleVoteChange = async (data: VotingDataProps) => {
await onUpdateVote?.(data, dataAsset.id ?? '');
};

const handleOpenAnnouncementDrawer = useCallback(
@@ -305,6 +306,11 @@ export const DataAssetsHeader = ({
() => setIsAnnouncementDrawerOpen(false),
[]
);
const handleFollowingClick = useCallback(async () => {
setIsFollowingLoading(true);
await onFollowClick?.();
setIsFollowingLoading(false);
}, [onFollowClick]);

const { editDomainPermission, editOwnerPermission, editTierPermission } =
useMemo(
@@ -413,35 +419,46 @@ export const DataAssetsHeader = ({
/>
)}
{!excludeEntityService && (
<Button
className="w-16 p-0"
icon={<Icon component={TaskOpenIcon} />}
onClick={handleOpenTaskClick}>
<Typography.Text>{openTaskCount}</Typography.Text>
</Button>
<Tooltip title={t('label.open-task-plural')}>
<Button
className="w-16 p-0"
icon={<Icon component={TaskOpenIcon} />}
onClick={handleOpenTaskClick}>
<Typography.Text>{openTaskCount}</Typography.Text>
</Button>
</Tooltip>
)}

<Button
className="w-16 p-0"
data-testid="version-button"
icon={<Icon component={VersionIcon} />}
onClick={onVersionClick}>
<Typography.Text>{version}</Typography.Text>
</Button>

{!excludeEntityService && (
<Tooltip title={t('label.version-plural-history')}>
<Button
className="w-16 p-0"
data-testid="entity-follow-button"
disabled={deleted}
icon={
<Icon
component={isFollowing ? StarFilledIcon : StarIcon}
/>
}
onClick={onFollowClick}>
<Typography.Text>{followers}</Typography.Text>
data-testid="version-button"
icon={<Icon component={VersionIcon} />}
onClick={onVersionClick}>
<Typography.Text>{version}</Typography.Text>
</Button>
</Tooltip>

{!excludeEntityService && (
<Tooltip
title={t('label.field-entity', {
field: t(`label.${isFollowing ? 'un-follow' : 'follow'}`),
entity: capitalize(entityType),
})}>
<Button
className="w-16 p-0"
data-testid="entity-follow-button"
disabled={deleted}
icon={
<Icon
component={isFollowing ? StarFilledIcon : StarIcon}
/>
}
loading={isFollowingLoading}
onClick={handleFollowingClick}>
<Typography.Text>{followers}</Typography.Text>
</Button>
</Tooltip>
)}

<Tooltip
Loading

0 comments on commit 1a0c630

Please sign in to comment.