fix(graph): fix "args" help tooltip in pdv and only show "args" usage…

… in fallback example (#27808)

<!-- 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 -->

The help tooltip for an example using `args` is misleading. It states
that `args` are CLI positional arguments, but they can also be CLI
flags.
Additionally, the fallback example shows an example using `options`,
which has a few caveats.

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

The help tooltip for an example using `args` should state that `args`
are CLI flags or positional arguments.
The fallback example should show only an example using `args` to reduce
the likelihood of users bumping into any of the caveats of using
`options`, which could be frustrating.

Note: a separate change to the docs will be made to explicitly call out
these caveats. Users would still be able to use `options`, but it
shouldn't be the recommended way of providing args unless they are well
aware of the caveats.

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

Fixes #

(cherry picked from commit 27b8649)

graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx

@@ -16,10 +16,7 @@ interface ShowOptionsHelpProps {
 }
 
 const fallbackHelpExample = {
-  options: {
-    silent: true,
-  },
-  args: ['foo'],
+  args: ['foo', '--bar="baz"'],
 };
 
 export function ShowOptionsHelp({
@@ -151,10 +148,10 @@ export function ShowOptionsHelp({
                   )}
                   {helpExampleArgs && (
                     <p className="mb-2">
-                      The <code>args</code> are CLI positional arguments, such
-                      as <code>ls somedir</code>, where you would use{' '}
-                      <code>{'"args": ["somedir"]'}</code> to set it in the
-                      target configuration.
+                      The <code>args</code> are CLI flags or positional
+                      arguments, such as <code>ls -la somedir</code>, where you
+                      would use <code>{'"args": ["-la", "somedir"]'}</code> to
+                      set it in the target configuration.
                     </p>
                   )}
                 </div>