@redocly/theme 0.70.0-next.9 → 0.71.0-next.0

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { CatalogEntityRevision } from '@redocly/theme/core/types';
+
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { buildRevisionUrl } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type CatalogEntityRevisionItemProps = {
+  revisionItem: CatalogEntityRevision;
+  basePath: string;
+  version?: string | null;
+  /** The version's own page URL (from the host's usePageVersions). */
+  versionLink?: string;
+};
+
+export function CatalogEntityRevisionItem({
+  revisionItem,
+  basePath,
+  version,
+  versionLink,
+}: CatalogEntityRevisionItemProps): React.ReactElement {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  // The current revision links to the version's live page. Older revisions
+  // add ?revision= to that URL. Hosts without page-version links keep the
+  // legacy ?revision=&version= contract.
+  const base = versionLink ?? basePath;
+  const revisionFilter = revisionItem.isCurrent
+    ? base
+    : (buildRevisionUrl(base, revisionItem.revisionDate, versionLink ? undefined : version) ??
+      base);
+  const isActive = revisionItem.isActive ?? false;
+
+  return (
+    <RevisionItemWrapper to={revisionFilter} $isActive={isActive}>
+      <RevisionNameRow>
+        <RevisionName>{revisionItem.name}</RevisionName>
+        {revisionItem.isCurrent && (
+          <Tag
+            color="grey"
+            borderless
+            textTransform="none"
+            style={{
+              fontSize: 'var(--font-size-xs)',
+              borderRadius: 'var(--catalog-history-sidebar-revision-tag-border-radius)',
+            }}
+          >
+            {translate('catalog.history.revision.current', 'current')}
+          </Tag>
+        )}
+      </RevisionNameRow>
+      <RevisionDate>{revisionItem.date}</RevisionDate>
+    </RevisionItemWrapper>
+  );
+}
+
+const RevisionItemWrapper = styled(Link)<{ $isActive?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  border-radius: var(--catalog-history-sidebar-revision-item-border-radius);
+  transition: 0.2s ease;
+  color: inherit;
+  cursor: pointer;
+  background-color: ${({ $isActive }) =>
+    $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+
+  &,
+  &:hover,
+  &:focus,
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:hover {
+    background-color: ${({ $isActive }) =>
+      $isActive
+        ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
+        : 'var(--catalog-history-sidebar-revision-item-bg-color-hover)'};
+  }
+`;
+
+const RevisionNameRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+`;
+
+const RevisionName = styled.span`
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--catalog-history-sidebar-revision-name-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revision-name-color);
+`;
+
+const RevisionDate = styled.span`
+  font-family: var(--catalog-history-sidebar-revision-date-font-family);
+  font-size: var(--catalog-history-sidebar-revision-date-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-date-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-date-line-height);
+  color: var(--catalog-history-sidebar-revision-date-color);
+`;

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

@@ -0,0 +1,260 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { CatalogEntityVersionHistoryGroup } from '@redocly/theme/core/types';
+
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
+import { NavaidMilitaryIcon } from '@redocly/theme/icons/NavaidMilitaryIcon/NavaidMilitaryIcon';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { ShowMoreButton } from '@redocly/theme/components/Catalog/CatalogEntity/ShowMoreButton';
+import { CatalogEntityRevisionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem';
+import { buildRevisionUrl } from '@redocly/theme/core/utils';
+import { VERSION_NOT_SPECIFIED } from '@redocly/theme/core/constants';
+
+const MAX_INITIAL_REVISIONS = 5;
+const MAX_REVISIONS = 20;
+
+export type CatalogEntityVersionItemProps = {
+  group: CatalogEntityVersionHistoryGroup;
+  basePath: string;
+  isExpanded: boolean;
+  onToggle: (version: string) => void;
+  /** This version's own page URL (from the host's usePageVersions). */
+  versionLink?: string;
+};
+
+export function CatalogEntityVersionItem({
+  group,
+  basePath,
+  isExpanded,
+  onToggle,
+  versionLink,
+}: CatalogEntityVersionItemProps): React.ReactElement {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [showAllRevisions, setShowAllRevisions] = useState(false);
+
+  const revisions = group.revisions || [];
+  // A version with one revision links straight to its page instead of
+  // expanding.
+  const hasExpandableRevisions = revisions.length > 1;
+  const hasMoreThanMax = revisions.length > MAX_INITIAL_REVISIONS;
+  const hasMoreThanLimit = revisions.length > MAX_REVISIONS;
+  const displayedRevisions = showAllRevisions
+    ? revisions.slice(0, MAX_REVISIONS)
+    : revisions.slice(0, MAX_INITIAL_REVISIONS);
+
+  useEffect(() => {
+    if (!isExpanded) {
+      setShowAllRevisions(false);
+    }
+  }, [isExpanded]);
+
+  const isNotSpecifiedVersion = group.version === VERSION_NOT_SPECIFIED;
+
+  // Hosts without page-version links (catalog entities) keep the legacy
+  // ?revision=&version= contract.
+  const versionRowLink = hasExpandableRevisions
+    ? undefined
+    : (versionLink ?? buildRevisionUrl(basePath, group.singleRevisionDate, group.version));
+
+  const versionName = isNotSpecifiedVersion
+    ? translate('catalog.history.version.notSpecified', 'not specified')
+    : group.version;
+  const latestWord = translate('catalog.history.version.latest', 'latest');
+  // A version named "latest" already says it: no "(latest)" suffix.
+  const latestSuffix =
+    group.isDefaultVersion && versionName.toLowerCase() !== latestWord.toLowerCase()
+      ? ` (${latestWord})`
+      : '';
+  const versionTitle = `${translate('catalog.history.version.label', 'Version')}:\u00a0${versionName}${latestSuffix}`;
+
+  const versionButton = (
+    <VersionButton
+      type="button"
+      onClick={() => hasExpandableRevisions && onToggle(group.version)}
+      $isCurrent={group.isCurrent}
+    >
+      <VersionIcon $isCurrent={group.isCurrent}>
+        {group.isCurrent ? (
+          <CurrentVersionIcon />
+        ) : (
+          <NavaidMilitaryIcon size="14px" color="--catalog-history-sidebar-version-icon-color" />
+        )}
+      </VersionIcon>
+      <VersionTitle>{versionTitle}</VersionTitle>
+      {hasExpandableRevisions && (
+        <ChevronIcon>
+          {isExpanded ? (
+            <ChevronDownIcon size="12px" color="--catalog-history-sidebar-chevron-icon-color" />
+          ) : (
+            <ChevronRightIcon size="12px" color="--catalog-history-sidebar-chevron-icon-color" />
+          )}
+        </ChevronIcon>
+      )}
+    </VersionButton>
+  );
+
+  return (
+    <li>
+      {versionRowLink ? (
+        <VersionLinkWrapper to={versionRowLink}>{versionButton}</VersionLinkWrapper>
+      ) : (
+        versionButton
+      )}
+
+      {hasExpandableRevisions && isExpanded && (
+        <RevisionsList>
+          {displayedRevisions.map((revisionItem) => (
+            <CatalogEntityRevisionItem
+              key={revisionItem.name}
+              revisionItem={revisionItem}
+              basePath={basePath}
+              version={group.version}
+              versionLink={versionLink}
+            />
+          ))}
+          {hasMoreThanLimit && showAllRevisions && (
+            <RevisionsLimitMessage>
+              {translate(
+                'catalog.history.revisions.limitMessage',
+                'Older revisions are not stored.',
+              )}
+            </RevisionsLimitMessage>
+          )}
+          {hasMoreThanMax && (
+            <ShowMoreButton
+              onClick={() => setShowAllRevisions(!showAllRevisions)}
+              isExpanded={showAllRevisions}
+            >
+              {showAllRevisions
+                ? translate('catalog.history.revisions.showLess', 'Show less')
+                : translate('catalog.history.revisions.showMore', {
+                    defaultValue: 'Show more',
+                    count: Math.min(
+                      revisions.length - MAX_INITIAL_REVISIONS,
+                      MAX_REVISIONS - MAX_INITIAL_REVISIONS,
+                    ),
+                  })}
+            </ShowMoreButton>
+          )}
+        </RevisionsList>
+      )}
+    </li>
+  );
+}
+
+const VersionLinkWrapper = styled(Link)`
+  display: block;
+  color: inherit;
+
+  &,
+  &:hover,
+  &:focus,
+  &:visited {
+    text-decoration: none;
+  }
+`;
+
+const VersionButton = styled.button<{
+  $isCurrent?: boolean;
+}>`
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--catalog-history-sidebar-version-header-padding);
+  cursor: pointer;
+  border-radius: var(--catalog-history-sidebar-version-header-border-radius);
+  transition: 0.2s ease;
+  text-decoration: none;
+  color: inherit;
+  background-color: ${({ $isCurrent }) =>
+    $isCurrent ? 'var(--catalog-history-sidebar-version-header-bg-color-current)' : 'transparent'};
+
+  &:hover {
+    background-color: ${({ $isCurrent }) =>
+      $isCurrent
+        ? 'var(--catalog-history-sidebar-version-header-bg-color-current)'
+        : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'};
+  }
+`;
+
+const VersionIcon = styled.div<{ $isCurrent?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-history-sidebar-version-icon-size);
+  height: var(--catalog-history-sidebar-version-icon-size);
+  flex-shrink: 0;
+  border-radius: 50%;
+  background-color: ${({ $isCurrent }) =>
+    $isCurrent
+      ? 'var(--color-primary-base, var(--color-blueberry-6))'
+      : 'var(--catalog-avatar-bg-color)'};
+  margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
+`;
+
+const CurrentVersionIcon = styled(RadioCheckButtonIcon)`
+  width: 14px;
+  height: 14px;
+  color: var(--catalog-history-sidebar-version-icon-color-current);
+`;
+
+const VersionTitle = styled.span`
+  font-family: var(--catalog-history-sidebar-version-title-font-family);
+  font-size: var(--catalog-history-sidebar-version-title-font-size);
+  font-weight: var(--catalog-history-sidebar-version-title-font-weight);
+  line-height: var(--catalog-history-sidebar-version-title-line-height);
+  color: var(--catalog-history-sidebar-version-title-color);
+  flex-shrink: 1;
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+`;
+
+const ChevronIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+`;
+
+const RevisionsList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  padding-bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: var(--catalog-history-sidebar-revision-line-left);
+    top: 0;
+    bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
+    width: 1px;
+    background-color: var(
+      --catalog-history-sidebar-revision-line-color,
+      var(--border-color-secondary)
+    );
+  }
+`;
+
+const RevisionsLimitMessage = styled.div`
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revisions-limit-message-color);
+  text-align: center;
+`;

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

@@ -0,0 +1,78 @@
+import type { ReactNode, JSX } from 'react';
+import React from 'react';
+import styled from 'styled-components';
+
+export type CatalogEntityInfoBarProps = {
+  leftContent: ReactNode;
+  rightContent?: ReactNode;
+  withSeparator?: boolean;
+  hoverEffect?: boolean;
+  isCodeBlock?: boolean;
+};
+
+export function CatalogEntityInfoBar({
+  leftContent,
+  rightContent,
+  withSeparator = true,
+  hoverEffect = true,
+  isCodeBlock = false,
+}: CatalogEntityInfoBarProps): JSX.Element {
+  return (
+    <InfoBarWrapper
+      data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar"
+      $hoverEffect={hoverEffect}
+    >
+      <LeftColumn $withSeparator={withSeparator}>{leftContent}</LeftColumn>
+      {rightContent && <RightColumn $isCodeBlock={isCodeBlock}>{rightContent}</RightColumn>}
+    </InfoBarWrapper>
+  );
+}
+
+const InfoBarWrapper = styled.div<{ $hoverEffect: boolean }>`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: 'left right';
+  align-items: center;
+
+  color: var(--catalog-card-text-color, inherit);
+  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);
+  transition: all 0.2s ease-in-out;
+  height: 100%;
+  padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
+
+  ${({ $hoverEffect }) =>
+    $hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+      background-color: var(--bg-color-active);
+    }
+  `}
+`;
+
+const LeftColumn = styled.div<{ $withSeparator: boolean }>`
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+  width: 100%;
+  grid-area: left;
+  justify-self: start;
+  text-align: left;
+  border-right: ${({ $withSeparator }) =>
+    $withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  height: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+const RightColumn = styled.div<{ $isCodeBlock: boolean }>`
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+  grid-area: right;
+  justify-self: end;
+  text-align: right;
+  width: ${({ $isCodeBlock }) => ($isCodeBlock ? '100%' : 'auto')};
+`;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type CatalogEntityLinksProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const links = Object.entries(entity.links || []);
+
+  if (!links.length) {
+    return null;
+  }
+
+  return (
+    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
+      <Heading>{translate('catalog.links.label', 'Links')}</Heading>
+      {links.map(([key, value]) => (
+        <Link key={key} color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
+          <CatalogEntityInfoBar
+            leftContent={
+              <Label>
+                <LinkIcon /> {value.label}
+              </Label>
+            }
+            rightContent={<LaunchIcon />}
+            withSeparator={false}
+          />
+        </Link>
+      ))}
+    </LinksWrapper>
+  );
+}
+
+const LinksWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-xl);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Label = styled.span`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-unit);
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;

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

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+import { capitalize, isPlainObject } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { ShowMoreButton } from '@redocly/theme/components/Catalog/CatalogEntity/ShowMoreButton';
+
+const MAX_INITIAL_ITEMS = 4;
+
+export type CatalogEntityMetadataProps = {
+  entity: BffCatalogEntity;
+};
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+function renderMetadataValue(value: any): React.JSX.Element {
+  if (isPlainObject(value)) {
+    return <JsonViewerWrapper data={value} expandLevel={3} controls={false} />;
+  }
+
+  if (Array.isArray(value)) {
+    return (
+      <ArrayWrapper>
+        {value.map((item, index) => (
+          <div key={index}>
+            {isPlainObject(item) ? (
+              <JsonViewerWrapper data={item} expandLevel={3} controls={false} />
+            ) : (
+              <span>{String(item)}</span>
+            )}
+          </div>
+        ))}
+      </ArrayWrapper>
+    );
+  }
+
+  return <span>{String(value)}</span>;
+}
+
+export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { schema, sdl, ...metadata } = entity.metadata || {};
+  const metadataToShow = Object.entries(metadata).filter(
+    ([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'),
+  );
+  const [isOn, setIsOn] = useState(false);
+  const hasMoreItems = metadataToShow.length > MAX_INITIAL_ITEMS;
+  const visibleMetadata = isOn ? metadataToShow : metadataToShow.slice(0, MAX_INITIAL_ITEMS);
+
+  if (!metadataToShow.length) {
+    return null;
+  }
+
+  return (
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
+      <Heading>{translate('catalog.entity.metadata.title')}</Heading>
+      {visibleMetadata.map(([key, value]) => (
+        <CatalogEntityInfoBar
+          key={key}
+          leftContent={<Label>{capitalize(key)}:</Label>}
+          rightContent={<Value>{renderMetadataValue(value)}</Value>}
+          hoverEffect={false}
+          isCodeBlock={isPlainObject(value) || Array.isArray(value)}
+        />
+      ))}
+      {hasMoreItems && (
+        <ShowMoreButton onClick={() => setIsOn(!isOn)} isExpanded={isOn}>
+          {isOn ? 'Show less' : 'Show more'}
+        </ShowMoreButton>
+      )}
+    </MetadataWrapper>
+  );
+}
+
+const JsonViewerWrapper = styled(JsonViewer)`
+  text-align: left;
+`;
+
+const MetadataWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-xl);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin-bottom: var(--spacing-base);
+`;
+
+const Label = styled.span`
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+
+const Value = styled.span`
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+`;
+
+const ArrayWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type CatalogEntityMethodAndPathProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPathProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const method = entity.metadata?.method;
+  const path = entity.metadata?.path;
+
+  if (!method || !path) {
+    return null;
+  }
+
+  return (
+    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMethodAndPath">
+      <Heading>{translate('catalog.methodAndPath.label', 'Method & Path')}</Heading>
+      <CatalogEntityInfoBar
+        leftContent={
+          <Label>
+            <MethodTag color={method.toLowerCase()}>{method}</MethodTag>
+            <PathLabel>{path}</PathLabel>
+          </Label>
+        }
+        withSeparator={false}
+      />
+    </LinksWrapper>
+  );
+}
+
+const MethodTag = styled(HttpTag)`
+  width: auto;
+  justify-content: start;
+`;
+
+const PathLabel = styled.label`
+  margin-left: var(--spacing-xxs);
+`;
+
+const LinksWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-xl);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: 0 0 var(--spacing-base) 0;
+`;
+
+const Label = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;