@redocly/theme 0.56.0-rc.2 → 0.56.0

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -11,6 +11,7 @@ import {
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
 import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { CatalogEntitiesEmptyState } from '@redocly/theme/components/Catalog/CatalogEntitiesEmptyState';
 
 export type CatalogEntityRelationsTableProps = {
   entity: BffCatalogEntity;
@@ -23,13 +24,14 @@ export type CatalogEntityRelationsTableProps = {
   };
   searchQuery: string;
   setSearchQuery: (query: string) => void;
-  heading: string;
+  heading?: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
   sortOption: SortOption | null;
   setSortOption: (sortOption: SortOption | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
+  listType?: 'default' | 'team';
 };
 
 export function CatalogEntityRelationsTable({
@@ -46,19 +48,22 @@ export function CatalogEntityRelationsTable({
   handleSortClick,
   isColumnSorted,
   shouldShowLoadMore,
+  listType,
 }: CatalogEntityRelationsTableProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
-      <Heading>{heading}</Heading>
-      <CatalogActionsRow
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
-        sortOption={sortOption}
-        setSortOption={setSortOption}
-        style={{ marginBottom: '12px' }}
-      />
-      {relations.length > 0 && (
-        <HighlightContext.Provider value={[searchQuery]}>
+      {heading && <Heading>{heading}</Heading>}
+      {(searchQuery || relations.length > 0) && (
+        <CatalogActionsRow
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          sortOption={sortOption}
+          setSortOption={setSortOption}
+          style={{ marginBottom: '12px' }}
+        />
+      )}
+      <HighlightContext.Provider value={[searchQuery]}>
+        {relations.length > 0 ? (
           <CatalogTableView
             entities={relations}
             entitiesCatalogConfig={entitiesCatalogConfig}
@@ -68,9 +73,12 @@ export function CatalogEntityRelationsTable({
             currentSortOption={sortOption}
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}
+            style={{ marginTop: 0 }}
           />
-        </HighlightContext.Provider>
-      )}
+        ) : (
+          <CatalogEntitiesEmptyState listType={listType} />
+        )}
+      </HighlightContext.Provider>
       {shouldShowLoadMore && (
         <LoadMore
           icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -88,6 +88,7 @@ export function CatalogEntityTeamRelations({
       <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
+            key={`members-${relations.length}-${relations.map((r) => r.id).join(',')}`}
             entity={entity}
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
@@ -95,17 +96,22 @@ export function CatalogEntityTeamRelations({
             query={query}
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
-            heading="Members"
             columns={teamColumns}
             sortOption={sortOption}
             setSortOption={setSortOption}
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}
             shouldShowLoadMore={shouldShowLoadMore}
+            listType="team"
           />
         </TabItem>
-        <TabItem label="Related entities" icon={<EntityTypeIcon />} onClick={() => setFilter('')}>
+        <TabItem
+          label="Related entities"
+          icon={<EntityTypeIcon />}
+          onClick={() => setFilter('-type:user')}
+        >
           <CatalogEntityDefaultRelations
+            key={`related-${relations.length}-${relations.map((r) => r.id).join(',')}`}
             entity={entity}
             relations={relations}
             query={query}
@@ -119,6 +125,7 @@ export function CatalogEntityTeamRelations({
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}
             shouldShowLoadMore={shouldShowLoadMore}
+            shouldShowHeading={false}
           />
         </TabItem>
       </Tabs>

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+
+export type CatalogEntitySchemaProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { schema, ...metadataToShow } = entity.metadata || {};
+  const metadata = Object.entries(metadataToShow);
+
+  if (!metadata.length) {
+    return null;
+  }
+
+  let parsedSchema;
+
+  try {
+    parsedSchema = JSON.parse(schema);
+  } catch (error) {
+    return null;
+  }
+
+  return (
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
+      <Heading>{translate('catalog.entity.metadata.title')}</Heading>
+      <JsonViewer data={parsedSchema} expandLevel={3} title="JSON" />
+    </MetadataWrapper>
+  );
+}
+
+const MetadataWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-base);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -5,43 +5,43 @@ import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
-
-const iconColor = 'var(--catalog-entity-icon-color)';
-
-const entityIconMap: Record<EntityType, JSX.Element> = {
-  service: <CodeIcon color={iconColor} />,
-  domain: <GraphIcon color={iconColor} />,
-  team: <PeopleIcon color={iconColor} />,
-  user: <UserIcon color={iconColor} />,
-  'api-description': <CodeIcon color={iconColor} />,
-  'data-schema': <CodeIcon color={iconColor} />,
-  'api-operation': <CodeIcon color={iconColor} />,
-};
+import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';
+import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
+  defaultColor?: boolean;
+};
+
+const getIconColor = (entityType: EntityType) => `var(--catalog-entity-icon-color-${entityType})`;
+
+const getEntityIcon = ({ entityType, defaultColor }: CatalogEntityIconProps) => {
+  const iconColor = defaultColor
+    ? `var(--catalog-entity-icon-color)`
+    : getIconColor(entityType as EntityType);
+
+  const entityIconMap: Record<EntityType, JSX.Element> = {
+    service: <CodeIcon color={iconColor} />,
+    domain: <GraphIcon color={iconColor} />,
+    team: <PeopleIcon color={iconColor} />,
+    user: <UserIcon color={iconColor} />,
+    'api-description': <CodeIcon color={iconColor} />,
+    'data-schema': <NetworkIcon color={iconColor} />,
+    'api-operation': <MoleculesIcon color={iconColor} />,
+  };
+
+  return entityIconMap[entityType as EntityType];
 };
 
-export function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.Element {
-  const key = entityType.toLowerCase() as EntityType;
-
-  switch (key) {
-    case 'service':
-      return entityIconMap.service;
-    case 'domain':
-      return entityIconMap.domain;
-    case 'team':
-      return entityIconMap.team;
-    case 'user':
-      return entityIconMap.user;
-    case 'api-description':
-      return entityIconMap['api-description'];
-    case 'data-schema':
-      return entityIconMap.service;
-    case 'api-operation':
-      return entityIconMap.service;
-    default:
-      const exhaustiveCheck: never = key;
-      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+export function CatalogEntityIcon({
+  entityType,
+  defaultColor = false,
+}: CatalogEntityIconProps): JSX.Element {
+  const icon = getEntityIcon({ entityType, defaultColor });
+
+  if (!icon) {
+    throw new Error(`Unhandled entity type: ${entityType}`);
   }
+
+  return icon;
 }

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -1,48 +1,43 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
-import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
-import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
-import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
-
-const getEntityIcon = (entityType: string): ReactNode => {
-  const iconColor = 'var(--catalog-entity-icon-color)';
-
-  switch (entityType.toLowerCase()) {
-    case 'service':
-      return <CodeIcon color={iconColor} />;
-    case 'domain':
-      return <GraphIcon color={iconColor} />;
-    case 'team':
-      return <PeopleIcon color={iconColor} />;
-    case 'user':
-      return <UserIcon color={iconColor} />;
-    default:
-      return <CodeIcon color={iconColor} />;
-  }
-};
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 
 export type CatalogEntityTypeIconProps = {
   entityType: string;
+  defaultColor?: boolean;
 };
 
-export function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps) {
+export function CatalogEntityTypeIcon({
+  entityType,
+  defaultColor = false,
+}: CatalogEntityTypeIconProps) {
   return (
-    <IconContainer data-component-name="Catalog/CatalogEntityTypeIcon">
-      {getEntityIcon(entityType)}
+    <IconContainer
+      data-component-name="Catalog/CatalogEntityTypeIcon"
+      entityType={entityType}
+      defaultColor={defaultColor}
+    >
+      <CatalogEntityIcon entityType={entityType} defaultColor={defaultColor} />
     </IconContainer>
   );
 }
 
-const IconContainer = styled.div`
+const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: var(--catalog-table-icon-bg-color);
+  background-color: ${({ defaultColor, entityType }) =>
+    defaultColor
+      ? 'var(--catalog-entity-bg-color)'
+      : `var(--catalog-entity-bg-color-${entityType})`};
   flex-shrink: 0;
-  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
+  border: 1px solid
+    ${({ defaultColor, entityType }) =>
+      defaultColor
+        ? 'var(--catalog-entity-border-color)'
+        : `var(--catalog-entity-border-color-${entityType})`};
 `;

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -0,0 +1,49 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { EntityType } from '@redocly/theme/core/types';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+
+export type CatalogEntityTypeTagProps = {
+  entityType: string;
+};
+
+const entityTagColorMap: Record<EntityType, string> = {
+  service: 'blue',
+  domain: 'grass',
+  team: 'purple',
+  user: 'yellow',
+  'api-description': 'sky',
+  'data-schema': 'carrot',
+  'api-operation': 'raspberry',
+};
+
+export const getEntityTagColor = (type: EntityType): string => {
+  const color = entityTagColorMap[type];
+
+  if (!color) {
+    throw new Error(`Unhandled entity type: ${type}`);
+  }
+
+  return color;
+};
+
+export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element {
+  return (
+    <EntityTypeTagWrapper
+      entityType={entityType as EntityType}
+      data-component-name="Catalog/CatalogEntityTypeTag"
+    >
+      <CatalogHighlight>{entityType}</CatalogHighlight>
+    </EntityTypeTagWrapper>
+  );
+}
+
+const EntityTypeTagWrapper = styled(Tag)<{ entityType: EntityType }>`
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+  border: 1px solid ${({ entityType }) => `var(--catalog-entity-border-color-${entityType})`};
+  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+`;

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -3,8 +3,7 @@ import styled from 'styled-components';
 
 import { breakpoints } from '@redocly/theme/core/utils';
 import { H3 } from '@redocly/theme/components/Typography/H3';
-
-import { CounterTag } from '../Tags/CounterTag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 export type CatalogPageDescriptionProps = {
   title: string;
@@ -23,9 +22,11 @@ export function CatalogPageDescription({
 }: CatalogPageDescriptionProps) {
   return (
     <CatalogPageDescriptionWrapper>
-      <CatalogTitleWrapper>
+      <CatalogTitleWrapper data-component-name="Catalog/CatalogEntityTitle">
         <CatalogTitle data-translation-key={titleTranslationKey}>{title}</CatalogTitle>
-        <CounterTag borderless>{tag}</CounterTag>
+        <Tag borderless textTransform="none">
+          {tag}
+        </Tag>
       </CatalogTitleWrapper>
       <CatalogDescription data-translation-key={descriptionTranslationKey}>
         {description}

package/src/components/Catalog/CatalogSelector.tsx

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem, getPathPrefix, SortOption, useThemeHooks } from '@redocly/theme/core';
+import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types/catalog';
+import { getPathPrefix } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export type CatalogSelectorProps = {

package/src/components/Catalog/CatalogSortButton.tsx

@@ -29,29 +29,28 @@ export function CatalogSortButton({
   );
 
   return (
-    <CatalogSortButtonWrapper
-      data-component-name="Catalog/CatalogSortButton"
-      trigger={
-        <SortTrigger>
-          <SortIconWrapper>
-            {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
-          </SortIconWrapper>
-          <SortText>Sort</SortText>
-        </SortTrigger>
-      }
-      alignment="end"
-    >
-      <DropdownMenu>
-        <DropdownMenuItem onAction={() => toggleSort('title')}>
-          {currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A'}
-        </DropdownMenuItem>
-      </DropdownMenu>
-    </CatalogSortButtonWrapper>
+    <div data-component-name="Catalog/CatalogSortButton">
+      <Dropdown
+        trigger={
+          <SortTrigger>
+            <SortIconWrapper>
+              {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
+            </SortIconWrapper>
+            <SortText>Sort</SortText>
+          </SortTrigger>
+        }
+        alignment="end"
+      >
+        <DropdownMenu>
+          <DropdownMenuItem onAction={() => toggleSort('title')}>
+            {currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A'}
+          </DropdownMenuItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
   );
 }
 
-const CatalogSortButtonWrapper = styled(Dropdown)``;
-
 const SortTrigger = styled.div`
   display: flex;
   align-items: center;

package/src/components/Catalog/CatalogTableView/CatalogDomainsCell.tsx

@@ -19,6 +19,7 @@ export function CatalogDomainsCell({ domains }: CatalogDomainsCellProps) {
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
           },
+          textTransform: 'none',
         }}
       />
     </div>

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 
 type Entity = Pick<BffCatalogEntity, 'type' | 'title' | 'summary'>;
@@ -13,11 +13,9 @@ export type CatalogEntityCellProps<T extends Entity> = {
 export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
-      <IconContainer>
-        <CatalogEntityIcon entityType={entity.type} />
-      </IconContainer>
+      <CatalogEntityTypeIcon entityType={entity.type} defaultColor={true} />
       <EntityTitleContent>
-        <EntityTitle>
+        <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>
         </EntityTitle>
         {entity.summary && (
@@ -37,18 +35,6 @@ const EntityTitleCellWrapper = styled.div`
   max-width: 100%;
 `;
 
-const IconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--catalog-table-icon-width);
-  height: var(--catalog-table-icon-height);
-  border-radius: var(--catalog-table-icon-border-radius);
-  background-color: var(--catalog-table-icon-bg-color);
-  flex-shrink: 0;
-  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
-`;
-
 const EntityTitleContent = styled.div`
   display: flex;
   flex-direction: column;

package/src/components/Catalog/CatalogTableView/CatalogOwnersCell.tsx

@@ -19,6 +19,7 @@ export function CatalogOwnersCell({ owners }: CatalogOwnersCellProps) {
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
           },
+          textTransform: 'none',
         }}
       />
     </div>

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -5,8 +5,10 @@ import { SortOption } from '@redocly/theme/core/types';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
 import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks/catalog/useCatalogTableHeaderCellActions';
-
-import { BaseEntity, CatalogColumn } from './CatalogTableView';
+import {
+  BaseEntity,
+  CatalogColumn,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
@@ -37,7 +39,7 @@ export const CatalogTableHeaderCell = <T extends BaseEntity>({
       $sortable={Boolean(column.sortable && sortKey)}
     >
       <HeaderContent>
-        <HeaderTitle>{column.title}</HeaderTitle>
+        <span>{column.title}</span>
         {column.sortable && sortKey && (
           <SortIndicator>
             <SortArrow $isActive={isUpActive}>
@@ -81,14 +83,9 @@ const TableHeaderCellWrapper = styled.div<{ $sortable: boolean }>`
 const HeaderContent = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
 `;
 
-const HeaderTitle = styled.span`
-  flex: 1;
-`;
-
 const SortIndicator = styled.div`
   display: flex;
   flex-direction: column;

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -2,14 +2,14 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { EntityType, SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
 import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogTableHeaderCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableHeaderCell';
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { CatalogTableViewRow } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableViewRow';
+import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
 export type BaseEntity = {
   id: string;
@@ -28,6 +28,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
   currentSortOption?: SortOption | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  style?: React.CSSProperties;
 };
 
 export type CatalogColumn<T> = {
@@ -40,28 +41,6 @@ export type CatalogColumn<T> = {
   sortKey?: string;
 };
 
-export const getEntityTagColor = (type: EntityType): string => {
-  switch (type) {
-    case 'service':
-      return 'blue';
-    case 'domain':
-      return 'grass';
-    case 'team':
-      return 'purple';
-    case 'user':
-      return 'yellow';
-    case 'api-description':
-      return 'sky';
-    case 'data-schema':
-      return 'sky';
-    case 'api-operation':
-      return 'sky';
-    default:
-      const exhaustiveCheck: never = type;
-      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-  }
-};
-
 const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'entity',
@@ -75,11 +54,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'type',
     title: 'Type',
-    render: (entity) => (
-      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
-        {entity.type}
-      </EntityTypeTag>
-    ),
+    render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
     width: '2fr',
     minWidth: '120px',
     sortable: true,
@@ -121,9 +96,10 @@ export const CatalogTableView = <T extends BaseEntity>({
   currentSortOption,
   handleSortClick,
   isColumnSorted,
+  style,
 }: CatalogTableViewProps<T>) => {
   return (
-    <CatalogTableWrapper data-component-name="Catalog/CatalogTableView">
+    <CatalogTableWrapper data-component-name="Catalog/CatalogTableView" style={style}>
       <CatalogTableHeader
         columnsWidths={columns.map((column) => column.width || '1fr')}
         columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
@@ -154,12 +130,6 @@ export const CatalogTableView = <T extends BaseEntity>({
   );
 };
 
-const EntityTypeTag = styled(Tag)`
-  font-size: var(--font-size-base);
-  background-color: transparent;
-  text-transform: lowercase;
-`;
-
 const CatalogTableWrapper = styled.div`
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);