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

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

@@ -1,2 +1,6 @@
 import { JSX } from 'react';
-export declare function CatalogEntitiesEmptyState(): JSX.Element;
+interface CatalogEntitiesEmptyStateProps {
+    listType?: 'default' | 'team';
+}
+export declare function CatalogEntitiesEmptyState({ listType, }: CatalogEntitiesEmptyStateProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogEntitiesEmptyState.js

@@ -6,11 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntitiesEmptyState = CatalogEntitiesEmptyState;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function CatalogEntitiesEmptyState() {
+const HexagonIcon_1 = require("../../icons/HexagonIcon/HexagonIcon");
+function CatalogEntitiesEmptyState({ listType = 'default', }) {
+    if (listType === 'team') {
+        return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
+            react_1.default.createElement(EmptyStateIconWrapper, null,
+                react_1.default.createElement(HexagonIcon_1.HexagonIcon, { size: "21px", color: "var(--color-warm-grey-7)" })),
+            react_1.default.createElement(EmptyStateHeader, null, "No team members yet"),
+            react_1.default.createElement(EmptyStateText, null, "Your team members will appear here"),
+            react_1.default.createElement(EmptyStateText, null, "once they've been added to the team.")));
+    }
     return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
-        react_1.default.createElement(EmptyStateHeader, null, "No entities yet"),
-        react_1.default.createElement(EmptyStateText, null, "Start by adding your first entity to"),
-        react_1.default.createElement(EmptyStateText, null, "begin building your catalog.")));
+        react_1.default.createElement(EmptyStateIconWrapper, null,
+            react_1.default.createElement(HexagonIcon_1.HexagonIcon, { size: "21px", color: "var(--color-warm-grey-7)" })),
+        react_1.default.createElement(EmptyStateHeader, null, "No entities found"),
+        react_1.default.createElement(EmptyStateText, null, "Try adjusting your search criteria or"),
+        react_1.default.createElement(EmptyStateText, null, "check back later for new additions.")));
 }
 const EmptyStateWrapper = styled_components_1.default.div `
   display: flex;
@@ -21,6 +32,16 @@ const EmptyStateWrapper = styled_components_1.default.div `
   text-align: center;
   min-height: var(--catalog-empty-state-min-height);
 `;
+const EmptyStateIconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-warm-grey-2);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: var(--spacing-xxs);
+`;
 const EmptyStateHeader = styled_components_1.default.p `
   color: var(--catalog-empty-state-header-text-color);
   font-size: var(--catalog-empty-state-header-font-size);

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

@@ -20,13 +20,24 @@ const CatalogEntityRelations_1 = require("../../../components/Catalog/CatalogEnt
 const hooks_1 = require("../../../core/hooks");
 const SidebarActions_1 = require("../../../components/SidebarActions/SidebarActions");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
+const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
 function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }) {
     var _a;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
-    const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick } = useCatalog();
+    const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick, searchQuery, setSearchQuery, } = useCatalog();
+    const renderEntityContent = () => {
+        switch (entity.type) {
+            case 'data-schema':
+                return react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity });
+            case 'api-operation':
+                return react_1.default.createElement(CatalogEntityMethodAndPath_1.CatalogEntityMethodAndPath, { entity: entity });
+            default:
+                return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
+        }
+    };
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
         react_1.default.createElement(CatalogSidebar, { collapsed: collapsedSidebar, header: react_1.default.createElement(BackLink, { icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left", variant: "ghost", size: "medium", "data-component-name": "Sidebar/BackButton", to: linkToMainCatalog }, collapsedSidebar ? ('') : (react_1.default.createElement("div", { "data-translation-key": "sidebar.menu.backLabel" }, translate('sidebar.menu.backLabel')))), menu: react_1.default.createElement(Menu_1.Menu, { items: [
                     {
@@ -46,9 +57,9 @@ 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,
-                    entity.type === 'data-schema' ? (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity })) : (react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity })),
+                    renderEntityContent(),
                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
-                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations })))));
+                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })))));
 }
 const CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width);

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

@@ -1,7 +1,8 @@
 import { ReactNode, JSX } from 'react';
 export type CatalogEntityInfoBarProps = {
     leftContent: ReactNode;
-    rightContent: ReactNode;
+    rightContent?: ReactNode;
     withSeparator?: boolean;
+    hoverEffect?: boolean;
 };
-export declare function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator, }: CatalogEntityInfoBarProps): JSX.Element;
+export declare function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator, hoverEffect, }: CatalogEntityInfoBarProps): JSX.Element;

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityInfoBar = CatalogEntityInfoBar;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, }) {
-    return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar" },
+function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, hoverEffect = true, }) {
+    return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar", hoverEffect: hoverEffect },
         react_1.default.createElement(LeftColumn, { withSeparator: withSeparator }, leftContent),
-        react_1.default.createElement(RightColumn, null, rightContent)));
+        rightContent && react_1.default.createElement(RightColumn, null, rightContent)));
 }
 const InfoBarWrapper = styled_components_1.default.div `
   display: grid;
@@ -18,7 +18,7 @@ const InfoBarWrapper = styled_components_1.default.div `
   align-items: center;
 
   color: var(--catalog-card-text-color, inherit);
-  background-color: var(--catalog-card-bg-color, white);
+  background-color: var(--catalog-card-bg-color);
   border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
     var(--catalog-card-border-color);
   border-radius: var(--catalog-card-border-radius);
@@ -26,9 +26,13 @@ const InfoBarWrapper = styled_components_1.default.div `
   height: 100%;
   padding: var(--catalog-card-gap);
 
-  &:hover {
-    border-color: var(--catalog-card-border-color-hover);
-  }
+  ${({ hoverEffect }) => hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+      background-color: var(--bg-color-active);
+    }
+  `}
 `;
 const LeftColumn = styled_components_1.default.div `
   font-weight: var(--font-weight-medium);

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

@@ -7,7 +7,7 @@ exports.CatalogEntityLinks = CatalogEntityLinks;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const LaunchIcon_1 = require("../../../icons/LaunchIcon/LaunchIcon");
-const DocumentIcon_1 = require("../../../icons/DocumentIcon/DocumentIcon");
+const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
 const Link_1 = require("../../../components/Link/Link");
 function CatalogEntityLinks({ entity }) {
@@ -17,11 +17,11 @@ function CatalogEntityLinks({ entity }) {
     }
     return (react_1.default.createElement(LinksWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityLinks" },
         react_1.default.createElement(Heading, null, "Links"),
-        links.map(([key, value]) => (react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { key: key, leftContent: react_1.default.createElement(Label, null,
-                react_1.default.createElement(DocumentIcon_1.DocumentIcon, null),
-                " ",
-                value.label), rightContent: react_1.default.createElement(Link_1.Link, { color: "var(--catalog-metadata-link-color)", to: value.url, target: "_blank" },
-                react_1.default.createElement(LaunchIcon_1.LaunchIcon, null)), withSeparator: false })))));
+        links.map(([key, value]) => (react_1.default.createElement(Link_1.Link, { key: key, color: "var(--catalog-metadata-link-color)", to: value.url, target: "_blank" },
+            react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { leftContent: react_1.default.createElement(Label, null,
+                    react_1.default.createElement(LinkIcon_1.LinkIcon, null),
+                    " ",
+                    value.label), rightContent: react_1.default.createElement(LaunchIcon_1.LaunchIcon, null), withSeparator: false }))))));
 }
 const LinksWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -60,7 +60,7 @@ function CatalogEntityMetadata({ entity }) {
         react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
         visibleMetadata.map(([key, value]) => (react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { key: key, leftContent: react_1.default.createElement(Label, null,
                 (0, utils_1.capitalize)(key),
-                ":"), rightContent: react_1.default.createElement(Value, null, value) }))),
+                ":"), rightContent: react_1.default.createElement(Value, null, value), hoverEffect: false }))),
         hasMoreItems && (react_1.default.createElement(ShowMoreButton, { onClick: () => setIsOn(!isOn) },
             isOn ? 'Show less' : 'Show more',
             " ",

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

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

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityMethodAndPath = CatalogEntityMethodAndPath;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
+const HttpTag_1 = require("../../../components/Tags/HttpTag");
+function CatalogEntityMethodAndPath({ entity }) {
+    var _a, _b;
+    const method = (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.method;
+    const path = (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.path;
+    if (!method || !path) {
+        return null;
+    }
+    return (react_1.default.createElement(LinksWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMethodAndPath" },
+        react_1.default.createElement(Heading, null, "Method & Path"),
+        react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { leftContent: react_1.default.createElement(Label, null,
+                react_1.default.createElement(MethodTag, { color: method.toLowerCase() }, method),
+                path), withSeparator: false })));
+}
+const MethodTag = (0, styled_components_1.default)(HttpTag_1.HttpTag) `
+  width: auto;
+  justify-content: start;
+  margin-right: var(--spacing-xxs);
+`;
+const LinksWrapper = 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 Label = styled_components_1.default.div `
+  display: flex;
+`;
+const Heading = styled_components_1.default.h2 `
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;
+//# sourceMappingURL=CatalogEntityMethodAndPath.js.map

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ApiDescriptionProperty = ApiDescriptionProperty;
 const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importDefault(require("styled-components"));
 const theme_1 = require("../../../../index.js");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 function ApiDescriptionProperty({ entity }) {
@@ -18,8 +19,14 @@ function ApiDescriptionProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(theme_1.DocumentIcon, null),
-                translate('catalog.entity.properties.apiDescription.title')), content: react_1.default.createElement(theme_1.Tag, null, descriptionFile), onClick: () => {
+                translate('catalog.entity.properties.apiDescription.title')), content: react_1.default.createElement(theme_1.Tag, { textTransform: "none" },
+                react_1.default.createElement(DescriptionFile, null, descriptionFile)), onClick: () => {
                 navigate(`${pathPrefix}/${descriptionFile}`);
             } })));
 }
+const DescriptionFile = styled_components_1.default.span `
+  word-break: break-all;
+  overflow-wrap: break-word;
+  white-space: normal;
+`;
 //# sourceMappingURL=ApiDescriptionProperty.js.map

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

@@ -3,5 +3,6 @@ export type CatalogEntityPropertyCardProps = {
     header: ReactNode;
     content: ReactNode;
     onClick?: () => void;
+    hoverEffect?: boolean;
 };
-export declare function CatalogEntityPropertyCard({ header, content, onClick, }: CatalogEntityPropertyCardProps): JSX.Element;
+export declare function CatalogEntityPropertyCard({ header, content, onClick, hoverEffect, }: CatalogEntityPropertyCardProps): JSX.Element;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityPropertyCard = CatalogEntityPropertyCard;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function CatalogEntityPropertyCard({ header, content, onClick, }) {
-    return (react_1.default.createElement(CatalogEntityPropertyWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard", onClick: onClick },
+function CatalogEntityPropertyCard({ header, content, onClick, hoverEffect = true, }) {
+    return (react_1.default.createElement(CatalogEntityPropertyWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard", onClick: onClick, hoverEffect: hoverEffect },
         react_1.default.createElement(CardHeader, null, header),
         react_1.default.createElement(CardContent, null, content)));
 }
@@ -24,9 +24,12 @@ const CatalogEntityPropertyWrapper = styled_components_1.default.div `
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
   gap: var(--catalog-card-content-gap-vertical);
 
-  &:hover {
-    border-color: var(--catalog-card-border-color-hover);
-  }
+  ${({ hoverEffect }) => hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+    }
+  `}
 
   ${(props) => props.onClick &&
     `

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

@@ -20,6 +20,6 @@ function EntityTypeProperty({ entity }) {
                 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 }),
-                formatEntityType(entity.type)) })));
+                formatEntityType(entity.type)), hoverEffect: false })));
 }
 //# sourceMappingURL=EntityTypeProperty.js.map

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

@@ -14,6 +14,6 @@ function FormatProperty({ entity }) {
         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)) })));
+                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)), hoverEffect: false })));
 }
 //# sourceMappingURL=FormatProperty.js.map

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

@@ -19,6 +19,6 @@ function TagsProperty({ entity }) {
                     },
                     borderless: true,
                     color: 'grey',
-                } }) })));
+                } }), hoverEffect: false })));
 }
 //# sourceMappingURL=TagsProperty.js.map

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

@@ -18,5 +18,6 @@ export type CatalogEntityDefaultRelationsProps = {
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;
+    shouldShowHeading?: boolean;
 };
-export declare function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityDefaultRelationsProps): JSX.Element;
+export declare function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, shouldShowHeading, }: CatalogEntityDefaultRelationsProps): JSX.Element;

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

@@ -33,8 +33,8 @@ const columns = [
         width: '1fr',
     },
 ];
-function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
+function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, shouldShowHeading = true, }) {
     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 })));
+        react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: shouldShowHeading ? 'Related entities' : undefined, columns: columns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
 }
 //# sourceMappingURL=CatalogEntityDefaultRelations.js.map

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

@@ -6,5 +6,7 @@ export type CatalogEntityRelationsProps = {
     entitiesCatalogConfig: EntitiesCatalogConfig;
     catalogConfig: CatalogEntityConfig;
     initialRelations: BffCatalogRelatedEntityList;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
 };
-export declare function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, }: CatalogEntityRelationsProps): JSX.Element | null;
+export declare function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, searchQuery, setSearchQuery, }: CatalogEntityRelationsProps): JSX.Element | null;

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

@@ -32,16 +32,12 @@ const LOAD_MORE_THRESHOLD = 10;
 const ENTITY_DEFAULT_FILTERS = {
     team: 'type:user',
 };
-function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, }) {
+function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, searchQuery, setSearchQuery, }) {
     var _a;
-    const { useCatalogSort, useCatalogSearch, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
+    const { useCatalogSort, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
     const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
-    const { searchQuery, setSearchQuery } = useCatalogSearch();
     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;
-    }
     const shouldShowLoadMore = query.hasNextPage ||
         (query.isPlaceholderData && relations && relations.length >= LOAD_MORE_THRESHOLD);
     switch (entity.type) {

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

@@ -13,12 +13,13 @@ 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 declare function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityRelationsTableProps): JSX.Element;
+export declare function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }: CatalogEntityRelationsTableProps): JSX.Element;

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

@@ -11,12 +11,12 @@ const LoadMore_1 = require("../../../../components/LoadMore/LoadMore");
 const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
 const CatalogActionsRow_1 = require("../../../../components/Catalog/CatalogActionsRow");
 const CatalogHighlight_1 = require("../../../../components/Catalog/CatalogHighlight");
-function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
+const CatalogEntitiesEmptyState_1 = require("../../../../components/Catalog/CatalogEntitiesEmptyState");
+function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },
-        react_1.default.createElement(Heading, null, heading),
-        react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, style: { marginBottom: '12px' } }),
-        relations.length > 0 && (react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] },
-            react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted }))),
+        heading && react_1.default.createElement(Heading, null, heading),
+        (searchQuery || relations.length > 0) && (react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, style: { marginBottom: '12px' } })),
+        react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] }, relations.length > 0 ? (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 } })) : (react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, { listType: listType }))),
         shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
 }
 const Heading = styled_components_1.default.h2 `

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

@@ -48,9 +48,9 @@ function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, set
     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), 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 })))));
+                react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: `members-${relations.length}-${relations.map((r) => r.id).join(',')}`, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
+            react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: `related-${relations.length}-${relations.map((r) => r.id).join(',')}`, 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, shouldShowHeading: false })))));
 }
 const TabItem = styled_components_1.default.div `
   padding: 12px;

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -26,11 +26,13 @@ const getEntityTagColor = (type) => {
 };
 exports.getEntityTagColor = getEntityTagColor;
 function CatalogEntityTypeTag({ entityType }) {
-    return (react_1.default.createElement(EntityTypeTagWrapper, { color: (0, exports.getEntityTagColor)(entityType) }, entityType));
+    return (react_1.default.createElement(EntityTypeTagWrapper, { entityType: entityType }, entityType));
 }
 const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   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})`};
 `;
 //# sourceMappingURL=CatalogEntityTypeTag.js.map

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

@@ -17,6 +17,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> = {
     key: string;
@@ -27,4 +28,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableViewProps<T>) => React.JSX.Element;
+export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, style, }: CatalogTableViewProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -60,8 +60,8 @@ const baseColumns = [
         minWidth: '120px',
     },
 ];
-const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, }) => {
-    return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView" },
+const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, style, }) => {
+    return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style },
         react_1.default.createElement(CatalogTableHeader, { columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, setSortOption: setSortOption, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
         react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns }))))));
 };

package/lib/components/Catalog/CatalogTableView/CatalogUserEntityCell.js

@@ -9,10 +9,14 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
 const extractInitials = (name) => {
-    return name
-        .split(' ')
-        .map((n) => n[0])
-        .join('');
+    const trimmedName = name === null || name === void 0 ? void 0 : name.trim();
+    if (!trimmedName)
+        return '';
+    const initials = trimmedName.split(' ').map((n) => n[0]);
+    if (initials.length === 1) {
+        return initials[0];
+    }
+    return initials[0] + initials[initials.length - 1];
 };
 function CatalogUserEntityCell({ name, email }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogUserEntityCell" },

package/lib/components/Catalog/variables.js

@@ -105,7 +105,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-bg-color: var(--bg-color-tonal);
 
   --catalog-entity-icon-color-service: var(--color-blue-6);
-  --catalog-entity-border-color-service: var(--color-blueberry-3);
+  --catalog-entity-border-color-service: var(--color-blue-4);
   --catalog-entity-bg-color-service: var(--color-blue-1);
 
   --catalog-entity-icon-color-domain: var(--color-grass-8);

package/lib/core/hooks/use-active-section-id.d.ts

@@ -1,3 +1,3 @@
 import type { Location } from 'react-router-dom';
 export type UseActiveSectionIdReturnType = string;
-export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean, withNavbar?: boolean): UseActiveSectionIdReturnType;
+export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean, withNavbar?: boolean, sectionOffset?: number): UseActiveSectionIdReturnType;

package/lib/core/hooks/use-active-section-id.js

@@ -7,10 +7,10 @@ exports.useActiveSectionId = useActiveSectionId;
 const react_1 = require("react");
 const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 const use_navbar_height_1 = require("./use-navbar-height");
-function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true) {
+function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true, sectionOffset = 150) {
     const [itemId, setItemId] = (0, react_1.useState)('');
     const navbarHeight = (0, use_navbar_height_1.useNavbarHeight)(location);
-    const heightOffset = (withNavbar ? navbarHeight : 0) + 150; // use 150px to account next section visibility;
+    const heightOffset = (withNavbar ? navbarHeight : 0) + sectionOffset;
     const scrollListener = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)(() => {
         const sections = document.querySelectorAll('[data-section-id]');
         if (sections.length < 2) {

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;