feat: update changelog widget UI styles and logic by Jahnavi314 · Pull Request #652 · webex/widgets

Jahnavi314 · 2026-03-12T12:29:59Z

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

This pull request addresses

The need for a clearer and more user-friendly changelog interface for the widgets project.
The existing implementation required UI improvements to better visualize changelog data and version comparison information.

by making the following changes

-Updated the changelog widget UI layout
-Improved styling and structure
-Improved readability and presentation of changelog information
-Enhanced the display of version-related changelog data

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/6aace747-632b-492e-94b6-dd6cb4d5eea3

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

aws-amplify-us-east-2 · 2026-03-12T12:35:47Z

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

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

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 84c077faf9

ℹ️ 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-03-12T12:37:58Z

docs/changelog/assets/js/app.js

+  if (!selectedPackage) {
+    alert('Please select a package');
+    return false;
+  }
  if (!stableA || !stableB) {
-    alert('Please select both stable versions');
+    alert('Please select both base and target stable versions');
    return false;
  }
-
-  if (selectedPackage && !versionASpecific && !versionBSpecific) {
-    alert('Please select at least one pre-release version, or leave package empty for full version comparison');
+  if (!versionASpecific || !versionBSpecific) {
+    alert('Please select pre-release (or stable) for both base and target');
    return false;


Re-enable full stable-version comparison submissions

This validation now hard-requires a package and both pre-release selectors, and handleComparisonSubmit no longer has the fallback path to performVersionComparison, so the UI can no longer run a full versionA vs versionB comparison from the form (only package-level comparisons are possible). That is a functional regression from the previous behavior and from the helper text in this page, where users are told they can compare full stable versions directly.

Useful? React with 👍 / 👎.

We are intentionally limiting this form to package-level comparison only. Full version-vs-version comparison is out of scope here and is handled at pre-release. We’re not re-enabling the full stable-version comparison path

chatgpt-codex-connector · 2026-03-12T12:37:58Z

docs/changelog/assets/js/app.js

+const fetchMergedChangelogPackages = async () => {
+  const paths = Object.values(versionPaths);
+  if (paths.length === 0) return {};
+  const results = await Promise.all(paths.map((p) => fetch(p).then((r) => r.json()).catch(() => ({}))));


Limit comparison package options to selected stable versions

The package dropdown is now built by merging package names across all version files, before a specific base/target version pair is chosen. This allows selecting packages that may not exist in the chosen stableA/stableB changelogs, which later causes package comparison to fail with Could not find version data once submit reaches generatePackageComparisonData. The previous flow populated packages from the selected versions’ union, which avoided presenting invalid choices.

Useful? React with 👍 / 👎.

rarajes2

Let's create a test plan for the ChangeLog and verify the added functionality against them. We are going back and forth multiple times and seeing the broken functionality.

We should only proceed with the PR review process one the functionality is working as expected.

rarajes2 · 2026-03-17T04:51:04Z

docs/changelog/assets/css/app.css

-  padding: 1.25rem; /* 20px */
+  padding: 1.25rem;
+  /* 20px */
  margin: 0;
-  text-align: left; /* Align the title text to the left */
+  text-align: left;
+  /* Align the title text to the left */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
-  z-index: 1000; /* Ensure the header is above other content */
+  z-index: 1000;
+  /* Ensure the header is above other content */
 }


There are so many formatting diffs in the file. Please check the whole diff in this file and revert them, it will reduce the diff.

rarajes2 · 2026-03-17T04:52:15Z

docs/changelog/assets/css/app.css

+#comparison-form-column select {
+  position: relative;
+  z-index: 10;
+}
+
+#comparison-form-column select:focus {
+  z-index: 11;
+}


We should avoid using the z-index unless there is no other way. Please confirm if this is required, if yes, why it's required ?

rarajes2 · 2026-03-17T04:52:48Z

docs/changelog/assets/css/app.css

+  border: 1px solid #ccc;
+  background-color: #f5f5f5;
+  color: var(--color-danger);


We are using vars as well as hard coded colors. Let's keep them consistent. We should be using vars only.

rarajes2 · 2026-03-17T04:53:37Z

docs/changelog/assets/css/app.css

  font-size: 1.2em;
  color: #333;
-}
+}


It's recommended to have a newline at the end of the file

rarajes2 · 2026-03-17T04:56:17Z

docs/changelog/assets/js/app.js

+  keys.sort((a, b) => {
+    const pa = a.split('.').map(Number);
+    const pb = b.split('.').map(Number);
+    for (let i = 0; i < Math.max(pa.length, pb.length); i++) {


We can keep the variable names readable

rarajes2 · 2026-03-17T04:58:09Z

docs/changelog/assets/js/app.js

+ */
+const populateComparisonPackagesFromChangelog = (changelog) => {
+  if (!comparisonPackageSelect) return;
+  const specialPackagesAlways = ['@webex/widgets', '@webex/cc-widgets'];


I think we should use some other name than specialPackages. It does not reflect what it actually mean

rarajes2 · 2026-03-17T05:00:34Z

docs/changelog/index.html

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


Same here. Newline can be added.

feat: update changelog widget UI styles and logic

84c077f

Jahnavi314 requested a review from a team as a code owner March 12, 2026 12:30

chatgpt-codex-connector bot reviewed Mar 12, 2026

View reviewed changes

rarajes2 reviewed Mar 17, 2026

View reviewed changes

Conversation

Jahnavi314 commented Mar 12, 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!

aws-amplify-us-east-2 bot commented Mar 12, 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 Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector bot Mar 12, 2026

Choose a reason for hiding this comment

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Jahnavi314 commented Mar 12, 2026 •

edited

Loading