feat(graph): expose functions to render pdv & error page

graph/client/src/app/ui-components/error-boundary.tsx

@@ -5,12 +5,12 @@ import {
   useEnvironmentConfig,
   usePoll,
 } from '@nx/graph/shared';
-import { ErrorRenderer } from '@nx/graph/ui-components';
 import {
   isRouteErrorResponse,
   useParams,
   useRouteError,
 } from 'react-router-dom';
+import { ErrorPage } from './error-page';
 
 export function ErrorBoundary() {
   let error = useRouteError();
@@ -63,38 +63,11 @@ export function ErrorBoundary() {
   return (
     <div className="flex h-screen w-full flex-col items-center">
       {environment !== 'nx-console' && <ProjectDetailsHeader />}
-      <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8">
-        <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1>
-        <div>
-          <ErrorWithStack message={message} stack={stack} />
-        </div>
-        {hasErrorData && (
-          <div>
-            <p className="text-md mb-4 dark:text-slate-200">
-              Nx encountered the following issues while processing the project
-              graph:{' '}
-            </p>
-            <div>
-              <ErrorRenderer errors={error.data.errors} />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ErrorWithStack({
-  message,
-  stack,
-}: {
-  message: string | JSX.Element;
-  stack?: string;
-}) {
-  return (
-    <div>
-      <p className="mb-4 text-lg dark:text-slate-100">{message}</p>
-      {stack && <p className="text-sm">Error message: {stack}</p>}
+      <ErrorPage
+        message={message}
+        stack={stack}
+        errors={hasErrorData ? error.data.errors : undefined}
+      />
     </div>
   );
 }

graph/client/src/app/ui-components/error-page.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import { ErrorRenderer } from '@nx/graph/ui-components';
+import { GraphError } from 'nx/src/command-line/graph/graph';
+/* eslint-enable @nx/enforce-module-boundaries */
+
+export type ErrorPageProps = {
+  message: string | JSX.Element;
+  stack?: string;
+  errors: GraphError[];
+};
+
+export function ErrorPage({ message, stack, errors }: ErrorPageProps) {
+  return (
+    <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8">
+      <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1>
+      <div>
+        <ErrorWithStack message={message} stack={stack} />
+      </div>
+      {errors && (
+        <div>
+          <p className="text-md mb-4 dark:text-slate-200">
+            Nx encountered the following issues while processing the project
+            graph:{' '}
+          </p>
+          <div>
+            <ErrorRenderer errors={errors} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ErrorWithStack({
+  message,
+  stack,
+}: {
+  message: string | JSX.Element;
+  stack?: string;
+}) {
+  return (
+    <div>
+      <p className="mb-4 text-lg dark:text-slate-100">{message}</p>
+      {stack && <p className="text-sm">Error message: {stack}</p>}
+    </div>
+  );
+}

graph/client/src/globals.d.ts

@@ -20,6 +20,11 @@ export declare global {
     appConfig: AppConfig;
     useXstateInspect: boolean;
     externalApi?: ExternalApi;
+
+    // using bundled graph components directly from outside the graph app
+    __NX_RENDER_GRAPH__?: boolean;
+    renderPDV?: (data: any) => void;
+    renderError?: (data: any) => void;
   }
 }
 declare module 'cytoscape' {

graph/client/src/main.tsx

@@ -9,30 +9,58 @@ import { inspect } from '@xstate/inspect';
 import { App } from './app/app';
 import { ExternalApiImpl } from './app/external-api-impl';
 import { render } from 'preact';
+import { ErrorToastUI, ExpandedTargetsProvider } from '@nx/graph/shared';
+import { ProjectDetails } from '@nx/graph-internal/ui-project-details';
+import { ErrorPage } from './app/ui-components/error-page';
 
-if (window.useXstateInspect === true) {
-  inspect({
-    url: 'https://stately.ai/viz?inspect',
-    iframe: false, // open in new window
-  });
-}
-
-window.externalApi = new ExternalApiImpl();
-const container = document.getElementById('app');
+if (window.__NX_RENDER_GRAPH__ === false) {
+  window.renderPDV = (data: any) => {
+    const container = document.getElementById('app');
+    render(
+      <StrictMode>
+        <ExpandedTargetsProvider>
+          <ProjectDetails {...data} />
+        </ExpandedTargetsProvider>
+        <ErrorToastUI errors={data.errors} />
+      </StrictMode>,
+      container
+    );
+  };
 
-if (!window.appConfig) {
-  render(
-    <p>
-      No environment could be found. Please run{' '}
-      <pre>npx nx run graph-client:generate-dev-environment-js</pre>.
-    </p>,
-    container
-  );
+  window.renderError = (data: any) => {
+    const container = document.getElementById('app');
+    render(
+      <StrictMode>
+        <ErrorPage {...data} />
+      </StrictMode>,
+      container
+    );
+  };
 } else {
-  render(
-    <StrictMode>
-      <App />
-    </StrictMode>,
-    container
-  );
+  if (window.useXstateInspect === true) {
+    inspect({
+      url: 'https://stately.ai/viz?inspect',
+      iframe: false, // open in new window
+    });
+  }
+
+  window.externalApi = new ExternalApiImpl();
+  const container = document.getElementById('app');
+
+  if (!window.appConfig) {
+    render(
+      <p>
+        No environment could be found. Please run{' '}
+        <pre>npx nx run graph-client:generate-dev-environment-js</pre>.
+      </p>,
+      container
+    );
+  } else {
+    render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+      container
+    );
+  }
 }