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

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;
 };

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

@@ -3,12 +3,11 @@ import styled from 'styled-components';
 
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
-import { SortOption } from '@redocly/theme/core';
 import { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarControlsProps = {
-  setSortOption: (sortOption: SortOption | null) => void;
-  sortOption: SortOption | null;
+  setSortOption: (sortOption: string | null) => void;
+  sortOption: string | null;
   viewMode: CatalogViewMode;
   setViewMode: (viewMode: CatalogViewMode) => void;
 };

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -58,7 +58,7 @@ const CatalogDescription = styled.p`
   color: var(--catalog-description-text-color);
   font-weight: var(--catalog-description-font-weight);
   font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin);
+  margin: 0;
   line-height: var(--catalog-description-line-height);
   display: -webkit-box;
   -webkit-line-clamp: 3;

package/src/components/Catalog/CatalogSortButton.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { SortOption } from '@redocly/theme/core/types';
 import { AscSortIcon } from '@redocly/theme/icons/AscSortIcon/AscSortIcon';
 import { DescSortIcon } from '@redocly/theme/icons/DescSortIcon/DescSortIcon';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
@@ -10,16 +9,16 @@ import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMen
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogSortButtonProps = {
-  onSortChange: (sortOption: SortOption | null) => void;
-  currentSort?: SortOption | null;
+  onSortChange: (sortOption: string | null) => void;
+  currentSort?: string | null;
 };
 
 export function CatalogSortButton({
   onSortChange,
   currentSort,
 }: {
-  onSortChange: (sortOption: SortOption | null) => void;
-  currentSort?: SortOption | null;
+  onSortChange: (sortOption: string | null) => void;
+  currentSort?: string | null;
 }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -27,7 +26,7 @@ export function CatalogSortButton({
   const toggleSort = useCallback(
     (field: string): void => {
       const newSort = currentSort === `-${field}` ? field : `-${field}`;
-      onSortChange(newSort as SortOption);
+      onSortChange(newSort);
     },
     [currentSort, onSortChange],
   );

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 
 export type CatalogDomainsCellProps = {
   domains: string[];
@@ -9,15 +10,18 @@ export type CatalogDomainsCellProps = {
 export function CatalogDomainsCell({ domains }: CatalogDomainsCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogDomainsCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-domains-cell"
         items={domains}
         showPlaceholder={false}
         tagProps={{
+          variant: 'outline',
+          icon: <GraphIcon />,
           style: {
             fontSize: 'var(--font-size-base)',
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
+            margin: 0,
           },
           textTransform: 'none',
         }}

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

@@ -13,7 +13,7 @@ export type CatalogEntityCellProps<T extends Entity> = {
 export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
-      <CatalogEntityTypeIcon entityType={entity.type} />
+      <CatalogEntityTypeIcon entityType={entity.type} size="large" defaultColors={true} />
       <EntityTitleContent>
         <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>
@@ -40,7 +40,7 @@ const EntityTitleContent = styled.div`
   flex-direction: column;
   max-width: calc(
     100% - var(--catalog-table-entity-title-content-offset)
-  ); /* Account for icon width (30px) + gap (12px) */
+  ); /* Account for icon width (32px) + gap (8px) */
   overflow: hidden;
 `;
 

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+
+export type CatalogLastUpdateCellProps = {
+  lastModified: string;
+};
+
+function formatLastModified(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) {
+    return isoString;
+  }
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  });
+}
+
+function formatLastModifiedTooltip(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) {
+    return isoString;
+  }
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+    timeZone: 'UTC',
+  });
+}
+
+export function CatalogLastUpdateCell({
+  lastModified,
+}: CatalogLastUpdateCellProps): React.ReactElement {
+  return (
+    <CatalogLastUpdateCellWrapper data-component-name="Catalog/CatalogTableView/CatalogLastUpdateCell">
+      <Tooltip tip={formatLastModifiedTooltip(lastModified)} placement="bottom">
+        {formatLastModified(lastModified)}
+      </Tooltip>
+    </CatalogLastUpdateCellWrapper>
+  );
+}
+
+const CatalogLastUpdateCellWrapper = styled.div`
+  color: var(--text-color-helper);
+`;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 
 export type CatalogOwnersCellProps = {
   owners: string[];
@@ -9,18 +9,21 @@ export type CatalogOwnersCellProps = {
 export function CatalogOwnersCell({ owners }: CatalogOwnersCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogOwnersCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-owners-cell"
         items={owners}
         showPlaceholder={false}
         tagProps={{
+          variant: 'outline',
           style: {
             fontSize: 'var(--font-size-base)',
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
+            margin: 0,
           },
           textTransform: 'none',
         }}
+        showAvatars={true}
       />
     </div>
   );