feat(openapi): support dynamic API service icon (#2174)

* feat(openapi): support dynamic API spec icon

* feat: use vault icon for HCP Vault Secrets

src/pages/hcp/api-docs/vault-secrets/[[...page]].tsx

@@ -25,6 +25,7 @@ import type {
  */
 const PAGE_CONFIG: OpenApiDocsPageConfig = {
 	productSlug: 'hcp',
+	serviceProductSlug: 'vault',
 	basePath: '/hcp/api-docs/vault-secrets',
 	githubSourceDirectory: {
 		owner: 'hashicorp',
@@ -98,6 +99,7 @@ export const getStaticProps: GetStaticProps<
 	return await getOpenApiDocsStaticProps({
 		basePath: PAGE_CONFIG.basePath,
 		productSlug: PAGE_CONFIG.productSlug,
+		serviceProductSlug: PAGE_CONFIG.serviceProductSlug,
 		statusIndicatorConfig: PAGE_CONFIG.statusIndicatorConfig,
 		navResourceItems: PAGE_CONFIG.navResourceItems,
 		massageSchemaForClient: PAGE_CONFIG.massageSchemaForClient,

src/views/open-api-docs-view/components/open-api-overview/index.tsx

@@ -3,17 +3,16 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// Third-party
-import { IconVaultColor16 } from '@hashicorp/flight-icons/svg-react/vault-color-16'
 // Components
 import Badge from 'components/badge'
 import IconTile from 'components/icon-tile'
+import ProductIcon from 'components/product-icon'
 // Local
 import { Status } from './components/status'
 // Types
 import type { StatusIndicatorConfig } from 'views/open-api-docs-view/types'
-// Types
 import type { ReactNode } from 'react'
+import type { ProductSlug } from 'types/products'
 // Styles
 import s from './open-api-overview.module.css'
 
@@ -31,6 +30,7 @@ export interface OpenApiOverviewProps {
 		id: string
 	}
 	badgeText: string
+	serviceProductSlug: ProductSlug
 	statusIndicatorConfig?: StatusIndicatorConfig
 	contentSlot?: ReactNode
 	className?: string
@@ -39,14 +39,15 @@ export interface OpenApiOverviewProps {
 export function OpenApiOverview({
 	heading,
 	badgeText,
+	serviceProductSlug,
 	statusIndicatorConfig,
 	contentSlot,
 }: OpenApiOverviewProps) {
 	return (
 		<div className={s.overviewWrapper}>
 			<header className={s.header}>
 				<IconTile size="medium" className={s.icon}>
-					<IconVaultColor16 />
+					<ProductIcon productSlug={serviceProductSlug} />
 				</IconTile>
 				<span>
 					<h1 id={heading.id} className={s.heading}>

src/views/open-api-docs-view/index.tsx

@@ -33,6 +33,7 @@ function OpenApiDocsView({
 	navResourceItems,
 	breadcrumbLinks,
 	statusIndicatorConfig,
+	serviceProductSlug,
 }: OpenApiDocsViewProps) {
 	return (
 		<SidebarLayout
@@ -59,6 +60,7 @@ function OpenApiDocsView({
 					<OpenApiOverview
 						heading={topOfPageHeading}
 						badgeText={releaseStage}
+						serviceProductSlug={serviceProductSlug}
 						statusIndicatorConfig={statusIndicatorConfig}
 						contentSlot={
 							descriptionMdx ? (

src/views/open-api-docs-view/server.ts

@@ -67,6 +67,7 @@ export const getStaticPaths: GetStaticPaths<OpenApiDocsParams> = async () => {
 export async function getStaticProps({
 	context,
 	productSlug,
+	serviceProductSlug = productSlug,
 	versionData,
 	basePath,
 	statusIndicatorConfig,
@@ -76,6 +77,7 @@ export async function getStaticProps({
 }: {
 	context: GetStaticPropsContext<OpenApiDocsParams>
 	productSlug: ProductSlug
+	serviceProductSlug?: ProductSlug
 	versionData: OpenApiDocsVersionData[]
 	basePath: string
 	statusIndicatorConfig?: StatusIndicatorConfig
@@ -149,6 +151,7 @@ export async function getStaticProps({
 				title: schemaData.info.title,
 			},
 			productData,
+			serviceProductSlug,
 			topOfPageHeading: {
 				text: schemaData.info.title,
 				id: topOfPageId,

src/views/open-api-docs-view/types.ts

@@ -171,6 +171,14 @@ export interface OpenApiDocsViewProps {
 	 * Some temporary data we'll remove for the production implementation.
 	 */
 	_placeholder: $TSFixMe
+
+	/**
+	 * Product slug to use for the theming of the service itself.
+	 * For example, many product-themed services exist within the broader
+	 * HCP product context. In those cases, the API docs pages would have
+	 * `productData` for `hcp`, and a different `serviceProductSlug` here.
+	 */
+	serviceProductSlug: ProductSlug
 }
 
 /**
@@ -181,6 +189,15 @@ export interface OpenApiDocsPageConfig {
 	 * The product slug is used to fetch product data for the layout.
 	 */
 	productSlug: ProductSlug
+
+	/**
+	 * Optional slug used to theme smaller elements within the service API docs.
+	 * For example, HCP consul will have a `productSlug` of `hcp`,
+	 * but a `serviceProductSlug` of `consul`. If omitted, the `productSlug`
+	 * will be used.
+	 */
+	serviceProductSlug?: ProductSlug
+
 	/**
 	 * The baseUrl is used to generate
 	 * breadcrumb links, sidebar nav levels, and version switcher links.