@W-21552190: enhance the vs code ext ODS browser (#251)

Author: wei-liu-sf

packages/b2c-vs-extension/package.json

@@ -240,6 +240,12 @@
         "icon": "$(link-external)",
         "category": "B2C DX - Sandboxes"
       },
+      {
+        "command": "b2c-dx.sandbox.extendExpiration",
+        "title": "Extend Expiration",
+        "icon": "$(clock)",
+        "category": "B2C DX - Sandboxes"
+      },
       {
         "command": "b2c-dx.instance.inspect",
         "title": "B2C Instance Config",
@@ -515,6 +521,11 @@
           "when": "view == b2cSandboxExplorer && viewItem == sandbox-started",
           "group": "2_lifecycle@3"
         },
+        {
+          "command": "b2c-dx.sandbox.extendExpiration",
+          "when": "view == b2cSandboxExplorer && viewItem =~ /^sandbox-/",
+          "group": "2_lifecycle@4"
+        },
         {
           "command": "b2c-dx.sandbox.delete",
           "when": "view == b2cSandboxExplorer && viewItem =~ /^sandbox-/",
@@ -590,6 +601,10 @@
           "command": "b2c-dx.sandbox.openBM",
           "when": "false"
         },
+        {
+          "command": "b2c-dx.sandbox.extendExpiration",
+          "when": "false"
+        },
         {
           "command": "b2c-dx.webdav.newFolder",
           "when": "false"

packages/b2c-vs-extension/src/sandbox-tree/sandbox-commands.ts

@@ -239,6 +239,55 @@ export function registerSandboxCommands(
     await vscode.env.openExternal(vscode.Uri.parse(`https://${node.sandbox.hostName}/on/demandware.store/Sites-Site`));
   });
 
+  const extendExpiration = vscode.commands.registerCommand(
+    'b2c-dx.sandbox.extendExpiration',
+    async (node: SandboxTreeItem) => {
+      if (!node) return;
+
+      const ttlStr = await vscode.window.showInputBox({
+        title: `Extend Expiration — ${node.label ?? node.sandbox.id}`,
+        prompt: 'Hours to add to sandbox lifetime (0 = infinite)',
+        value: '24',
+        validateInput: (v) => {
+          const n = Number(v);
+          if (Number.isNaN(n) || n < 0) return 'Enter a non-negative number';
+          return null;
+        },
+      });
+      if (ttlStr === undefined) return;
+      const ttl = Number(ttlStr);
+
+      await vscode.window.withProgress(
+        {
+          location: vscode.ProgressLocation.Notification,
+          title: `Extending expiration for sandbox ${node.sandbox.id}...`,
+        },
+        async () => {
+          try {
+            const odsClient = getOdsClientFromConfig(configProvider);
+            const result = await odsClient.PATCH('/sandboxes/{sandboxId}', {
+              params: {path: {sandboxId: node.sandbox.id}},
+              body: {ttl},
+            });
+            if (result.error) {
+              vscode.window.showErrorMessage(
+                `Failed to extend expiration: ${getApiErrorMessage(result.error, result.response)}`,
+              );
+              return;
+            }
+            const message =
+              ttl === 0 ? 'Sandbox expiration removed (infinite).' : `Sandbox expiration extended by ${ttl} hours.`;
+            vscode.window.showInformationMessage(message);
+            treeProvider.refreshRealm(node.realm);
+          } catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            vscode.window.showErrorMessage(`Failed to extend expiration: ${message}`);
+          }
+        },
+      );
+    },
+  );
+
   return [
     detailRegistration,
     refresh,
@@ -251,5 +300,6 @@ export function registerSandboxCommands(
     restart,
     viewDetails,
     openBM,
+    extendExpiration,
   ];
 }

packages/b2c-vs-extension/src/sandbox-tree/sandbox-tree-provider.ts

@@ -45,7 +45,10 @@ export class SandboxTreeItem extends vscode.TreeItem {
     super(label, vscode.TreeItemCollapsibleState.None);
 
     const state = (sandbox.state ?? 'unknown').toLowerCase();
-    this.description = state;
+    const eolDate = sandbox.eol
+      ? new Date(sandbox.eol).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'})
+      : undefined;
+    this.description = eolDate ? `${state} · expires ${eolDate}` : state;
     this.iconPath = STATE_ICONS[state] ?? DEFAULT_ICON;
     this.contextValue = `sandbox-${state}`;
 
@@ -55,6 +58,12 @@ export class SandboxTreeItem extends vscode.TreeItem {
     if (sandbox.createdAt) lines.push(`Created: ${sandbox.createdAt}`);
     if (sandbox.eol) lines.push(`EOL: ${sandbox.eol}`);
     this.tooltip = new vscode.MarkdownString(lines.join('\n\n'));
+
+    this.command = {
+      command: 'b2c-dx.sandbox.viewDetails',
+      title: 'View Details',
+      arguments: [this],
+    };
   }
 }
 
@@ -66,6 +75,18 @@ function getPollIntervalMs(): number {
   return seconds * 1000;
 }
 
+function getSandboxDisplayName(sandbox: SandboxInfo): string {
+  return sandbox.instance ? `${sandbox.realm ?? ''}${sandbox.realm ? '-' : ''}${sandbox.instance}` : sandbox.id;
+}
+
+function sortSandboxesByName(sandboxes: SandboxInfo[]): SandboxInfo[] {
+  return [...sandboxes].sort((a, b) => {
+    const nameA = getSandboxDisplayName(a).toLowerCase();
+    const nameB = getSandboxDisplayName(b).toLowerCase();
+    return nameA.localeCompare(nameB);
+  });
+}
+
 export class SandboxTreeDataProvider implements vscode.TreeDataProvider<SandboxTreeNode> {
   private _onDidChangeTreeData = new vscode.EventEmitter<SandboxTreeNode | undefined | void>();
   readonly onDidChangeTreeData = this._onDidChangeTreeData.event;
@@ -167,7 +188,7 @@ export class SandboxTreeDataProvider implements vscode.TreeDataProvider<SandboxT
   private async getRealmChildren(element: RealmTreeItem): Promise<SandboxTreeItem[]> {
     const cached = this.configProvider.getCachedSandboxes(element.realm);
     if (cached) {
-      return cached.map((s) => new SandboxTreeItem(s, element.realm));
+      return sortSandboxesByName(cached).map((s) => new SandboxTreeItem(s, element.realm));
     }
 
     const configProvider = this.configProvider.getConfigProvider();
@@ -198,7 +219,7 @@ export class SandboxTreeDataProvider implements vscode.TreeDataProvider<SandboxT
         },
       );
       this.configProvider.setCachedSandboxes(element.realm, sandboxes);
-      return sandboxes.map((s) => new SandboxTreeItem(s, element.realm));
+      return sortSandboxesByName(sandboxes).map((s) => new SandboxTreeItem(s, element.realm));
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
       vscode.window.showErrorMessage(`Sandboxes (${element.realm}): ${message}`);