feat: update enterprise alert (#2621)

* feat: update enterprise alert * capitalize radar * PR feedback * PR feedback * revert accidental changes
hashicorp · Nov 13, 2024 · d8a2c10 · d8a2c10
1 parent 1de0d2e
commit d8a2c10
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/src/components/product-icon/index.tsx b/src/components/product-icon/index.tsx
@@ -19,6 +19,10 @@ import { IconVagrantColor16 } from '@hashicorp/flight-icons/svg-react/vagrant-co
 import { IconVagrantColor24 } from '@hashicorp/flight-icons/svg-react/vagrant-color-24'
 import { IconVault16 } from '@hashicorp/flight-icons/svg-react/vault-16'
 import { IconVault24 } from '@hashicorp/flight-icons/svg-react/vault-24'
+import { IconVaultRadarSquareColor16 } from '@hashicorp/flight-icons/svg-react/vault-radar-square-color-16'
+import { IconVaultRadarSquareColor24 } from '@hashicorp/flight-icons/svg-react/vault-radar-square-color-24'
+import { IconVaultSecretsSquareColor16 } from '@hashicorp/flight-icons/svg-react/vault-secrets-square-color-16'
+import { IconVaultSecretsSquareColor24 } from '@hashicorp/flight-icons/svg-react/vault-secrets-square-color-24'
 import { IconWaypoint16 } from '@hashicorp/flight-icons/svg-react/waypoint-16'
 import { IconWaypoint24 } from '@hashicorp/flight-icons/svg-react/waypoint-24'
 import { ProductIconProps } from './types'
@@ -56,6 +60,14 @@ const productSlugsToIcons = {
 		16: IconVault16,
 		24: IconVault24,
 	},
+	'hcp-vault-radar': {
+		16: IconVaultRadarSquareColor16,
+		24: IconVaultRadarSquareColor24,
+	},
+	'hcp-vault-secrets': {
+		16: IconVaultSecretsSquareColor16,
+		24: IconVaultSecretsSquareColor24,
+	},
 	waypoint: {
 		16: IconWaypoint16,
 		24: IconWaypoint24,

diff --git a/src/components/product-icon/types.ts b/src/components/product-icon/types.ts
@@ -8,6 +8,6 @@ import { ProductSlug } from 'types/products'
 type SvgElementProps = JSX.IntrinsicElements['svg']
 
 export interface ProductIconProps extends SvgElementProps {
-	productSlug: ProductSlug
+	productSlug: ProductSlug | 'hcp-vault-secrets' | 'hcp-vault-radar'
 	size?: 16 | 24
 }
diff --git a/...outs/sidebar-sidecar/utils/_local_platform-docs-mdx/components/enterprise-alert/index.tsx b/...outs/sidebar-sidecar/utils/_local_platform-docs-mdx/components/enterprise-alert/index.tsx
@@ -16,34 +16,50 @@ import { isProductSlug, productSlugsToNames } from 'lib/products'
 import s from './enterprise-alert.module.css'
 
 interface EnterpriseAlertProps {
-	productSlug: ProductSlug
+	product: ProductSlug | 'hcp-vault-secrets' | 'hcp-vault-radar'
 	inline?: boolean
 	className?: string
 	children?: ReactNode
+	badgeText?: string
+}
+
+const productNames = {
+	...productSlugsToNames,
+	'hcp-vault-secrets': 'HCP Vault Secrets',
+	'hcp-vault-radar': 'HCP Vault Radar',
 }
 
 export function EnterpriseAlert({
-	productSlug,
+	product,
 	inline,
 	className,
 	children,
+	badgeText,
 }: EnterpriseAlertProps) {
 	// This ensures we aren't producing invalid HTML when rendering inline alerts within MDX. When used inline, we might end up nesting a div inside of a p. This is invalid as p cannot contain block-level elements (ref: https://www.w3.org/TR/html401/struct/text.html#h-9.3.1).
 	const Element = inline ? 'span' : 'div'
-	const isValidProduct = isProductSlug(productSlug)
+	const isVaultSecretsOrRadar =
+		product === 'hcp-vault-radar' || product === 'hcp-vault-secrets'
+	const isValidProduct = isProductSlug(product) || isVaultSecretsOrRadar
 
-	if (productSlug === 'hcp') {
+	if (product === 'hcp') {
 		return null
 	}
 
 	if (!isValidProduct) {
 		throw new Error(
 			`[EnterpriseAlert]: Invalid product option passed. Expected one of ${Object.keys(
-				productSlugsToNames
+				productNames
 			).filter((slug) => slug !== 'hcp')}`
 		)
 	}
 
+	const href = isVaultSecretsOrRadar
+		? `https://www.hashicorp.com/products/vault/${product}`
+		: `https://www.hashicorp.com/products/${product}`
+
+	const plusOrEnterprise = isVaultSecretsOrRadar ? 'Plus' : 'Enterprise'
+
 	return (
 		<Element
 			className={classNames(s.root, className, {
@@ -52,8 +68,8 @@ export function EnterpriseAlert({
 		>
 			<Badge
 				className={s.badge}
-				icon={<ProductIcon productSlug={productSlug} />}
-				text="Enterprise"
+				icon={<ProductIcon productSlug={product} />}
+				text={badgeText ?? plusOrEnterprise}
 				type="outlined"
 				size="medium"
 			/>
@@ -65,12 +81,12 @@ export function EnterpriseAlert({
 						<>
 							This feature requires{' '}
 							<InlineLink
-								href={`https://www.hashicorp.com/products/${productSlug}`}
+								href={href}
 								target="_blank"
 								rel="noopener noreferrer"
 								textSize={200}
 							>
-								{productSlugsToNames[productSlug]} Enterprise
+								{productNames[product]} {plusOrEnterprise}
 							</InlineLink>
 							.
 						</>
@@ -82,14 +98,14 @@ export function EnterpriseAlert({
 }
 
 type DocsEnterpriseAlertProps = Omit<EnterpriseAlertProps, 'productSlug'> & {
-	product?: ProductSlug
+	product?: ProductSlug | 'hcp-vault-secrets' | 'hcp-vault-radar'
 }
 
 export function DocsEnterpriseAlert(props: DocsEnterpriseAlertProps) {
 	const currentProduct = useCurrentProduct()
 	return (
 		<EnterpriseAlert
-			productSlug={props.product || currentProduct.slug}
+			product={props.product ?? currentProduct.slug}
 			{...props}
 		/>
 	)