add business attribute entity to v2 UI

Author: chriscollins3456

datahub-web-react/src/app/buildEntityRegistryV2.ts

@@ -24,6 +24,7 @@ import { QueryEntity } from './entityV2/query/QueryEntity';
 import { SchemaFieldEntity } from './entityV2/schemaField/SchemaFieldEntity';
 import { StructuredPropertyEntity } from './entityV2/structuredProperty/StructuredPropertyEntity';
 import { DataProcessInstanceEntity } from './entityV2/dataProcessInstance/DataProcessInstanceEntity';
+import { BusinessAttributeEntity } from './entityV2/businessAttribute/BusinessAttributeEntity';
 
 export default function buildEntityRegistryV2() {
     const registry = new EntityRegistry();
@@ -52,5 +53,6 @@ export default function buildEntityRegistryV2() {
     registry.register(new SchemaFieldEntity());
     registry.register(new StructuredPropertyEntity());
     registry.register(new DataProcessInstanceEntity());
+    registry.register(new BusinessAttributeEntity());
     return registry;
 }

datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { GlobalOutlined } from '@ant-design/icons';
+import { BusinessAttribute, EntityType, SearchResult } from '../../../types.generated';
+import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from '../Entity';
+import { getDataForEntityType } from '../shared/containers/profile/utils';
+import { EntityProfile } from '../shared/containers/profile/EntityProfile';
+import { useGetBusinessAttributeQuery } from '../../../graphql/businessAttribute.generated';
+import { EntityMenuItems } from '../shared/EntityDropdown/EntityMenuActions';
+import { DocumentationTab } from '../shared/tabs/Documentation/DocumentationTab';
+import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
+import { SidebarAboutSection } from '../shared/containers/profile/sidebar/AboutSection/SidebarAboutSection';
+import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Ownership/sidebar/SidebarOwnerSection';
+import { SidebarTagsSection } from '../shared/containers/profile/sidebar/SidebarTagsSection';
+import { Preview } from './preview/Preview';
+import { PageRoutes } from '../../../conf/Global';
+import BusinessAttributeRelatedEntity from './profile/BusinessAttributeRelatedEntity';
+import { BusinessAttributeDataTypeSection } from './profile/BusinessAttributeDataTypeSection';
+
+/**
+ *  Definition of datahub Business Attribute Entity
+ */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export class BusinessAttributeEntity implements Entity<BusinessAttribute> {
+    type: EntityType = EntityType.BusinessAttribute;
+
+    icon = (fontSize?: number, styleType?: IconStyleType, color?: string) => {
+        if (styleType === IconStyleType.TAB_VIEW) {
+            return <GlobalOutlined style={{ fontSize, color }} />;
+        }
+
+        if (styleType === IconStyleType.HIGHLIGHT) {
+            return <GlobalOutlined style={{ fontSize, color: color || '#B37FEB' }} />;
+        }
+
+        if (styleType === IconStyleType.SVG) {
+            // TODO: Update the returned path value to the correct svg icon path
+            return (
+                <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208zM304 240a40 40 0 1080 0 40 40 0 10-80 0zm0 272a40 40 0 1080 0 40 40 0 10-80 0zm0 272a40 40 0 1080 0 40 40 0 10-80 0z" />
+            );
+        }
+
+        return (
+            <GlobalOutlined
+                style={{
+                    fontSize,
+                    color: color || '#BFBFBF',
+                }}
+            />
+        );
+    };
+
+    displayName = (data: BusinessAttribute) => {
+        return data?.properties?.name || data?.urn;
+    };
+
+    getPathName = () => 'business-attribute';
+
+    getEntityName = () => 'Business Attribute';
+
+    getCollectionName = () => 'Business Attributes';
+
+    getGraphName = () => 'businessAttribute';
+
+    getCustomCardUrlPath = () => PageRoutes.BUSINESS_ATTRIBUTE;
+
+    isBrowseEnabled = () => false;
+
+    isLineageEnabled = () => false;
+
+    isSearchEnabled = () => true;
+
+    getOverridePropertiesFromEntity = (data: BusinessAttribute) => {
+        return {
+            name: data.properties?.name,
+        };
+    };
+
+    getGenericEntityProperties = (data: BusinessAttribute) => {
+        return getDataForEntityType({
+            data,
+            entityType: this.type,
+            getOverrideProperties: this.getOverridePropertiesFromEntity,
+        });
+    };
+
+    renderPreview = (previewType: PreviewType, data: BusinessAttribute) => {
+        return (
+            <Preview
+                previewType={previewType}
+                urn={data.urn}
+                name={this.displayName(data)}
+                description={data.properties?.description || ''}
+                owners={data.ownership?.owners}
+            />
+        );
+    };
+
+    renderProfile = (urn: string) => {
+        return (
+            <EntityProfile
+                urn={urn}
+                entityType={EntityType.BusinessAttribute}
+                useEntityQuery={useGetBusinessAttributeQuery as any}
+                headerDropdownItems={new Set([EntityMenuItems.DELETE])}
+                isNameEditable
+                tabs={[
+                    {
+                        name: 'Documentation',
+                        component: DocumentationTab,
+                    },
+                    {
+                        name: 'Related Entities',
+                        component: BusinessAttributeRelatedEntity,
+                    },
+                    {
+                        name: 'Properties',
+                        component: PropertiesTab,
+                    },
+                ]}
+                sidebarSections={[
+                    {
+                        component: SidebarAboutSection,
+                    },
+                    {
+                        component: BusinessAttributeDataTypeSection,
+                    },
+                    {
+                        component: SidebarOwnerSection,
+                    },
+                    {
+                        component: SidebarTagsSection,
+                        properties: {
+                            hasTags: true,
+                            hasTerms: true,
+                            customTagPath: 'properties.tags',
+                            customTermPath: 'properties.glossaryTerms',
+                        },
+                    },
+                ]}
+                getOverrideProperties={this.getOverridePropertiesFromEntity}
+            />
+        );
+    };
+
+    renderSearch = (result: SearchResult) => {
+        return this.renderPreview(PreviewType.SEARCH, result.entity as BusinessAttribute);
+    };
+
+    supportedCapabilities = () => {
+        return new Set([
+            EntityCapabilityType.OWNERS,
+            EntityCapabilityType.TAGS,
+            EntityCapabilityType.GLOSSARY_TERMS,
+            // EntityCapabilityType.BUSINESS_ATTRIBUTES,
+        ]);
+    };
+}

datahub-web-react/src/app/entityV2/businessAttribute/preview/Preview.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { GlobalOutlined } from '@ant-design/icons';
+import { EntityType, Owner } from '../../../../types.generated';
+import DefaultPreviewCard from '../../../preview/DefaultPreviewCard';
+import { useEntityRegistry } from '../../../useEntityRegistry';
+import { IconStyleType, PreviewType } from '../../Entity';
+import UrlButton from '../../shared/UrlButton';
+import { getRelatedEntitiesUrl } from '../../../businessAttribute/businessAttributeUtils';
+
+export const Preview = ({
+    urn,
+    name,
+    description,
+    owners,
+    previewType,
+}: {
+    urn: string;
+    name: string;
+    description?: string | null;
+    owners?: Array<Owner> | null;
+    previewType: PreviewType;
+}): JSX.Element => {
+    const entityRegistry = useEntityRegistry();
+    return (
+        <DefaultPreviewCard
+            previewType={previewType}
+            url={entityRegistry.getEntityUrl(EntityType.BusinessAttribute, urn)}
+            name={name || ''}
+            urn={urn}
+            description={description || ''}
+            owners={owners}
+            logoComponent={<GlobalOutlined style={{ fontSize: '20px' }} />}
+            type="Business Attribute"
+            typeIcon={entityRegistry.getIcon(EntityType.BusinessAttribute, 14, IconStyleType.ACCENT)}
+            entityTitleSuffix={
+                <UrlButton href={getRelatedEntitiesUrl(entityRegistry, urn)}>View Related Entities</UrlButton>
+            }
+        />
+    );
+};

datahub-web-react/src/app/entityV2/businessAttribute/preview/_tests_/Preview.test.tsx

@@ -0,0 +1,26 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { mocks } from '../../../../../Mocks';
+import TestPageContainer from '../../../../../utils/test-utils/TestPageContainer';
+import { Preview } from '../Preview';
+import { PreviewType } from '../../../Entity';
+
+describe('Preview', () => {
+    it('renders', () => {
+        const { getByText } = render(
+            <MockedProvider mocks={mocks} addTypename={false}>
+                <TestPageContainer>
+                    <Preview
+                        urn="urn:li:businessAttribute:ba1"
+                        name="name"
+                        description="definition"
+                        owners={null}
+                        previewType={PreviewType.PREVIEW}
+                    />
+                </TestPageContainer>
+            </MockedProvider>,
+        );
+        expect(getByText('definition')).toBeInTheDocument();
+    });
+});

datahub-web-react/src/app/entityV2/businessAttribute/profile/BusinessAttributeDataTypeSection.tsx

@@ -0,0 +1,98 @@
+import { Button, message, Select } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useEntityData, useRefetch } from '@src/app/entity/shared/EntityContext';
+import { SidebarHeader } from '../../shared/containers/profile/sidebar/SidebarHeader';
+import { useUpdateBusinessAttributeMutation } from '../../../../graphql/businessAttribute.generated';
+import { SchemaFieldDataType } from '../../../businessAttribute/businessAttributeUtils';
+
+interface Props {
+    readOnly?: boolean;
+}
+
+const DataTypeSelect = styled(Select)`
+    && {
+        width: 100%;
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+`;
+// Ensures that any newly added datatype is automatically included in the user dropdown.
+const DATA_TYPES = Object.values(SchemaFieldDataType);
+export const BusinessAttributeDataTypeSection = ({ readOnly }: Props) => {
+    const { urn, entityData } = useEntityData();
+    const [originalDescription, setOriginalDescription] = useState<string | null>(null);
+    const [isEditing, setEditing] = useState(false);
+    const refetch = useRefetch();
+
+    useEffect(() => {
+        if (entityData?.properties?.businessAttributeDataType) {
+            setOriginalDescription(entityData?.properties?.businessAttributeDataType);
+        }
+    }, [entityData]);
+
+    const [updateBusinessAttribute] = useUpdateBusinessAttributeMutation();
+
+    const handleChange = (value) => {
+        if (value === originalDescription) {
+            setEditing(false);
+            return;
+        }
+
+        updateBusinessAttribute({ variables: { urn, input: { type: value } } })
+            .then(() => {
+                setEditing(false);
+                setOriginalDescription(value);
+                message.success({ content: 'Data Type Updated', duration: 2 });
+                refetch();
+            })
+            .catch((e: unknown) => {
+                message.destroy();
+                if (e instanceof Error) {
+                    message.error({ content: `Failed to update Data Type: \n ${e.message || ''}`, duration: 3 });
+                }
+            });
+    };
+
+    // Toggle editing mode
+    const handleEditClick = () => {
+        setEditing(!isEditing);
+    };
+
+    return (
+        <div>
+            <SidebarHeader
+                title="Data Type"
+                actions={
+                    !readOnly && (
+                        <Button
+                            data-testid="edit-data-type-button"
+                            onClick={handleEditClick}
+                            type="text"
+                            shape="circle"
+                        >
+                            <EditOutlined />
+                        </Button>
+                    )
+                }
+            />
+            {originalDescription}
+            {isEditing && (
+                <DataTypeSelect
+                    data-testid="add-data-type-option"
+                    placeholder="A data type for business attribute"
+                    onChange={handleChange}
+                >
+                    {DATA_TYPES.map((dataType: SchemaFieldDataType) => (
+                        <Select.Option key={dataType} value={dataType}>
+                            {dataType}
+                        </Select.Option>
+                    ))}
+                </DataTypeSelect>
+            )}
+        </div>
+    );
+};
+
+export default BusinessAttributeDataTypeSection;

datahub-web-react/src/app/entityV2/businessAttribute/profile/BusinessAttributeRelatedEntity.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useEntityData } from '@src/app/entity/shared/EntityContext';
+import { UnionType } from '../../../search/utils/constants';
+import { EmbeddedListSearchSection } from '../../shared/components/styled/search/EmbeddedListSearchSection';
+
+export default function BusinessAttributeRelatedEntity() {
+    const { entityData } = useEntityData();
+
+    const entityUrn = entityData?.urn;
+
+    const fixedOrFilters =
+        (entityUrn && [
+            {
+                field: 'businessAttribute',
+                values: [entityUrn],
+            },
+        ]) ||
+        [];
+
+    entityData?.isAChildren?.relationships?.forEach((businessAttribute) => {
+        const childUrn = businessAttribute.entity?.urn;
+
+        if (childUrn) {
+            fixedOrFilters.push({
+                field: 'businessAttributes',
+                values: [childUrn],
+            });
+        }
+    });
+
+    return (
+        <EmbeddedListSearchSection
+            fixedFilters={{
+                unionType: UnionType.OR,
+                filters: fixedOrFilters,
+            }}
+            emptySearchQuery="*"
+            placeholderText="Filter entities..."
+            skipCache
+            applyView
+        />
+    );
+}