sf-metadata-selector 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +3 -0
  2. package/index.js +286 -7
  3. package/package.json +2 -3
package/README.md CHANGED
@@ -17,6 +17,9 @@ It connects to your Salesforce org via the Salesforce CLI (`sf`), lists all avai
17
17
  ## Screenshot
18
18
  ![sf-metadata-sel](https://raw.githubusercontent.com/mchinnappan100/npmjs-images/main/sf-metadata-selector/sf-metadata-selector-1.png)
19
19
 
20
+
21
+ ![Help](https://raw.githubusercontent.com/mchinnappan100/npmjs-images/main/sf-metadata-selector/help-1.png)
22
+
20
23
  ## ✨ New Features
21
24
 
22
25
  ### 🔍 Search & Filter
package/index.js CHANGED
@@ -11,7 +11,7 @@ program
11
11
  .description('Generate an interactive HTML page to select metadata and build package.xml')
12
12
  .requiredOption('-o, --org <alias|username>', 'Salesforce org alias or username')
13
13
  .option('--include-namespaced', 'Include components with namespace prefix (default: exclude them)')
14
- .option('--api-version <version>', 'API version for package.xml (default: 64.0)', '64.0')
14
+ .option('--api-version <version>', 'API version for package.xml (default: 60.0)', '60.0')
15
15
  .option('--output <filename>', 'Output HTML filename (default: sf-metadata-selector.html)', 'sf-metadata-selector.html')
16
16
  .parse();
17
17
 
@@ -157,8 +157,6 @@ function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
157
157
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
158
158
  <title>Salesforce Metadata Selector - ${orgName}</title>
159
159
  <script src="https://cdn.tailwindcss.com"></script>
160
- <link rel="icon" type="image/x-icon"
161
- href="https://mohan-chinnappan-n5.github.io/dfv/img/mc_favIcon.ico" />
162
160
  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script>
163
161
  <style>
164
162
  body { background: #111827; color: #e5e7eb; font-family: ui-sans-serif, system-ui, sans-serif; }
@@ -185,6 +183,27 @@ function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
185
183
  .metadata-type-summary {
186
184
  transition: background-color 0.2s ease-in-out;
187
185
  }
186
+ /* Modal animations */
187
+ #help-modal {
188
+ animation: fadeIn 0.2s ease-out;
189
+ }
190
+ #help-modal > div {
191
+ animation: slideUp 0.3s ease-out;
192
+ }
193
+ @keyframes fadeIn {
194
+ from { opacity: 0; }
195
+ to { opacity: 1; }
196
+ }
197
+ @keyframes slideUp {
198
+ from {
199
+ opacity: 0;
200
+ transform: translateY(20px);
201
+ }
202
+ to {
203
+ opacity: 1;
204
+ transform: translateY(0);
205
+ }
206
+ }
188
207
  </style>
189
208
  </head>
190
209
  <body class="min-h-screen flex flex-col">
@@ -205,11 +224,17 @@ function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
205
224
  </div>
206
225
  </div>
207
226
 
208
- <!-- Org Info Badge -->
227
+ <!-- Org Info Badge & Help Button -->
209
228
  <div class="flex items-center space-x-3">
229
+ <button id="help-button" class="bg-blue-700 hover:bg-blue-600 rounded-lg px-3 py-2 transition-colors flex items-center gap-2" title="View deployment instructions">
230
+ <svg class="w-5 h-5 text-blue-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
231
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
232
+ </svg>
233
+ <span class="text-sm font-medium text-blue-100 hidden md:inline">Help</span>
234
+ </button>
210
235
  <div class="text-right hidden sm:block">
211
236
  <p class="text-xs text-blue-200">Connected Org</p>
212
- <p style='display:none;' class="text-sm font-semibold text-white">${orgName}</p>
237
+ <p style='display:none'; class="text-sm font-semibold text-white">${orgName}</p>
213
238
  </div>
214
239
  <div class="bg-blue-700 rounded-full px-4 py-2 border border-blue-600">
215
240
  <span class="text-xs font-mono text-blue-100">${orgName}</span>
@@ -318,7 +343,7 @@ function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
318
343
  id="api-version"
319
344
  value="${apiVersion}"
320
345
  class="w-24 px-3 py-1.5 bg-gray-900 border border-gray-600 rounded-lg text-sm font-mono focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
321
- placeholder="64.0"
346
+ placeholder="60.0"
322
347
  />
323
348
  </div>
324
349
 
@@ -361,6 +386,199 @@ function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
361
386
  </div>
362
387
  </div>
363
388
 
389
+ <!-- Help Modal -->
390
+ <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
391
+ <div class="bg-gray-900 rounded-2xl border border-gray-700 shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden flex flex-col">
392
+ <!-- Modal Header -->
393
+ <div class="bg-gradient-to-r from-blue-900 to-blue-800 px-6 py-4 border-b border-blue-700 flex items-center justify-between">
394
+ <div class="flex items-center gap-3">
395
+ <div class="flex items-center justify-center w-10 h-10 bg-blue-600 rounded-lg">
396
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
397
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
398
+ </svg>
399
+ </div>
400
+ <div>
401
+ <h2 class="text-xl font-bold text-white">Deployment Instructions</h2>
402
+ <p class="text-xs text-blue-200 mt-0.5">How to use your package.xml with Salesforce CLI</p>
403
+ </div>
404
+ </div>
405
+ <button id="close-modal" class="text-gray-400 hover:text-white transition-colors p-2 hover:bg-gray-800 rounded-lg">
406
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
407
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
408
+ </svg>
409
+ </button>
410
+ </div>
411
+
412
+ <!-- Modal Body -->
413
+ <div class="overflow-y-auto flex-1 p-6">
414
+ <!-- Step 1 -->
415
+ <div class="mb-6">
416
+ <div class="flex items-center gap-3 mb-3">
417
+ <div class="flex items-center justify-center w-8 h-8 bg-blue-600 rounded-full text-white font-bold text-sm">1</div>
418
+ <h3 class="text-lg font-semibold text-white">Download package.xml</h3>
419
+ </div>
420
+ <p class="text-gray-300 text-sm ml-11 mb-3">
421
+ Click the "Download package.xml" button to save your metadata selection.
422
+ </p>
423
+ <div class="ml-11 bg-gray-800 rounded-lg p-4 border border-gray-700">
424
+ <div class="flex items-center justify-between mb-2">
425
+ <span class="text-xs text-gray-400 font-mono">Generated File</span>
426
+ </div>
427
+ <div class="flex items-center gap-2 text-sm">
428
+ <svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
429
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
430
+ </svg>
431
+ <span class="text-green-400 font-mono">package.xml</span>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Divider -->
437
+ <div class="border-t border-gray-700 my-6"></div>
438
+
439
+ <!-- Step 2 -->
440
+ <div class="mb-6">
441
+ <div class="flex items-center gap-3 mb-3">
442
+ <div class="flex items-center justify-center w-8 h-8 bg-blue-600 rounded-full text-white font-bold text-sm">2</div>
443
+ <h3 class="text-lg font-semibold text-white">Create SFDX Project (if needed)</h3>
444
+ </div>
445
+ <p class="text-gray-300 text-sm ml-11 mb-3">
446
+ If you don't have an SFDX project yet, create one:
447
+ </p>
448
+ <div class="ml-11 bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
449
+ <div class="bg-gray-950 px-4 py-2 border-b border-gray-700 flex items-center justify-between">
450
+ <div class="flex items-center gap-2">
451
+ <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
452
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
453
+ </svg>
454
+ <span class="text-xs text-gray-400 font-medium">Terminal</span>
455
+ </div>
456
+ <button class="copy-btn text-xs text-gray-400 hover:text-white transition-colors flex items-center gap-1" data-copy="sf project generate -n projectName">
457
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
458
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
459
+ </svg>
460
+ Copy
461
+ </button>
462
+ </div>
463
+ <div class="p-4">
464
+ <code class="text-sm text-gray-100 font-mono block">
465
+ <span class="text-purple-400">sf</span> <span class="text-blue-400">project generate</span> <span class="text-yellow-400">-n</span> <span class="text-green-400">projectName</span>
466
+ </code>
467
+ </div>
468
+ </div>
469
+ <p class="text-xs text-gray-400 ml-11 mt-2 flex items-center gap-1">
470
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
471
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
472
+ </svg>
473
+ Replace <span class="font-mono bg-gray-800 px-1 rounded">projectName</span> with your desired project name
474
+ </p>
475
+ </div>
476
+
477
+ <!-- Divider -->
478
+ <div class="border-t border-gray-700 my-6"></div>
479
+
480
+ <!-- Step 3 -->
481
+ <div class="mb-6">
482
+ <div class="flex items-center gap-3 mb-3">
483
+ <div class="flex items-center justify-center w-8 h-8 bg-blue-600 rounded-full text-white font-bold text-sm">3</div>
484
+ <h3 class="text-lg font-semibold text-white">Move package.xml to Project</h3>
485
+ </div>
486
+ <p class="text-gray-300 text-sm ml-11 mb-3">
487
+ Place your <code class="bg-gray-800 px-2 py-0.5 rounded text-xs font-mono text-green-400">package.xml</code> in your SFDX project root directory.
488
+ </p>
489
+ <div class="ml-11 bg-gray-800 rounded-lg p-4 border border-gray-700">
490
+ <div class="text-xs text-gray-400 mb-2 font-mono">Project Structure:</div>
491
+ <div class="text-sm font-mono text-gray-300 space-y-1">
492
+ <div>📁 projectName/</div>
493
+ <div class="ml-4">📄 package.xml <span class="text-green-400">← Place here</span></div>
494
+ <div class="ml-4">📁 force-app/</div>
495
+ <div class="ml-4">📄 sfdx-project.json</div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <!-- Divider -->
501
+ <div class="border-t border-gray-700 my-6"></div>
502
+
503
+ <!-- Step 4 -->
504
+ <div class="mb-6">
505
+ <div class="flex items-center gap-3 mb-3">
506
+ <div class="flex items-center justify-center w-8 h-8 bg-green-600 rounded-full text-white font-bold text-sm">4</div>
507
+ <h3 class="text-lg font-semibold text-white">Deploy to Salesforce</h3>
508
+ </div>
509
+ <p class="text-gray-300 text-sm ml-11 mb-3">
510
+ Use the Salesforce CLI to deploy your metadata:
511
+ </p>
512
+ <div class="ml-11 bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
513
+ <div class="bg-gray-950 px-4 py-2 border-b border-gray-700 flex items-center justify-between">
514
+ <div class="flex items-center gap-2">
515
+ <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
516
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
517
+ </svg>
518
+ <span class="text-xs text-gray-400 font-medium">Terminal</span>
519
+ </div>
520
+ <button class="copy-btn text-xs text-gray-400 hover:text-white transition-colors flex items-center gap-1" data-copy="sf project deploy start -x package.xml -w 30">
521
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
522
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
523
+ </svg>
524
+ Copy
525
+ </button>
526
+ </div>
527
+ <div class="p-4">
528
+ <code class="text-sm text-gray-100 font-mono block">
529
+ <span class="text-purple-400">sf</span> <span class="text-blue-400">project deploy start</span> <span class="text-yellow-400">-x</span> <span class="text-green-400">package.xml</span> <span class="text-yellow-400">-w</span> <span class="text-green-400">30</span>
530
+ </code>
531
+ </div>
532
+ </div>
533
+ <div class="ml-11 mt-3 space-y-2">
534
+ <p class="text-xs text-gray-400 flex items-start gap-2">
535
+ <svg class="w-3 h-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
536
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
537
+ </svg>
538
+ <span><code class="bg-gray-800 px-1 rounded font-mono">-x package.xml</code> specifies the manifest file</span>
539
+ </p>
540
+ <p class="text-xs text-gray-400 flex items-start gap-2">
541
+ <svg class="w-3 h-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
542
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
543
+ </svg>
544
+ <span><code class="bg-gray-800 px-1 rounded font-mono">-w 30</code> waits up to 30 minutes for deployment to complete</span>
545
+ </p>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Additional Tips -->
550
+ <div class="bg-blue-900 bg-opacity-30 border border-blue-700 rounded-lg p-4 mt-6">
551
+ <div class="flex items-start gap-3">
552
+ <svg class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
553
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
554
+ </svg>
555
+ <div>
556
+ <h4 class="text-sm font-semibold text-blue-200 mb-2">Additional Commands</h4>
557
+ <div class="space-y-2 text-xs text-gray-300">
558
+ <p><code class="bg-gray-800 px-2 py-0.5 rounded font-mono text-blue-300">sf project retrieve start -x package.xml</code> - Retrieve metadata from org</p>
559
+ <p><code class="bg-gray-800 px-2 py-0.5 rounded font-mono text-blue-300">sf project deploy start -x package.xml --dry-run</code> - Validate deployment without applying changes</p>
560
+ <p><code class="bg-gray-800 px-2 py-0.5 rounded font-mono text-blue-300">sf project deploy start -x package.xml -o yourOrgAlias</code> - Deploy to specific org</p>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Modal Footer -->
568
+ <div class="bg-gray-800 px-6 py-4 border-t border-gray-700 flex justify-between items-center">
569
+ <a href="https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_project_commands_unified.htm" target="_blank" class="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1">
570
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
571
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
572
+ </svg>
573
+ SF CLI Documentation
574
+ </a>
575
+ <button id="close-modal-btn" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium transition-colors">
576
+ Got it!
577
+ </button>
578
+ </div>
579
+ </div>
580
+ </div>
581
+
364
582
  <!-- Hidden file input for loading -->
365
583
  <input type="file" id="file-input" accept=".json" style="display: none;" />
366
584
 
@@ -373,6 +591,67 @@ function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
373
591
  const apiVersionInput = document.getElementById('api-version');
374
592
  const useWildcardsCheckbox = document.getElementById('use-wildcards');
375
593
 
594
+ // Modal controls
595
+ const helpButton = document.getElementById('help-button');
596
+ const helpModal = document.getElementById('help-modal');
597
+ const closeModalBtn = document.getElementById('close-modal-btn');
598
+ const closeModal = document.getElementById('close-modal');
599
+
600
+ // Open modal
601
+ helpButton.addEventListener('click', () => {
602
+ helpModal.classList.remove('hidden');
603
+ helpModal.classList.add('flex');
604
+ document.body.style.overflow = 'hidden';
605
+ });
606
+
607
+ // Close modal functions
608
+ const closeModalFn = () => {
609
+ helpModal.classList.add('hidden');
610
+ helpModal.classList.remove('flex');
611
+ document.body.style.overflow = 'auto';
612
+ };
613
+
614
+ closeModalBtn.addEventListener('click', closeModalFn);
615
+ closeModal.addEventListener('click', closeModalFn);
616
+
617
+ // Close on backdrop click
618
+ helpModal.addEventListener('click', (e) => {
619
+ if (e.target === helpModal) {
620
+ closeModalFn();
621
+ }
622
+ });
623
+
624
+ // Close on Escape key
625
+ document.addEventListener('keydown', (e) => {
626
+ if (e.key === 'Escape' && !helpModal.classList.contains('hidden')) {
627
+ closeModalFn();
628
+ }
629
+ });
630
+
631
+ // Copy to clipboard functionality
632
+ document.querySelectorAll('.copy-btn').forEach(btn => {
633
+ btn.addEventListener('click', () => {
634
+ const textToCopy = btn.dataset.copy;
635
+ navigator.clipboard.writeText(textToCopy).then(() => {
636
+ const originalText = btn.innerHTML;
637
+ btn.innerHTML = \`
638
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
639
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
640
+ </svg>
641
+ Copied!
642
+ \`;
643
+ btn.classList.add('text-green-400');
644
+
645
+ setTimeout(() => {
646
+ btn.innerHTML = originalText;
647
+ btn.classList.remove('text-green-400');
648
+ }, 2000);
649
+ }).catch(err => {
650
+ console.error('Failed to copy:', err);
651
+ });
652
+ });
653
+ });
654
+
376
655
  let allDetailsElements = [];
377
656
 
378
657
  function hasNamespace(name) {
@@ -387,7 +666,7 @@ function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
387
666
  function updateXml() {
388
667
  if (!editor) return;
389
668
 
390
- const apiVersion = apiVersionInput.value || '64.0';
669
+ const apiVersion = apiVersionInput.value || '60.0';
391
670
  const useWildcards = useWildcardsCheckbox.checked;
392
671
  const checked = document.querySelectorAll('#components input[type="checkbox"]:checked');
393
672
  const typeMap = new Map();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sf-metadata-selector",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "A beautiful, interactive CLI tool for browsing, selecting, and generating package.xml files for Salesforce metadata retrieval with search, save/load, and wildcard support",
5
5
  "keywords": [
6
6
  "salesforce",
@@ -22,8 +22,7 @@
22
22
  "main": "index.js",
23
23
  "bin": {
24
24
  "sf-metadata-ui": "./index.js",
25
- "sf-pkg-builder": "./index.js",
26
- "sfmd": "./index.js"
25
+ "sf-pkg-builder": "./index.js"
27
26
  },
28
27
  "scripts": {
29
28
  "start": "node index.js",