feat(glossary): import glossary from CSV

datahub-web-react/package.json

@@ -33,6 +33,7 @@
         "@types/dompurify": "^2.3.3",
         "@types/js-cookie": "^2.2.6",
         "@types/node": "^12.19.9",
+        "@types/papaparse": "^5.3.16",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
         "@types/react-router": "^5.1.8",
@@ -75,6 +76,7 @@
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.35",
         "monaco-editor": "^0.28.1",
+        "papaparse": "^5.5.3",
         "phosphor-react": "^1.4.1",
         "prosemirror-autocomplete": "^0.4.3",
         "query-string": "^6.13.8",

datahub-web-react/src/app/SearchRoutes.tsx

@@ -15,6 +15,7 @@ import { EntityPage } from '@app/entity/EntityPage';
 import { EntityPage as EntityPageV2 } from '@app/entityV2/EntityPage';
 import GlossaryRoutes from '@app/glossary/GlossaryRoutes';
 import GlossaryRoutesV2 from '@app/glossaryV2/GlossaryRoutes';
+import WizardPage from '@app/glossaryV2/import/WizardPage/WizardPage';
 import StructuredProperties from '@app/govern/structuredProperties/StructuredProperties';
 import { ManageIngestionPage } from '@app/ingest/ManageIngestionPage';
 import { ManageIngestionPage as ManageIngestionPageV2 } from '@app/ingestV2/ManageIngestionPage';
@@ -118,6 +119,7 @@ export const SearchRoutes = (): JSX.Element => {
                 {!showIngestV2 && <Route path={PageRoutes.INGESTION} render={() => <ManageIngestionPage />} />}
                 {showIngestV2 && <Route path={PageRoutes.INGESTION} render={() => <ManageIngestionPageV2 />} />}
 
+                <Route path={PageRoutes.GLOSSARY_IMPORT} render={() => <WizardPage />} />
                 <Route path={PageRoutes.SETTINGS} render={() => (isThemeV2 ? <SettingsPageV2 /> : <SettingsPage />)} />
                 <Route
                     path={`${PageRoutes.GLOSSARY}*`}

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

@@ -49,7 +49,9 @@ function CreateGlossaryEntityModal(props: Props) {
     const entityRegistry = useEntityRegistry();
     const [stagedId, setStagedId] = useState<string | undefined>(undefined);
     const [stagedName, setStagedName] = useState('');
-    const [selectedParentUrn, setSelectedParentUrn] = useState(entityData.urn);
+    const [selectedParentUrn, setSelectedParentUrn] = useState<string | undefined>(
+        canSelectParentUrn ? entityData.urn || '' : undefined,
+    );
     const [documentation, setDocumentation] = useState('');
     const [isDocumentationModalVisible, setIsDocumentationModalVisible] = useState(false);
     const [createButtonDisabled, setCreateButtonDisabled] = useState(true);
@@ -190,7 +192,7 @@ function CreateGlossaryEntityModal(props: Props) {
                     >
                         <StyledItem name="parent">
                             <NodeParentSelect
-                                selectedParentUrn={selectedParentUrn}
+                                selectedParentUrn={selectedParentUrn || ''}
                                 setSelectedParentUrn={setSelectedParentUrn}
                             />
                         </StyledItem>

datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx

@@ -1,10 +1,13 @@
-import { Button } from '@components';
+import { FileTextOutlined, FolderOutlined, UploadOutlined } from '@ant-design/icons';
+import { Button, Dropdown } from '@components';
+import { MenuProps } from 'antd';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import EmptyGlossarySection from '@app/glossaryV2/EmptyGlossarySection';
 import GlossaryEntitiesList from '@app/glossaryV2/GlossaryEntitiesList';
-import { BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID } from '@app/onboarding/config/BusinessGlossaryOnboardingConfig';
+import { PageRoutes } from '@conf/Global';
 import { PageTitle } from '@src/alchemy-components/components/PageTitle';
 
 import { GlossaryNodeFragment } from '@graphql/fragments.generated';
@@ -55,6 +58,29 @@ const GlossaryContentProvider = (props: Props) => {
         nodesLoading,
     } = props;
 
+    const history = useHistory();
+
+    const dropdownItems: MenuProps['items'] = [
+        {
+            key: 'create-group',
+            label: 'Create Glossary',
+            icon: <FolderOutlined />,
+            onClick: () => setIsCreateNodeModalVisible(true),
+        },
+        {
+            key: 'create-term',
+            label: 'Create Term',
+            icon: <FileTextOutlined />,
+            onClick: () => setIsCreateTermModalVisible(true),
+        },
+        {
+            key: 'import',
+            label: 'Import CSV',
+            icon: <UploadOutlined />,
+            onClick: () => history.push(PageRoutes.GLOSSARY_IMPORT),
+        },
+    ];
+
     return (
         <MainContentWrapper data-testid="glossary-entities-list">
             <HeaderWrapper data-testid="glossaryPageV2">
@@ -63,16 +89,18 @@ const GlossaryContentProvider = (props: Props) => {
                     subTitle="Classify your data assets and columns using data dictionaries"
                 />
                 <ButtonContainer>
-                    <Button
-                        data-testid="add-term-group-button-v2"
-                        id={BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID}
-                        size="md"
-                        icon={{ icon: 'Add', source: 'material' }}
-                        // can not be disabled on acryl-main due to ability to propose
-                        onClick={() => setIsCreateNodeModalVisible(true)}
-                    >
-                        Create Glossary
-                    </Button>
+                    <Dropdown menu={{ items: dropdownItems }} trigger={['click']} placement="bottomRight">
+                        <Button
+                            id="create-glossary-object-button"
+                            data-testid="create-glossary-object-button"
+                            name="Create"
+                            size="md"
+                            icon={{ icon: 'Add', source: 'material' }}
+                            // can not be disabled on acryl-main due to ability to propose
+                        >
+                            Create Glossary
+                        </Button>
+                    </Dropdown>
                 </ButtonContainer>
             </HeaderWrapper>
             <ListWrapper>

datahub-web-react/src/app/glossaryV2/GlossarySidebar.tsx

@@ -1,5 +1,8 @@
-import { Button, Tooltip } from '@components';
+import { FileTextOutlined, FolderOutlined, UploadOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Tooltip } from '@components';
+import { MenuProps } from 'antd';
 import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import { useUserContext } from '@app/context/useUserContext';
@@ -10,6 +13,7 @@ import GlossarySearch from '@app/glossaryV2/GlossarySearch';
 import { SidebarWrapper } from '@app/sharedV2/sidebar/components';
 import useSidebarWidth from '@app/sharedV2/sidebar/useSidebarWidth';
 import { useShowNavBarRedesign } from '@app/useShowNavBarRedesign';
+import { PageRoutes } from '@conf/Global';
 
 import { useGetRootGlossaryNodesQuery } from '@graphql/glossary.generated';
 import { EntityType } from '@types';
@@ -53,15 +57,38 @@ type Props = {
 
 export default function GlossarySidebar({ isEntityProfile }: Props) {
     const [isCreateNodeModalVisible, setIsCreateNodeModalVisible] = useState(false);
+    const [isCreateTermModalVisible, setIsCreateTermModalVisible] = useState(false);
 
     const { refetch: refetchForNodes } = useGetRootGlossaryNodesQuery();
+    const history = useHistory();
 
     const user = useUserContext();
     const canManageGlossaries = user?.platformPrivileges?.manageGlossaries;
 
     const width = useSidebarWidth(0.2);
     const isShowNavBarRedesign = useShowNavBarRedesign();
 
+    const dropdownItems: MenuProps['items'] = [
+        {
+            key: 'create-group',
+            label: 'Create Glossary',
+            icon: <FolderOutlined />,
+            onClick: () => setIsCreateNodeModalVisible(true),
+        },
+        {
+            key: 'create-term',
+            label: 'Create Term',
+            icon: <FileTextOutlined />,
+            onClick: () => setIsCreateTermModalVisible(true),
+        },
+        {
+            key: 'import',
+            label: 'Import CSV',
+            icon: <UploadOutlined />,
+            onClick: () => history.push(PageRoutes.GLOSSARY_IMPORT),
+        },
+    ];
+
     return (
         <>
             <StyledSidebarWrapper
@@ -72,15 +99,16 @@ export default function GlossarySidebar({ isEntityProfile }: Props) {
             >
                 <SidebarTitleWrapper>
                     <GlossaryTitle>Business Glossary</GlossaryTitle>
-                    <Tooltip title="Create Glossary" placement="left" showArrow={false}>
-                        <StyledButton
-                            variant="filled"
-                            color="violet"
-                            isCircle
-                            icon={{ icon: 'Plus', source: 'phosphor' }}
-                            onClick={() => setIsCreateNodeModalVisible(true)}
-                            data-testid="create-glossary-button"
-                        />
+                    <Tooltip title="Glossary Actions" placement="left" showArrow={false}>
+                        <Dropdown menu={{ items: dropdownItems }} trigger={['click']} placement="bottomRight">
+                            <StyledButton
+                                id="create-glossary-object-button-sidebar"
+                                data-testid="create-glossary-object-button-sidebar"
+                                variant="text"
+                                color="gray"
+                                icon={{ icon: 'DotsThreeVertical', source: 'phosphor' }}
+                            />
+                        </Dropdown>
                     </Tooltip>
                 </SidebarTitleWrapper>
                 <GlossarySearch />
@@ -95,6 +123,14 @@ export default function GlossarySidebar({ isEntityProfile }: Props) {
                     canSelectParentUrn={false}
                 />
             )}
+            {isCreateTermModalVisible && (
+                <CreateGlossaryEntityModal
+                    entityType={EntityType.GlossaryTerm}
+                    canCreateGlossaryEntity={!!canManageGlossaries}
+                    onClose={() => setIsCreateTermModalVisible(false)}
+                    refetchData={refetchForNodes}
+                />
+            )}
         </>
     );
 }