feat(changelog): update changelog ui by Jahnavi314 · Pull Request #4733 · webex/webex-js-sdk

Jahnavi314 · 2026-02-22T16:33:48Z

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

This pull request addresses

The need for a clear and user-friendly changelog comparison interface that allows users to compare different SDK versions and view package-level changes and commit history. The existing implementation required UI improvements to better visualize version comparisons and related changelog data.

by making the following changes

Added a main comparison interface for selecting two SDK versions
Implemented side-by-side package comparison UI
Displayed changed package list with version details
Displayed commit history related to selected versions
Integrated UI with existing JSON-based changelog data structure

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

https://app.vidcast.io/share/ab8925cf-de62-4437-a686-4200b6f748a3

The GAI Coding Policy And Copyright Annotation Best Practices

I certified that

I have read and followed contributing guidelines
I discussed changes with code owners prior to submitting this pull request
I have not skipped any automated checks
All existing and new tests passed
I have updated the documentation accordingly

rarajes2

Please update the vidcast showing the working of Single Version View as well after addressing the comments. Confirm with Shreyas and Kesava if we need to call it "Single Version View"

rarajes2 · 2026-02-23T15:00:54Z

docs/changelog/assets/css/app.css

+select {
+    -webkit-appearance: none;
+    appearance: none;
+    padding-right: 2.5em;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5em center;
+}


Let's avoid adding common styles to all the select elements

rarajes2 · 2026-02-23T15:01:28Z

docs/changelog/assets/css/app.css

+.select-with-clear {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+.select-with-clear .full-width {
+    flex: 1;
+    min-width: 0;
+}
+.select-with-clear .btn-clear-select {
+    flex-shrink: 0;
+}


nitpick: Leave a newline between classes. Applicable everywhere in this file

rarajes2 · 2026-02-23T15:08:41Z

docs/changelog/assets/js/app.js

+const getAllPackagesFromChangelogs = (changelogs) => {
+    const allPackages = new Set();
+    (changelogs || []).forEach(changelog => {
+        if (changelog && typeof changelog === 'object') {
+            Object.keys(changelog).forEach(pkg => allPackages.add(pkg));
+        }
+    });
+    const specialPackages = ['webex', '@webex/calling'];
+    const filtered = [...allPackages].filter(pkg => !specialPackages.includes(pkg));
+    filtered.sort();
+    return [...specialPackages.filter(pkg => allPackages.has(pkg)), ...filtered];
+};


Why do we need to create this method? Methods for business logic should have been there

rarajes2 · 2026-02-23T15:09:04Z

docs/changelog/assets/js/app.js

+/**
+ * Populate package dropdown with full list (used when we already have the package array)
+ */
+const populateComparisonPackageDropdown = (allPackages) => {


rarajes2 · 2026-02-23T15:09:29Z

docs/changelog/assets/js/app.js

+/**
+ * Load initial package list for comparison mode: fetch ALL versions and show union of ALL packages from the start
+ */
+const populateComparisonPackagesInitial = async () => {


rarajes2 · 2026-02-23T15:17:46Z

docs/changelog/assets/js/app.js


 /**
 * Check and update comparison button state based on form selections
+ * Package is required; Base and Target versions are required after package is selected.


Please fix the comments. Applicable everywhere

rarajes2 · 2026-02-23T15:20:07Z

docs/changelog/assets/js/app.js

+    if (!selectedPackage) {
+        compareButton.disabled = true;
+        return;
+    }
+    if (!stableA || !stableB) {
+        compareButton.disabled = true;
+        return;
+    }
+    if (stableA === stableB) {
+        compareButton.disabled = true;
+        return;
+    }


Can we combine them ?

rarajes2 · 2026-02-23T15:21:31Z

docs/changelog/assets/js/app.js

+        if (versionASelect) {
+            versionASelect.disabled = true;
+            versionASelect.value = '';
+        }
+        if (versionBSelect) {
+            versionBSelect.disabled = true;
+            versionBSelect.value = '';
+        }


Looks repetitive

rarajes2 · 2026-02-23T15:22:58Z

docs/changelog/assets/js/app.js

 */
 const validateComparisonInputs = (stableA, stableB, selectedPackage, versionASpecific, versionBSpecific) => {
+    if (!selectedPackage) {
+        alert('Please select a package');


Add a full stop at the end of sentence. Please take care of all the user facing messages

rarajes2 · 2026-02-23T15:27:53Z

docs/changelog/index.html

+                  <select id="comparison-package-select" class="full-width" required>
+                    <option value="">Select a package (required)</option>
                  </select>
+                  <span class="help-text" style="font-weight: normal; font-size: 12px; color: #666;">Choose a package first; then Base and Target versions will be enabled.</span>


Let's avoid inline styles. Applicable everywhere

rarajes2 · 2026-02-24T04:57:51Z

@codex review

chatgpt-codex-connector · 2026-02-24T04:57:56Z

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

rarajes2 · 2026-02-24T06:59:29Z

@codex review

chatgpt-codex-connector · 2026-02-24T06:59:32Z

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

Jahnavi314 · 2026-02-24T10:44:14Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3a8b5394ee

ℹ️ 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-24T10:49:10Z

docs/changelog/assets/js/app.js

+    if (versionAPrereleaseSelect) versionAPrereleaseSelect.value = enhancedParams.versionA;
+    if (versionBPrereleaseSelect) versionBPrereleaseSelect.value = enhancedParams.versionB;
    handlePackageChange();


Apply package change before restoring prerelease URL values

When loading an enhanced comparison permalink, this code sets versionAPrereleaseSelect/versionBPrereleaseSelect and then calls handlePackageChange(), but handlePackageChange() immediately clears both prerelease selects. That means the form no longer reflects the versions encoded in the URL, and a user re-submitting can compare different (defaulted) versions than the shared link intended.

Useful? React with 👍 / 👎.

feat: update changelog UI

93f5ff7

Jahnavi314 requested a review from a team as a code owner February 22, 2026 16:33

Shreyas281299 added the validated If the pull request is validated for automation. label Feb 23, 2026

rarajes2 changed the title ~~feat: update changelog UI~~ feat(changelog): update changelog ui Feb 23, 2026

rarajes2 requested changes Feb 23, 2026

View reviewed changes

Jahnavi0401 added 2 commits February 24, 2026 14:53

refactor: improve UI styles and JS logic per PR review

f584288

fix: resolve unintended changes from previous commit

3a8b539

chatgpt-codex-connector bot reviewed Feb 24, 2026

View reviewed changes

Comments

Conversation

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

Uh oh!

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

I certified that

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!

rarajes2 commented Feb 24, 2026

Uh oh!

chatgpt-codex-connector bot commented Feb 24, 2026

Uh oh!

rarajes2 commented Feb 24, 2026

Uh oh!

chatgpt-codex-connector bot commented Feb 24, 2026

Uh oh!

Jahnavi314 commented Feb 24, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Jahnavi314 commented Feb 22, 2026 •

edited

Loading