feat(changelog): add changelog widget version comparison by vivekv1504 · Pull Request #614 · webex/widgets

vivekv1504 · 2026-02-06T16:38:25Z

COMPLETES #https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-770576

This pull request addresses

ADD VERSION COMAPRISON MODE FUNCTIONALITY IN WIDGETS

by making the following changes

Version Comparison Mode
Compare all packages between two stable versions
Package-level comparison with pre-release version support
Visual status indicators (Unchanged, Changed, Added, Removed)
Statistics dashboard (total packages, changed count, etc.)
Copy comparison link for sharing

Change Type

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Documentation update
Tooling change
Internal code refactor

The following scenarios were tested

The testing is done with the amplify link
< ENUMERATE TESTS PERFORMED, WHETHER MANUAL OR AUTOMATED >

The GAI Coding Policy And Copyright Annotation Best Practices

Checklist before merging

I have not skipped any automated checks
All existing and new tests passed
I have updated the testing document
[] I have tested the functionality with amplify link

Make sure to have followed the contributing guidelines before submitting.

aws-amplify-us-east-2 · 2026-02-06T16:43:53Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-614.d1b38q61t1z947.amplifyapp.com

…ison mode

rarajes2

Let's move all the business logic to a separate file comparison-view.js and import the methods in this file and use it. We can keep all the UI related methods in this file.

rarajes2 · 2026-02-17T06:25:00Z

docs/changelog/index.html

+              </li>
+              <li>
+                <a href="?compareStableA=1.28.0&compareStableB=1.28.2&comparePackage=@webex/widgets&compareVersionA=1.28.2-next.2&compareVersionB=1.28.2-next.3"
+                  >Package-level comparison - @webex/widgets specific versions</a


nitpick: please align the angular brackets

rarajes2 · 2026-02-17T06:26:22Z

docs/changelog/assets/css/app.css

+
+/* Comparison Results Table */
+#comparison-results .table-wrapper {
+    max-height: 500px;


Let's use rem where recommended

pixel units changed to rem units where it placed in px units

rarajes2 · 2026-02-17T06:28:50Z

docs/changelog/assets/js/app.js

-Handlebars.registerHelper('forIn', function (object) {
-  let returnArray = [];
-  for (let prop in object) {
-    returnArray.push({key: prop, value: object[prop]});
-  }
-  return returnArray;
+Handlebars.registerHelper("forIn", function(object) {
+    let returnArray = [];
+    for(let prop in object){
+      returnArray.push({key: prop, value: object[prop]});
+    }
+    return returnArray;


Let's revert all these formatting changes, it will reduce the diff. Applicable everywhere

Still see some formatting changes, please do revert them and run the eslint.

rarajes2 · 2026-02-17T06:29:48Z

docs/changelog/assets/js/app.js

+    if (searchParams.package) {
+        if (!packageNameInputDropdown.disabled) {


These can be clubbed

these two conditiones set into one line

rarajes2 · 2026-02-17T06:32:52Z

docs/changelog/assets/js/app.js

-      versionPaths[version] = path;
-      optionsHtml += `<option value="${version}">${version}</option>`;
+const populatePackageNames = (changelog) => {
+    let specialPackages = ['@webex/widgets', '@webex/cc-widgets'];


What are special packages ? Why they need to be treated differently from other packages ?

this is in single search comparison that is written by old as format in sdk comparison and that special pacakges are shows separately while populated the pacages names ,that pacakages are popular or everywhere presented in stable. versions

rarajes2 · 2026-02-17T07:07:02Z

docs/changelog/assets/js/app.js

+    console.log('effectiveVersionA:', effectiveVersionA, '(requested:', versionASpecific, ')');
+    console.log('effectiveVersionB:', effectiveVersionB, '(requested:', versionBSpecific, ')');


We can remove all console logs

rarajes2 · 2026-02-17T07:08:23Z

docs/changelog/assets/js/app.js

+    if (comparisonPackageSelect) comparisonPackageSelect.value = '';
+    if (versionAPrereleaseSelect) versionAPrereleaseSelect.value = '';
+    if (versionBPrereleaseSelect) versionBPrereleaseSelect.value = '';
+    if (comparisonPackageRow) comparisonPackageRow.style.display = 'none';
+    if (prereleaseRow) prereleaseRow.style.display = 'none';


Do we need to have the conditions ? We can reset the values irrespective of the conditions, right ?

conditions is better because it prevents from error where value doesn't exits .
can you sugget which one is better
another way is comparisonPackageSelect.value = '';

rarajes2 · 2026-02-17T07:09:07Z

docs/changelog/assets/js/app.js

+    if (searchForm) searchForm.classList.remove('hide');
+    if (comparisonForm) comparisonForm.classList.add('hide');
+    if (comparisonResults) comparisonResults.classList.add('hide');
+    if (searchResults) searchResults.classList.remove('hide');
+    if (helperSection) helperSection.classList.remove('hide');
+    if (comparisonHelper) comparisonHelper.classList.add('hide');


Same here, see if we actually need the if conditions ?

Check this logic everywhere in this file

rarajes2 · 2026-02-17T07:11:09Z

docs/changelog/assets/js/app.js

+
+    const stableA = versionASelect.value;
+    const stableB = versionBSelect.value;
+    const selectedPackage = comparisonPackageSelect ? comparisonPackageSelect.value : null;


const selectedPackage = comparisonPackageSelect?.value;

We can keep the logic like this and utilize the undefined value

Done Rajesh both are same (undefined and null 's are falsy statements ) ,changes to this
const selectedPackage = comparisonPackageSelect?.value;

rarajes2 · 2026-02-17T07:13:39Z

docs/changelog/assets/js/app.js

+    if (versionAPrereleaseSelect) versionAPrereleaseSelect.addEventListener('change', updateCompareButtonState);
+    if (versionBPrereleaseSelect) versionBPrereleaseSelect.addEventListener('change', updateCompareButtonState);


Do we have any logic to remove the event listeners when we switch to another mode? We should not be adding multiple listeners as we toggle through the single and comparison views.

Applicable everywhere

there is no remove event listeners .there is only hide elements are there in single and version comparison
And there is no duplicate listeners

…versions

rarajes2 · 2026-02-24T04:54:43Z

@codex review

chatgpt-codex-connector · 2026-02-24T04:54:47Z

To use Codex here, create a Codex account and connect to github.

vivekv1504

Rajesh almost done ,but most the comments realated to single version search ,that code previously implemented by kesava and shreyas

vivekv1504 · 2026-02-17T07:41:46Z

docs/changelog/index.html

+              </li>
+              <li>
+                <a href="?compareStableA=1.28.0&compareStableB=1.28.2&comparePackage=@webex/widgets&compareVersionA=1.28.2-next.2&compareVersionB=1.28.2-next.3"
+                  >Package-level comparison - @webex/widgets specific versions</a


vivekv1504 · 2026-02-17T07:47:43Z

docs/changelog/assets/css/app.css

+
+/* Comparison Results Table */
+#comparison-results .table-wrapper {
+    max-height: 500px;


pixel units changed to rem units where it placed in px units

vivekv1504 · 2026-02-17T08:10:31Z

docs/changelog/assets/js/app.js

+    // If the package name is not empty, show all options
+    // If one of the commit search options is not empty, hide version input and show commit search options
+    // If the version field is not empty, hide the commit search options
+    if(formParams === undefined){


changes and add space after the keyword where is placed keywords after not space

vivekv1504 · 2026-02-17T08:19:41Z

docs/changelog/assets/js/app.js

-Handlebars.registerHelper('forIn', function (object) {
-  let returnArray = [];
-  for (let prop in object) {
-    returnArray.push({key: prop, value: object[prop]});
-  }
-  return returnArray;
+Handlebars.registerHelper("forIn", function(object) {
+    let returnArray = [];
+    for(let prop in object){
+      returnArray.push({key: prop, value: object[prop]});
+    }
+    return returnArray;


vivekv1504 · 2026-02-17T08:27:12Z

docs/changelog/assets/js/app.js

+        disable.commitHash = true;
+        disable.searchButton = false;
+    }
+    else if((formParams.commitMessage && formParams.commitMessage.trim() !== '') || (formParams.commitHash && formParams.commitHash.trim() !== '')){


this is old code ,i am not changed logic just i changed the format

vivekv1504 · 2026-02-17T09:26:30Z

docs/changelog/assets/js/app.js

+    if (comparisonPackageSelect) comparisonPackageSelect.value = '';
+    if (versionAPrereleaseSelect) versionAPrereleaseSelect.value = '';
+    if (versionBPrereleaseSelect) versionBPrereleaseSelect.value = '';
+    if (comparisonPackageRow) comparisonPackageRow.style.display = 'none';
+    if (prereleaseRow) prereleaseRow.style.display = 'none';


conditions is better because it prevents from error where value doesn't exits .
can you sugget which one is better
another way is comparisonPackageSelect.value = '';

vivekv1504 · 2026-02-17T11:18:56Z

docs/changelog/assets/js/app.js

+    if (versionAPrereleaseSelect) versionAPrereleaseSelect.addEventListener('change', updateCompareButtonState);
+    if (versionBPrereleaseSelect) versionBPrereleaseSelect.addEventListener('change', updateCompareButtonState);


there is no remove event listeners .there is only hide elements are there in single and version comparison
And there is no duplicate listeners

vivekv1504 · 2026-02-17T11:38:50Z

docs/changelog/assets/js/app.js

+
+    const stableA = versionASelect.value;
+    const stableB = versionBSelect.value;
+    const selectedPackage = comparisonPackageSelect ? comparisonPackageSelect.value : null;


Done Rajesh both are same (undefined and null 's are falsy statements ) ,changes to this
const selectedPackage = comparisonPackageSelect?.value;

vivekv1504 · 2026-02-23T15:57:04Z

docs/changelog/assets/js/app.js

-  }
+const doSearch = (searchParams) => {
+    const { package, version } = searchParams;
+    let drill_down = {...currentChangelog}, shouldTransform = true, search_results = [];


the drill_down is stored chnagelog data ,stores the pacakages data

… app.js and comparison-view.js

rarajes2 · 2026-02-24T07:00:15Z

@codex review

chatgpt-codex-connector · 2026-02-24T07:00:19Z

To use Codex here, create a Codex account and connect to github.

bhabalan · 2026-02-24T07:01:19Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 742a432432

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-02-24T07:07:35Z

docs/changelog/assets/js/app.js

+                            allHashes = new Set();
+                            discontinueSearch = true;
+                            searchResults.push({
+                                pacakage,


Return package key in commit search results

The objects emitted by doSearch_commit use pacakage instead of package, but the changelog template and generated links read this.package. In commit-message/hash searches (shouldTransform = false), this causes package names to render empty and breaks package-specific links/actions in results, so a primary search mode returns malformed output.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-02-24T07:07:35Z

docs/changelog/assets/js/comparison-view.js

+    const pkgDataA = changelogA[packageName]?.[versionASpecific];
+    const pkgDataB = changelogB[packageName]?.[versionBSpecific];


Recompute package data after fallback version resolution

generatePackageComparisonData reads pkgDataA/pkgDataB from the requested versions before resolving fallback versions with getEffectiveVersion. If one requested version is missing (for example, package has only prerelease tags and one prerelease selector is left empty), the effective version exists but pkgData* stays null, so downstream status/alongWith logic marks the package as Added/Removed incorrectly and loses related-package context.

Useful? React with 👍 / 👎.

implemented the changes and just replace the lines

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1b84364bc9

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-02-24T09:01:56Z

docs/changelog/index.html

+      </div>
+    </script>
+
+    <script type="module" src="assets/js/app.js"></script>


Restore global copy handlers after switching to module script

Loading app.js as type="module" makes top-level functions module-scoped, but the page still uses inline handlers (onclick='copyToClipboard(this)' and onclick="copyComparisonLink()") that resolve names on window. In this mode, those handlers throw ReferenceError at click time, so the changelog row copy action no longer works and copy interactions become error-prone unless separately rebound.

Useful? React with 👍 / 👎.

yes after clicking copy button in both single version and version comparison search it throws the reference error and on more issue is after click copyComparisonlink in version comparison search it throws refernce error but link is copied and data is also reloaded ,why it's because in copy button is placed in form div and not mentioned type property default is type= "submit "

Done implement the changes

chatgpt-codex-connector · 2026-02-24T09:01:56Z

docs/changelog/assets/js/comparison-view.js

+        const versionA = findEarliestVersion(changelogA, packageName);
+        const versionB = findEarliestVersion(changelogB, packageName);


Compare release versions instead of earliest package entries

The full comparison path currently picks each package version with findEarliestVersion(...), i.e. the oldest publish date in each changelog. For packages that have multiple builds in a stable train (pre-releases plus stable), this compares stale versions and can mislabel rows and aggregate counts (Version Changed/Unchanged/Added/Removed). The nearby findStableVersion helper is never used, so the main comparison can report incorrect results.

Useful? React with 👍 / 👎.

feat(changelog):add changelog widget version comaprison

0f0f764

vivekv1504 requested review from adhmenon and rarajes2 February 6, 2026 16:38

feat(changelog):fix data fetching incorrectly in full version comapar…

3dd4e1a

…ison mode

rarajes2 added the validated Indicates that the PR is ready for actions label Feb 17, 2026

vivekv1504 changed the title ~~feat(changelog):add changelog widget version comaprison~~ feat(changelog): add changelog widget version comparison Feb 17, 2026

vivekv1504 added 2 commits February 17, 2026 12:40

chore: trigger full ci

b5f04e9

chore: trigger full ci

c85d6ad

rarajes2 requested changes Feb 17, 2026

View reviewed changes

vivekv1504 added 2 commits February 20, 2026 11:45

feat(changelog): extract business logic from app.js

3259517

fix(changelog): update version comparison logic to allow same stable …

5c4b007

…versions

vivekv1504 commented Feb 24, 2026

View reviewed changes

vivekv1504 and others added 2 commits February 24, 2026 11:26

refactor(changelog): standardize variable naming and clean up code in…

011c95f

… app.js and comparison-view.js

Merge branch 'next' into changelog-widget

742a432

chatgpt-codex-connector bot reviewed Feb 24, 2026

View reviewed changes

no changes

1b84364

chatgpt-codex-connector bot reviewed Feb 24, 2026

View reviewed changes

		if (searchParams.package) {
		if (!packageNameInputDropdown.disabled) {

		console.log('effectiveVersionA:', effectiveVersionA, '(requested:', versionASpecific, ')');
		console.log('effectiveVersionB:', effectiveVersionB, '(requested:', versionBSpecific, ')');

		if (versionAPrereleaseSelect) versionAPrereleaseSelect.addEventListener('change', updateCompareButtonState);
		if (versionBPrereleaseSelect) versionBPrereleaseSelect.addEventListener('change', updateCompareButtonState);

		const pkgDataA = changelogA[packageName]?.[versionASpecific];
		const pkgDataB = changelogB[packageName]?.[versionBSpecific];

		const versionA = findEarliestVersion(changelogA, packageName);
		const versionB = findEarliestVersion(changelogB, packageName);

Comments

Conversation

vivekv1504 commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

COMPLETES #https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-770576

This pull request addresses

by making the following changes

Change Type

The following scenarios were tested

The GAI Coding Policy And Copyright Annotation Best Practices

Checklist before merging

Uh oh!

aws-amplify-us-east-2 bot commented Feb 6, 2026

Uh oh!

rarajes2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rarajes2 commented Feb 24, 2026

Uh oh!

chatgpt-codex-connector bot commented Feb 24, 2026

Uh oh!

vivekv1504 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vivekv1504 commented Feb 6, 2026 •

edited

Loading