fix(graph): add better pdv empty states when no targets exist (#28797)

graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx

@@ -94,3 +94,25 @@ export const TwoTargets: Story = {
     collapseAllTargets: () => {},
   } as TargetConfigurationGroupListProps,
 };
+
+export const NoTargets: Story = {
+  args: {
+    project: {
+      name: 'react',
+      type: 'lib',
+      data: {
+        root: 'libs/react',
+        targets: {},
+      },
+    },
+    sourceMap: {
+      react: ['react'],
+    },
+    variant: 'default',
+    onRunTarget: () => {},
+    onViewInTaskGraph: () => {},
+    selectedTargetGroup: 'build',
+    setExpandTargets: () => {},
+    collapseAllTargets: () => {},
+  } as TargetConfigurationGroupListProps,
+};

graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx

@@ -100,7 +100,7 @@ export function TargetConfigurationGroupList({
         </TargetConfigurationGroupContainer>
       </>
     );
-  } else {
+  } else if (targetsGroup.targets.length > 0) {
     return (
       <ul className={className}>
         {targetsGroup.targets.map((targetName) => {
@@ -122,5 +122,40 @@ export function TargetConfigurationGroupList({
         })}
       </ul>
     );
+  } else {
+    return (
+      <div className="pt-4">
+        <p className="mb-2">No targets configured.</p>
+        <p>
+          There are two ways to create targets:
+          <ul className="ml-6 mt-2 list-disc space-y-2">
+            <li>
+              <a
+                href="https://nx.dev/plugin-registry"
+                className="text-slate-500 hover:underline dark:text-slate-400"
+              >
+                Add an Nx plugin
+              </a>{' '}
+              that{' '}
+              <a
+                href="https://nx.dev/concepts/inferred-tasks"
+                className="text-slate-500 hover:underline dark:text-slate-400"
+              >
+                infers targets for you
+              </a>
+            </li>
+            <li>
+              Manually define targets in the{' '}
+              <a
+                href="https://nx.dev/reference/project-configuration#task-definitions-targets"
+                className="text-slate-500 hover:underline dark:text-slate-400"
+              >
+                project configuration targets property
+              </a>
+            </li>
+          </ul>
+        </p>
+      </div>
+    );
   }
 }