@redocly/theme 0.56.0-next.2 → 0.56.0-next.4

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -14,6 +14,7 @@ const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRight
 const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
 const core_1 = require("../../../core");
+const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -25,8 +26,9 @@ function CatalogCard({ entity, catalogConfig }) {
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,
-                react_1.default.createElement(HeaderIconWrapper, null,
-                    react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+                react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: entity.type, placement: "bottom", className: "catalog" },
+                    react_1.default.createElement(HeaderIconWrapper, null,
+                        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type, defaultColor: true }))),
                 react_1.default.createElement(CardTitle, null,
                     react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title))),
             react_1.default.createElement(CardDescription, null,

package/lib/components/Catalog/CatalogEntity/CatalogEntity.d.ts

@@ -6,7 +6,5 @@ export type CatalogEntityProps = {
     entitiesCatalogConfig: EntitiesCatalogConfig;
     catalogConfig: CatalogEntityConfig;
     initialRelations: BffCatalogRelatedEntityList;
-    mainCatalogLabelTranslationKey?: string;
-    mainCatalogSlug?: string;
 };
-export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, mainCatalogLabelTranslationKey, mainCatalogSlug, }: CatalogEntityProps): React.JSX.Element;
+export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }: CatalogEntityProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -18,8 +18,9 @@ const Menu_1 = require("../../../components/Menu/Menu");
 const Button_1 = require("../../../components/Button/Button");
 const CatalogEntityRelations_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations");
 const hooks_1 = require("../../../core/hooks");
-const SidebarActions_1 = require("../../SidebarActions/SidebarActions");
-function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, mainCatalogLabelTranslationKey, mainCatalogSlug, }) {
+const SidebarActions_1 = require("../../../components/SidebarActions/SidebarActions");
+const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
+function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }) {
     var _a;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -38,14 +39,6 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
                 ] }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
-                    ...(mainCatalogLabelTranslationKey
-                        ? [
-                            {
-                                label: translate(mainCatalogLabelTranslationKey),
-                                link: `catalogs/${mainCatalogSlug}`,
-                            },
-                        ]
-                        : []),
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },
                     { label: entity.title },
                 ] }),
@@ -53,7 +46,7 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
                 react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                 react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
                 react_1.default.createElement(CatalogTwoColumnsSection, null,
-                    react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity }),
+                    entity.type === 'data-schema' ? (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity })) : (react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity })),
                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
                 react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations })))));
 }

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties.js

@@ -14,12 +14,18 @@ const UserEmailProperty_1 = require("../../../../components/Catalog/CatalogEntit
 const DomainsProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty");
 const OwnersProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty");
 const ContactProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty");
+const FormatProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty");
 const propertyRenderers = [
     {
         key: 'type',
         condition: (entity) => !!entity.type,
         component: EntityTypeProperty_1.EntityTypeProperty,
     },
+    {
+        key: 'format',
+        condition: (entity) => { var _a; return entity.type === 'data-schema' && !!((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType); },
+        component: FormatProperty_1.FormatProperty,
+    },
     {
         key: 'contact',
         condition: (entity) => { var _a, _b; return !!((_b = (_a = entity.contact) === null || _a === void 0 ? void 0 : _a.slack) === null || _b === void 0 ? void 0 : _b.channels); },
@@ -32,7 +38,7 @@ const propertyRenderers = [
     },
     {
         key: 'tags',
-        condition: (entity) => !!entity.tags,
+        condition: (entity) => { var _a; return !!((_a = entity.tags) === null || _a === void 0 ? void 0 : _a.length); },
         component: TagsProperty_1.TagsProperty,
     },
     {

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard.js

@@ -37,6 +37,7 @@ const CardHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: var(--catalog-card-content-gap);
+  font-weight: var(--font-weight-medium);
 `;
 const CardContent = styled_components_1.default.div `
   flex: 1;
@@ -44,5 +45,8 @@ const CardContent = styled_components_1.default.div `
   align-items: center;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
+  color: var(--text-color-primary);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-lg);
 `;
 //# sourceMappingURL=CatalogEntityPropertyCard.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomainsProperty = DomainsProperty;
 const react_1 = __importDefault(require("react"));
 const GraphIcon_1 = require("../../../../icons/GraphIcon/GraphIcon");
-const theme_1 = require("../../../../index.js");
-const CatalogEntityPropertyCard_1 = require("./CatalogEntityPropertyCard");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 function DomainsProperty({ entity }) {
     const { domains = [] } = entity;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null),
-                "Domains"), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(theme_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
+                "Domains"), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(Tag_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null), domain === null || domain === void 0 ? void 0 :
                 domain.title)))) })));
 }

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty.js

@@ -8,13 +8,18 @@ const react_1 = __importDefault(require("react"));
 const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIcon");
 const utils_1 = require("../../../../core/utils");
 const CatalogEntityTypeIcon_1 = require("../../../../components/Catalog/CatalogEntityTypeIcon");
-const CatalogEntityPropertyCard_1 = require("./CatalogEntityPropertyCard");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const formatEntityType = (entityType) => {
+    return (0, utils_1.capitalize)(entityType.startsWith('api-')
+        ? entityType.replace('api-', 'API-').replace(/-/g, ' ')
+        : entityType.replace(/-/g, ' '));
+};
 function EntityTypeProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null),
                 "Entity type"), content: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
-                react_1.default.createElement("strong", null, (0, utils_1.capitalize)(entity.type))) })));
+                formatEntityType(entity.type)) })));
 }
 //# sourceMappingURL=EntityTypeProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { BffCatalogEntity } from '../../../../core/types';
+export type FormatPropertyProps = {
+    entity: BffCatalogEntity;
+};
+export declare function FormatProperty({ entity }: FormatPropertyProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatProperty = FormatProperty;
+const react_1 = __importDefault(require("react"));
+const NotesIcon_1 = require("../../../../icons/NotesIcon/NotesIcon");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+function FormatProperty({ entity }) {
+    var _a, _b;
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty" },
+        react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(NotesIcon_1.NotesIcon, null),
+                "Format"), content: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Tag_1.Tag, { textTransform: "none", key: (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType, style: { backgroundColor: 'var(--bg-color)' } }, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.specType)) })));
+}
+//# sourceMappingURL=FormatProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.d.ts

@@ -12,6 +12,7 @@ export type CatalogEntityDefaultRelationsProps = {
     };
     searchQuery: string;
     setSearchQuery: (query: string) => void;
+    setFilter: (filter: string) => void;
     sortOption: SortOption | null;
     setSortOption: (sortOption: SortOption | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.js

@@ -5,11 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityDefaultRelations = CatalogEntityDefaultRelations;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
 const CatalogEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityCell");
-const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
+const CatalogEntityTypeTag_1 = require("../../../../components/Catalog/CatalogEntityTypeTag");
+const CatalogEntityRelationCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityRelationCell");
 const columns = [
     {
         key: 'entity',
@@ -17,21 +16,25 @@ const columns = [
         render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
         sortable: true,
         sortKey: 'title',
+        width: '2.5fr',
     },
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, CatalogTableView_1.getEntityTagColor)(entity.type) }, entity.type)),
+        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
         sortable: true,
         sortKey: 'type',
+        width: '1fr',
+    },
+    {
+        key: 'relationType',
+        title: 'Relations',
+        render: (entity) => (react_1.default.createElement(CatalogEntityRelationCell_1.CatalogEntityRelationCell, { relationType: entity.relationType, relationRole: entity.relationRole })),
+        width: '1fr',
     },
 ];
 function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations" },
         react_1.default.createElement(CatalogEntityRelationsTable_1.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 })));
 }
-const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
-  font-size: var(--font-size-base);
-  background-color: transparent;
-`;
 //# sourceMappingURL=CatalogEntityDefaultRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.js

@@ -1,19 +1,44 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelations = CatalogEntityRelations;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../../../core/hooks");
 const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
 const CatalogEntityTeamRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations");
 const LOAD_MORE_THRESHOLD = 10;
+const ENTITY_DEFAULT_FILTERS = {
+    team: 'type:user',
+};
 function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, }) {
+    var _a;
     const { useCatalogSort, useCatalogSearch, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
     const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
     const { searchQuery, setSearchQuery } = useCatalogSearch();
-    const { items: relations, query } = useFetchCatalogEntitiesRelations({ entityKey: entity.key, search: searchQuery, sort: sortOption !== null && sortOption !== void 0 ? sortOption : undefined }, initialRelations);
+    const [filter, setFilter] = (0, react_1.useState)((_a = ENTITY_DEFAULT_FILTERS[entity.type]) !== null && _a !== void 0 ? _a : '');
+    const { items: relations, query } = useFetchCatalogEntitiesRelations({ entityKey: entity.key, search: searchQuery, sort: sortOption !== null && sortOption !== void 0 ? sortOption : undefined, filter }, initialRelations);
     if (relations.length === 0) {
         return null;
     }
@@ -22,10 +47,10 @@ function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelation
     switch (entity.type) {
         case 'team':
             return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityTeamRelations" },
-                react_1.default.createElement(CatalogEntityTeamRelations_1.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 })));
+                react_1.default.createElement(CatalogEntityTeamRelations_1.CatalogEntityTeamRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
         default:
             return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityDefaultRelations" },
-                react_1.default.createElement(CatalogEntityDefaultRelations_1.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 })));
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
     }
 }
 //# sourceMappingURL=CatalogEntityRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.d.ts

@@ -14,7 +14,6 @@ export type CatalogEntityRelationsTableProps = {
     searchQuery: string;
     setSearchQuery: (query: string) => void;
     heading: string;
-    filter?: string;
     columns: CatalogColumn<BffCatalogRelatedEntity>[];
     sortOption: SortOption | null;
     setSortOption: (sortOption: SortOption | null) => void;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.d.ts

@@ -13,10 +13,11 @@ export type CatalogEntityTeamRelationsProps = {
     };
     searchQuery: string;
     setSearchQuery: (query: string) => void;
+    setFilter: (filter: 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 declare function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityTeamRelationsProps): JSX.Element;
+export declare function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityTeamRelationsProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js

@@ -13,6 +13,7 @@ const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
 const CatalogUserEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogUserEntityCell");
 const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
+const CatalogEntityRelationCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityRelationCell");
 const teamColumns = [
     {
         key: 'entity',
@@ -31,6 +32,11 @@ const teamColumns = [
         render: (entity) => { var _a, _b; return (((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.role) ? react_1.default.createElement(Tag_1.Tag, null, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.role) : null); },
         width: '2fr',
     },
+    {
+        key: 'relationType',
+        title: 'Relations',
+        render: (entity) => (react_1.default.createElement(CatalogEntityRelationCell_1.CatalogEntityRelationCell, { relationType: entity.relationType, relationRole: entity.relationRole })),
+    },
     {
         key: 'description',
         title: 'Description',
@@ -38,13 +44,13 @@ const teamColumns = [
         width: '3fr',
     },
 ];
-function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
+function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
         react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
-            react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null) },
-                react_1.default.createElement(CatalogEntityRelationsTable_1.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 })),
-            react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null) },
-                react_1.default.createElement(CatalogEntityDefaultRelations_1.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 })))));
+            react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
+                react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: "Members", columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })),
+            react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('') },
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })))));
 }
 const TabItem = styled_components_1.default.div `
   padding: 12px;

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BffCatalogEntity } from '../../../core/types';
+export type CatalogEntitySchemaProps = {
+    entity: BffCatalogEntity;
+};
+export declare function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps): React.JSX.Element | null;

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -0,0 +1,55 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntitySchema = CatalogEntitySchema;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
+function CatalogEntitySchema({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const _a = entity.metadata || {}, { schema } = _a, metadataToShow = __rest(_a, ["schema"]);
+    const metadata = Object.entries(metadataToShow);
+    if (!metadata.length) {
+        return null;
+    }
+    let parsedSchema;
+    try {
+        parsedSchema = JSON.parse(schema);
+    }
+    catch (error) {
+        return null;
+    }
+    return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
+        react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
+        react_1.default.createElement(JsonViewer_1.JsonViewer, { data: parsedSchema, expandLevel: 3, title: "JSON" })));
+}
+const MetadataWrapper = styled_components_1.default.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_components_1.default.h2 `
+  margin-bottom: var(--spacing-base);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;
+//# sourceMappingURL=CatalogEntitySchema.js.map

package/lib/components/Catalog/CatalogEntityIcon.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
 export type CatalogEntityIconProps = {
     entityType: string;
+    defaultColor?: boolean;
 };
-export declare function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.Element;
+export declare function CatalogEntityIcon({ entityType, defaultColor, }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -9,30 +9,29 @@ const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
 const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
 const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
 const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
-const iconColor = 'var(--catalog-entity-icon-color)';
-const entityIconMap = {
-    service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-    domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
-    team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
-    user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
-    'api-description': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+const NetworkIcon_1 = require("../../icons/NetworkIcon/NetworkIcon");
+const MoleculesIcon_1 = require("../../icons/MoleculesIcon/MoleculesIcon");
+const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
+const getEntityIcon = ({ entityType, defaultColor }) => {
+    const iconColor = defaultColor
+        ? `var(--catalog-entity-icon-color)`
+        : getIconColor(entityType);
+    const entityIconMap = {
+        service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+        domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
+        team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
+        user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
+        'api-description': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+        'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
+        'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
+    };
+    return entityIconMap[entityType];
 };
-function CatalogEntityIcon({ entityType }) {
-    const key = entityType.toLowerCase();
-    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 = key;
-            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+function CatalogEntityIcon({ entityType, defaultColor = false, }) {
+    const icon = getEntityIcon({ entityType, defaultColor });
+    if (!icon) {
+        throw new Error(`Unhandled entity type: ${entityType}`);
     }
+    return icon;
 }
 //# sourceMappingURL=CatalogEntityIcon.js.map

package/lib/components/Catalog/CatalogEntityTypeIcon.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export type CatalogEntityTypeIconProps = {
     entityType: string;
+    defaultColor?: boolean;
 };
-export declare function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps): React.JSX.Element;
+export declare function CatalogEntityTypeIcon({ entityType, defaultColor, }: CatalogEntityTypeIconProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -6,27 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityTypeIcon = CatalogEntityTypeIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
-const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
-const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
-const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
-const getEntityIcon = (entityType) => {
-    const iconColor = 'var(--catalog-entity-icon-color)';
-    switch (entityType.toLowerCase()) {
-        case 'service':
-            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
-        case 'domain':
-            return react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor });
-        case 'team':
-            return react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor });
-        case 'user':
-            return react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor });
-        default:
-            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
-    }
-};
-function CatalogEntityTypeIcon({ entityType }) {
-    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon" }, getEntityIcon(entityType)));
+const CatalogEntityIcon_1 = require("../../components/Catalog/CatalogEntityIcon");
+function CatalogEntityTypeIcon({ entityType, defaultColor = false, }) {
+    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColor: defaultColor },
+        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: defaultColor })));
 }
 const IconContainer = styled_components_1.default.div `
   display: flex;
@@ -35,8 +18,13 @@ const IconContainer = styled_components_1.default.div `
   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})`};
 `;
 //# sourceMappingURL=CatalogEntityTypeIcon.js.map

package/lib/components/Catalog/CatalogEntityTypeTag.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+import { EntityType } from '../../core/types';
+export type CatalogEntityTypeTagProps = {
+    entityType: string;
+};
+export declare const getEntityTagColor: (type: EntityType) => string;
+export declare function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEntityTagColor = void 0;
+exports.CatalogEntityTypeTag = CatalogEntityTypeTag;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../components/Tag/Tag");
+const entityTagColorMap = {
+    service: 'blue',
+    domain: 'grass',
+    team: 'purple',
+    user: 'yellow',
+    'api-description': 'sky',
+    'data-schema': 'carrot',
+    'api-operation': 'raspberry',
+};
+const getEntityTagColor = (type) => {
+    const color = entityTagColorMap[type];
+    if (!color) {
+        throw new Error(`Unhandled entity type: ${type}`);
+    }
+    return color;
+};
+exports.getEntityTagColor = getEntityTagColor;
+function CatalogEntityTypeTag({ entityType }) {
+    return (react_1.default.createElement(EntityTypeTagWrapper, { color: (0, exports.getEntityTagColor)(entityType) }, entityType));
+}
+const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
+//# sourceMappingURL=CatalogEntityTypeTag.js.map

package/lib/components/Catalog/CatalogPageDescription.js

@@ -8,12 +8,12 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const H3_1 = require("../../components/Typography/H3");
-const CounterTag_1 = require("../Tags/CounterTag");
+const Tag_1 = require("../../components/Tag/Tag");
 function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
     return (react_1.default.createElement(CatalogPageDescriptionWrapper, null,
         react_1.default.createElement(CatalogTitleWrapper, null,
             react_1.default.createElement(CatalogTitle, { "data-translation-key": titleTranslationKey }, title),
-            react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, tag)),
+            react_1.default.createElement(Tag_1.Tag, { borderless: true, textTransform: "none" }, tag)),
         react_1.default.createElement(CatalogDescription, { "data-translation-key": descriptionTranslationKey }, description)));
 }
 const CatalogPageDescriptionWrapper = styled_components_1.default.div `