@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty.tsx

@@ -0,0 +1,33 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
+import { capitalize } from '@redocly/theme/core/utils';
+import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
+
+import { CatalogEntityPropertyCard } from './CatalogEntityPropertyCard';
+
+export type EntityTypePropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function EntityTypeProperty({ entity }: EntityTypePropertyProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <EntityTypeIcon />
+            Entity type
+          </>
+        }
+        content={
+          <>
+            <CatalogEntityTypeIcon entityType={entity.type} />
+            <strong>{capitalize(entity.type)}</strong>
+          </>
+        }
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty.tsx

@@ -0,0 +1,41 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { GithubIcon } from '@redocly/theme/icons/GithubIcon/GithubIcon';
+import { removeLeadingSlash } from '@redocly/theme/core/utils';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type GitPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
+  const git = entity.git;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/GitProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <GithubIcon />
+            Repositories
+          </>
+        }
+        content={
+          <>
+            {git?.map((repo) => {
+              const url = new URL(repo);
+              const repoName = removeLeadingSlash(url.pathname);
+              return (
+                <Tag key={repo} style={{ backgroundColor: 'var(--bg-color)' }}>
+                  {repoName}
+                </Tag>
+              );
+            })}
+          </>
+        }
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty.tsx

@@ -0,0 +1,42 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type OwnersPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
+  const { owners = [] } = entity;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <PeopleIcon />
+            Owners
+          </>
+        }
+        content={
+          <>
+            {owners.map((owner) => (
+              <Tag
+                key={owner?.id}
+                style={{
+                  backgroundColor: 'var(--bg-color)',
+                  borderRadius: 'var(--border-radius-xl)',
+                }}
+              >
+                {owner?.title}
+              </Tag>
+            ))}
+          </>
+        }
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -0,0 +1,39 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
+import { CatalogTagsWithTooltip } from '@redocly/theme';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type TagsPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <TagsIcon />
+            Tags
+          </>
+        }
+        content={
+          <CatalogTagsWithTooltip
+            itemsToShow={8}
+            items={entity.tags || []}
+            tagProps={{
+              style: {
+                fontSize: 'var(--font-size-base)',
+                borderRadius: 'var(--border-radius)',
+              },
+              borderless: true,
+              color: 'grey',
+            }}
+          />
+        }
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty.tsx

@@ -0,0 +1,31 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { Email } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
+
+export type UserEmailPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function UserEmailProperty({ entity }: UserEmailPropertyProps): JSX.Element {
+  const email = entity.metadata?.email;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <EmailIcon />
+            Email
+          </>
+        }
+        content={<Email>{email}</Email>}
+        onClick={() => {
+          window.open(`mailto:${email}`, '_blank');
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import {
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+  EntityType,
+  SortOption,
+} from '@redocly/theme/core/types';
+import {
+  CatalogColumn,
+  getEntityTagColor,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+
+const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
+  {
+    key: 'entity',
+    title: 'Entity',
+    render: (entity) => <CatalogEntityCell entity={entity} />,
+    sortable: true,
+    sortKey: 'title',
+  },
+  {
+    key: 'type',
+    title: 'Type',
+    render: (entity) => (
+      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
+        {entity.type}
+      </EntityTypeTag>
+    ),
+    sortable: true,
+    sortKey: 'type',
+  },
+];
+
+export type CatalogEntityDefaultRelationsProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+  };
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (sortOption: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  shouldShowLoadMore: boolean;
+};
+
+export function CatalogEntityDefaultRelations({
+  entity,
+  relations,
+  query,
+  searchQuery,
+  setSearchQuery,
+  entitiesCatalogConfig,
+  catalogConfig,
+  sortOption,
+  setSortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+}: CatalogEntityDefaultRelationsProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations">
+      <CatalogEntityRelationsTable
+        entity={entity}
+        catalogConfig={catalogConfig}
+        entitiesCatalogConfig={entitiesCatalogConfig}
+        relations={relations}
+        query={query}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        heading="Related entities"
+        columns={columns}
+        sortOption={sortOption}
+        setSortOption={setSortOption}
+        handleSortClick={handleSortClick}
+        isColumnSorted={isColumnSorted}
+        shouldShowLoadMore={shouldShowLoadMore}
+      />
+    </div>
+  );
+}
+
+const EntityTypeTag = styled(Tag)`
+  font-size: var(--font-size-base);
+  background-color: transparent;
+`;

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

@@ -0,0 +1,80 @@
+import React, { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+import { CatalogEntityTeamRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations';
+
+export type CatalogEntityRelationsProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  initialRelations: BffCatalogRelatedEntityList;
+};
+const LOAD_MORE_THRESHOLD = 10;
+
+export function CatalogEntityRelations({
+  entity,
+  entitiesCatalogConfig,
+  initialRelations,
+  catalogConfig,
+}: CatalogEntityRelationsProps): JSX.Element | null {
+  const { useCatalogSort, useCatalogSearch, useFetchCatalogEntitiesRelations } = useThemeHooks();
+  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
+  const { searchQuery, setSearchQuery } = useCatalogSearch();
+
+  const { items: relations, query } = useFetchCatalogEntitiesRelations(
+    { entityKey: entity.key, search: searchQuery, sort: sortOption ?? undefined },
+    initialRelations,
+  );
+
+  if (relations.length === 0) {
+    return null;
+  }
+
+  const shouldShowLoadMore =
+    query.hasNextPage ||
+    (query.isPlaceholderData && relations && relations.length >= LOAD_MORE_THRESHOLD);
+
+  switch (entity.type) {
+    case 'team':
+      return (
+        <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityTeamRelations">
+          <CatalogEntityTeamRelations
+            entity={entity}
+            catalogConfig={catalogConfig}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </div>
+      );
+    default:
+      return (
+        <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityDefaultRelations">
+          <CatalogEntityDefaultRelations
+            entity={entity}
+            catalogConfig={catalogConfig}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </div>
+      );
+  }
+}

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

@@ -0,0 +1,92 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
+import {
+  CatalogColumn,
+  CatalogTableView,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
+import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
+
+export type CatalogEntityRelationsTableProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+  };
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  heading: string;
+  filter?: 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;
+};
+
+export function CatalogEntityRelationsTable({
+  entitiesCatalogConfig,
+  catalogConfig,
+  relations,
+  query,
+  searchQuery,
+  setSearchQuery,
+  heading,
+  columns,
+  setSortOption,
+  sortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+}: 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]}>
+          <CatalogTableView
+            entities={relations}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            columns={columns}
+            setSortOption={setSortOption}
+            currentSortOption={sortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+          />
+        </HighlightContext.Provider>
+      )}
+      {shouldShowLoadMore && (
+        <LoadMore
+          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
+          onClick={query.fetchNextPage}
+          disabled={query.isFetchingNextPage}
+          blinking={query.isFetchingNextPage}
+          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
+        />
+      )}
+    </div>
+  );
+}
+
+const Heading = styled.h2`
+  margin: var(--spacing-base) 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;

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

@@ -0,0 +1,127 @@
+import React, { JSX, ReactNode } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
+import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+import { CatalogUserEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
+import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+
+const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
+  {
+    key: 'entity',
+    title: 'User name',
+    render: (entity) => (
+      <CatalogUserEntityCell name={entity.title} email={entity.metadata?.email as string} />
+    ),
+    width: '2fr',
+    sortable: true,
+    sortKey: 'title',
+  },
+  {
+    key: 'metadata',
+    title: 'Role',
+    render: (entity) => (entity.metadata?.role ? <Tag>{entity.metadata?.role}</Tag> : null),
+    width: '2fr',
+  },
+  {
+    key: 'description',
+    title: 'Description',
+    render: (entity) => <EntityDescription>{entity.summary}</EntityDescription>,
+    width: '3fr',
+  },
+];
+
+export type CatalogEntityTeamRelationsProps = {
+  entity: BffCatalogEntity;
+  catalogConfig: CatalogEntityConfig;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+    hasNextPage: boolean;
+  };
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (sortOption: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  shouldShowLoadMore: boolean;
+};
+
+export function CatalogEntityTeamRelations({
+  entity,
+  relations,
+  query,
+  searchQuery,
+  setSearchQuery,
+  entitiesCatalogConfig,
+  catalogConfig,
+  sortOption,
+  setSortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+}: CatalogEntityTeamRelationsProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+        <TabItem label="Members" icon={<PeopleIcon />}>
+          <CatalogEntityRelationsTable
+            entity={entity}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            heading="Members"
+            filter="type:user"
+            columns={teamColumns}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </TabItem>
+        <TabItem label="Related entities" icon={<EntityTypeIcon />}>
+          <CatalogEntityDefaultRelations
+            entity={entity}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </TabItem>
+      </Tabs>
+    </div>
+  );
+}
+
+const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
+  padding: 12px;
+`;
+
+const EntityDescription = styled.div`
+  font-size: var(--catalog-table-entity-summary-font-size);
+  line-height: var(--catalog-table-entity-summary-line-height);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -0,0 +1,41 @@
+import React, { JSX } from 'react';
+
+import { EntityType } from '@redocly/theme/core/types';
+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} />,
+};
+
+export type CatalogEntityIconProps = {
+  entityType: string;
+};
+
+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'];
+    default:
+      const exhaustiveCheck: never = key;
+      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+  }
+}

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } 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} />;
+  }
+};
+
+export type CatalogEntityTypeIconProps = {
+  entityType: string;
+};
+
+export function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps) {
+  return (
+    <IconContainer data-component-name="Catalog/CatalogEntityTypeIcon">
+      {getEntityIcon(entityType)}
+    </IconContainer>
+  );
+}
+
+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);
+`;