fea(ui): Add menu action for copying the full name of the asset (#13224)

Co-authored-by: John Joyce <john@Mac-2465.lan>
Co-authored-by: John Joyce <john@Mac-1293.lan>

datahub-web-react/src/app/entityV2/shared/EntityDropdown/EntityDropdown.tsx

@@ -353,6 +353,7 @@ const EntityDropdown = (props: Props) => {
                                         undefined
                                     }
                                     name={entityData?.name}
+                                    qualifiedName={entityData?.properties?.qualifiedName}
                                 />
                             </StyledSubMenu>
                         )}{' '}

datahub-web-react/src/app/shared/share/v2/ShareButtonMenu.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import CopyLinkMenuItem from '@app/shared/share/v2/items/CopyLinkMenuItem';
+import CopyNameMenuItem from '@app/shared/share/v2/items/CopyNameMenuItem';
 import CopyUrnMenuItem from '@app/shared/share/v2/items/CopyUrnMenuItem';
 import EmailMenuItem from '@app/shared/share/v2/items/EmailMenuItem';
 import { useEntityRegistry } from '@app/useEntityRegistry';
@@ -12,9 +13,10 @@ interface ShareButtonMenuProps {
     entityType: EntityType;
     subType?: string | null;
     name?: string | null;
+    qualifiedName?: string | null;
 }
 
-export default function ShareButtonMenu({ urn, entityType, subType, name }: ShareButtonMenuProps) {
+export default function ShareButtonMenu({ urn, entityType, subType, name, qualifiedName }: ShareButtonMenuProps) {
     const entityRegistry = useEntityRegistry();
 
     const displayName = name || urn;
@@ -26,7 +28,16 @@ export default function ShareButtonMenu({ urn, entityType, subType, name }: Shar
 
             {navigator.clipboard && <CopyUrnMenuItem key="1" urn={urn} type={displayType} />}
 
-            <EmailMenuItem key="2" urn={urn} name={displayName} type={displayType} />
+            {navigator.clipboard && (
+                <CopyNameMenuItem
+                    key="2"
+                    name={displayName}
+                    type={displayType}
+                    qualifiedName={qualifiedName || undefined}
+                />
+            )}
+
+            <EmailMenuItem key="4" urn={urn} name={displayName} type={displayType} />
         </>
     );
 }

datahub-web-react/src/app/shared/share/v2/ShareMenuAction.tsx

@@ -18,7 +18,13 @@ export default function ShareMenuAction() {
                 trigger={['hover']}
                 overlay={
                     <StyledMenu selectable={false}>
-                        <ShareButtonMenu urn={urn} entityType={entityType} subType={subType} name={name} />
+                        <ShareButtonMenu
+                            urn={urn}
+                            entityType={entityType}
+                            subType={subType}
+                            name={name}
+                            qualifiedName={entityData?.properties?.qualifiedName}
+                        />
                     </StyledMenu>
                 }
             >

datahub-web-react/src/app/shared/share/v2/items/CopyNameMenuItem.tsx

@@ -0,0 +1,46 @@
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import { Tooltip } from '@components';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { StyledMenuItem } from '@app/shared/share/v2/styledComponents';
+
+interface CopyNameMenuItemProps {
+    key: string;
+    type: string;
+    name: string;
+    qualifiedName?: string;
+}
+
+const TextSpan = styled.span`
+    padding-left: 12px;
+    margin-left: 0px !important;
+`;
+
+export default function CopyNameMenuItem({ key, type, name, qualifiedName }: CopyNameMenuItemProps) {
+    /**
+     * Whether button has been clicked
+     */
+    const [isClicked, setIsClicked] = useState(false);
+
+    return (
+        <StyledMenuItem
+            key={key}
+            onClick={() => {
+                if (qualifiedName) {
+                    navigator.clipboard.writeText(qualifiedName);
+                } else {
+                    navigator.clipboard.writeText(name);
+                }
+                setIsClicked(true);
+            }}
+        >
+            <Tooltip title={`Copy the full name of the ${type}`}>
+                {isClicked ? <CheckOutlined /> : <CopyOutlined />}
+                <TextSpan>
+                    <b>Copy Name</b>
+                </TextSpan>
+            </Tooltip>
+        </StyledMenuItem>
+    );
+}

datahub-web-react/src/graphql/container.graphql

@@ -9,6 +9,7 @@ query getContainer($urn: String!) {
         }
         properties {
             name
+            qualifiedName
             description
             externalUrl
             customProperties {

datahub-web-react/src/graphql/fragments.graphql

@@ -409,6 +409,7 @@ fragment nonRecursiveDatasetFields on Dataset {
     platformNativeType
     properties {
         name
+        qualifiedName
         description
         customProperties {
             key

metadata-ingestion/examples/mce_files/bootstrap_mce.json

@@ -610,6 +610,7 @@
           {
             "com.linkedin.pegasus2avro.dataset.DatasetProperties": {
               "description": "table where each row represents a single log event",
+              "qualifiedName": "a.b.c",
               "uri": null,
               "tags": [],
               "customProperties": {