[showcase] Add support to navigate between different versions in the showcase (#663)

* Add support to navigate between different versions in the showcase

* Update version-selector.scss

* Update version-selector.scss

* Add warning message for no longer maintained version

* Undo change for local testing

Author: ncamera

packages/showcase/src/app/app.component.html

@@ -4,6 +4,7 @@
     'components/checkbox',
     'components/code',
     'components/dialog',
+    'components/dropdown',
     'components/edit',
     'components/icon',
     'components/navigation-list',
@@ -28,7 +29,8 @@
     </p></a
   >
 
-  <span class="elevation-2 app-header__version">v{{ libraryVersion }}</span>
+  <version-selector></version-selector>
+
   @let isIconsPage =
     selectedLink().id !== "/" &&
     commonLinks.coreConcepts_icons().includes(selectedLink().id!);
@@ -106,6 +108,23 @@
 
   <main>
     <article>
+      @if (selectedLink().id !== "/" && !versioning.isLatestVersion()) {
+        <blockquote class="blockquote-warning version-no-longer-maintained">
+          <p>
+            This is documentation for Mercury
+            <span class="body-semi-bold-m">{{ libraryVersion }}</span
+            >, which is no longer actively maintained.
+          </p>
+
+          <p>
+            For up-to-date documentation, see the
+            <a class="body-semi-bold-m" href="/"
+              >latest Mercury version ({{ versioning.latestVersion() }})</a
+            >.
+          </p>
+        </blockquote>
+      }
+
       <router-outlet style="display: contents" />
     </article>
   </main>

packages/showcase/src/app/app.component.ts

@@ -42,7 +42,9 @@ import {
 } from "../services/design-system.service";
 import { RouterCommonLinksService } from "../services/router-links.service";
 import { SEOService } from "../services/seo.service";
+import { VersioningService } from "../services/versioning.service";
 import { PageFiltersComponent } from "../user-controls/page-filters/page-filters.ng";
+import { VersionSelectorComponent } from "../user-controls/version-selector/version-selector";
 import { mercuryVersion } from "./mercury-version";
 
 const MERCURY_UNANIMO_PREFIX_URL_REGEX = /\/(mercury|unanimo)/;
@@ -53,13 +55,20 @@ const FRAGMENT_QUERY_PARAMS_URL = /(#.*|\?.*)/;
   templateUrl: "./app.component.html",
   styleUrl: "./app.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterOutlet, RouterLink, PageFiltersComponent, RuntimeBundlesComponent],
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    PageFiltersComponent,
+    RuntimeBundlesComponent,
+    VersionSelectorComponent
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   host: { ngSkipHydration: "true" }
 })
 export class AppComponent {
   location = inject(Location);
   platform = inject(PLATFORM_ID);
+  versioning = inject(VersioningService);
   router = inject(Router);
   route = inject(ActivatedRoute);
   commonLinks = inject(RouterCommonLinksService);
@@ -90,7 +99,7 @@ export class AppComponent {
     }
   ];
 
-  protected libraryVersion = mercuryVersion;
+  libraryVersion = `v${mercuryVersion}`;
 
   constructor() {
     this.router.events.subscribe(event => {

packages/showcase/src/app/app.scss

@@ -47,17 +47,10 @@
     }
   }
 
-  &__version {
-    padding-inline: 8px;
-    padding-block: 4px;
-    border-radius: 16px;
-    margin-inline-start: 8px;
-  }
-
   &__filters {
     position: fixed;
     min-inline-size: 230px;
-    inset-inline-start: var(--app-sidebar-size);
+    inset-inline-start: calc(var(--app-sidebar-size) + 64px);
   }
 
   &__separator {
@@ -115,3 +108,8 @@ main {
     padding-block: 6px;
   }
 }
+
+.version-no-longer-maintained {
+  justify-self: center;
+  margin-block-end: 48px;
+}

packages/showcase/src/app/mercury-version.ts

@@ -1 +1 @@
-export const mercuryVersion = "0.33.0";
+export const mercuryVersion = "0.34.0";

packages/showcase/src/services/versioning.service.ts

@@ -0,0 +1,46 @@
+import { isPlatformBrowser } from "@angular/common";
+import { computed, inject, Injectable, PLATFORM_ID, signal } from "@angular/core";
+import { mercuryVersion } from "../app/mercury-version";
+
+const getLatestVersion = (availableVersions: string[]) =>
+  availableVersions.find(
+    version =>
+      !version.includes("-") && !version.includes("beta") && !version.includes("next")
+  );
+
+const checkIfCurrentVersionIsTheLatest = (
+  latestReleasedVersion: string | undefined
+): boolean => {
+  if (!latestReleasedVersion) {
+    return false;
+  }
+  latestReleasedVersion = latestReleasedVersion.trim().replace(/^v/, "");
+
+  return latestReleasedVersion === mercuryVersion;
+};
+
+@Injectable({ providedIn: "root" })
+export class VersioningService {
+  platform = inject(PLATFORM_ID);
+  allVersions = signal<string[]>([]);
+
+  latestVersion = computed<string | undefined>(() =>
+    getLatestVersion(this.allVersions())
+  );
+
+  isLatestVersion = computed<boolean>(() =>
+    checkIfCurrentVersionIsTheLatest(this.latestVersion())
+  );
+
+  constructor() {
+    if (isPlatformBrowser(this.platform)) {
+      // fetch("/services/versions")
+      fetch("/services/versions")
+        .then(response => response.json())
+        .then(versions => this.allVersions.set(versions))
+        .catch(err =>
+          console.error("Error getting the versions from the server", err)
+        );
+    }
+  }
+}

packages/showcase/src/styles.scss

@@ -95,7 +95,6 @@ ch-code {
 .blockquote-info {
   padding: 16px;
   margin: 0;
-  margin-block-start: 16px;
   border-inline-start: 2px solid var(--color-border-neutral-default);
   background-color: var(--mer-surface__elevation--01);
   border-radius: 4px;
@@ -106,6 +105,17 @@ ch-code {
   background-color: var(--mer-color__neutral-gray--600);
 }
 
+.blockquote-warning {
+  padding: 16px;
+  margin: 0;
+  margin-block-start: 16px;
+  border-inline-start: 2px solid var(--color-border-neutral-default);
+  background-color: var(--mer-color__message-yellow--200);
+  border-radius: 4px;
+  color: var(--mer-text__on-message);
+  line-height: 1.5;
+}
+
 .hyperlink {
   color: var(--mer-accent__primary, var(--text__primary));
   text-decoration: underline;

packages/showcase/src/user-controls/version-selector/version-selector.ng.html

@@ -0,0 +1,7 @@
+<ch-action-menu-render
+  class="version-selector dropdown"
+  [model]="allVersions()"
+  [inlineAlign]="'inside-start'"
+  >{{version}}
+  <ch-image class="version-selector-chevron" [src]="chevronDown" type="mask" />
+</ch-action-menu-render>

packages/showcase/src/user-controls/version-selector/version-selector.scss

@@ -0,0 +1,35 @@
+ch-action-menu-render.version-selector {
+  &::part(expandable-button) {
+    background-color: var(--mer-surface__elevation--02);
+    padding-inline: 8px 6px;
+    padding-block: 4px;
+    border-radius: 4px;
+    margin-inline-start: 12px;
+
+    &:hover {
+      background-color: var(--mer-surface__elevation--03);
+    }
+  }
+
+  &::part(window) {
+    --ch-popover-separation-y: 4px;
+  }
+
+  &::part(action link) {
+    text-decoration: unset;
+  }
+
+  // TODO: At the moment, we cannot style the button inside the action part
+  // with custom parts due to a bug in Chameleon. Once fixed, we can remove
+  // this workaround.
+  &::part(action button) {
+    background-color: var(--item__bg-color--selected);
+    border-color: var(--item__border-color--selected);
+    color: var(--mer-accent__primary);
+  }
+}
+
+.version-selector-chevron {
+  --ch-image-size: 16px;
+  margin-inline-start: 6px;
+}

packages/showcase/src/user-controls/version-selector/version-selector.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  CUSTOM_ELEMENTS_SCHEMA,
+  inject,
+  ViewEncapsulation
+} from "@angular/core";
+import type { ActionMenuModel } from "@genexus/chameleon-controls-library";
+import type { ActionMenuItemModel } from "@genexus/chameleon-controls-library/dist/types/components/action-menu/types";
+import { getIconPath } from "@genexus/mercury/assets-manager.js";
+import { mercuryVersion } from "../../app/mercury-version";
+import { VersioningService } from "../../services/versioning.service";
+
+const getVersionUrl = (version: string, latestVersion: string | undefined) =>
+  latestVersion === version ? "/" : `/${version}`;
+
+@Component({
+  selector: "version-selector",
+  templateUrl: "./version-selector.ng.html",
+  styleUrl: "./version-selector.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  encapsulation: ViewEncapsulation.None
+})
+export class VersionSelectorComponent {
+  versioningService = inject(VersioningService);
+
+  allVersions = computed<ActionMenuModel>(() =>
+    this.versioningService.allVersions().map(
+      version =>
+        ({
+          caption: version.replace("-beta", " (Beta)"),
+          id: version,
+          link:
+            version === this.version
+              ? undefined
+              : {
+                  url: getVersionUrl(version, this.versioningService.latestVersion())
+                }
+        }) satisfies ActionMenuItemModel
+    )
+  );
+
+  protected version = `v${mercuryVersion}`;
+
+  protected chevronDown = getIconPath({
+    category: "navigation",
+    name: "chevron-down",
+    colorType: "on-elevation"
+  });
+}