From ff7e1aabe7ea67f49b42fbc3823f586ee62b0163 Mon Sep 17 00:00:00 2001
From: Emily Xiong <xiongemi@gmail.com>
Date: Mon, 22 Jul 2024 15:30:23 -0700
Subject: [PATCH] feat(graph): add parallelism in target details (#27014)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
![Screenshot 2024-07-19 at 4 00
37 PM](https://github.com/user-attachments/assets/10637098-2429-4672-bec9-6caacd8ca190)
![Screenshot 2024-07-19 at 3 27
54 PM](https://github.com/user-attachments/assets/11b2c280-2b26-4ba0-b83d-3b833fea2ae7)

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

(cherry picked from commit bfb0106e139cb8a61474bfa5363301fff3ac270b)
---
 .../target-configuration-details.tsx          | 28 +++++++++++++++++--
 .../src/lib/property-info-tooltip.tsx         |  9 +++++-
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
index 640708eb3a6e9..5a8b05b6294fa 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
@@ -330,9 +330,31 @@ export default function TargetConfigurationDetails({
                 />
               </FadingCollapsible>
             </>
-          ) : (
-            ''
-          )}
+          ) : null}
+
+          {targetConfiguration.parallelism === false ? (
+            <div className="group mb-4">
+              <h4 className="mb-4">
+                <Tooltip
+                  openAction="hover"
+                  content={(<PropertyInfoTooltip type="parallelism" />) as any}
+                >
+                  <span className="font-medium">
+                    <TooltipTriggerText>Parallelism</TooltipTriggerText>
+                  </span>
+                </Tooltip>
+              </h4>
+              <div className="group/line overflow-hidden whitespace-nowrap pl-5">
+                <TargetConfigurationProperty data={{ paralelism: false }}>
+                  <TargetSourceInfo
+                    className="min-w-0 flex-1 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100"
+                    propertyKey={`targets.${targetName}.parallelism`}
+                    sourceMap={sourceMap}
+                  />
+                </TargetConfigurationProperty>
+              </div>
+            </div>
+          ) : null}
         </div>
       )}
     </div>
diff --git a/graph/ui-tooltips/src/lib/property-info-tooltip.tsx b/graph/ui-tooltips/src/lib/property-info-tooltip.tsx
index 06e90d9923b41..2d12ae6a81db1 100644
--- a/graph/ui-tooltips/src/lib/property-info-tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/property-info-tooltip.tsx
@@ -10,7 +10,8 @@ type PropertyInfoTooltipType =
   | 'dependsOn'
   | 'options'
   | 'configurations'
-  | 'release';
+  | 'release'
+  | 'parallelism';
 
 type PropertyInfoTooltipTypeOptions = {
   docsUrl?: string;
@@ -81,6 +82,12 @@ const PROPERTY_INFO_TOOLTIP_TYPE_OPTIONS: Record<
       "The nx-release-publish target is used to publish your project with nxrelease. Don't invoke this directly - use nx release publish instead.",
     docsUrl: 'https://nx.dev/nx-api/nx/documents/release',
   },
+  parallelism: {
+    heading: 'Parallelism',
+    description:
+      'By default, tasks are run in parallel with other tasks. Setting `"parallelism": false` ensures that the target will not run in parallel with other tasks on the same machine.',
+    docsUrl: 'https://nx.dev/reference/project-configuration#parallelism',
+  },
 };
 
 export function PropertyInfoTooltip({ type }: PropertyInfoTooltipProps) {