responding to comments

datahub-project · Sep 26, 2022 · 83f6d60 · 83f6d60
1 parent 9deb900
commit 83f6d60
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 52 deletions.
diff --git a/datahub-web-react/src/app/entity/container/ContainerEntity.tsx b/datahub-web-react/src/app/entity/container/ContainerEntity.tsx
@@ -149,7 +149,7 @@ export class ContainerEntity implements Entity<Container> {
     };
 
     displayName = (data: Container) => {
-        return data?.properties?.name || data?.urn;
+        return data?.properties?.name || data?.properties?.qualifiedName || data?.urn;
     };
 
     getOverridePropertiesFromEntity = (data: Container) => {

diff --git a/...react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx b/...react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components/macro';
 import { useGetSearchResultsLazyQuery } from '../../../../../../../graphql/search.generated';
 import { Container, Entity, EntityType } from '../../../../../../../types.generated';
 import { useEnterKeyListener } from '../../../../../../shared/useEnterKeyListener';
+import { useEntityRegistry } from '../../../../../../useEntityRegistry';
 
 type Props = {
     onCloseModal: () => void;
@@ -33,12 +34,14 @@ const PreviewImage = styled.img`
     margin-right: 4px;
 `;
 
-export const SelectContainerModal = ({ onCloseModal, defaultValues, onOkOverride, titleOverride }: Props) => {
+export const ContainerSelectModal = ({ onCloseModal, defaultValues, onOkOverride, titleOverride }: Props) => {
     const [containerSearch, { data: platforSearchData }] = useGetSearchResultsLazyQuery();
+    const entityRegistry = useEntityRegistry();
+
     const containerSearchResults =
         platforSearchData?.search?.searchResults?.map((searchResult) => searchResult.entity) || [];
 
-    const [selectedContainers, setSelectedContainers] = useState<SelectedContainer[] | undefined>(defaultValues);
+    const [selectedContainers, setSelectedContainers] = useState<SelectedContainer[]>(defaultValues || []);
 
     const inputEl = useRef(null);
 
@@ -61,7 +64,8 @@ export const SelectContainerModal = ({ onCloseModal, defaultValues, onOkOverride
 
     // Renders a search result in the select dropdown.
     const renderSearchResult = (entity: Container) => {
-        const displayName = entity.properties?.name || entity.properties?.qualifiedName || entity.urn;
+        const displayName = entityRegistry.getDisplayName(EntityType.Container, entity);
+
         const truncatedDisplayName = displayName.length > 25 ? `${displayName.slice(0, 25)}...` : displayName;
         return (
             <Tooltip title={displayName}>
@@ -86,11 +90,10 @@ export const SelectContainerModal = ({ onCloseModal, defaultValues, onOkOverride
             (inputEl.current as any).blur();
         }
 
-        const filteredContainers =
-            containerSearchResults?.filter((entity) => entity.urn === newUrn).map((entity) => entity) || [];
+        const filteredContainer = containerSearchResults?.find((entity) => entity.urn === newUrn);
 
-        if (filteredContainers.length) {
-            const container = filteredContainers[0] as Container;
+        if (filteredContainer) {
+            const container = filteredContainer as Container;
             setSelectedContainers([
                 ...(selectedContainers || []),
                 {

diff --git a/...-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx b/...-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
@@ -72,9 +72,7 @@ export const EditOwnersModal = ({
     // Renders a search result in the select dropdown.
     const renderSearchResult = (entity: Entity) => {
         const avatarUrl =
-            entity.type === EntityType.CorpUser
-                ? (entity as CorpUser).editableProperties?.pictureLink || undefined
-                : undefined;
+            (entity.type === EntityType.CorpUser && (entity as CorpUser).editableProperties?.pictureLink) || undefined;
         const displayName = entityRegistry.getDisplayName(entity.type, entity);
         return (
             <Select.Option value={entity.urn} key={entity.urn}>
@@ -97,7 +95,7 @@ export const EditOwnersModal = ({
             label: defaultValue.entity ? renderDropdownResult(defaultValue.entity) : defaultValue.urn,
             value: {
                 ownerUrn: defaultValue.urn,
-                ownerEntityType: EntityType.CorpUser,
+                ownerEntityType: defaultValue.entity?.type || EntityType.CorpUser,
             },
         }));
     };
@@ -109,7 +107,6 @@ export const EditOwnersModal = ({
     const [selectedOwners, setSelectedOwners] = useState<SelectedOwner[]>(
         defaultValuesToSelectedOwners(defaultValues || []),
     );
-    console.log({ selectedOwners });
     const [selectedOwnerType, setSelectedOwnerType] = useState<OwnershipType>(defaultOwnerType || OwnershipType.None);
 
     // User and group dropdown search results!
@@ -191,11 +188,6 @@ export const EditOwnersModal = ({
 
     // When a owner search result is deselected, remove the Owner
     const onDeselectOwner = (selectedValue: { key: string; label: React.ReactNode; value: string }) => {
-        console.log({
-            deselecting: 'deselecting',
-            selectedValue,
-            selectedOwners,
-        });
         setInputValue('');
         const newValues = selectedOwners.filter(
             (owner) => owner.label !== selectedValue.value && owner.value.ownerUrn !== selectedValue.value,

diff --git a/...b-react/src/app/entity/shared/containers/profile/sidebar/Platform/SelectPlatformModal.tsx b/...b-react/src/app/entity/shared/containers/profile/sidebar/Platform/SelectPlatformModal.tsx
@@ -8,7 +8,7 @@ import { useEnterKeyListener } from '../../../../../../shared/useEnterKeyListene
 type Props = {
     onCloseModal: () => void;
     defaultValues?: { urn: string; entity?: Entity | null }[];
-    onOkOverride?: (result: string[]) => void;
+    onOk?: (result: string[]) => void;
     titleOverride?: string;
 };
 
@@ -33,7 +33,7 @@ const PreviewImage = styled.img`
     margin-right: 4px;
 `;
 
-export const SelectPlatformModal = ({ onCloseModal, defaultValues, onOkOverride, titleOverride }: Props) => {
+export const SelectPlatformModal = ({ onCloseModal, defaultValues, onOk, titleOverride }: Props) => {
     const [platformSearch, { data: platforSearchData }] = useGetSearchResultsLazyQuery();
     const platformSearchResults =
         platforSearchData?.search?.searchResults?.map((searchResult) => searchResult.entity) || [];
@@ -105,13 +105,13 @@ export const SelectPlatformModal = ({ onCloseModal, defaultValues, onOkOverride,
         setSelectedPlatforms(selectedPlatforms?.filter((platform) => platform.urn !== val.value));
     };
 
-    const onOk = async () => {
+    const handleOk = async () => {
         if (!selectedPlatforms) {
             return;
         }
 
-        if (onOkOverride) {
-            onOkOverride(selectedPlatforms?.map((platform) => platform.urn));
+        if (onOk) {
+            onOk(selectedPlatforms?.map((platform) => platform.urn));
         }
     };
 
@@ -144,7 +144,7 @@ export const SelectPlatformModal = ({ onCloseModal, defaultValues, onOkOverride,
                     <Button onClick={onModalClose} type="text">
                         Cancel
                     </Button>
-                    <Button id="setPlatformButton" disabled={selectedPlatforms?.length === 0} onClick={onOk}>
+                    <Button id="setPlatformButton" disabled={selectedPlatforms?.length === 0} onClick={handleOk}>
                         Add
                     </Button>
                 </>

diff --git a/datahub-web-react/src/app/search/AdvancedFilterSelectValueModal.tsx b/datahub-web-react/src/app/search/AdvancedFilterSelectValueModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FacetMetadata, EntityType } from '../../types.generated';
-import { SelectContainerModal } from '../entity/shared/containers/profile/sidebar/Container/ContainerSelectModal';
+import { ContainerSelectModal } from '../entity/shared/containers/profile/sidebar/Container/ContainerSelectModal';
 import { SetDomainModal } from '../entity/shared/containers/profile/sidebar/Domain/SetDomainModal';
 import { EditOwnersModal } from '../entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal';
 import { SelectPlatformModal } from '../entity/shared/containers/profile/sidebar/Platform/SelectPlatformModal';
@@ -63,7 +63,7 @@ export const AdvancedFilterSelectValueModal = ({
 
     if (filterField === 'container') {
         return (
-            <SelectContainerModal
+            <ContainerSelectModal
                 titleOverride="Select Container"
                 defaultValues={initialValues?.map((urn) => ({
                     urn,
@@ -87,7 +87,7 @@ export const AdvancedFilterSelectValueModal = ({
                 }))}
                 titleOverride="Select Platform"
                 onCloseModal={onCloseModal}
-                onOkOverride={(platformUrns) => {
+                onOk={(platformUrns) => {
                     onSelect(platformUrns);
                     onCloseModal();
                 }}
@@ -101,7 +101,7 @@ export const AdvancedFilterSelectValueModal = ({
                 title="Filter by Column"
                 defaultValue={initialValues?.[0]}
                 onCloseModal={onCloseModal}
-                onOkOverride={(newValue) => {
+                onOk={(newValue) => {
                     onSelect([newValue]);
                     onCloseModal();
                 }}
@@ -115,7 +115,7 @@ export const AdvancedFilterSelectValueModal = ({
                 title="Filter by Description"
                 defaultValue={initialValues?.[0]}
                 onCloseModal={onCloseModal}
-                onOkOverride={(newValue) => {
+                onOk={(newValue) => {
                     onSelect([newValue]);
                     onCloseModal();
                 }}
@@ -129,7 +129,7 @@ export const AdvancedFilterSelectValueModal = ({
                 title="Filter by Environment"
                 defaultValue={initialValues?.[0]}
                 onCloseModal={onCloseModal}
-                onOkOverride={(newValue) => {
+                onOk={(newValue) => {
                     onSelect([newValue]);
                     onCloseModal();
                 }}
@@ -143,7 +143,7 @@ export const AdvancedFilterSelectValueModal = ({
                 title="Filter by Subtype"
                 defaultValue={initialValues?.[0]}
                 onCloseModal={onCloseModal}
-                onOkOverride={(newValue) => {
+                onOk={(newValue) => {
                     onSelect([newValue]);
                     onCloseModal();
                 }}
@@ -157,7 +157,7 @@ export const AdvancedFilterSelectValueModal = ({
                 title="Filter by Entity Type"
                 defaultValue={initialValues?.[0]}
                 onCloseModal={onCloseModal}
-                onOkOverride={(newValue) => {
+                onOk={(newValue) => {
                     onSelect([newValue]);
                     onCloseModal();
                 }}

diff --git a/datahub-web-react/src/app/search/ChooseEntityTypeModal.tsx b/datahub-web-react/src/app/search/ChooseEntityTypeModal.tsx
@@ -4,14 +4,14 @@ import { useEntityRegistry } from '../useEntityRegistry';
 
 type Props = {
     onCloseModal: () => void;
-    onOkOverride?: (result: string) => void;
+    onOk?: (result: string) => void;
     title?: string;
     defaultValue?: string;
 };
 
 const { Option } = Select;
 
-export const ChooseEntityTypeModal = ({ defaultValue, onCloseModal, onOkOverride, title }: Props) => {
+export const ChooseEntityTypeModal = ({ defaultValue, onCloseModal, onOk, title }: Props) => {
     const entityRegistry = useEntityRegistry();
     const entityTypes = entityRegistry.getSearchEntityTypes();
 
@@ -28,7 +28,7 @@ export const ChooseEntityTypeModal = ({ defaultValue, onCloseModal, onOkOverride
                     <Button onClick={onCloseModal} type="text">
                         Cancel
                     </Button>
-                    <Button disabled={stagedValue.length === 0} onClick={() => onOkOverride?.(stagedValue)}>
+                    <Button disabled={stagedValue.length === 0} onClick={() => onOk?.(stagedValue)}>
                         Done
                     </Button>
                 </>

diff --git a/datahub-web-react/src/app/search/EditTextModal.tsx b/datahub-web-react/src/app/search/EditTextModal.tsx
@@ -3,12 +3,12 @@ import React, { useState } from 'react';
 
 type Props = {
     onCloseModal: () => void;
-    onOkOverride?: (result: string) => void;
+    onOk?: (result: string) => void;
     title?: string;
     defaultValue?: string;
 };
 
-export const EditTextModal = ({ defaultValue, onCloseModal, onOkOverride, title }: Props) => {
+export const EditTextModal = ({ defaultValue, onCloseModal, onOk, title }: Props) => {
     const [stagedValue, setStagedValue] = useState(defaultValue || '');
     return (
         <Modal
@@ -21,7 +21,7 @@ export const EditTextModal = ({ defaultValue, onCloseModal, onOkOverride, title
                     <Button onClick={onCloseModal} type="text">
                         Cancel
                     </Button>
-                    <Button disabled={stagedValue.length === 0} onClick={() => onOkOverride?.(stagedValue)}>
+                    <Button disabled={stagedValue.trim().length === 0} onClick={() => onOk?.(stagedValue)}>
                         Done
                     </Button>
                 </>

diff --git a/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx b/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx
@@ -73,6 +73,15 @@ const isValidTagName = (tagName: string) => {
     return tagName && tagName.length > 0 && !FORBIDDEN_URN_CHARS_REGEX.test(tagName);
 };
 
+const defaultValuesToSelectedValue = (defaultValues?: { urn: string; entity?: Entity | null }[]): any[] => {
+    return (
+        defaultValues?.map((defaultValue) => ({
+            urn: defaultValue.urn,
+            component: <TagTermLabel entity={defaultValue.entity} />,
+        })) || []
+    );
+};
+
 export default function EditTagTermsModal({
     visible,
     onCloseModal,
@@ -82,28 +91,17 @@ export default function EditTagTermsModal({
     defaultValues = [],
     onOkOverride,
 }: EditTagsModalProps) {
-    console.log({ defaultValues });
     const entityRegistry = useEntityRegistry();
     const [inputValue, setInputValue] = useState('');
     const [showCreateModal, setShowCreateModal] = useState(false);
     const [disableAction, setDisableAction] = useState(false);
     const [urns, setUrns] = useState<string[]>(defaultValues.map((defaultValue) => defaultValue.urn));
     const [selectedTerms, setSelectedTerms] = useState<any[]>(
-        type === EntityType.GlossaryTerm
-            ? defaultValues.map((defaultValue) => ({
-                  urn: defaultValue.urn,
-                  component: <TagTermLabel entity={defaultValue.entity} />,
-              }))
-            : [],
+        type === EntityType.GlossaryTerm ? defaultValuesToSelectedValue(defaultValues) : [],
     );
 
     const [selectedTags, setSelectedTags] = useState<any[]>(
-        type === EntityType.Tag
-            ? defaultValues.map((defaultValue) => ({
-                  urn: defaultValue.urn,
-                  component: <TagTermLabel entity={defaultValue.entity} />,
-              }))
-            : [],
+        type === EntityType.Tag ? defaultValuesToSelectedValue(defaultValues) : [],
     );
 
     const [isFocusedOnInput, setIsFocusedOnInput] = useState(false);

diff --git a/datahub-web-react/src/app/shared/tags/TagTermLabel.tsx b/datahub-web-react/src/app/shared/tags/TagTermLabel.tsx
@@ -18,7 +18,7 @@ export const TagTermLabel = ({ entity, termName }: Props) => {
     if (entity?.type === EntityType.Tag) {
         return (
             <TagLabel
-                name={(entity as Tag).properties?.name || (entity as Tag).name}
+                name={entityRegistry.getDisplayName(entity.type, entity)}
                 colorHash={(entity as Tag).urn}
                 color={(entity as Tag).properties?.colorHex}
             />