Skip to content

Commit

Permalink
feat: Add loading indicator to Manage Domains sidebar (#9142)
Browse files Browse the repository at this point in the history 
Co-authored-by: apptware <ext_sumit.patil@workpac.com>
  • Loading branch information
@sumitappt
sumitappt and apptware committed Nov 16, 2023
1 parent ee9ee40 commit e6305c0
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 74 deletions.
93 changes: 31 additions & 62 deletions datahub-web-react/src/app/domain/DomainSearch.tsx
View file
@@ -1,17 +1,12 @@
import React, { CSSProperties, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import React, { useRef, useState } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import styled from 'styled-components/macro';
import Highlight from 'react-highlighter';
import { useGetSearchResultsForMultipleQuery } from '../../graphql/search.generated';
import { EntityType } from '../../types.generated';
import { IconStyleType } from '../entity/Entity';
import { ANTD_GRAY } from '../entity/shared/constants';
import { SearchBar } from '../search/SearchBar';
import ClickOutside from '../shared/ClickOutside';
import { useEntityRegistry } from '../useEntityRegistry';
import DomainIcon from './DomainIcon';
import ParentEntities from '../search/filters/ParentEntities';
import { getParentDomains } from './utils';
import DomainSearchResultItem from './DomainSearchResultItem';

const DomainSearchWrapper = styled.div`
position: relative;
Expand All @@ -33,34 +28,19 @@ const ResultsWrapper = styled.div`
z-index: 1;
`;

const SearchResult = styled(Link)`
color: #262626;
const LoadingWrapper = styled.div`
display: flex;
align-items: center;
gap: 8px;
height: 100%;
padding: 6px 8px;
width: 100%;
&:hover {
background-color: ${ANTD_GRAY[3]};
color: #262626;
}
justify-content: center;
height: 350px;
font-size: 30px;
`;

const IconWrapper = styled.span``;

const highlightMatchStyle: CSSProperties = {
fontWeight: 'bold',
background: 'none',
padding: 0,
};

function DomainSearch() {
const [query, setQuery] = useState('');
const [isSearchBarFocused, setIsSearchBarFocused] = useState(false);
const entityRegistry = useEntityRegistry();

const { data } = useGetSearchResultsForMultipleQuery({
const { data, loading } = useGetSearchResultsForMultipleQuery({
variables: {
input: {
types: [EntityType.Domain],
Expand All @@ -69,18 +49,38 @@ function DomainSearch() {
count: 50,
},
},
skip: !query,
});

const searchResults = data?.searchAcrossEntities?.searchResults;
const timerRef = useRef(-1);

const handleQueryChange = (q: string) => {
window.clearTimeout(timerRef.current);
timerRef.current = window.setTimeout(() => {
setQuery(q);
}, 250);
};

const renderLoadingIndicator = () => (
<LoadingWrapper>
<LoadingOutlined />
</LoadingWrapper>
);

const renderSearchResults = () => (
<ResultsWrapper>
{searchResults?.map((result) => (
<DomainSearchResultItem
key={result.entity.urn}
entity={result.entity}
entityRegistry={entityRegistry}
query={query}
onResultClick={() => setIsSearchBarFocused(false)}
/>
))}
</ResultsWrapper>
);

return (
<DomainSearchWrapper>
<ClickOutside onClickOutside={() => setIsSearchBarFocused(false)}>
Expand All @@ -102,39 +102,8 @@ function DomainSearch() {
entityRegistry={entityRegistry}
onFocus={() => setIsSearchBarFocused(true)}
/>
{isSearchBarFocused && searchResults && !!searchResults.length && (
<ResultsWrapper>
{searchResults.map((result) => {
return (
<SearchResult
to={entityRegistry.getEntityUrl(result.entity.type, result.entity.urn)}
onClick={() => setIsSearchBarFocused(false)}
>
<IconWrapper>
{result.entity.type === EntityType.Domain ? (
<DomainIcon
style={{
fontSize: 16,
color: '#BFBFBF',
}}
/>
) : (
entityRegistry.getIcon(result.entity.type, 12, IconStyleType.ACCENT)
)}
</IconWrapper>
<div>
<ParentEntities
parentEntities={getParentDomains(result.entity, entityRegistry)}
/>
<Highlight matchStyle={highlightMatchStyle} search={query}>
{entityRegistry.getDisplayName(result.entity.type, result.entity)}
</Highlight>
</div>
</SearchResult>
);
})}
</ResultsWrapper>
)}
{loading && renderLoadingIndicator()}
{!loading && isSearchBarFocused && !!searchResults?.length && renderSearchResults()}
</ClickOutside>
</DomainSearchWrapper>
);
Expand Down
68 changes: 68 additions & 0 deletions datahub-web-react/src/app/domain/DomainSearchResultItem.tsx
View file
@@ -0,0 +1,68 @@
// Create a new component called SearchResultItem.js
import React from 'react';
import { Link } from 'react-router-dom';
import Highlight from 'react-highlighter';
import styled from 'styled-components/macro';
import { Entity, EntityType } from '../../types.generated';
import { IconStyleType } from '../entity/Entity';
import { ANTD_GRAY } from '../entity/shared/constants';
import DomainIcon from './DomainIcon';
import ParentEntities from '../search/filters/ParentEntities';
import { getParentDomains } from './utils';
import EntityRegistry from '../entity/EntityRegistry';

type Props = {
entity: Entity;
entityRegistry: EntityRegistry;
query: string;
onResultClick: () => void;
};

const SearchResult = styled(Link)`
color: #262626;
display: flex;
align-items: center;
gap: 8px;
height: 100%;
padding: 6px 8px;
width: 100%;
&:hover {
background-color: ${ANTD_GRAY[3]};
color: #262626;
}
`;

const IconWrapper = styled.span``;

const highlightMatchStyle = {
fontWeight: 'bold',
background: 'none',
padding: 0,
};

function DomainSearchResultItem({ entity, entityRegistry, query, onResultClick }: Props) {
return (
<SearchResult to={entityRegistry.getEntityUrl(entity.type, entity.urn)} onClick={onResultClick}>
<IconWrapper>
{entity.type === EntityType.Domain ? (
<DomainIcon
style={{
fontSize: 16,
color: '#BFBFBF',
}}
/>
) : (
entityRegistry.getIcon(entity.type, 12, IconStyleType.ACCENT)
)}
</IconWrapper>
<div>
<ParentEntities parentEntities={getParentDomains(entity, entityRegistry)} />
<Highlight matchStyle={highlightMatchStyle} search={query}>
{entityRegistry.getDisplayName(entity.type, entity)}
</Highlight>
</div>
</SearchResult>
);
}

export default DomainSearchResultItem;
28 changes: 19 additions & 9 deletions datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx
View file
@@ -1,9 +1,10 @@
import { Alert } from 'antd';
import { Alert, Empty } from 'antd';
import React from 'react';
import styled from 'styled-components';
import useListDomains from '../../useListDomains';
import DomainNode from './DomainNode';
import { Domain } from '../../../../types.generated';
import { ANTD_GRAY } from '../../../entity/shared/constants';

const NavigatorWrapper = styled.div`
font-size: 14px;
Expand All @@ -19,19 +20,28 @@ interface Props {

export default function DomainNavigator({ domainUrnToHide, selectDomainOverride }: Props) {
const { sortedDomains, error } = useListDomains({});
const noDomainsFound: boolean = !sortedDomains || sortedDomains.length === 0;

return (
<NavigatorWrapper>
{error && <Alert message="Loading Domains failed." showIcon type="error" />}
{sortedDomains?.map((domain) => (
<DomainNode
key={domain.urn}
domain={domain as Domain}
numDomainChildren={domain.children?.total || 0}
domainUrnToHide={domainUrnToHide}
selectDomainOverride={selectDomainOverride}
{noDomainsFound && (
<Empty
description="No Domains Found"
image={Empty.PRESENTED_IMAGE_SIMPLE}
style={{ color: ANTD_GRAY[7] }}
/>
))}
)}
{!noDomainsFound &&
sortedDomains?.map((domain) => (
<DomainNode
key={domain.urn}
domain={domain as Domain}
numDomainChildren={domain.children?.total || 0}
domainUrnToHide={domainUrnToHide}
selectDomainOverride={selectDomainOverride}
/>
))}
</NavigatorWrapper>
);
}
36 changes: 33 additions & 3 deletions datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx
View file
@@ -1,6 +1,8 @@
import React, { useRef, useState } from 'react';
import { Button, Form, message, Modal, Select } from 'antd';
import { Button, Form, message, Modal, Select, Empty } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

import styled from 'styled-components/macro';
import { useGetSearchResultsLazyQuery } from '../../../../../../../graphql/search.generated';
import { Domain, Entity, EntityType } from '../../../../../../../types.generated';
import { useBatchSetDomainMutation } from '../../../../../../../graphql/mutations.generated';
Expand All @@ -12,6 +14,7 @@ import { tagRender } from '../tagRenderer';
import { BrowserWrapper } from '../../../../../../shared/tags/AddTagsTermsModal';
import DomainNavigator from '../../../../../../domain/nestedDomains/domainNavigator/DomainNavigator';
import ClickOutside from '../../../../../../shared/ClickOutside';
import { ANTD_GRAY } from '../../../../constants';

type Props = {
urns: string[];
Expand All @@ -28,6 +31,18 @@ type SelectedDomain = {
urn: string;
};

const LoadingWrapper = styled.div`
padding: 8px;
display: flex;
justify-content: center;
svg {
height: 15px;
width: 15px;
color: ${ANTD_GRAY[8]};
}
`;

export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOkOverride, titleOverride }: Props) => {
const entityRegistry = useEntityRegistry();
const [isFocusedOnInput, setIsFocusedOnInput] = useState(false);
Expand All @@ -41,7 +56,7 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOk
}
: undefined,
);
const [domainSearch, { data: domainSearchData }] = useGetSearchResultsLazyQuery();
const [domainSearch, { data: domainSearchData, loading }] = useGetSearchResultsLazyQuery();
const domainSearchResults =
domainSearchData?.search?.searchResults?.map((searchResult) => searchResult.entity) || [];
const [batchSetDomainMutation] = useBatchSetDomainMutation();
Expand Down Expand Up @@ -206,8 +221,23 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOk
onBlur={handleBlur}
onFocus={() => setIsFocusedOnInput(true)}
dropdownStyle={isShowingDomainNavigator ? { display: 'none' } : {}}
notFoundContent={
<Empty
description="No Domains Found"
image={Empty.PRESENTED_IMAGE_SIMPLE}
style={{ color: ANTD_GRAY[7] }}
/>
}
>
{domainSearchOptions}
{loading ? (
<Select.Option value="loading">
<LoadingWrapper>
<LoadingOutlined />
</LoadingWrapper>
</Select.Option>
) : (
domainSearchOptions
)}
</Select>
<BrowserWrapper isHidden={!isShowingDomainNavigator}>
<DomainNavigator selectDomainOverride={selectDomainFromBrowser} />
Expand Down

0 comments on commit e6305c0

Please sign in to comment.