feat(advanced-search): adding select value modal

datahub-web-react/src/app/entity/shared/components/styled/search/action/GlossaryTermsDropdown.tsx

@@ -48,7 +48,6 @@ export default function GlossaryTermsDropdown({ urns, disabled = false, refetch
                         resourceUrn: urn,
                     }))}
                     operationType={operationType}
-                    entityType={EntityType.Dataset} // TODO REMOVE
                 />
             )}
         </>

datahub-web-react/src/app/entity/shared/components/styled/search/action/TagsDropdown.tsx

@@ -47,7 +47,6 @@ export default function TagsDropdown({ urns, disabled = false, refetch }: Props)
                     resources={urns.map((urn) => ({
                         resourceUrn: urn,
                     }))}
-                    entityType={EntityType.DataFlow}
                     operationType={operationType}
                 />
             )}

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx

@@ -0,0 +1,186 @@
+import { Button, Form, Modal, Select, Tag, Tooltip } from 'antd';
+import React, { ReactNode, useRef, useState } from 'react';
+import styled from 'styled-components/macro';
+import { useGetSearchResultsLazyQuery } from '../../../../../../../graphql/search.generated';
+import { Container, Entity, EntityType } from '../../../../../../../types.generated';
+import { useEnterKeyListener } from '../../../../../../shared/useEnterKeyListener';
+
+type Props = {
+    onCloseModal: () => void;
+    defaultValues?: { urn: string; entity?: Entity | null }[];
+    onOkOverride?: (result: string[]) => void;
+    titleOverride?: string;
+};
+
+type SelectedContainer = {
+    entity?: Entity | null;
+    urn: string;
+};
+
+const StyleTag = styled(Tag)`
+    padding: 0px 7px;
+    margin-right: 3px;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+`;
+
+const PreviewImage = styled.img`
+    max-height: 18px;
+    width: auto;
+    object-fit: contain;
+    background-color: transparent;
+    margin-right: 4px;
+`;
+
+export const SelectContainerModal = ({ onCloseModal, defaultValues, onOkOverride, titleOverride }: Props) => {
+    const [containerSearch, { data: platforSearchData }] = useGetSearchResultsLazyQuery();
+    const containerSearchResults =
+        platforSearchData?.search?.searchResults?.map((searchResult) => searchResult.entity) || [];
+
+    const [selectedContainers, setSelectedContainers] = useState<SelectedContainer[] | undefined>(defaultValues);
+
+    const inputEl = useRef(null);
+
+    const onModalClose = () => {
+        onCloseModal();
+    };
+
+    const handleSearch = (text: string) => {
+        containerSearch({
+            variables: {
+                input: {
+                    type: EntityType.Container,
+                    query: text,
+                    start: 0,
+                    count: 5,
+                },
+            },
+        });
+    };
+
+    // Renders a search result in the select dropdown.
+    const renderSearchResult = (entity: Container) => {
+        const displayName = entity.properties?.name || entity.properties?.qualifiedName || entity.urn;
+        const truncatedDisplayName = displayName.length > 25 ? `${displayName.slice(0, 25)}...` : displayName;
+        return (
+            <Tooltip title={displayName}>
+                <PreviewImage src={entity.platform?.properties?.logoUrl || undefined} alt={entity.properties?.name} />
+                <span>{truncatedDisplayName}</span>
+            </Tooltip>
+        );
+    };
+
+    const containerSearchOptions = containerSearchResults?.map((result) => {
+        return (
+            <Select.Option value={result.urn} key={result.urn}>
+                {renderSearchResult(result as Container)}
+            </Select.Option>
+        );
+    });
+
+    const onSelectContainer = (newValue: { value: string; label: ReactNode }) => {
+        const newUrn = newValue.value;
+
+        if (inputEl && inputEl.current) {
+            (inputEl.current as any).blur();
+        }
+
+        const filteredContainers =
+            containerSearchResults?.filter((entity) => entity.urn === newUrn).map((entity) => entity) || [];
+
+        if (filteredContainers.length) {
+            const container = filteredContainers[0] as Container;
+            setSelectedContainers([
+                ...(selectedContainers || []),
+                {
+                    entity: container,
+                    urn: newUrn,
+                },
+            ]);
+        }
+    };
+
+    const onDeselectContainer = (val) => {
+        setSelectedContainers(selectedContainers?.filter((container) => container.urn !== val.value));
+    };
+
+    const onOk = async () => {
+        if (!selectedContainers) {
+            return;
+        }
+
+        if (onOkOverride) {
+            onOkOverride(selectedContainers?.map((container) => container.urn));
+        }
+    };
+
+    // Handle the Enter press
+    useEnterKeyListener({
+        querySelectorToExecuteClick: '#setContainerButton',
+    });
+
+    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>
+        );
+    };
+
+    return (
+        <Modal
+            title={titleOverride || 'Select Container'}
+            visible
+            onCancel={onModalClose}
+            footer={
+                <>
+                    <Button onClick={onModalClose} type="text">
+                        Cancel
+                    </Button>
+                    <Button id="setContainerButton" disabled={selectedContainers?.length === 0} onClick={onOk}>
+                        Add
+                    </Button>
+                </>
+            }
+        >
+            <Form component={false}>
+                <Form.Item>
+                    <Select
+                        autoFocus
+                        filterOption={false}
+                        showSearch
+                        mode="multiple"
+                        defaultActiveFirstOption={false}
+                        placeholder="Search for Containers..."
+                        onSelect={(containerUrn: any) => onSelectContainer(containerUrn)}
+                        onDeselect={onDeselectContainer}
+                        onSearch={(value: string) => {
+                            // eslint-disable-next-line react/prop-types
+                            handleSearch(value.trim());
+                        }}
+                        ref={inputEl}
+                        labelInValue
+                        value={selectedContainers?.map((container) => ({
+                            value: container.urn,
+                            label: container.entity ? (
+                                renderSearchResult(container.entity as Container)
+                            ) : (
+                                <span>{container.urn}</span>
+                            ),
+                        }))}
+                        tagRender={tagRender}
+                    >
+                        {containerSearchOptions}
+                    </Select>
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};

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

@@ -14,6 +14,9 @@ type Props = {
     urns: string[];
     onCloseModal: () => void;
     refetch?: () => Promise<any>;
+    defaultValue?: { urn: string; entity?: Entity | null };
+    onOkOverride?: (result: string) => void;
+    titleOverride?: string;
 };
 
 type SelectedDomain = {
@@ -30,10 +33,18 @@ const StyleTag = styled(Tag)`
     align-items: center;
 `;
 
-export const SetDomainModal = ({ urns, onCloseModal, refetch }: Props) => {
+export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOkOverride, titleOverride }: Props) => {
     const entityRegistry = useEntityRegistry();
     const [inputValue, setInputValue] = useState('');
-    const [selectedDomain, setSelectedDomain] = useState<SelectedDomain | undefined>(undefined);
+    const [selectedDomain, setSelectedDomain] = useState<SelectedDomain | undefined>(
+        defaultValue
+            ? {
+                  displayName: entityRegistry.getDisplayName(EntityType.Domain, defaultValue?.entity),
+                  type: EntityType.Domain,
+                  urn: defaultValue?.urn,
+              }
+            : undefined,
+    );
     const [domainSearch, { data: domainSearchData }] = useGetSearchResultsLazyQuery();
     const domainSearchResults =
         domainSearchData?.search?.searchResults?.map((searchResult) => searchResult.entity) || [];
@@ -100,6 +111,12 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch }: Props) => {
         if (!selectedDomain) {
             return;
         }
+
+        if (onOkOverride) {
+            onOkOverride(selectedDomain?.urn);
+            return;
+        }
+
         batchSetDomainMutation({
             variables: {
                 input: {
@@ -149,7 +166,7 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch }: Props) => {
 
     return (
         <Modal
-            title="Set Domain"
+            title={titleOverride || 'Set Domain'}
             visible
             onCancel={onModalClose}
             footer={