use of outdated custom widget scaffolder by npx fixed (#2383)

Author: JMach1

src/admin/custom-widgets/customWidgetDetailsModal.tsx

@@ -17,7 +17,7 @@ import { CopyableTextField } from '../utils/components/copyableTextField';
 import { UNIQUE_REQUIRED, validateField } from '../utils/validator';
 
 interface CustomWidgetDetailsModalState {
-    isEdit: boolean, 
+    isEdit: boolean,
     customWidget: TCustomWidgetConfig,
     saveButtonDisabled: boolean,
     showInstructions: boolean,
 
     render(): JSX.Element {
         return <>
-            {this.state.showDeleteConfirmation && 
+            {this.state.showDeleteConfirmation &&
                 <DeleteConfirmationOverlay
                     deleteItemTitle={this.state.customWidget.displayName}
                     onConfirm={this.deleteCustomWidget.bind(this)}
-                    onDismiss={this.closeDeleteConfirmation.bind(this)} 
+                    onDismiss={this.closeDeleteConfirmation.bind(this)}
                 />
             }
             <Modal
                     Stack>
                 Stack>
                 <div className="admin-modal-content">
-                    {this.state.isEdit && 
+                    {this.state.isEdit &&
                         <CommandBarButton
                             iconProps={deleteIcon}
                             text="Delete"
                                 <CopyableTextField
                                     fieldLabel="downloading the code scaffold command"
                                     showLabel={false}
-                                    copyableValue={`npx @azure/api-management-custom-widgets-scaffolder --displayName="${this.state.customWidget.displayName}" --technology="${this.state.customWidget.technology}" --openUrl="${window.location.origin}"`}
+                                    copyableValue={`npx @azure/api-management-custom-widgets-scaffolder@latest --displayName="${this.state.customWidget.displayName}" --technology="${this.state.customWidget.technology}" --openUrl="${window.location.origin}"`}
                                 />
                             li>
                             <li>

src/components/custom-widget-list/developmentInstructions.ts

@@ -5,7 +5,7 @@ import { TCustomWidgetConfig } from "../custom-widget";
 import template from "./developmentInstructions.html";
 
 const buildScaffoldCommand = ({displayName, technology}: TCustomWidgetConfig): string =>
-    `npx @azure/api-management-custom-widgets-scaffolder --displayName="${displayName}" --technology="${technology}" --openUrl="${window.location.origin}"`
+    `npx @azure/api-management-custom-widgets-scaffolder@latest --displayName="${displayName}" --technology="${technology}" --openUrl="${window.location.origin}"`
 
 @Component({
     selector: "development-instructions",