@redocly/theme 0.64.0-next.1 → 0.64.0-next.2

package/src/components/Catalog/CatalogEntities.tsx

@@ -2,7 +2,7 @@ import React, { JSX, useEffect } from 'react';
 
 import type { CatalogEntityConfig } from '@redocly/config';
 
-import { BffCatalogEntity, BffCatalogEntityList, SortOption } from '@redocly/theme/core/types';
+import { BffCatalogEntity, BffCatalogEntityList } from '@redocly/theme/core/types';
 import {
   useThemeHooks,
   useCatalogEntities,
@@ -24,7 +24,7 @@ export type CatalogEntitiesProps = {
   viewMode: string;
   setEntitiesCounter: (counter: number) => void;
   initialEntitiesList?: BffCatalogEntityList;
-  sortOption: SortOption | null;
+  sortOption: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -66,7 +66,7 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
         initialFilter && filterQuery
           ? `(${initialFilter}) AND (${filterQuery})`
           : initialFilter || filterQuery,
-      sort: sortOption || undefined,
+      sort: sortOption || (viewMode === 'table' ? 'updated_at' : 'type,title'),
       search: searchQuery,
     },
     props.initialEntitiesList,

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

@@ -2,12 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { Route, Routes, useSearchParams } from 'react-router-dom';
 
-import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  BffCatalogRelatedEntityList,
-} from '@redocly/theme/core/types';
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+import type { CatalogEntityPageProps, CatalogEntityProps } from '@redocly/theme/core/types';
 
 import { breakpoints } from '@redocly/theme/core/utils';
 import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
@@ -22,24 +19,6 @@ import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/Ca
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 import { CatalogEntityHistorySidebar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 
-export type CatalogEntityProps = {
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  RedocSchema: React.ComponentType<any>;
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  StoreProvider: React.ComponentType<any>;
-  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
-};
-
-type CatalogEntityPageProps = {
-  status: 'success';
-  entity: BffCatalogEntity;
-  relatedEntity: BffCatalogRelatedEntity | null;
-  relations: BffCatalogRelatedEntityList;
-  entitiesCatalogConfig: EntitiesCatalogConfig;
-  catalogConfig: CatalogEntityConfig;
-  sharedDataIds?: Record<string, string>;
-};
-
 const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactElement => {
   switch (entity.type) {
     case 'api-operation':

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

@@ -85,7 +85,7 @@ const MetadataWrapper = styled.div`
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin-bottom: var(--spacing-base);
 `;
 
 const Label = styled.span`

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

@@ -52,7 +52,7 @@ const LinksWrapper = styled.div`
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin: 0 0 var(--spacing-base) 0;
 `;
 
 const Label = styled.div`

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

@@ -81,6 +81,7 @@ const CatalogEntityPropertiesGridWrapper = styled.div`
   display: grid;
   gap: var(--spacing-base);
   grid-template-columns: 1fr;
+  margin-bottom: var(--spacing-lg);
 
   @media screen and (min-width: ${breakpoints.small}) {
     grid-template-columns: repeat(2, 1fr);

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

@@ -64,10 +64,11 @@ const CardHeader = styled.div`
 const CardContent = styled.div`
   flex: 1;
   display: flex;
-  align-items: flex-end;
+  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);
+  font-weight: var(--font-weight-semibold);
 `;

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

@@ -2,9 +2,9 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type ContactPropertyProps = {
   entity: BffCatalogEntity;
@@ -28,18 +28,16 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
         content={
           <>
             {channels?.map((channel) => (
-              <Tag
+              <Button
                 key={channel.name}
-                textTransform="none"
-                style={{ backgroundColor: 'var(--bg-color)', cursor: 'pointer' }}
-                onClick={() => {
-                  if (channel.url) {
-                    window.open(channel.url, '_blank');
-                  }
-                }}
+                variant="outlined"
+                size="small"
+                style={{ backgroundColor: 'var(--bg-color)' }}
+                to={channel.url}
+                external={true}
               >
                 {channel.name}
-              </Tag>
+              </Button>
             ))}
           </>
         }

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

@@ -1,17 +1,19 @@
 import React, { JSX } from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useCatalogEntityLink, useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type DomainsPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, usePageProps } = useThemeHooks();
+  const { entitiesCatalogConfig } = usePageProps<CatalogEntityPageProps>();
+  const { getEntityLink } = useCatalogEntityLink(entitiesCatalogConfig);
   const { translate } = useTranslate();
 
   const { domains = [] } = entity;
@@ -28,14 +30,17 @@ export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
         content={
           <>
             {domains?.map((domain) => (
-              <Tag
+              <Button
                 key={domain?.id}
+                variant="outlined"
+                size="small"
                 style={{ backgroundColor: 'var(--bg-color)' }}
-                variant="outline"
+                to={getEntityLink(domain)}
+                icon={<GraphIcon />}
+                external={true}
               >
-                <GraphIcon />
                 {domain?.title}
-              </Tag>
+              </Button>
             ))}
           </>
         }

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

@@ -26,6 +26,7 @@ export function FormatProperty({ entity }: FormatPropertyProps): JSX.Element {
         content={
           <>
             <Tag
+              variant="outline"
               textTransform="none"
               key={entity.metadata?.specType}
               style={{ backgroundColor: 'var(--bg-color)' }}

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

@@ -1,18 +1,22 @@
 import React, { JSX } from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
+import { useCatalogEntityLink } from '@redocly/theme/core/hooks';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
 
 export type OwnersPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, usePageProps } = useThemeHooks();
   const { translate } = useTranslate();
+  const { entitiesCatalogConfig } = usePageProps<CatalogEntityPageProps>();
+  const { getEntityLink } = useCatalogEntityLink(entitiesCatalogConfig);
 
   const { owners = [] } = entity;
 
@@ -27,18 +31,26 @@ export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
         }
         content={
           <>
-            {owners.map((owner) => (
-              <Tag
-                key={owner?.id}
-                style={{
-                  backgroundColor: 'var(--bg-color)',
-                  borderRadius: 'var(--border-radius-xl)',
-                }}
-                variant="outline"
-              >
-                {owner?.title}
-              </Tag>
-            ))}
+            {owners.map((owner) => {
+              const entityLink = getEntityLink(owner);
+              return (
+                <Button
+                  key={owner?.id}
+                  variant="outlined"
+                  size="small"
+                  style={{
+                    backgroundColor: 'var(--bg-color)',
+                    borderRadius: 'var(--border-radius-xl)',
+                    paddingLeft: '2px',
+                  }}
+                  to={entityLink}
+                  icon={<CatalogAvatar value={owner?.key} size="small" />}
+                  external={true}
+                >
+                  {owner?.title}
+                </Button>
+              );
+            })}
           </>
         }
       />

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

@@ -2,7 +2,7 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -24,7 +24,7 @@ export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
           </>
         }
         content={
-          <CatalogTagsWithTooltip
+          <CatalogTags
             itemsToShow={8}
             items={entity.tags || []}
             tagProps={{

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

@@ -2,11 +2,7 @@ import React, { JSX, ReactNode } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
@@ -27,8 +23,8 @@ export type CatalogEntityApiDescriptionRelationsProps = {
   searchQuery: string;
   setSearchQuery: (query: string) => void;
   setFilter: (filter?: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -50,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
   shouldShowLoadMore,
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
-    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
+    <TabsWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
       <Tabs key={entity.id} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
@@ -121,10 +117,14 @@ export function CatalogEntityApiDescriptionRelations({
           />
         </TabItem>
       </Tabs>
-    </div>
+    </TabsWrapper>
   );
 }
 
 const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
   padding: var(--spacing-sm);
 `;
+
+const TabsWrapper = styled.div`
+  --md-tabs-container-margin: none;
+`;

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

@@ -2,17 +2,14 @@ import React, { JSX } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
+import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';
 
 export type CatalogEntityDefaultRelationsProps = {
   entity: BffCatalogEntity;
@@ -25,8 +22,8 @@ export type CatalogEntityDefaultRelationsProps = {
   };
   searchQuery: string;
   setSearchQuery: (query: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -81,7 +78,7 @@ function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalog
       render: (entity) => <CatalogEntityCell entity={entity} />,
       sortable: true,
       sortKey: 'title',
-      width: '2.5fr',
+      width: '4fr',
     },
     {
       key: 'type',
@@ -89,7 +86,7 @@ function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalog
       render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
       sortable: true,
       sortKey: 'type',
-      width: '1fr',
+      width: '2fr',
     },
     {
       key: 'relationType',
@@ -100,7 +97,18 @@ function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalog
           relationRole={entity.relationRole}
         />
       ),
+      width: '2fr',
+      sortable: true,
+      sortKey: 'relation_type',
+    },
+    {
+      key: 'lastUpdate',
+      title: 'Last update',
+      render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
       width: '1fr',
+      minWidth: '112px',
+      sortable: true,
+      sortKey: 'updated_at',
     },
   ];
 

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

@@ -32,7 +32,7 @@ export function CatalogEntityRelations({
   setSearchQuery,
 }: CatalogEntityRelationsProps): JSX.Element | null {
   const { useCatalogSort, useFetchCatalogEntitiesRelations } = useThemeHooks();
-  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort('title');
+  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
 
   const [filter, setFilter] = useState<string | undefined>(ENTITY_DEFAULT_FILTERS[entity.type]);
 

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

@@ -3,11 +3,7 @@ import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
@@ -28,8 +24,8 @@ export type CatalogEntityRelationsTableProps = {
   setSearchQuery: (query: string) => void;
   heading?: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -112,7 +108,7 @@ const CatalogEntityRelationsTableWrapper = styled.div`
 `;
 
 const Heading = styled.h2`
-  margin: var(--spacing-base) 0;
+  margin: 0 0 var(--spacing-base) 0;
   font-size: var(--font-size-md);
   color: var(--catalog-metadata-heading-color);
 `;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
-import type { BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import type { BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
@@ -24,7 +24,7 @@ export type CatalogEntityRelationsTableContentProps = {
   };
   searchQuery: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
-  sortOption: SortOption | null;
+  sortOption: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;

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

@@ -2,11 +2,7 @@ import React, { JSX, ReactNode } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
@@ -16,6 +12,7 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 import { CatalogUserEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
 import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';
 
 const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
   {
@@ -24,12 +21,12 @@ const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
     render: (entity) => (
       <CatalogUserEntityCell name={entity.title} email={entity.metadata?.email as string} />
     ),
-    width: '2fr',
+    width: '3fr',
     sortable: true,
     sortKey: 'title',
   },
   {
-    key: 'metadata',
+    key: 'metadata.role',
     title: 'Role',
     render: (entity) => (entity.metadata?.role ? <Tag>{entity.metadata?.role}</Tag> : null),
     width: '2fr',
@@ -38,7 +35,16 @@ const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
     key: 'description',
     title: 'Description',
     render: (entity) => <EntityDescription>{entity.summary}</EntityDescription>,
-    width: '3fr',
+    width: '2fr',
+  },
+  {
+    key: 'lastUpdate',
+    title: 'Last update',
+    render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
+    width: '1fr',
+    minWidth: '112px',
+    sortable: true,
+    sortKey: 'updated_at',
   },
 ];
 
@@ -55,8 +61,8 @@ export type CatalogEntityTeamRelationsProps = {
   searchQuery: string;
   setSearchQuery: (query: string) => void;
   setFilter: (filter: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;

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

@@ -40,7 +40,7 @@ export function CatalogEntitySchema({
   });
 
   return (
-    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntitySchema">
       <HeaderWrapper>
         <Heading>{translate('catalog.entity.schema.title')}</Heading>
         {!isGraphql && (
@@ -89,8 +89,7 @@ const MetadataWrapper = styled.div`
   flex-direction: column;
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
-  margin-top: var(--spacing-base);
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--spacing-lg);
 `;
 
 const SchemaContentWrapper = styled.div`
@@ -110,6 +109,8 @@ const HeaderWrapper = styled.div`
 
 const Heading = styled.h2`
   font-size: var(--catalog-metadata-heading-size);
+  line-height: var(--line-height-lg);
+  margin: 0;
 `;
 
 const SplitViewWrapper = styled.div`

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -6,33 +6,40 @@ import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeIconProps = {
   entityType: string;
-  defaultColor?: boolean;
+  defaultColors?: boolean;
+  size?: 'large' | 'medium';
 };
 
 export function CatalogEntityTypeIcon({
   entityType,
-  defaultColor = false,
+  defaultColors = false,
+  size = 'medium',
 }: CatalogEntityTypeIconProps) {
   return (
     <IconContainer
       data-component-name="Catalog/CatalogEntityTypeIcon"
       entityType={entityType}
-      defaultColor={defaultColor}
+      defaultColors={defaultColors}
+      size={size}
     >
-      <CatalogEntityIcon entityType={entityType} defaultColor={defaultColor} />
+      <CatalogEntityIcon entityType={entityType} defaultColor={false} />
     </IconContainer>
   );
 }
 
-const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
+const IconContainer = styled.div<{
+  entityType: string;
+  defaultColors: boolean;
+  size: 'large' | 'medium';
+}>`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--catalog-table-icon-width);
-  height: var(--catalog-table-icon-height);
+  width: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-width-large)' : 'var(--catalog-table-icon-width-medium)')};
+  height: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-height-large)' : 'var(--catalog-table-icon-height-medium)')};
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => {
-    if (defaultColor) {
+  background-color: ${({ defaultColors, entityType }) => {
+    if (defaultColors) {
       return 'var(--catalog-entity-bg-color)';
     }
     if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
@@ -42,8 +49,8 @@ const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
   }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) => {
-      if (defaultColor) {
+    ${({ defaultColors, entityType }) => {
+      if (defaultColors) {
         return 'var(--catalog-entity-border-color)';
       }
       if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.tsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 
 import { CatalogMobileTopBarFiltersButton } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton';
 import { CatalogMobileTopBarControls } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls';
-import { breakpoints, SortOption } from '@redocly/theme/core';
+import { breakpoints } from '@redocly/theme/core';
 import { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarProps = {
   setMobileFiltersPanelOpen: (open: boolean) => void;
   activeFiltersCount: number;
-  setSortOption: (sortOption: SortOption | null) => void;
-  sortOption: SortOption | null;
+  setSortOption: (sortOption: string | null) => void;
+  sortOption: string | null;
   viewMode: CatalogViewMode;
   setViewMode: (viewMode: CatalogViewMode) => void;
 };