Selector recommendations in Owner, Tag and Domain Modal

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx

@@ -1,45 +1,39 @@
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, Form, message, Modal, Select, Tag } from 'antd';
-import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
+
 import { useGetSearchResultsLazyQuery } from '../../../../../../../graphql/search.generated';
 import { EntityType, SearchResult } from '../../../../../../../types.generated';
 import { useSetDomainMutation } from '../../../../../../../graphql/mutations.generated';
 import { useEntityRegistry } from '../../../../../../useEntityRegistry';
 import { useEntityData } from '../../../../EntityContext';
 import { useEnterKeyListener } from '../../../../../../shared/useEnterKeyListener';
+import { GetDomainRecommendation } from '../../../../../../shared/recommendation';
+import { DomainLabel } from '../../../../../../shared/DomainLabel';
 
 type Props = {
     visible: boolean;
-    onClose: () => void;
+    onCloseModal: () => void;
     refetch?: () => Promise<any>;
 };
 
-const SearchResultContainer = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px;
-`;
-
-const SearchResultContent = styled.div`
-    display: flex;
-    justify-content: start;
-    align-items: center;
-`;
-
-const SearchResultDisplayName = styled.div`
-    margin-left: 12px;
-`;
-
 type SelectedDomain = {
     displayName: string;
     type: EntityType;
     urn: string;
 };
 
-export const SetDomainModal = ({ visible, onClose, refetch }: Props) => {
+const StyleTag = styled(Tag)`
+    padding: 0px 7px;
+    margin-right: 3px;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+`;
+
+export const SetDomainModal = ({ visible, onCloseModal, refetch }: Props) => {
     const entityRegistry = useEntityRegistry();
+    const [inputValue, setInputValue] = useState('');
     const { urn } = useEntityData();
     const [selectedDomain, setSelectedDomain] = useState<SelectedDomain | undefined>(undefined);
     const [domainSearch, { data: domainSearchData }] = useGetSearchResultsLazyQuery();
@@ -48,35 +42,53 @@ export const SetDomainModal = ({ visible, onClose, refetch }: Props) => {
 
     const inputEl = useRef(null);
 
-    const onOk = async () => {
-        if (!selectedDomain) {
-            return;
-        }
-        try {
-            await setDomainMutation({
+    useEffect(() => {
+        setTimeout(() => {
+            if (inputEl && inputEl.current) {
+                (inputEl.current as any).focus();
+            }
+        }, 1);
+    });
+
+    const recommendedDomainsData = GetDomainRecommendation();
+
+    const handleSearch = (text: string) => {
+        if (text.length > 2) {
+            domainSearch({
                 variables: {
-                    entityUrn: urn,
-                    domainUrn: selectedDomain.urn,
+                    input: {
+                        type: EntityType.Domain,
+                        query: text,
+                        start: 0,
+                        count: 5,
+                    },
                 },
             });
-            message.success({ content: 'Updated Domain!', duration: 2 });
-        } catch (e: unknown) {
-            message.destroy();
-            if (e instanceof Error) {
-                message.error({ content: `Failed to set Domain: \n ${e.message || ''}`, duration: 3 });
-            }
         }
-        setSelectedDomain(undefined);
-        refetch?.();
-        onClose();
     };
 
+    // Renders a search result in the select dropdown.
+    const renderSearchResult = (result: SearchResult) => {
+        const displayName = entityRegistry.getDisplayName(result.entity.type, result.entity);
+        return (
+            <Select.Option value={result.entity.urn} key={result.entity.urn}>
+                <DomainLabel name={displayName} />
+            </Select.Option>
+        );
+    };
+
+    const domainResult = !inputValue || inputValue.length === 0 ? recommendedDomainsData : domainSearchResults;
+
+    const domainSearchOptions = domainResult?.map((result) => {
+        return renderSearchResult(result);
+    });
+
     const onSelectDomain = (newUrn: string) => {
         if (inputEl && inputEl.current) {
             (inputEl.current as any).blur();
         }
         const filteredDomains =
-            domainSearchResults?.filter((result) => result.entity.urn === newUrn).map((result) => result.entity) || [];
+            domainResult?.filter((result) => result.entity.urn === newUrn).map((result) => result.entity) || [];
         if (filteredDomains.length) {
             const domain = filteredDomains[0];
             setSelectedDomain({
@@ -87,56 +99,66 @@ export const SetDomainModal = ({ visible, onClose, refetch }: Props) => {
         }
     };
 
-    const handleSearch = (text: string) => {
-        if (text.length > 2) {
-            domainSearch({
+    const onOk = async () => {
+        if (!selectedDomain) {
+            return;
+        }
+        try {
+            await setDomainMutation({
                 variables: {
-                    input: {
-                        type: EntityType.Domain,
-                        query: text,
-                        start: 0,
-                        count: 5,
-                    },
+                    entityUrn: urn,
+                    domainUrn: selectedDomain.urn,
                 },
             });
+            message.success({ content: 'Updated Domain!', duration: 2 });
+        } catch (e: unknown) {
+            message.destroy();
+            if (e instanceof Error) {
+                message.error({ content: `Failed to set Domain: \n ${e.message || ''}`, duration: 3 });
+            }
         }
+        setSelectedDomain(undefined);
+        refetch?.();
+        onCloseModal();
+    };
+
+    const tagRender = (props) => {
+        // eslint-disable-next-line react/prop-types
+        const { label, closable, onClose } = props;
+        const onPreventMouseDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        return (
+            <StyleTag onMouseDown={onPreventMouseDown} closable={closable} onClose={onClose}>
+                {label}
+            </StyleTag>
+        );
     };
 
+    const selectValue = (selectedDomain && [selectedDomain?.displayName]) || [];
+
     // Handle the Enter press
     useEnterKeyListener({
         querySelectorToExecuteClick: '#setDomainButton',
     });
 
-    const renderSearchResult = (result: SearchResult) => {
-        const displayName = entityRegistry.getDisplayName(result.entity.type, result.entity);
-        return (
-            <SearchResultContainer>
-                <SearchResultContent>
-                    <SearchResultDisplayName>
-                        <div>{displayName}</div>
-                    </SearchResultDisplayName>
-                </SearchResultContent>
-                <Link
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    to={() => `/${entityRegistry.getPathName(result.entity.type)}/${result.entity.urn}`}
-                >
-                    View
-                </Link>{' '}
-            </SearchResultContainer>
-        );
-    };
+    function clearInput() {
+        setInputValue('');
+    }
 
-    const selectValue = (selectedDomain && [selectedDomain?.displayName]) || [];
+    function handleBlur() {
+        setInputValue('');
+    }
 
     return (
         <Modal
             title="Set Domain"
             visible={visible}
-            onCancel={onClose}
+            onCancel={onCloseModal}
             footer={
                 <>
-                    <Button onClick={onClose} type="text">
+                    <Button onClick={onCloseModal} type="text">
                         Cancel
                     </Button>
                     <Button id="setDomainButton" disabled={selectedDomain === undefined} onClick={onOk}>
@@ -149,21 +171,27 @@ export const SetDomainModal = ({ visible, onClose, refetch }: Props) => {
                 <Form.Item>
                     <Select
                         autoFocus
-                        value={selectValue}
+                        defaultOpen
                         mode="multiple"
                         ref={inputEl}
                         placeholder="Search for Domains..."
+                        showSearch
+                        filterOption={false}
+                        defaultActiveFirstOption={false}
                         onSelect={(domainUrn: any) => onSelectDomain(domainUrn)}
                         onDeselect={() => setSelectedDomain(undefined)}
-                        onSearch={handleSearch}
-                        filterOption={false}
-                        tagRender={(tagProps) => <Tag>{tagProps.value}</Tag>}
+                        onSearch={(value: string) => {
+                            // eslint-disable-next-line react/prop-types
+                            handleSearch(value.trim());
+                            // eslint-disable-next-line react/prop-types
+                            setInputValue(value.trim());
+                        }}
+                        tagRender={tagRender}
+                        value={selectValue}
+                        onClear={clearInput}
+                        onBlur={handleBlur}
                     >
-                        {domainSearchResults.map((result) => {
-                            return (
-                                <Select.Option value={result.entity.urn}>{renderSearchResult(result)}</Select.Option>
-                            );
-                        })}
+                        {domainSearchOptions}
                     </Select>
                 </Form.Item>
             </Form>

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SidebarDomainSection.tsx

@@ -75,7 +75,7 @@ export const SidebarDomainSection = () => {
             <SetDomainModal
                 visible={showModal}
                 refetch={refetch}
-                onClose={() => {
+                onCloseModal={() => {
                     setShowModal(false);
                 }}
             />