docs(nx-dev): update remote cache page (#30902)

Updates texts and remote cache UI with "recommended" label.
This commit is contained in:
Benjamin Cabanes 2025-04-28 16:20:17 -04:00 committed by GitHub
parent eb54b1d249
commit a3a17531d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 56 additions and 29 deletions

View File

@ -54,7 +54,7 @@ export function CiAccess(): ReactElement {
aria-hidden="true"
className="absolute left-1 top-1 h-5 w-5"
/>
Rotate tokens weekly (or as often as needed)
Rotate tokens as needed
</span>
</li>
<li className="relative pl-9">

View File

@ -29,8 +29,8 @@ export function WhyCiSecurityMatters(): ReactElement {
Why CI Security Matters
</SectionHeading>
<SectionHeading as="p" variant="subtitle" className="mt-6">
CI pipelines are a growing target and your cache is a critical
entry point.
CI pipelines are often an overlooked threat and your cache is a
critical entry point.
</SectionHeading>
<SectionDescription as="p" className="mt-6">

View File

@ -75,6 +75,29 @@ export function Faq(): ReactElement {
</p>
),
},
{
question: 'Is my self-hosted cache setup secure enough?',
answerJson:
'Most self-hosted cache setups offer basic functionality but lack critical security features. Without enforced input validation, branch isolation, and real-time access control, self-hosted caches are vulnerable to cache poisoning, where compromised or unverified artifacts can silently pollute your builds. We recommend using Nx Cloud, which provides infrastructure-level protections, making it a safer choice for organizations in highly regulated industries.',
answerUi: (
<p>
Most self-hosted cache setups offer basic functionality but lack
critical security features. Without enforced input validation, branch
isolation, and real-time access control, self-hosted caches are
vulnerable to cache poisoning, where compromised or unverified
artifacts can silently pollute your builds. We recommend using Nx
Cloud, which provides infrastructure-level protections, making it a
safer choice for organizations in highly regulated industries.{' '}
<Link
href="/enterprise/security"
title="Learn more"
className="font-semibold"
>
Learn more here.
</Link>
</p>
),
},
{
question:
'What security measures does Nx Cloud offer beyond the official plugins and third party plugins?',

View File

@ -1,10 +1,12 @@
'use client';
import { ReactElement } from 'react';
import { CheckCircleIcon } from '@heroicons/react/24/solid';
import {
CheckCircleIcon,
ExclamationCircleIcon,
} from '@heroicons/react/24/solid';
import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
import Link from 'next/link';
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
export function RemoteCacheSolutions(): ReactElement {
return (
@ -22,15 +24,17 @@ export function RemoteCacheSolutions(): ReactElement {
<div className="-mt-16 grid max-w-full grid-cols-1 gap-12 sm:mx-auto lg:mt-0 lg:grid-cols-3 xl:-mx-4">
{/* NX CLOUD */}
<div>
<div className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-950">
<div className="relative rounded-xl border-2 border-blue-500 bg-white p-8 dark:border-sky-500 dark:bg-slate-950">
<span className="absolute left-1/2 top-0 inline-flex -translate-x-1/2 -translate-y-6 transform items-center rounded-t-md bg-blue-500 px-2 py-1 text-xs font-medium text-white ring-1 ring-inset">
Recommended
</span>
<div className="flex items-center gap-x-2">
<h4 className="text-xl font-semibold leading-8 text-slate-950 dark:text-white">
Managed remote cache
Nx Cloud remote cache
</h4>
</div>
<p className="mt-2 text-sm">
Easiest setup, high performance, secure, fully managed by Nx
Cloud.
Easiest setup, high performance, secure, fully managed by Nx.
</p>
<div className="my-8">
<ButtonLink
@ -78,6 +82,23 @@ export function RemoteCacheSolutions(): ReactElement {
)
</span>
</li>
<li className="flex items-start justify-start gap-x-2 py-2.5">
<CheckCircleIcon
aria-hidden="true"
className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
/>
<span>
SOC-2 compliant (
<a
href="https://security.nx.app/"
title="Check our SOC 2 security report"
className="font-semibold underline"
>
view report
</a>
)
</span>
</li>
<li className="flex items-start justify-start gap-x-2 py-2.5">
<CheckCircleIcon
aria-hidden="true"
@ -111,23 +132,6 @@ export function RemoteCacheSolutions(): ReactElement {
Enterprise grade access management and key revocation
</span>
</li>
<li className="flex items-start justify-start gap-x-2 py-2.5">
<CheckCircleIcon
aria-hidden="true"
className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
/>
<span>
SOC-2 compliant (
<a
href="https://security.nx.app/"
title="Check our SOC 2 security report"
className="font-semibold underline"
>
view report
</a>
)
</span>
</li>
<li className="flex items-start justify-start gap-x-2 py-2.5">
<CheckCircleIcon
aria-hidden="true"
@ -158,8 +162,8 @@ export function RemoteCacheSolutions(): ReactElement {
</h4>
</div>
<p className="mt-2 text-sm">
Dedicated NPM packages for major storage providers, Nx
managed.
Dedicated NPM packages for major storage providers, maintained
by Nx.
</p>
<div className="my-8">
<ButtonLink
@ -191,7 +195,7 @@ export function RemoteCacheSolutions(): ReactElement {
<li className="flex items-start justify-start gap-x-2 py-2.5">
<ExclamationCircleIcon
aria-hidden="true"
className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
className="h-6 w-5 flex-none text-yellow-600 dark:text-yellow-500"
/>
<span>
Not recommended for organizations requiring HIPAA or SOC-2