Fix #3686: Variable based separator used for fullyQualifiedName instead of hardcoded "." in UI code (#3705)

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

@@ -17,6 +17,7 @@ import { EntityTags, TagOption } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../auth-provider/AuthProvider';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamDetailsPath } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Dashboard } from '../../generated/entity/data/dashboard';
@@ -196,7 +197,10 @@ const DashboardDetails = ({
       isLink: owner?.type === 'team',
       openInNewTab: false,
     },
-    { key: 'Tier', value: tier?.tagFQN ? tier.tagFQN.split('.')[1] : '' },
+    {
+      key: 'Tier',
+      value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
+    },
     {
       key: `${serviceType} Url`,
       value: dashboardUrl,

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

@@ -16,6 +16,7 @@ import { isUndefined } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { FC, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { ChangeDescription } from '../../generated/entity/data/dashboard';
 import { TagLabel } from '../../generated/type/tagLabel';
 import { isEven } from '../../utils/CommonUtils';
@@ -146,11 +147,11 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
         value:
           !isUndefined(newTier) || !isUndefined(oldTier)
             ? getDiffValue(
-                oldTier?.tagFQN?.split('.')[1] || '',
+                oldTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || '',
-                newTier?.tagFQN?.split('.')[1] || ''
+                newTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || ''
               )
             : tier?.tagFQN
-            ? tier?.tagFQN.split('.')[1]
+            ? tier?.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
             : '',
       },
       {
@@ -197,7 +198,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
     return [
       ...uniqueTags.map((t) =>
         t.tagFQN.startsWith('Tier')
-          ? { ...t, tagFQN: t.tagFQN.split('.')[1] }
+          ? { ...t, tagFQN: t.tagFQN.split(FQN_SEPARATOR_CHAR)[1] }
           : t
       ),
     ];

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

@@ -16,6 +16,7 @@ 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 { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamDetailsPath, ROUTES } from '../../constants/constants';
 import { CSMode } from '../../enums/codemirror.enum';
 import { EntityType } from '../../enums/entity.enum';
@@ -292,7 +293,11 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
           );
 
           return {
-            name: getPartialNameFromFQN(tableFQN, ['database', 'table'], '.'),
+            name: getPartialNameFromFQN(
+              tableFQN,
+              ['database', 'table'],
+              FQN_SEPARATOR_CHAR
+            ),
             fullyQualifiedName: tableFQN,
             joinCount: joinedCol.joinCount,
           };
@@ -320,7 +325,10 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       isLink: owner?.type === 'team',
       openInNewTab: false,
     },
-    { key: 'Tier', value: tier?.tagFQN ? tier.tagFQN.split('.')[1] : '' },
+    {
+      key: 'Tier',
+      value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
+    },
     { key: 'Type', value: `${tableType}`, showLabel: true },
     { value: usage },
     { value: `${weeklyUsageCount} queries` },
@@ -569,7 +577,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                     columnName={getPartialNameFromFQN(
                       datasetFQN,
                       ['column'],
-                      '.'
+                      FQN_SEPARATOR_CHAR
                     )}
                     columns={columns}
                     entityFieldThreads={getEntityFieldThreadCounts(

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

@@ -15,6 +15,7 @@ import classNames from 'classnames';
 import { cloneDeep, isEqual, isUndefined } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { useEffect, useState } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   ChangeDescription,
   Column,
@@ -57,7 +58,7 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
   );
 
   const getChangeColName = (name: string | undefined) => {
-    return name?.split('.')?.slice(-2, -1)[0];
+    return name?.split(FQN_SEPARATOR_CHAR)?.slice(-2, -1)[0];
   };
 
   const isEndsWithField = (name: string | undefined, checkWith: string) => {
@@ -124,11 +125,11 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
         value:
           !isUndefined(newTier) || !isUndefined(oldTier)
             ? getDiffValue(
-                oldTier?.tagFQN?.split('.')[1] || '',
+                oldTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || '',
-                newTier?.tagFQN?.split('.')[1] || ''
+                newTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || ''
               )
             : tier?.tagFQN
-            ? tier?.tagFQN.split('.')[1]
+            ? tier?.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
             : '',
       },
     ];
@@ -344,7 +345,7 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
     return [
       ...uniqueTags.map((t) =>
         t.tagFQN.startsWith('Tier')
-          ? { ...t, tagFQN: t.tagFQN.split('.')[1] }
+          ? { ...t, tagFQN: t.tagFQN.split(FQN_SEPARATOR_CHAR)[1] }
           : t
       ),
     ];
@@ -409,7 +410,7 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
                       columnName={getPartialNameFromFQN(
                         datasetFQN,
                         ['column'],
-                        '.'
+                        FQN_SEPARATOR_CHAR
                       )}
                       columns={updatedColumns()}
                       joins={currentVersionData.joins as ColumnJoins[]}

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

@@ -39,6 +39,7 @@ import ReactFlow, {
 } from 'react-flow-renderer';
 import { useAuthContext } from '../../auth-provider/AuthProvider';
 import { getTableDetails } from '../../axiosAPIs/tableAPI';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { Column } from '../../generated/entity/data/table';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import {
@@ -191,7 +192,13 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
         ) : null}
         <p className="tw-flex">
           <span className="tw-mr-2">{getEntityIcon(node.type)}</span>
-          {getDataLabel(node.displayName, node.name, '.', false, node.type)}
+          {getDataLabel(
+            node.displayName,
+            node.name,
+            FQN_SEPARATOR_CHAR,
+            false,
+            node.type
+          )}
         </p>
       </>
     );
@@ -544,7 +551,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
             body: `Error while fetching ${getDataLabel(
               expandNode.displayName,
               expandNode.name,
-              '.',
+              FQN_SEPARATOR_CHAR,
               true
             )} columns`,
           });

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

@@ -19,6 +19,7 @@ import { EntityFieldThreads, EntityTags, TagOption } from 'Models';
 import React, { Fragment, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useExpanded, useTable } from 'react-table';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTableDetailsPath } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import {
@@ -683,7 +684,7 @@ const EntityTable = ({
                                         {getPartialNameFromFQN(
                                           columnJoin?.fullyQualifiedName as string,
                                           ['database', 'table', 'column'],
-                                          '.'
+                                          FQN_SEPARATOR_CHAR
                                         )}
                                       </Link>
                                     </Fragment>

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

@@ -19,6 +19,7 @@ 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 { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   getGlossaryPath,
   TITLE_FOR_NON_ADMIN_ACTION,
@@ -113,7 +114,7 @@ Props) => {
    * @param fqn fqn of glossary or glossary term
    */
   const handleBreadcrum = (fqn: string) => {
-    const arr = fqn.split('.');
+    const arr = fqn.split(FQN_SEPARATOR_CHAR);
     const dataFQN: Array<string> = [];
     const newData = arr.map((d, i) => {
       dataFQN.push(d);
@@ -121,7 +122,7 @@ Props) => {
 
       return {
         name: d,
-        url: isLink ? getGlossaryPath(dataFQN.join('.')) : '',
+        url: isLink ? getGlossaryPath(dataFQN.join(FQN_SEPARATOR_CHAR)) : '',
         activeTitle: isLink,
       };
     });

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

@@ -5,6 +5,7 @@ import RcTree from 'rc-tree';
 import { DataNode, EventDataNode } from 'rc-tree/lib/interface';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   getAddGlossaryTermsPath,
   getGlossaryTermsPath,
@@ -177,7 +178,7 @@ const GlossaryTerms = ({
           glossaryFormatedData[selectedKey],
           selectedKey
         );
-        handleBreadcrum(queryParams.split('.').splice(1));
+        handleBreadcrum(queryParams.split(FQN_SEPARATOR_CHAR).splice(1));
         // if (queryParams.length > 1) {
         //   const expandedKey = [...queryParams];
         //   expandedKey.pop();

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

@@ -18,6 +18,7 @@ import { EntityFieldThreads, EntityTags } from 'Models';
 import React, { Fragment, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../auth-provider/AuthProvider';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamDetailsPath } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Pipeline, Task } from '../../generated/entity/data/pipeline';
@@ -188,7 +189,10 @@ const PipelineDetails = ({
       isLink: owner?.type === 'team',
       openInNewTab: false,
     },
-    { key: 'Tier', value: tier?.tagFQN ? tier.tagFQN.split('.')[1] : '' },
+    {
+      key: 'Tier',
+      value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
+    },
     {
       key: `${serviceType} Url`,
       value: pipelineUrl,

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

@@ -16,6 +16,7 @@ import { isUndefined } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { FC, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { ChangeDescription } from '../../generated/entity/data/pipeline';
 import { TagLabel } from '../../generated/type/tagLabel';
 import { isEven } from '../../utils/CommonUtils';
@@ -146,11 +147,11 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
         value:
           !isUndefined(newTier) || !isUndefined(oldTier)
             ? getDiffValue(
-                oldTier?.tagFQN?.split('.')[1] || '',
+                oldTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || '',
-                newTier?.tagFQN?.split('.')[1] || ''
+                newTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || ''
               )
             : tier?.tagFQN
-            ? tier?.tagFQN.split('.')[1]
+            ? tier?.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
             : '',
       },
       {
@@ -197,7 +198,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
     return [
       ...uniqueTags.map((t) =>
         t.tagFQN.startsWith('Tier')
-          ? { ...t, tagFQN: t.tagFQN.split('.')[1] }
+          ? { ...t, tagFQN: t.tagFQN.split(FQN_SEPARATOR_CHAR)[1] }
           : t
       ),
     ];

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

@@ -14,6 +14,7 @@
 import { EntityTags } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { useAuthContext } from '../../auth-provider/AuthProvider';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamDetailsPath } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Topic } from '../../generated/entity/data/topic';
@@ -191,7 +192,10 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
       isLink: owner?.type === 'team',
       openInNewTab: false,
     },
-    { key: 'Tier', value: tier?.tagFQN ? tier.tagFQN.split('.')[1] : '' },
+    {
+      key: 'Tier',
+      value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
+    },
     ...getConfigDetails(),
   ];
 

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

@@ -15,6 +15,7 @@ import classNames from 'classnames';
 import { isUndefined } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { FC, useEffect, useState } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { ChangeDescription } from '../../generated/entity/data/topic';
 import { TagLabel } from '../../generated/type/tagLabel';
 import {
@@ -177,11 +178,11 @@ const TopicVersion: FC<TopicVersionProp> = ({
         value:
           !isUndefined(newTier) || !isUndefined(oldTier)
             ? getDiffValue(
-                oldTier?.tagFQN?.split('.')[1] || '',
+                oldTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || '',
-                newTier?.tagFQN?.split('.')[1] || ''
+                newTier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1] || ''
               )
             : tier?.tagFQN
-            ? tier?.tagFQN.split('.')[1]
+            ? tier?.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
             : '',
       },
       ...getConfigDetails(),
@@ -221,7 +222,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
     return [
       ...uniqueTags.map((t) =>
         t.tagFQN.startsWith('Tier')
-          ? { ...t, tagFQN: t.tagFQN.split('.')[1] }
+          ? { ...t, tagFQN: t.tagFQN.split(FQN_SEPARATOR_CHAR)[1] }
           : t
       ),
     ];

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx

@@ -23,6 +23,7 @@ import {
   TagOption,
 } from 'Models';
 import React, { Fragment, useEffect, useState } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { FOLLOWERS_VIEW_CAP } from '../../../constants/constants';
 import { Operation } from '../../../generated/entity/policies/accessControl/rule';
 import { User } from '../../../generated/entity/teams/user';
@@ -368,7 +369,10 @@ const EntityPageInfo = ({
             {tier?.tagFQN && (
               <Tags
                 startWith="#"
-                tag={{ ...tier, tagFQN: tier.tagFQN.split('.')[1] }}
+                tag={{
+                  ...tier,
+                  tagFQN: tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1],
+                }}
                 type="label"
               />
             )}

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx

@@ -14,6 +14,7 @@
 import classNames from 'classnames';
 import { isNil } from 'lodash';
 import React, { FunctionComponent } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { getCountBadge } from '../../../utils/CommonUtils';
 import PopOver from '../popover/PopOver';
 import { FilterContainerProp } from './FacetTypes';
@@ -27,7 +28,7 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
 }: FilterContainerProp) => {
   const getFilterName = (name = '') => {
     const formattedName = name.startsWith('Tier.Tier')
-      ? name.split('.')[1]
+      ? name.split(FQN_SEPARATOR_CHAR)[1]
       : name;
 
     return (

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx

@@ -18,6 +18,7 @@ import { ExtraInfo } from 'Models';
 import React, { FunctionComponent } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import AppState from '../../../AppState';
+import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { ROUTES } from '../../../constants/constants';
 import { SearchIndex } from '../../../enums/search.enum';
 import { CurrentTourPageType } from '../../../enums/tour.enum';
@@ -68,7 +69,7 @@ const TableDataCard: FunctionComponent<Props> = ({
   const history = useHistory();
   const getTier = () => {
     if (tier) {
-      return isString(tier) ? tier : tier.tagFQN.split('.')[1];
+      return isString(tier) ? tier : tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1];
     }
 
     return '';

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx

@@ -14,6 +14,7 @@
 import { isNil, isString } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { FunctionComponent } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { TagLabel } from '../../../generated/type/tagLabel';
 import { getInfoElements } from '../../../utils/EntityUtils';
 import SVGIcons from '../../../utils/SvgUtils';
@@ -33,12 +34,14 @@ const TableDataCardBody: FunctionComponent<Props> = ({
 }: Props) => {
   const getTagValue = (tag: string | TagLabel): string | TagLabel => {
     if (isString(tag)) {
-      return tag.startsWith('Tier.Tier') ? tag.split('.')[1] : tag;
+      return tag.startsWith('Tier.Tier')
+        ? tag.split(FQN_SEPARATOR_CHAR)[1]
+        : tag;
     } else {
       return {
         ...tag,
         tagFQN: tag.tagFQN.startsWith('Tier.Tier')
-          ? tag.tagFQN.split('.')[1]
+          ? tag.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
           : tag.tagFQN,
       };
     }

openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx

@@ -13,6 +13,7 @@
 
 import { FormatedTableData } from 'Models';
 import React, { FunctionComponent, useEffect, useState } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getRecentlyViewedData } from '../../utils/CommonUtils';
 import EntityList from '../EntityList/EntityList';
 import Loader from '../Loader/Loader';
@@ -28,7 +29,7 @@ const RecentlyViewed: FunctionComponent = () => {
       const formatedData = recentlyViewedData.map((data) => {
         return {
           serviceType: data.serviceType,
-          name: data.displayName || data.fqn.split('.').pop(),
+          name: data.displayName || data.fqn.split(FQN_SEPARATOR_CHAR).pop(),
           fullyQualifiedName: data.fqn,
           index: data.entityType,
         };

openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx

@@ -15,6 +15,7 @@ import { isEmpty, isUndefined } from 'lodash';
 import { FormatedTableData } from 'Models';
 import PropTypes from 'prop-types';
 import React, { ReactNode } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { PAGE_SIZE } from '../../constants/constants';
 import { TableType } from '../../generated/entity/data/table';
 import { pluralize } from '../../utils/CommonUtils';
@@ -129,7 +130,7 @@ const SearchedData: React.FC<SearchedDataProp> = ({
             tags={table.tags}
             tier={
               (table.tier || getTierFromSearchTableTags(table.tags))?.split(
-                '.'
+                FQN_SEPARATOR_CHAR
               )[1]
             }
             usage={table.weeklyPercentileRank}

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

@@ -15,6 +15,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { isString } from 'lodash';
 import React, { FunctionComponent } from 'react';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import PopOver from '../common/popover/PopOver';
 import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer';
 import { TagProps } from './tags.interface';
@@ -41,7 +42,7 @@ const Tags: FunctionComponent<TagProps> = ({
   };
 
   const getTag = (tag: string, startWith = '') => {
-    const tagName = showOnlyName ? tag.split('.').pop() : tag;
+    const tagName = showOnlyName ? tag.split(FQN_SEPARATOR_CHAR).pop() : tag;
 
     return (
       <span

openmetadata-ui/src/main/resources/ui/src/constants/char.constants.ts

@@ -11,4 +11,8 @@
  *  limitations under the License.
  */
 
+// To query All results from Elasticsearch
 export const WILD_CARD_CHAR = '*';
+
+// Separator used for fullyQualifiedName of all entities
+export const FQN_SEPARATOR_CHAR = '.';

openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx

@@ -52,6 +52,7 @@ import {
   EdgeData,
 } from '../../components/EntityLineage/EntityLineage.interface';
 import Loader from '../../components/Loader/Loader';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   getDatabaseDetailsPath,
   getServiceDetailsPath,
@@ -153,7 +154,11 @@ const DatasetDetailsPage: FunctionComponent = () => {
     state: false,
   });
   const [tableFQN, setTableFQN] = useState<string>(
-    getPartialNameFromFQN(datasetFQN, ['service', 'database', 'table'], '.')
+    getPartialNameFromFQN(
+      datasetFQN,
+      ['service', 'database', 'table'],
+      FQN_SEPARATOR_CHAR
+    )
   );
   const [deleted, setDeleted] = useState<boolean>(false);
   const [isError, setIsError] = useState(false);
@@ -956,7 +961,11 @@ const DatasetDetailsPage: FunctionComponent = () => {
 
   useEffect(() => {
     setTableFQN(
-      getPartialNameFromFQN(datasetFQN, ['service', 'database', 'table'], '.')
+      getPartialNameFromFQN(
+        datasetFQN,
+        ['service', 'database', 'table'],
+        FQN_SEPARATOR_CHAR
+      )
     );
     setEntityLineage({} as EntityLineage);
   }, [datasetFQN]);

openmetadata-ui/src/main/resources/ui/src/pages/EntityVersionPage/EntityVersionPage.component.tsx

@@ -40,6 +40,7 @@ import DatasetVersion from '../../components/DatasetVersion/DatasetVersion.compo
 import Loader from '../../components/Loader/Loader';
 import PipelineVersion from '../../components/PipelineVersion/PipelineVersion.component';
 import TopicVersion from '../../components/TopicVersion/TopicVersion.component';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   getDashboardDetailsPath,
   getDatabaseDetailsPath,
@@ -142,7 +143,7 @@ const EntityVersionPage: FunctionComponent = () => {
           getPartialNameFromFQN(
             entityFQN,
             ['service', 'database', 'table'],
-            '.'
+            FQN_SEPARATOR_CHAR
           ),
           ['owner', 'tags']
         )
@@ -196,7 +197,11 @@ const EntityVersionPage: FunctionComponent = () => {
       }
       case EntityType.TOPIC: {
         getTopicByFqn(
-          getPartialNameFromFQN(entityFQN, ['service', 'database'], '.'),
+          getPartialNameFromFQN(
+            entityFQN,
+            ['service', 'database'],
+            FQN_SEPARATOR_CHAR
+          ),
           ['owner', 'tags']
         )
           .then((res: AxiosResponse) => {
@@ -244,7 +249,11 @@ const EntityVersionPage: FunctionComponent = () => {
       }
       case EntityType.DASHBOARD: {
         getDashboardByFqn(
-          getPartialNameFromFQN(entityFQN, ['service', 'database'], '.'),
+          getPartialNameFromFQN(
+            entityFQN,
+            ['service', 'database'],
+            FQN_SEPARATOR_CHAR
+          ),
           ['owner', 'tags', 'charts']
         )
           .then((res: AxiosResponse) => {
@@ -293,7 +302,11 @@ const EntityVersionPage: FunctionComponent = () => {
       }
       case EntityType.PIPELINE: {
         getPipelineByFqn(
-          getPartialNameFromFQN(entityFQN, ['service', 'database'], '.'),
+          getPartialNameFromFQN(
+            entityFQN,
+            ['service', 'database'],
+            FQN_SEPARATOR_CHAR
+          ),
           ['owner', 'tags', 'tasks']
         )
           .then((res: AxiosResponse) => {
@@ -354,7 +367,7 @@ const EntityVersionPage: FunctionComponent = () => {
           getPartialNameFromFQN(
             entityFQN,
             ['service', 'database', 'table'],
-            '.'
+            FQN_SEPARATOR_CHAR
           )
         )
           .then((res: AxiosResponse) => {
@@ -411,7 +424,11 @@ const EntityVersionPage: FunctionComponent = () => {
 
       case EntityType.TOPIC: {
         getTopicByFqn(
-          getPartialNameFromFQN(entityFQN, ['service', 'database'], '.')
+          getPartialNameFromFQN(
+            entityFQN,
+            ['service', 'database'],
+            FQN_SEPARATOR_CHAR
+          )
         )
           .then((res: AxiosResponse) => {
             const { id, name, service, serviceType } = res.data;
@@ -462,7 +479,11 @@ const EntityVersionPage: FunctionComponent = () => {
       }
       case EntityType.DASHBOARD: {
         getDashboardByFqn(
-          getPartialNameFromFQN(entityFQN, ['service', 'database'], '.')
+          getPartialNameFromFQN(
+            entityFQN,
+            ['service', 'database'],
+            FQN_SEPARATOR_CHAR
+          )
         )
           .then((res: AxiosResponse) => {
             const { id, displayName, service, serviceType } = res.data;
@@ -513,7 +534,11 @@ const EntityVersionPage: FunctionComponent = () => {
       }
       case EntityType.PIPELINE: {
         getPipelineByFqn(
-          getPartialNameFromFQN(entityFQN, ['service', 'database'], '.')
+          getPartialNameFromFQN(
+            entityFQN,
+            ['service', 'database'],
+            FQN_SEPARATOR_CHAR
+          )
         )
           .then((res: AxiosResponse) => {
             const { id, displayName, service, serviceType } = res.data;

openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPageV1.component.tsx

@@ -36,6 +36,7 @@ import { searchData } from '../../axiosAPIs/miscAPI';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
 import GlossaryV1 from '../../components/Glossary/GlossaryV1.component';
 import Loader from '../../components/Loader/Loader';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   getAddGlossaryTermsPath,
   getGlossaryPath,
@@ -621,7 +622,7 @@ const GlossaryPageV1 = () => {
    * To redirct to add glossary term page
    */
   const handleAddGlossaryTermClick = () => {
-    const activeTerm = selectedKey.split('.');
+    const activeTerm = selectedKey.split(FQN_SEPARATOR_CHAR);
     const glossaryName = activeTerm[0];
     if (activeTerm.length > 1) {
       history.push(getAddGlossaryTermsPath(glossaryName, selectedKey));

openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx

@@ -50,6 +50,7 @@ import Loader from '../../components/Loader/Loader';
 import ManageTabComponent from '../../components/ManageTab/ManageTab.component';
 import RequestDescriptionModal from '../../components/Modals/RequestDescriptionModal/RequestDescriptionModal';
 import TagsViewer from '../../components/tags-viewer/tags-viewer';
+import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   getDatabaseDetailsPath,
   getExplorePathWithSearch,
@@ -103,7 +104,7 @@ const DatabaseDetails: FunctionComponent = () => {
   const [tableData, setTableData] = useState<Array<Table>>([]);
 
   const [databaseName, setDatabaseName] = useState<string>(
-    databaseFQN.split('.').slice(-1).pop() || ''
+    databaseFQN.split(FQN_SEPARATOR_CHAR).slice(-1).pop() || ''
   );
   const [isEdit, setIsEdit] = useState(false);
   const [description, setDescription] = useState('');
@@ -662,7 +663,7 @@ const DatabaseDetails: FunctionComponent = () => {
                                   tags={(table.tags || []).map((tag) => ({
                                     ...tag,
                                     tagFQN: tag.tagFQN?.startsWith('Tier.Tier')
-                                      ? tag.tagFQN.split('.')[1]
+                                      ? tag.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
                                       : tag.tagFQN,
                                   }))}
                                 />

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -24,6 +24,7 @@ import React, { FormEvent } from 'react';
 import { reactLocalStorage } from 'reactjs-localstorage';
 import AppState from '../AppState';
 import { Button } from '../components/buttons/Button/Button';
+import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import {
   imageTypes,
   LOCALSTORAGE_RECENTLY_SEARCHED,
@@ -65,9 +66,9 @@ export const isEven = (value: number): boolean => {
 };
 
 export const getTableFQNFromColumnFQN = (columnFQN: string): string => {
-  const arrColFQN = columnFQN.split('.');
+  const arrColFQN = columnFQN.split(FQN_SEPARATOR_CHAR);
 
-  return arrColFQN.slice(0, arrColFQN.length - 1).join('.');
+  return arrColFQN.slice(0, arrColFQN.length - 1).join(FQN_SEPARATOR_CHAR);
 };
 
 export const getPartialNameFromFQN = (
@@ -75,7 +76,7 @@ export const getPartialNameFromFQN = (
   arrTypes: Array<'service' | 'database' | 'table' | 'column'> = [],
   joinSeperator = '/'
 ): string => {
-  const arrFqn = fqn.split('.');
+  const arrFqn = fqn.split(FQN_SEPARATOR_CHAR);
   const arrPartialName = [];
   for (const type of arrTypes) {
     if (type === 'service' && arrFqn.length > 0) {
@@ -473,7 +474,7 @@ export const getDocButton = (label: string, url: string, dataTestId = '') => {
 };
 
 export const getNameFromFQN = (fqn: string): string => {
-  const arr = fqn.split('.');
+  const arr = fqn.split(FQN_SEPARATOR_CHAR);
 
   return arr[arr.length - 1];
 };

openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx

@@ -36,6 +36,7 @@ import {
   SelectedNode,
 } from '../components/EntityLineage/EntityLineage.interface';
 import Loader from '../components/Loader/Loader';
+import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import {
   nodeHeight,
   nodeWidth,
@@ -57,7 +58,7 @@ export const getHeaderLabel = (
   fqn: string,
   type: string,
   isMainNode: boolean,
-  separator = '.'
+  separator = FQN_SEPARATOR_CHAR
 ) => {
   const length = v.split(separator).length;
 
@@ -420,7 +421,7 @@ export const getLineageData = (
 export const getDataLabel = (
   displayName?: string,
   name = '',
-  separator = '.',
+  separator = FQN_SEPARATOR_CHAR,
   isTextOnly = false,
   type?: string
 ) => {

openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx

@@ -17,6 +17,7 @@ import { Bucket, ExtraInfo, LeafNodes, LineagePos } from 'Models';
 import React from 'react';
 import Avatar from '../components/common/avatar/Avatar';
 import TableProfilerGraph from '../components/TableProfiler/TableProfilerGraph.component';
+import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import {
   getDatabaseDetailsPath,
   getServiceDetailsPath,
@@ -92,8 +93,8 @@ export const getEntityOverview = (
       const [service, database] = getPartialNameFromFQN(
         fullyQualifiedName ?? '',
         ['service', 'database'],
-        '.'
+        FQN_SEPARATOR_CHAR
-      ).split('.');
+      ).split(FQN_SEPARATOR_CHAR);
       const ownerValue = getOwnerFromId(owner?.id);
       const tier = getTierFromTableTags(tags || []);
       const usage = !isNil(usageSummary?.weeklyStats?.percentileRank)
@@ -118,7 +119,7 @@ export const getEntityOverview = (
             getPartialNameFromFQN(
               fullyQualifiedName ?? '',
               ['service', 'database'],
-              '.'
+              FQN_SEPARATOR_CHAR
             )
           ),
           isLink: true,
@@ -135,7 +136,7 @@ export const getEntityOverview = (
         },
         {
           name: 'Tier',
-          value: tier ? tier.split('.')[1] : '--',
+          value: tier ? tier.split(FQN_SEPARATOR_CHAR)[1] : '--',
           isLink: false,
         },
         {
@@ -213,12 +214,12 @@ export const getEntityOverview = (
         },
         {
           name: 'Tier',
-          value: tier ? tier.split('.')[1] : '--',
+          value: tier ? tier.split(FQN_SEPARATOR_CHAR)[1] : '--',
           isLink: false,
         },
         {
           name: `${serviceType} url`,
-          value: fullyQualifiedName?.split('.')[1] as string,
+          value: fullyQualifiedName?.split(FQN_SEPARATOR_CHAR)[1] as string,
           url: pipelineUrl as string,
           isLink: true,
           isExternal: true,
@@ -261,12 +262,14 @@ export const getEntityOverview = (
         },
         {
           name: 'Tier',
-          value: tier ? tier.split('.')[1] : '--',
+          value: tier ? tier.split(FQN_SEPARATOR_CHAR)[1] : '--',
           isLink: false,
         },
         {
           name: `${serviceType} url`,
-          value: displayName || (fullyQualifiedName?.split('.')[1] as string),
+          value:
+            displayName ||
+            (fullyQualifiedName?.split(FQN_SEPARATOR_CHAR)[1] as string),
           url: dashboardUrl as string,
           isLink: true,
           isExternal: true,

openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx

@@ -18,6 +18,7 @@ import Markdown from 'markdown-to-jsx';
 import React, { Fragment } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { Link } from 'react-router-dom';
+import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import { DESCRIPTIONLENGTH, getTeamDetailsPath } from '../constants/constants';
 import { ChangeType } from '../enums/entity.enum';
 import { Column } from '../generated/entity/data/table';
@@ -194,11 +195,11 @@ export const getPreposition = (type: ChangeType) => {
 };
 
 const getColumnName = (column: string) => {
-  const name = column.split('.');
+  const name = column.split(FQN_SEPARATOR_CHAR);
   const length = name.length;
   return name
     .slice(length > 1 ? 1 : 0, length > 1 ? length - 1 : length)
-    .join('.');
+    .join(FQN_SEPARATOR_CHAR);
 };
 
 const getLinkWithColumn = (column: string, eFqn: string, eType: string) => {
@@ -348,7 +349,7 @@ export const feedSummaryFromatter = (
           ) : null}
           {tier ? (
             <p key={uniqueId()}>{`${type} tier ${
-              tier?.tagFQN?.split('.')[1]
+              tier?.tagFQN?.split(FQN_SEPARATOR_CHAR)[1]
             }`}</p>
           ) : null}
         </div>

openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.ts

@@ -25,7 +25,10 @@ import {
   getGlossaryTerms,
 } from '../axiosAPIs/glossaryAPI';
 import { searchData } from '../axiosAPIs/miscAPI';
-import { WILD_CARD_CHAR } from '../constants/char.constants';
+import {
+  FQN_SEPARATOR_CHAR,
+  WILD_CARD_CHAR,
+} from '../constants/char.constants';
 import { SearchIndex } from '../enums/search.enum';
 import { GlossaryTerm } from '../generated/entity/data/glossaryTerm';
 import { ModifiedGlossaryData } from '../pages/GlossaryPage/GlossaryPageV1.component';
@@ -125,7 +128,7 @@ const createGlossaryTermNode = (
   name: string
 ): GlossaryTermTreeNode => {
   const arrFQN = leafFqn.split(`${name}.`);
-  const childName = arrFQN[1]?.split('.')[0];
+  const childName = arrFQN[1]?.split(FQN_SEPARATOR_CHAR)[0];
 
   return !childName
     ? {
@@ -182,7 +185,7 @@ export const getSearchedGlossaryTermTree = (
 ): GlossaryTermTreeNode[] => {
   const termTree: GlossaryTermTreeNode[] = [];
   for (const term of searchedTerms) {
-    const arrFQN = term.fqdn.split('.');
+    const arrFQN = term.fqdn.split(FQN_SEPARATOR_CHAR);
     const rootName = arrFQN[0];
     termTree.push(createGlossaryTermNode(term.fqdn, rootName));
   }
@@ -235,7 +238,7 @@ export const getActionsList = () => {
  * @returns list of fqns
  */
 export const getHierarchicalKeysByFQN = (fqn: string) => {
-  const keys = fqn.split('.').reduce((prev, curr) => {
+  const keys = fqn.split(FQN_SEPARATOR_CHAR).reduce((prev, curr) => {
     const currFqn = prev.length ? `${prev[prev.length - 1]}.${curr}` : curr;
 
     return [...prev, currFqn];