Add dotnet local tool instructions tab (#8433)

* Update wording for .NET CLI (Global) tools
* Add .NET local tool installation instructions
* Modified one liner approach to use server-side rendering

Address #8373

Author: augustoproiete

src/NuGetGallery/ViewModels/PackageManagerViewModel.cs

@@ -30,9 +30,9 @@ public PackageManagerViewModel(string name)
         public string CommandPrefix { get; set; }
 
         /// <summary>
-        /// A string that represents the command used to install a specific package.
+        /// One or more strings that represent the command(s) used to install a specific package.
         /// </summary>
-        public string InstallPackageCommand { get; set; }
+        public string[] InstallPackageCommands { get; set; }
 
         /// <summary>
         /// The alert message that contains clarifications about the command/scenario

src/NuGetGallery/Views/Packages/DisplayPackage.cshtml

@@ -28,19 +28,32 @@
     {
         packageManagers = new PackageManagerViewModel[]
         {
-            new PackageManagerViewModel(".NET CLI")
+            new PackageManagerViewModel(".NET CLI (Global)")
             {
-                Id = "dotnet-cli",
+                Id = "dotnet-cli-global",
+                CommandPrefix = "> ",
+                InstallPackageCommands = new [] { string.Format("dotnet tool install --global {0} --version {1}", Model.Id, Model.Version) },
+                AlertLevel = AlertLevel.Info,
+                AlertMessage = "This package contains a <a href='https://aka.ms/global-tools'>.NET tool</a> you can call from the shell/command line.",
+            },
+
+            new PackageManagerViewModel(".NET CLI (Local)")
+            {
+                Id = "dotnet-cli-local",
                 CommandPrefix = "> ",
-                InstallPackageCommand = string.Format("dotnet tool install --global {0} --version {1}", Model.Id, Model.Version),
+                InstallPackageCommands = new []
+                {
+                    "dotnet new tool-manifest # if you are setting up this repo",
+                    string.Format("dotnet tool install --local {0} --version {1}", Model.Id, Model.Version),
+                },
                 AlertLevel = AlertLevel.Info,
-                AlertMessage = "This package contains a <a href='https://aka.ms/global-tools'>.NET Core Global Tool</a> you can call from the shell/command line.",
+                AlertMessage = "This package contains a <a href='https://aka.ms/global-tools'>.NET tool</a> you can call from the shell/command line.",
             },
 
             new ThirdPartyPackageManagerViewModel("Cake", "https://cakebuild.net/support/nuget")
             {
                 Id = "cake-dotnet-tool",
-                InstallPackageCommand = Model.GetCakeInstallPackageCommand(),
+                InstallPackageCommands = new [] { Model.GetCakeInstallPackageCommand() },
             },
         };
     }
@@ -52,7 +65,7 @@
             {
                 Id = "dotnet-cli",
                 CommandPrefix = "> ",
-                InstallPackageCommand = string.Format("dotnet new --install {0}::{1}", Model.Id, Model.Version),
+                InstallPackageCommands = new [] { string.Format("dotnet new --install {0}::{1}", Model.Id, Model.Version) },
                 AlertLevel = AlertLevel.Info,
                 AlertMessage = "This package contains a <a href='https://aka.ms/dotnet-new'>.NET Core Template Package</a> you can call from the shell/command line.",
             }
@@ -66,26 +79,26 @@
             {
                 Id = "package-manager",
                 CommandPrefix = "PM> ",
-                InstallPackageCommand = string.Format("Install-Package {0} -Version {1}", Model.Id, Model.Version)
+                InstallPackageCommands = new [] { string.Format("Install-Package {0} -Version {1}", Model.Id, Model.Version) },
             },
 
             new PackageManagerViewModel(".NET CLI")
             {
                 Id = "dotnet-cli",
                 CommandPrefix = "> ",
-                InstallPackageCommand = string.Format("dotnet add package {0} --version {1}", Model.Id, Model.Version)
+                InstallPackageCommands = new [] { string.Format("dotnet add package {0} --version {1}", Model.Id, Model.Version) },
             },
 
             new PackageManagerViewModel("PackageReference")
             {
                 Id = "package-reference",
-                InstallPackageCommand = Model.DevelopmentDependency
+                InstallPackageCommands = new [] { Model.DevelopmentDependency
                     ? string.Format(string.Join(Environment.NewLine,
                         "<PackageReference Include=\"{0}\" Version=\"{1}\">",
                         "  <PrivateAssets>all</PrivateAssets>",
                         "  <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>",
                         "</PackageReference>"), Model.Id, Model.Version)
-                    : string.Format("<PackageReference Include=\"{0}\" Version=\"{1}\" />", Model.Id, Model.Version),
+                    : string.Format("<PackageReference Include=\"{0}\" Version=\"{1}\" />", Model.Id, Model.Version) },
                 AlertLevel = AlertLevel.Info,
                 AlertMessage = string.Format("For projects that support <a href=\"{0}\">PackageReference</a>, copy this XML node into the project file to reference the package.",
                                              "https://docs.microsoft.com/en-us/nuget/consume-packages/package-references-in-project-files"),
@@ -96,14 +109,14 @@
             {
                 Id = "paket-cli",
                 CommandPrefix = "> ",
-                InstallPackageCommand = string.Format("paket add {0} --version {1}", Model.Id, Model.Version),
+                InstallPackageCommands = new [] { string.Format("paket add {0} --version {1}", Model.Id, Model.Version) },
             },
 
             new PackageManagerViewModel("F# Interactive")
             {
                 Id = "fsharp-interactive",
                 CommandPrefix = "> ",
-                InstallPackageCommand = string.Format("#r \"nuget: {0}, {1}\"", Model.Id, Model.Version),
+                InstallPackageCommands = new [] { string.Format("#r \"nuget: {0}, {1}\"", Model.Id, Model.Version) },
                 AlertLevel = AlertLevel.Info,
                 AlertMessage = string.Format(
                     "For F# scripts that support <a href=\"{0}\">#r syntax</a>, copy this into the source code to reference the package.",
@@ -113,7 +126,7 @@
             new ThirdPartyPackageManagerViewModel("Cake", "https://cakebuild.net/support/nuget")
             {
                 Id = Model.IsCakeExtension() ? "cake-extension" : "cake",
-                InstallPackageCommand = Model.GetCakeInstallPackageCommand()
+                InstallPackageCommands = new [] { Model.GetCakeInstallPackageCommand() },
             },
         };
     }
@@ -165,11 +178,15 @@
 @helper CommandPanel(PackageManagerViewModel packageManager, bool active)
 {
     var thirdPartyPackageManager = packageManager as ThirdPartyPackageManagerViewModel;
-
     <div role="tabpanel" class="tab-pane @(active ? "active" : string.Empty)" id="@packageManager.Id">
         <div>
             <div class="install-script-row">
-                <pre class="install-script" id="@packageManager.Id-text">@packageManager.InstallPackageCommand</pre>
+                @{
+                    var lastIndex = packageManager.InstallPackageCommands.Length - 1;
+                    var cs = packageManager.InstallPackageCommands.Select((c, i) => i < lastIndex ? c + Environment.NewLine : c);
+                }
+                @* Writing out the install command must be on a single line to avoid undesired whitespace in the <pre> tag. *@
+                <pre class="install-script" id="@packageManager.Id-text">@foreach (var c in cs) {<span class="install-command-row">@c</span>}</pre>
                 <div class="copy-button">
                     <!--In order to statisfy the requirement to announce button status both on NVDA/Narrator, other screen reader like NVDA will
                         announce the data-content "Copied" everytime when we press button, however, it won't work with Narrator when we use bootstrap popover 
@@ -1184,7 +1201,7 @@
                 continue;
             }
 
-            packageManagersCss += "#" + packageManager.Id + " .install-script::before {";
+            packageManagersCss += "#" + packageManager.Id + " .install-command-row::before {";
             packageManagersCss += "    content: \"" + packageManager.CommandPrefix + "\"";
             packageManagersCss += "}";
         }