diff --git a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
index 6277cdc3d0ff7..23d1dec3d18d6 100644
--- a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
+++ b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 import moment from 'moment';
 import { ensureIsArray, styled, t } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
-import { ContentType } from './ContentType';
+import { ContentType, MetadataType } from './ContentType';
 
 const Header = styled.div`
   font-weight: ${({ theme }) => theme.typography.weights.bold};
@@ -54,85 +54,90 @@ const config = (contentType: ContentType) => {
    * types of tooltips to their own components and reference them here.
    */
 
-  if (type === 'dashboards') {
-    return {
-      icon: Icons.FundProjectionScreenOutlined,
-      title: contentType.title,
-      tooltip: contentType.description ? (
-        <div>
-          <Info header={contentType.title} text={contentType.description} />
-        </div>
-      ) : undefined,
-    };
-  }
-  if (type === 'description') {
-    return {
-      icon: Icons.BookOutlined,
-      title: contentType.value,
-    };
-  }
-  if (type === 'lastModified') {
-    const value = moment.utc(contentType.value).fromNow();
-    return {
-      icon: Icons.EditOutlined,
-      title: value,
-      tooltip: (
-        <div>
-          <Info header={t('Last modified')} text={value} />
-          <Info header={t('Modified by')} text={contentType.modifiedBy} />
-        </div>
-      ),
-    };
-  }
-  if (type === 'owner') {
-    return {
-      icon: Icons.UserOutlined,
-      title: contentType.createdBy,
-      tooltip: (
-        <div>
-          <Info header={t('Created by')} text={contentType.createdBy} />
-          <Info header={t('Owners')} text={contentType.owners} />
-          <Info
-            header={t('Created on')}
-            text={moment.utc(contentType.createdOn).fromNow()}
-          />
-        </div>
-      ),
-    };
-  }
-  if (type === 'rows') {
-    return {
-      icon: Icons.InsertRowBelowOutlined,
-      title: contentType.title,
-      tooltip: contentType.title,
-    };
-  }
-  if (type === 'sql') {
-    return {
-      icon: Icons.ConsoleSqlOutlined,
-      title: contentType.title,
-      tooltip: contentType.title,
-    };
-  }
-  if (type === 'table') {
-    return {
-      icon: Icons.Table,
-      title: contentType.title,
-      tooltip: contentType.title,
-    };
-  }
-  if (type === 'tags') {
-    return {
-      icon: Icons.TagsOutlined,
-      title: contentType.values.join(', '),
-      tooltip: (
-        <div>
-          <Info header={t('Tags')} text={contentType.values} />
-        </div>
-      ),
-    };
+  switch (type) {
+    case MetadataType.DASHBOARDS:
+      return {
+        icon: Icons.FundProjectionScreenOutlined,
+        title: contentType.title,
+        tooltip: contentType.description ? (
+          <div>
+            <Info header={contentType.title} text={contentType.description} />
+          </div>
+        ) : undefined,
+      };
+
+    case MetadataType.DESCRIPTION:
+      return {
+        icon: Icons.BookOutlined,
+        title: contentType.value,
+      };
+
+    case MetadataType.LAST_MODIFIED:
+      return {
+        icon: Icons.EditOutlined,
+        title: moment.utc(contentType.value).fromNow(),
+        tooltip: (
+          <div>
+            <Info
+              header={t('Last modified')}
+              text={moment.utc(contentType.value).fromNow()}
+            />
+            <Info header={t('Modified by')} text={contentType.modifiedBy} />
+          </div>
+        ),
+      };
+
+    case MetadataType.OWNER:
+      return {
+        icon: Icons.UserOutlined,
+        title: contentType.createdBy,
+        tooltip: (
+          <div>
+            <Info header={t('Created by')} text={contentType.createdBy} />
+            <Info header={t('Owners')} text={contentType.owners} />
+            <Info
+              header={t('Created on')}
+              text={moment.utc(contentType.createdOn).fromNow()}
+            />
+          </div>
+        ),
+      };
+
+    case MetadataType.ROWS:
+      return {
+        icon: Icons.InsertRowBelowOutlined,
+        title: contentType.title,
+        tooltip: contentType.title,
+      };
+
+    case MetadataType.SQL:
+      return {
+        icon: Icons.ConsoleSqlOutlined,
+        title: contentType.title,
+        tooltip: contentType.title,
+      };
+
+    case MetadataType.TABLE:
+      return {
+        icon: Icons.Table,
+        title: contentType.title,
+        tooltip: contentType.title,
+      };
+
+    case MetadataType.TAGS:
+      return {
+        icon: Icons.TagsOutlined,
+        title: contentType.values.join(', '),
+        tooltip: (
+          <div>
+            <Info header={t('Tags')} text={contentType.values} />
+          </div>
+        ),
+      };
+
+    default:
+      throw Error(`Invalid type provided: ${type}`);
   }
-  throw Error(`Invalid type provided: ${type}`);
 };
 
 export { config };
diff --git a/superset-frontend/src/components/MetadataBar/ContentType.ts b/superset-frontend/src/components/MetadataBar/ContentType.ts
index c4ccfcafce327..9a4e6082e0739 100644
--- a/superset-frontend/src/components/MetadataBar/ContentType.ts
+++ b/superset-frontend/src/components/MetadataBar/ContentType.ts
@@ -17,28 +17,39 @@
  * under the License.
  */
 
+export enum MetadataType {
+  DASHBOARDS = 'dashboards',
+  DESCRIPTION = 'description',
+  LAST_MODIFIED = 'lastModified',
+  OWNER = 'owner',
+  ROWS = 'rows',
+  SQL = 'sql',
+  TABLE = 'table',
+  TAGS = 'tags',
+}
+
 export type Dashboards = {
-  type: 'dashboards';
+  type: MetadataType.DASHBOARDS;
   title: string;
   description?: string;
   onClick?: (type: string) => void;
 };
 
 export type Description = {
-  type: 'description';
+  type: MetadataType.DESCRIPTION;
   value: string;
   onClick?: (type: string) => void;
 };
 
 export type LastModified = {
-  type: 'lastModified';
+  type: MetadataType.LAST_MODIFIED;
   value: Date;
   modifiedBy: string;
   onClick?: (type: string) => void;
 };
 
 export type Owner = {
-  type: 'owner';
+  type: MetadataType.OWNER;
   createdBy: string;
   owners: string[];
   createdOn: Date;
@@ -46,25 +57,25 @@ export type Owner = {
 };
 
 export type Rows = {
-  type: 'rows';
+  type: MetadataType.ROWS;
   title: string;
   onClick?: (type: string) => void;
 };
 
 export type Sql = {
-  type: 'sql';
+  type: MetadataType.SQL;
   title: string;
   onClick?: (type: string) => void;
 };
 
 export type Table = {
-  type: 'table';
+  type: MetadataType.TABLE;
   title: string;
   onClick?: (type: string) => void;
 };
 
 export type Tags = {
-  type: 'tags';
+  type: MetadataType.TAGS;
   values: string[];
   onClick?: (type: string) => void;
 };
diff --git a/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx b/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
index 541392c40113f..c8a3f9e54603f 100644
--- a/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
+++ b/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
@@ -23,8 +23,8 @@ import * as resizeDetector from 'react-resize-detector';
 import moment from 'moment';
 import { supersetTheme } from '@superset-ui/core';
 import { hexToRgb } from 'src/utils/colorUtils';
-import MetadataBar from '.';
-import { ContentType } from './ContentType';
+import MetadataBar, { MIN_NUMBER_ITEMS, MAX_NUMBER_ITEMS } from '.';
+import { ContentType, MetadataType } from './ContentType';
 
 const DASHBOARD_TITLE = 'Added to 452 dashboards';
 const DASHBOARD_DESCRIPTION =
@@ -48,39 +48,39 @@ const runWithBarCollapsed = async (func: Function) => {
 
 const ITEMS: ContentType[] = [
   {
-    type: 'dashboards',
+    type: MetadataType.DASHBOARDS,
     title: DASHBOARD_TITLE,
     description: DASHBOARD_DESCRIPTION,
   },
   {
-    type: 'description',
+    type: MetadataType.DESCRIPTION,
     value: DESCRIPTION_VALUE,
   },
   {
-    type: 'lastModified',
+    type: MetadataType.LAST_MODIFIED,
     value: DATE,
     modifiedBy: MODIFIED_BY,
   },
   {
-    type: 'owner',
+    type: MetadataType.OWNER,
     createdBy: CREATED_BY,
     owners: OWNERS,
     createdOn: DATE,
   },
   {
-    type: 'rows',
+    type: MetadataType.ROWS,
     title: ROWS_TITLE,
   },
   {
-    type: 'sql',
+    type: MetadataType.SQL,
     title: SQL_TITLE,
   },
   {
-    type: 'table',
+    type: MetadataType.TABLE,
     title: TABLE_TITLE,
   },
   {
-    type: 'tags',
+    type: MetadataType.TAGS,
     values: TAGS,
   },
 ];
@@ -94,11 +94,15 @@ test('renders an array of items', () => {
 test('throws errors when out of min/max restrictions', () => {
   const spy = jest.spyOn(console, 'error');
   spy.mockImplementation(() => {});
-  expect(() => render(<MetadataBar items={ITEMS.slice(0, 1)} />)).toThrow(
-    'The minimum number of items for the metadata bar is 2.',
+  expect(() =>
+    render(<MetadataBar items={ITEMS.slice(0, MIN_NUMBER_ITEMS - 1)} />),
+  ).toThrow(
+    `The minimum number of items for the metadata bar is ${MIN_NUMBER_ITEMS}.`,
   );
-  expect(() => render(<MetadataBar items={ITEMS} />)).toThrow(
-    'The maximum number of items for the metadata bar is 6.',
+  expect(() =>
+    render(<MetadataBar items={ITEMS.slice(0, MAX_NUMBER_ITEMS + 1)} />),
+  ).toThrow(
+    `The maximum number of items for the metadata bar is ${MAX_NUMBER_ITEMS}.`,
   );
   spy.mockRestore();
 });
diff --git a/superset-frontend/src/components/MetadataBar/Overview.stories.mdx b/superset-frontend/src/components/MetadataBar/Overview.stories.mdx
index bf38808a4f453..b9ba919e416e4 100644
--- a/superset-frontend/src/components/MetadataBar/Overview.stories.mdx
+++ b/superset-frontend/src/components/MetadataBar/Overview.stories.mdx
@@ -28,12 +28,28 @@ This process is important to make sure the new type is reviewed by the design te
 To check each content type in detail and its interactions, check the [MetadataBar](/story/metadatabar--component) page.
 Below you can find the configurations for each content type:
 
+<Source
+  language="jsx"
+  format={true}
+  code={`
+    export enum MetadataType {
+      DASHBOARDS = 'dashboards',
+      DESCRIPTION = 'description',
+      LAST_MODIFIED = 'lastModified',
+      OWNER = 'owner',
+      ROWS = 'rows',
+      SQL = 'sql',
+      TABLE = 'table',
+      TAGS = 'tags',
+    }`}
+/>
+
 <Source
   language="jsx"
   format={true}
   code={`
     export type Dashboards = {
-      type: 'dashboards';
+      type: MetadataType.DASHBOARDS;
       title: string;
       description?: string;
       onClick?: (type: string) => void;
@@ -45,7 +61,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Description = {
-      type: 'description';
+      type: MetadataType.DESCRIPTION;
       value: string;
       onClick?: (type: string) => void;
     };`}
@@ -56,7 +72,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type LastModified = {
-      type: 'lastModified';
+      type: MetadataType.LAST_MODIFIED;
       value: Date;
       modifiedBy: string;
       onClick?: (type: string) => void;
@@ -68,7 +84,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Owner = {
-      type: 'owner';
+      type: MetadataType.OWNER;
       createdBy: string;
       owners: string[];
       createdOn: Date;
@@ -81,7 +97,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Rows = {
-      type: 'rows';
+      type: MetadataType.ROWS;
       title: string;
       onClick?: (type: string) => void;
     };`}
@@ -92,7 +108,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Sql = {
-      type: 'sql';
+      type: MetadataType.SQL;
       title: string;
       onClick?: (type: string) => void;
     };`}
@@ -103,7 +119,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Table = {
-      type: 'table';
+      type: MetadataType.TABLE;
       title: string;
       onClick?: (type: string) => void;
     };`}
@@ -114,7 +130,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Tags = {
-      type: 'tags';
+      type: MetadataType.TAGS;
       values: string[];
       onClick?: (type: string) => void;
     };`}
diff --git a/superset-frontend/src/components/MetadataBar/index.tsx b/superset-frontend/src/components/MetadataBar/index.tsx
index 20eaf2d6b652c..c9f57395e72ac 100644
--- a/superset-frontend/src/components/MetadataBar/index.tsx
+++ b/superset-frontend/src/components/MetadataBar/index.tsx
@@ -24,6 +24,9 @@ import { Tooltip } from 'src/components/Tooltip';
 import { ContentType } from './ContentType';
 import { config } from './ContentConfig';
 
+export const MIN_NUMBER_ITEMS = 2;
+export const MAX_NUMBER_ITEMS = 6;
+
 const HORIZONTAL_PADDING = 12;
 const VERTICAL_PADDING = 8;
 const ICON_PADDING = 8;
@@ -157,10 +160,10 @@ const MetadataBar = ({ items }: MetadataBarProps) => {
   const uniqueItems = uniqWith(items, (a, b) => a.type === b.type);
   const sortedItems = uniqueItems.sort((a, b) => ORDER[a.type] - ORDER[b.type]);
   const count = sortedItems.length;
-  if (count < 2) {
+  if (count < MIN_NUMBER_ITEMS) {
     throw Error('The minimum number of items for the metadata bar is 2.');
   }
-  if (count > 6) {
+  if (count > MAX_NUMBER_ITEMS) {
     throw Error('The maximum number of items for the metadata bar is 6.');
   }
   // Calculates the breakpoint width to collapse the bar.