Fixes/08 03 2022 (#3273)

* Fixes: Misc issue fixes

* Fixed issues for adding Glossary terms as tags

* Fixed UI unit tests

openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx

@@ -162,25 +162,16 @@ const AddGlossary = ({
   const fetchRightPanel = () => {
     return (
       <>
-        <h6 className="tw-heading tw-text-base">Configure Your Glossary</h6>
+        <h6 className="tw-heading tw-text-base">Configure Glossary</h6>
         <div className="tw-mb-5">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-          <br />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          A Glossary is a controlled vocabulary used to define the concepts and
+          terminology in an organization. Glossaries can be specific to a
+          certain domain (for e.g., Business Glossary, Technical Glossary). In
+          the glossary, the standard terms and concepts can be defined along
+          with the synonyms, and related terms. Control can be established over
+          how and who can add the terms in the glossary.
         </div>
-        {/* {getDocButton('Read Webhook Doc', '', 'webhook-doc')} */}
+        {/* {getDocButton('Read Glossary Doc', '', 'glossary-doc')} */}
       </>
     );
   };

openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx

@@ -249,25 +249,16 @@ const AddGlossaryTerm = ({
   const fetchRightPanel = () => {
     return (
       <>
-        <h6 className="tw-heading tw-text-base">Configure Your Glossary</h6>
+        <h6 className="tw-heading tw-text-base">Configure Glossary Term</h6>
         <div className="tw-mb-5">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-          <br />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          Every term in the glossary has a unique definition. Along with
+          defining the standard term for a concept, the synonyms as well as
+          related terms (for e.g., parent and child terms) can be specified.
+          References can be added to the assets related to the terms. New terms
+          can be added or updated to the Glossary. The glossary terms can be
+          reviewed by certain users, who can accept or reject the terms.
         </div>
-        {/* {getDocButton('Read Webhook Doc', '', 'webhook-doc')} */}
+        {/* {getDocButton('Read Glossary Term Doc', '', 'glossary-term-doc')} */}
       </>
     );
   };

openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx

@@ -15,6 +15,7 @@ import { AxiosError, AxiosResponse } from 'axios';
 import { LoadingState } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import {
   addGlossaryTerm,
   getGlossariesByName,
@@ -35,7 +36,8 @@ const AddGlossaryTermPage = () => {
     useParams<{ [key: string]: string }>();
   const showToast = useToastContext();
   const history = useHistory();
-  const { isAuthDisabled, isAdminUser } = useAuth();
+  const { isAdminUser } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const [status, setStatus] = useState<LoadingState>('initial');
   const [isLoading, setIsLoading] = useState(true);
   const [glossaryData, setGlossaryData] = useState<Glossary>();

openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.tsx

@@ -439,23 +439,17 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
   const fetchRightPanel = () => {
     return (
       <>
-        <h6 className="tw-heading tw-text-base">Configure Your Webhook</h6>
+        <h6 className="tw-heading tw-text-base">Configure Webhooks</h6>
         <div className="tw-mb-5">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-          <br />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          OpenMetadata can be configured to automatically send out event
+          notifications to registered webhooks. Enter the webhook name, and an
+          Endpoint URL to receive the HTTP call back on. Use Event Filters to
+          only receive notifications based on events of interest, like when an
+          entity is created, updated, or deleted; and for the entities your
+          application is interested in. Add a description to help people
+          understand the purpose of the webhook and to keep track of the use
+          case. Use advanced configuration to set up a shared secret key to
+          verify the webhook events using HMAC signature.
         </div>
         {getDocButton('Read Webhook Doc', '', 'webhook-doc')}
       </>

openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx

@@ -16,13 +16,13 @@ import { compare } from 'fast-json-patch';
 import { EntityTags } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { getTeamDetailsPath } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import { EntityReference, User } from '../../generated/entity/teams/user';
 import { LabelType, State, TagLabel } from '../../generated/type/tagLabel';
-import { useAuth } from '../../hooks/authHooks';
 import {
   getCurrentUserId,
   getHtmlForNonAdminAction,
@@ -92,7 +92,7 @@ const DashboardDetails = ({
   createThread,
   dashboardFQN,
 }: DashboardDetailsProps) => {
-  const { isAuthDisabled } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const [isEdit, setIsEdit] = useState(false);
   const [followersCount, setFollowersCount] = useState(0);
   const [isFollowing, setIsFollowing] = useState(false);
@@ -245,22 +245,9 @@ const DashboardDetails = ({
     }
   };
 
-  const onTagUpdate = (selectedTags?: Array<string>) => {
+  const onTagUpdate = (selectedTags?: Array<EntityTags>) => {
     if (selectedTags) {
-      const prevTags =
-        dashboardDetails?.tags?.filter((tag) =>
-          selectedTags.includes(tag?.tagFQN as string)
-        ) || [];
-      const newTags = selectedTags
-        .filter((tag) => {
-          return !prevTags?.map((prevTag) => prevTag.tagFQN).includes(tag);
-        })
-        .map((tag) => ({
-          labelType: LabelType.Manual,
-          state: State.Confirmed,
-          tagFQN: tag,
-        }));
-      const updatedTags = [...prevTags, ...newTags];
+      const updatedTags = [...(tier ? [tier] : []), ...selectedTags];
       const updatedDashboard = { ...dashboardDetails, tags: updatedTags };
       tagUpdateHandler(updatedDashboard);
     }
@@ -304,7 +291,10 @@ const DashboardDetails = ({
     }
   };
 
-  const handleChartTagSelection = (selectedTags?: Array<EntityTags>) => {
+  const handleChartTagSelection = (
+    selectedTags?: Array<EntityTags>,
+    allTags?: Array<string>
+  ) => {
     if (selectedTags && editChartTags) {
       const prevTags = editChartTags.chart.tags?.filter((tag) =>
         selectedTags.some((selectedTag) => selectedTag.tagFQN === tag.tagFQN)
@@ -319,6 +309,7 @@ const DashboardDetails = ({
         .map((tag) => ({
           labelType: 'Manual',
           state: 'Confirmed',
+          source: (allTags || []).includes(tag.tagFQN) ? 'Tag' : 'Glossary',
           tagFQN: tag.tagFQN,
         }));
 
@@ -554,7 +545,7 @@ const DashboardDetails = ({
                                       handleChartTagSelection();
                                     }}
                                     onSelectionChange={(tags) => {
-                                      handleChartTagSelection(tags);
+                                      handleChartTagSelection(tags, tagList);
                                     }}>
                                     {chart.tags?.length ? (
                                       <button

openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.test.tsx

@@ -20,6 +20,18 @@ import { EntityLineage } from '../../generated/type/entityLineage';
 import { TagLabel } from '../../generated/type/tagLabel';
 import DashboardDetails from './DashboardDetails.component';
 
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
 const mockUserTeam = [
   {
     description: 'description',

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx

@@ -15,6 +15,7 @@ import classNames from 'classnames';
 import { isEqual, isNil, isUndefined } from 'lodash';
 import { ColumnJoins, EntityTags, ExtraInfo } from 'Models';
 import React, { useEffect, useState } from 'react';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { getTeamDetailsPath, ROUTES } from '../../constants/constants';
 import { CSMode } from '../../enums/codemirror.enum';
 import { EntityType } from '../../enums/entity.enum';
@@ -26,7 +27,6 @@ import {
 } from '../../generated/entity/data/table';
 import { User } from '../../generated/entity/teams/user';
 import { LabelType, State } from '../../generated/type/tagLabel';
-import { useAuth } from '../../hooks/authHooks';
 import {
   getCurrentUserId,
   getPartialNameFromFQN,
@@ -118,7 +118,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
   qualityTestFormHandler,
   selectedColumn,
 }: DatasetDetailsProps) => {
-  const { isAuthDisabled } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const [isEdit, setIsEdit] = useState(false);
   const [followersCount, setFollowersCount] = useState(0);
   const [isFollowing, setIsFollowing] = useState(false);

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.test.tsx

@@ -27,6 +27,18 @@ import { DatasetTestModeType } from '../../interface/dataQuality.interface';
 import DatasetDetails from './DatasetDetails.component';
 import { DatasetOwner } from './DatasetDetails.interface';
 
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
 const mockUserTeam = [
   {
     description: 'description',

openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx

@@ -36,6 +36,7 @@ import ReactFlow, {
   ReactFlowProvider,
   removeElements,
 } from 'react-flow-renderer';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { getTableDetails } from '../../axiosAPIs/tableAPI';
 import { Column } from '../../generated/entity/data/table';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
@@ -91,7 +92,8 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
   entityLineageHandler,
 }: EntityLineageProp) => {
   const showToast = useToastContext();
-  const { userPermissions, isAuthDisabled, isAdminUser } = useAuth();
+  const { userPermissions, isAdminUser } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [lineageData, setLineageData] = useState<EntityLineage>(entityLineage);
   const [reactFlowInstance, setReactFlowInstance] = useState<OnLoadParams>();

openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx

@@ -203,6 +203,7 @@ const EntityTable = ({
         .map((tag) => ({
           labelType: LabelType.Manual,
           state: State.Confirmed,
+          source: allTags.includes(tag) ? 'Tag' : 'Glossary',
           tagFQN: tag,
         }));
       const updatedTags = [...(prevTags as TagLabel[]), ...newTags];

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx

@@ -24,6 +24,18 @@ jest.mock('react-router-dom', () => ({
     .mockImplementation(() => ({ search: '', pathname: '/explore' })),
 }));
 
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
 jest.mock('../../utils/FilterUtils', () => ({
   getFilterString: jest.fn().mockImplementation(() => 'user.address'),
   getFilterCount: jest.fn().mockImplementation(() => 10),

openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.component.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { isNil } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { ROUTES, TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
 import { useAuth } from '../../hooks/authHooks';
 import { Button } from '../buttons/Button/Button';
@@ -16,7 +17,8 @@ const Glossary: FunctionComponent<GlossaryProps> = ({
   paging,
   onPageChange,
 }: GlossaryProps) => {
-  const { isAuthDisabled, isAdminUser } = useAuth();
+  const { isAdminUser } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const history = useHistory();
 
   const onAddGlossary = () => {

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx

@@ -17,6 +17,7 @@ import { GlossaryTermAssets, LoadingState } from 'Models';
 import RcTree from 'rc-tree';
 import { DataNode, EventDataNode } from 'rc-tree/lib/interface';
 import React, { useEffect, useRef, useState } from 'react';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
 import { Glossary } from '../../generated/entity/data/glossary';
 import { GlossaryTerm } from '../../generated/entity/data/glossaryTerm';
@@ -96,7 +97,8 @@ const GlossaryV1 = ({
   onAssetPaginate,
 }: // handlePathChange,
 Props) => {
-  const { isAuthDisabled, isAdminUser } = useAuth();
+  const { isAdminUser } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const treeRef = useRef<RcTree<DataNode>>(null);
   const [treeData, setTreeData] = useState<DataNode[]>([]);
   const [breadcrumb, setBreadcrumb] = useState<

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx

@@ -15,6 +15,7 @@ import classNames from 'classnames';
 import cronstrue from 'cronstrue';
 import { capitalize, isNil, lowerCase } from 'lodash';
 import React, { Fragment, useCallback, useState } from 'react';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
 import {
   AirflowPipeline,
@@ -48,7 +49,8 @@ const Ingestion: React.FC<Props> = ({
   paging,
   pagingHandler,
 }: Props) => {
-  const { isAdminUser, isAuthDisabled } = useAuth();
+  const { isAdminUser } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const showToast = useToastContext();
   const [searchText, setSearchText] = useState('');
   const [currTriggerId, setCurrTriggerId] = useState({ id: '', state: '' });

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.test.tsx

@@ -24,6 +24,18 @@ import { AirflowPipeline } from '../../generated/operations/pipelines/airflowPip
 import Ingestion from './Ingestion.component';
 import { mockIngestionWorkFlow } from './Ingestion.mock';
 
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
 const mockPaging = {
   after: 'after',
   before: 'befor',

openmetadata-ui/src/main/resources/ui/src/components/ManageTab/ManageTab.component.tsx

@@ -18,6 +18,7 @@ import { observer } from 'mobx-react';
 import { TableDetail } from 'Models';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import appState from '../../AppState';
+import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { getCategory } from '../../axiosAPIs/tagAPI';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import { useAuth } from '../../hooks/authHooks';
@@ -48,7 +49,8 @@ const ManageTab: FunctionComponent<Props> = ({
   onSave,
   hasEditAccess,
 }: Props) => {
-  const { userPermissions, isAuthDisabled } = useAuth();
+  const { userPermissions } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
   const getOwnerList = () => {
     const user = !isEmpty(appState.userDetails)
       ? appState.userDetails