Refactors SPFx actions. Closes #431, #430 (#468)

Adam-it · Adam-it · commit 8497b174fb29 · 2025-06-06T23:44:05.000+02:00
## 🎯 Aim The aim of this PR is to refactor SPFx actions to show progress when they are running and handle a special case when we try to install an app which is already installed to suggest either upgrade if it is the same app or remove if it is a different version of the app with the same version. ## 📷 Result ![image](https://github.com/user-attachments/assets/c52ceadd-4799-4d1d-af99-fdbbc5f26b1e) ![image](https://github.com/user-attachments/assets/10e2bbf3-18cd-42a9-96ad-a52e8c13f6a8) ## ✅ What was done - [X] Added show progress notify for all SPFx app actions - [X] Moved SPFx app actions to separate file - [X] Added handling when app installed or different app with same if installed path with quick remove or upgrade action in notify ## 🔗 Related issue I know I know... one issue one PR, but I couldn't help myself to do it in a single change 😜 Closes: #431, #430
diff --git a/src/extension.ts b/src/extension.ts
@@ -14,6 +14,7 @@ import { CHAT_PARTICIPANT_NAME, ProjectFileContent } from './constants';
 import { EntraAppRegistration } from './services/actions/EntraAppRegistration';
 import { CopilotActions } from './services/actions/CopilotActions';
 import { ChatTools } from './chat/tools/ChatTools';
+import { SpfxAppCLIActions } from './services/actions/SpfxAppCLIActions';
 
 
 export async function activate(context: vscode.ExtensionContext) {
@@ -32,6 +33,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	Dependencies.registerCommands();
 	Scaffolder.registerCommands();
 	CliActions.registerCommands();
+	SpfxAppCLIActions.registerCommands();
 	EntraAppRegistration.registerCommands(context);
 	CopilotActions.registerCommands();
 
diff --git a/src/services/actions/CliActions.ts b/src/services/actions/CliActions.ts
@@ -1,7 +1,7 @@
 import { readFileSync, writeFileSync } from 'fs';
 import { Folders } from '../check/Folders';
 import { commands, Progress, ProgressLocation, Uri, window, workspace, WorkspaceFolder } from 'vscode';
-import { Commands, ContextKeys, WebViewType, WebviewCommand, WorkflowType } from '../../constants';
+import { Commands, WebViewType, WebviewCommand, WorkflowType } from '../../constants';
 import { AppCatalogApp, GenerateWorkflowCommandInput, SiteAppCatalog, SolutionAddResult, Subscription } from '../../models';
 import { Extension } from '../dataType/Extension';
 import { CliExecuter } from '../executeWrappers/CliCommandExecuter';
@@ -16,9 +16,10 @@ import { parseYoRc } from '../../utils/parseYoRc';
 import { parseCliCommand } from '../../utils/parseCliCommand';
 import { CertificateActions } from './CertificateActions';
 import path = require('path');
-import { ActionTreeItem } from '../../providers/ActionTreeDataProvider';
 import { getExtensionSettings } from '../../utils/getExtensionSettings';
 import * as fs from 'fs';
+import { ActionTreeItem } from '../../providers/ActionTreeDataProvider';
+
 
 export class CliActions {
 
@@ -43,42 +44,6 @@ export class CliActions {
     subscriptions.push(
       commands.registerCommand(Commands.pipeline, CliActions.showGenerateWorkflowForm)
     );
-    subscriptions.push(
-      commands.registerCommand(Commands.deployAppCatalogApp, (node: ActionTreeItem) =>
-        CliActions.toggleAppDeployed(node, ContextKeys.deployApp, 'deploy')
-      )
-    );
-    subscriptions.push(
-      commands.registerCommand(Commands.retractAppCatalogApp, (node: ActionTreeItem) =>
-        CliActions.toggleAppDeployed(node, ContextKeys.retractApp, 'retract')
-      )
-    );
-    subscriptions.push(
-      commands.registerCommand(Commands.removeAppCatalogApp, CliActions.removeAppCatalogApp)
-    );
-    subscriptions.push(
-      commands.registerCommand(Commands.enableAppCatalogApp, (node: ActionTreeItem) =>
-        CliActions.toggleAppEnabled(node, ContextKeys.enableApp, 'enable')
-      )
-    );
-    subscriptions.push(
-      commands.registerCommand(Commands.disableAppCatalogApp, (node: ActionTreeItem) =>
-        CliActions.toggleAppEnabled(node, ContextKeys.disableApp, 'disable')
-      )
-    );
-    subscriptions.push(
-      commands.registerCommand(Commands.installAppCatalogApp, (node: ActionTreeItem) =>
-        CliActions.toggleAppInstalled(node, ContextKeys.installApp, 'install')
-      )
-    );
-    subscriptions.push(
-      commands.registerCommand(Commands.uninstallAppCatalogApp, (node: ActionTreeItem) =>
-        CliActions.toggleAppInstalled(node, ContextKeys.uninstallApp, 'uninstall')
-      )
-    );
-    subscriptions.push(
-      commands.registerCommand(Commands.upgradeAppCatalogApp, CliActions.upgradeAppCatalogApp)
-    );
     subscriptions.push(
       commands.registerCommand(Commands.setFormCustomizer, CliActions.setFormCustomizer)
     );
@@ -152,312 +117,6 @@ export class CliActions {
     }
   }
 
-  /**
- * Deploys or retracts the app in the tenant or site app catalog.
- *
- * @param node The tree item representing the app to be deployed or retracted.
- * @param ctxValue The context value used to identify the action node.
- * @param action The action to be performed: 'deploy' or 'retract'.
- */
-  public static async toggleAppDeployed(node: ActionTreeItem, ctxValue: string, action: 'deploy' | 'retract') {
-    try {
-      const actionNode = node.children?.find(child => child.contextValue === ctxValue);
-
-      if (!actionNode?.command?.arguments) {
-        Notifications.error(`Failed to retrieve app details for ${action}.`);
-        return;
-      }
-
-      const [appID, appTitle, appCatalogUrl, deployed] = actionNode.command.arguments;
-
-      if (action === 'deploy' && deployed) {
-        Notifications.info(`App '${appTitle}' is already deployed.`);
-        return;
-      }
-
-      if (action === 'retract' && !deployed) {
-        Notifications.info(`App '${appTitle}' is already retracted.`);
-        return;
-      }
-
-      const commandOptions: any = {
-        id: appID,
-        ...(action === 'retract' && { force: true }),
-        ...(appCatalogUrl?.trim() && {
-          appCatalogScope: 'sitecollection',
-          appCatalogUrl: appCatalogUrl
-        })
-      };
-
-      const cliCommand = action === 'deploy' ? 'spo app deploy' : 'spo app retract';
-      await CliExecuter.execute(cliCommand, 'json', commandOptions);
-      Notifications.info(`App '${appTitle}' has been successfully ${action === 'deploy' ? 'deployed' : 'retracted'}.`);
-
-      // refresh the environmentTreeView
-      await commands.executeCommand('spfx-toolkit.refreshAppCatalogTreeView');
-    } catch (e: any) {
-      const message = e?.error?.message;
-      Notifications.error(message);
-    }
-  }
-
-  /**
-  * Removes an app from the tenant or site app catalog.
-  *
-  * @param node The tree item representing the app to be removed.
-  */
-  public static async removeAppCatalogApp(node: ActionTreeItem) {
-    try {
-      const actionNode = node.children?.find(child => child.contextValue === ContextKeys.removeApp);
-
-      if (!actionNode?.command?.arguments) {
-        Notifications.error('Failed to retrieve app details for removal.');
-        return;
-      }
-
-      const [appID, appTitle, appCatalogUrl] = actionNode.command.arguments;
-
-      const shouldRemove = await window.showQuickPick(['Yes', 'No'], {
-        title: `Are you sure you want to remove the app '${appTitle}' from the app catalog?`,
-        ignoreFocusOut: true,
-        canPickMany: false
-      });
-
-      const shouldRemoveAnswer = shouldRemove === 'Yes';
-
-      if (!shouldRemoveAnswer) {
-        return;
-      }
-
-      const commandOptions: any = {
-        id: appID,
-        force: true,
-        ...(appCatalogUrl?.trim() && {
-          appCatalogScope: 'sitecollection',
-          appCatalogUrl: appCatalogUrl
-        })
-      };
-
-      await CliExecuter.execute('spo app remove', 'json', commandOptions);
-      Notifications.info(`App '${appTitle}' has been successfully removed.`);
-
-      // refresh the environmentTreeView
-      await commands.executeCommand('spfx-toolkit.refreshAppCatalogTreeView');
-    } catch (e: any) {
-      const message = e?.error?.message;
-      Notifications.error(message);
-    }
-  }
-
-  /**
-  * Upgrades an app to a newer version available in the app catalog.
-  *
-  * @param node The tree item representing the app to be upgraded.
-  */
-  public static async upgradeAppCatalogApp(node: ActionTreeItem) {
-    try {
-      const actionNode = node.children?.find(child => child.contextValue === ContextKeys.upgradeApp);
-
-      if (!actionNode?.command?.arguments) {
-        Notifications.error('Failed to retrieve app details for upgrade.');
-        return;
-      }
-
-      const [appID, appTitle, appCatalogUrl, isTenantApp] = actionNode.command.arguments;
-
-      let siteUrl: string = appCatalogUrl;
-
-      if (isTenantApp) {
-        const relativeUrl = await window.showInputBox({
-          prompt: 'Enter the relative URL of the site to upgrade the app in',
-          placeHolder: 'e.g., sites/sales or leave blank for root site',
-          validateInput: (input) => {
-            const trimmedInput = input.trim();
-
-            if (trimmedInput.startsWith('https://')) {
-              return 'Please provide a relative URL, not an absolute URL.';
-            }
-            if (trimmedInput.startsWith('/')) {
-              return 'Please provide a relative URL without a leading slash.';
-            }
-
-            return undefined;
-          }
-        });
-
-        if (relativeUrl === undefined) {
-          Notifications.warning('No site URL provided. App upgrade aborted.');
-          return;
-        }
-
-        siteUrl = `${new URL(appCatalogUrl).origin}/${relativeUrl.trim()}`;
-      }
-
-      const commandOptions: any = {
-        id: appID,
-        ...(isTenantApp
-          ? { siteUrl }
-          : { appCatalogScope: 'sitecollection', siteUrl })
-      };
-
-      await CliExecuter.execute('spo app upgrade', 'json', commandOptions);
-      Notifications.info(`App '${appTitle}' has been successfully upgraded on site '${siteUrl}'.`);
-    } catch (e: any) {
-      const message = e?.message || 'An unexpected error occurred during the app upgrade.';
-      Notifications.error(message);
-    }
-  }
-
-  /**
-   * Enables or disables the app in the tenant or site app catalog.
-   *
-   * @param node The tree item representing the app to be deployed or retracted.
-   * @param ctxValue The context value used to identify the action node.
-   * @param action The action to be performed: 'enable' or 'disable'.
-   */
-  public static async toggleAppEnabled(node: ActionTreeItem, ctxValue: string, action: 'enable' | 'disable') {
-    try {
-      const actionNode = node.children?.find(child => child.contextValue === ctxValue);
-
-      if (!actionNode?.command?.arguments) {
-        Notifications.error(`Failed to retrieve app details for ${action}.`);
-        return;
-      }
-
-      const [appTitle, appCatalogUrl, isEnabled] = actionNode.command.arguments;
-
-      if (action === 'enable' && isEnabled) {
-        Notifications.info(`App '${appTitle}' is already enabled.`);
-        return;
-      }
-
-      if (action === 'disable' && !isEnabled) {
-        Notifications.info(`App '${appTitle}' is already disabled.`);
-        return;
-      }
-
-      const appProductIdFilter = `Title eq '${appTitle}'`;
-      const commandOptionsList: any = {
-        listTitle: 'Apps for SharePoint',
-        webUrl: appCatalogUrl,
-        fields: 'Id, Title, IsAppPackageEnabled',
-        filter: appProductIdFilter
-      };
-
-      const listItemsResponse = await CliExecuter.execute('spo listitem list', 'json', commandOptionsList);
-      const listItems = JSON.parse(listItemsResponse.stdout || '[]');
-
-      if (listItems.length === 0) {
-        Notifications.error(`App '${appTitle}' not found in the app catalog.`);
-        return;
-      }
-
-      const appListItemId = listItems[0].Id;
-
-      const commandOptionsSet: any = {
-        listTitle: 'Apps for SharePoint',
-        id: appListItemId,
-        webUrl: appCatalogUrl,
-        IsAppPackageEnabled: !isEnabled ? true : false
-      };
-
-      await CliExecuter.execute('spo listitem set', 'json', commandOptionsSet);
-      Notifications.info(`App '${appTitle}' has been successfully ${action === 'enable' ? 'enabled' : 'disabled'}.`);
-
-      // refresh the environmentTreeView
-      await commands.executeCommand('spfx-toolkit.refreshAppCatalogTreeView');
-    } catch (e: any) {
-      const message = e?.error?.message;
-      Notifications.error(message);
-    }
-  }
-
-  /**
- * Installs or uninstalls the app on a specified site.
- *
- * @param node The tree item representing the app to be installed or uninstalled.
- * @param ctxValue The context value used to identify the action node.
- * @param action The action to be performed: 'install' or 'uninstall'.
- */
-  public static async toggleAppInstalled(node: ActionTreeItem, ctxValue: string, action: 'install' | 'uninstall') {
-    try {
-      const actionNode = node.children?.find(child => child.contextValue === ctxValue);
-
-      if (!actionNode?.command?.arguments) {
-        Notifications.error(`Failed to retrieve app details for ${action}.`);
-        return;
-      }
-
-      const [appID, appTitle, appCatalogUrl] = actionNode.command.arguments;
-
-      let siteUrl: string | undefined;
-      if (!appCatalogUrl) {
-        const relativeUrl = await window.showInputBox({
-          prompt: 'Enter the relative URL of the site',
-          ignoreFocusOut: true,
-          placeHolder: 'e.g., sites/sales or leave blank for root site',
-          validateInput: (input) => {
-            const trimmedInput = input.trim();
-
-            if (trimmedInput.startsWith('https://')) {
-              return 'Please provide a relative URL, not an absolute URL.';
-            }
-            if (trimmedInput.startsWith('/')) {
-              return 'Please provide a relative URL without a leading slash.';
-            }
-
-            return undefined;
-          }
-        });
-
-        if (relativeUrl === undefined) {
-          Notifications.warning('No site URL provided. Operation aborted.');
-          return;
-        }
-
-        siteUrl = `${EnvironmentInformation.tenantUrl}/${relativeUrl.trim()}`;
-
-      } else {
-        siteUrl = appCatalogUrl;
-      }
-
-      let forceUninstall = false;
-      if (action === 'uninstall') {
-        const confirmForce = await window.showQuickPick(['Yes', 'No'], {
-          placeHolder: `Are you sure you want to uninstall the app '${appTitle}' from site '${siteUrl}'?`,
-          ignoreFocusOut: true,
-          canPickMany: false
-        });
-
-        if (confirmForce === 'Yes') {
-          forceUninstall = true;
-        } else {
-          Notifications.warning('App uninstallation aborted.');
-          return;
-        }
-      }
-
-      const commandOptions: any = {
-        id: appID,
-        siteUrl: siteUrl,
-        ...(appCatalogUrl && {
-          appCatalogScope: 'sitecollection'
-        }),
-        ...(forceUninstall && { force: true })
-      };
-
-      const cliCommand = action === 'install' ? 'spo app install' : 'spo app uninstall';
-      await CliExecuter.execute(cliCommand, 'json', commandOptions);
-      Notifications.info(`App '${appTitle}' has been successfully ${action === 'install' ? 'installed' : 'uninstalled'} on site '${siteUrl}'.`);
-
-      // refresh the environmentTreeView
-      await commands.executeCommand('spfx-toolkit.refreshAppCatalogTreeView');
-    } catch (e: any) {
-      const message = e?.error?.message;
-      Notifications.error(message);
-    }
-  }
-
   /**
    * Retrieves the tenant-wide extensions from the specified tenant app catalog URL.
    * @param tenantAppCatalogUrl The URL of the tenant app catalog.
diff --git a/src/services/actions/SpfxAppCLIActions.ts b/src/services/actions/SpfxAppCLIActions.ts
