chore: rebased with master

docs/docs-content/release-notes.md

@@ -9,7 +9,9 @@ sidebar_custom_props:
 tags: ["release-notes"]
 ---
 
-## March 30, 2024 - Release 4.3.0
+<ReleaseNotesVersions />
+
+## April 6, 2024 - Release 4.3.0
 
 This release contains several new exciting Technical Preview features, including the Edge Local UI and Cluster Profile
 variables. Other notable features include enhancements to the Palette CLI, support for deploying Konvoy clusters, Azure

package.json

@@ -56,7 +56,8 @@
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.64.1"
+    "sass": "^1.72.0",
+    "react-select": "^5.8.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.1",
@@ -91,7 +92,7 @@
     "prettier": "3.2.5",
     "semantic-release": "^20.1.0",
     "test-links": "^0.0.1",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "webpconvert": "^3.0.1"

src/components/ReleaseNotesVersions/ReleaseNotesVersions.module.scss

@@ -0,0 +1,12 @@
+.dropdownContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.dropdownContainer > div:first-child {
+  width: 50%;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}

src/components/ReleaseNotesVersions/ReleaseNotesVersions.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen, logRoles } from "@testing-library/react";
+import ReleaseNotesVersions from "./ReleaseNotesVersions";
+
+// These test are pretty much useless.
+// The only real purpose they show is catching simple issues, or component signature changes.
+
+jest.mock("./ReleaseNotesVersions", () => {
+  return jest.fn(() => {
+    return <div data-testid="mock-rl-note-admn"></div>;
+  });
+});
+// Mock any other dependencies here
+
+describe("ReleaseNotesVersions", () => {
+  it("renders without crashing", () => {
+    render(<ReleaseNotesVersions />);
+    expect(screen.getByTestId("mock-rl-note-admn")).toBeVisible();
+    expect(screen.getByTestId("mock-rl-note-admn")).toBeInTheDocument();
+  });
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});

src/components/ReleaseNotesVersions/ReleaseNotesVersions.tsx

@@ -0,0 +1,145 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-return */
+
+import React, { useEffect, useState } from "react";
+import { useHistory } from "@docusaurus/router";
+import Admonition from "@theme/Admonition";
+import { useVersions } from "@docusaurus/plugin-content-docs/client";
+import styles from "./ReleaseNotesVersions.module.scss";
+import ArchivedVersions from "../../../archiveVersions.json";
+import Select, { components, OptionProps } from "react-select";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+
+interface VersionOption {
+  label: string;
+  value: string;
+  url: string;
+  isExternal: boolean;
+}
+
+const externalDomainURL = "legacy.docs.spectrocloud.com";
+
+interface CustomOptionProps extends OptionProps<VersionOption, false> {}
+
+const CustomOption: React.FC<CustomOptionProps> = (props) => {
+  const {
+    data: { label, isExternal },
+  } = props;
+
+  // Return the Option component with proper props spread and conditional rendering
+  return (
+    <components.Option {...props}>
+      {label}
+      {isExternal && <FontAwesomeIcon icon={faArrowUpRightFromSquare} />}
+    </components.Option>
+  );
+};
+
+export function ReleaseNotesVersions(): JSX.Element | null {
+  const [selectedVersion, setSelectedVersion] = useState<VersionOption | null>(null);
+  const history = useHistory();
+  const isBrowser = useIsBrowser();
+  const isExternal = isBrowser && isExternalDomain(externalDomainURL, isBrowser);
+
+  const versionsList = useVersions("default");
+
+  const versions: VersionOption[] = [
+    ...versionsList.map(({ label, path }) => ({
+      label: label === "current" ? "latest" : label,
+      value: label,
+      url: path === "/" ? "/release-notes" : `${path}/release-notes`,
+      isExternal: path.startsWith("http"),
+    })),
+    ...Object.entries(ArchivedVersions).map(([versionName, versionUrl]) => ({
+      label: `${versionName} `,
+      value: `${versionName} `,
+      url: versionUrl,
+      isExternal: versionUrl.startsWith("http"),
+    })),
+  ];
+
+  if (isExternal) {
+    return <></>;
+  }
+
+  useEffect(() => {
+    const savedVersion = localStorage.getItem("selectedVersion");
+    if (savedVersion) {
+      const savedVersionObj: any = versions.find((v) => v.value === savedVersion);
+      if (savedVersionObj?.value !== selectedVersion?.value) {
+        setSelectedVersion(savedVersionObj);
+      }
+    }
+  }, [selectedVersion?.value]);
+
+  const handleVersionChange = (selectedOption: VersionOption | null) => {
+    setSelectedVersion(selectedOption);
+    localStorage.setItem("selectedVersion", selectedOption?.value ?? "");
+
+    if (selectedOption?.isExternal) {
+      window.open(selectedOption.url, "_blank");
+    } else {
+      history.push(selectedOption?.url ?? "");
+    }
+  };
+
+  const customSelectStyles = {
+    control: (provided: any) => ({
+      ...provided,
+      background: "var(--custom-release-notes-background-color)",
+      color: "var(--custom-release-notes-background-font-color)",
+      boxShadow: "none",
+    }),
+    menu: (provided: any) => ({
+      ...provided,
+      marginTop: "0",
+      backgroundColor: "var(--custom-release-notes-menu-padding)",
+    }),
+    singleValue: (provided: any) => ({
+      ...provided,
+      color: "var(--custom-release-notes-background-font-color)",
+    }),
+    option: (provided: any, state: any) => ({
+      ...provided,
+      borderRadius: "0.25rem",
+      color: "var(--custom-release-notes-option-font-color)",
+      background: state.isSelected
+        ? "var(--custom-release-notes-selected-background)"
+        : state.isFocused
+          ? "var(--custom-release-notes-active-option-hover)"
+          : "var(--custom-release-notes-background-color)",
+    }),
+  };
+
+  return (
+    <Admonition type="tip">
+      <p>
+        Are you looking for the release notes to a specific version of Palette? Use the version selector below to
+        navigate to the release notes of the desired version.
+      </p>
+      <div className={styles.dropdownContainer}>
+        <Select
+          classNamePrefix="reactSelect"
+          onChange={handleVersionChange}
+          value={selectedVersion}
+          options={versions}
+          components={{ Option: CustomOption }}
+          styles={customSelectStyles}
+        />
+      </div>
+    </Admonition>
+  );
+}
+
+//isExternalDomain checks if the url is external
+export function isExternalDomain(url: string, isBrowser: boolean): boolean {
+  if (!isBrowser) {
+    return false;
+  } else {
+    const currentDomain = window.location.hostname;
+    return currentDomain.includes(url);
+  }
+}
+
+export default ReleaseNotesVersions;

src/components/ReleaseNotesVersions/index.ts

@@ -0,0 +1,3 @@
+import ReleaseNotesVersions from "./ReleaseNotesVersions";
+
+export default ReleaseNotesVersions;

src/css/dark-mode.scss

@@ -38,6 +38,12 @@ html[data-theme="dark"] {
   --simpleCardSubtle: #b5bdd4;
   --simpleCardButtonIcon: #818ba9;
   --simpleCardBorder: #1f263c;
+  --custom-release-notes-background-color: #2b323c;
+  --custom-release-notes-background-font-color: var(--ifm-dropdown-link-color);
+  --custom-release-notes-active-option-hover: var(--ifm-dropdown-hover-background-color);
+  --custom-release-notes-selected-background: #2b323c;
+  --custom-release-notes-option-font-color: white;
+  --custom-release-notes-menu-padding: #2b323c;
 
   .theme-last-updated {
     color: var(--ifm-font-color-base);

src/css/light-mode.scss

@@ -35,6 +35,12 @@ html[data-theme="light"] {
   --simpleCardSubtle: #545f7e;
   --simpleCardButtonIcon: #545f7e;
   --simpleCardBorder: #dee1ea;
+  --custom-release-notes-background-color: var(--ifm-background-color);
+  --custom-release-notes-background-font-color: var(--ifm-dropdown-link-color);
+  --custom-release-notes-active-option-hover: var(--ifm-dropdown-hover-background-color);
+  --custom-release-notes-selected-background: #bec0c4;
+  --custom-release-notes-option-font-color: black;
+  --custom-release-notes-menu-padding: white;
 
   .theme-doc-sidebar-item-category-level-1 .menu__list-item {
     .menu__link:hover {

src/theme/MDXComponents/MDXComponents.ts

@@ -11,6 +11,7 @@ import PacksTable from "@site/src/components/PacksTable/PacksTable";
 import TOCInline from "@theme/TOCInline";
 import { TechnicalPreviewReleaseNote as TpBadge } from "@site/src/components/Badges";
 import SimpleCardGrid from "@site/src/components/SimpleCardGrid/index";
+import ReleaseNotesVersions from "@site/src/components/ReleaseNotesVersions/index";
 
 export default {
   ...MDXComponents,
@@ -26,4 +27,5 @@ export default {
   TOCInline,
   TpBadge,
   SimpleCardGrid,
+  ReleaseNotesVersions,
 };