docs(nxdev): add internal schema label (#12792)

nrwl · Oct 24, 2022 · e00c233 · e00c233 · vercel · Oct 24, 2022
1 parent b339aab
commit e00c233
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/content.tsx b/nx-dev/feature-package-schema-viewer/src/lib/content.tsx
@@ -1,3 +1,4 @@
+import { HandRaisedIcon } from '@heroicons/react/24/outline';
 import { XCircleIcon } from '@heroicons/react/24/solid';
 import { getSchemaFromReference } from '@nrwl/nx-dev/data-access-packages';
 import { JsonSchema1, NxSchema } from '@nrwl/nx-dev/models-package';
@@ -94,14 +95,23 @@ export function Content({
   return (
     <div className="min-w-0 flex-auto pt-8 pb-24 lg:pb-16">
       <div className="mb-8 flex w-full items-center space-x-2">
-        <div className="w-full flex-grow">
+        <div className="w-full flex-grow space-x-4">
           <div
             aria-hidden="true"
             data-tooltip="Schema type"
             className="relative inline-flex rounded-md border border-slate-200 bg-slate-50 px-4 py-2 text-xs font-medium uppercase dark:border-slate-700 dark:bg-slate-800/60"
           >
             {schemaViewModel.type}
           </div>
+          {schemaViewModel.hidden && (
+            <div
+              aria-hidden="true"
+              data-tooltip="Nx internal use only"
+              className="relative inline-flex rounded-md border border-red-100 bg-red-50 px-4 py-2 text-xs font-medium uppercase text-red-600 dark:border-red-900 dark:bg-red-900/30 dark:text-red-400"
+            >
+              Internal
+            </div>
+          )}
         </div>
         <div className="relative z-0 inline-flex flex-shrink-0 rounded-md shadow-sm">
           <Link href={schemaViewModel.packageUrl}>
@@ -137,6 +147,25 @@ export function Content({
       {/* We remove the top description on sub property lookup */}
       {!schemaViewModel.subReference && (
         <>
+          <div className="my-6 block rounded-md bg-red-50 p-4 ring-1 ring-red-100 dark:bg-red-900/30 dark:ring-red-900">
+            <div className="flex">
+              <div className="flex-shrink-0">
+                <HandRaisedIcon
+                  className="h-5 w-5 text-red-500"
+                  aria-hidden="true"
+                />
+              </div>
+              <div className="ml-3">
+                <div className="mt-0 block text-sm font-medium text-red-600 dark:text-red-400">
+                  Schema for internal use only
+                </div>
+                <p className="prose-sm mt-2 block text-red-700 dark:text-red-600">
+                  Please do not extend this schema as it is part of Nx internal
+                  usage.
+                </p>
+              </div>
+            </div>
+          </div>
           <div className="prose prose-slate dark:prose-invert max-w-none">
             {vm.markdown}
           </div>

diff --git a/nx-dev/feature-package-schema-viewer/src/lib/get-schema-view-model.ts b/nx-dev/feature-package-schema-viewer/src/lib/get-schema-view-model.ts
@@ -27,6 +27,7 @@ export interface SchemaViewModel {
   currentSchema: NxSchema | null;
   currentSchemaExamples: Example | Errors;
   type: 'executors' | 'generators';
+  hidden: boolean;
 }
 
 export function getSchemaViewModel(
@@ -64,5 +65,6 @@ export function getSchemaViewModel(
       );
     },
     type: schemaRequest.type,
+    hidden: schemaMetadata.hidden,
   };
 }
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx b/nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx
@@ -126,6 +126,12 @@ function SchemaListItem({
               {schema.name}
             </a>
           </Link>
+
+          {schema.hidden && (
+            <span className="ml-4 inline-flex rounded-md border border-red-100 bg-red-50 px-2 py-1 text-xs font-medium uppercase text-red-600 dark:border-red-900 dark:bg-red-900/30 dark:text-red-400">
+              Internal
+            </span>
+          )}
         </p>
         <div className="prose prose-slate dark:prose-invert prose-sm">
           {renderMarkdown({