index: Add dropdown for picking release

It allows the user to choose the extensions's release. Pushing the
VSCode button will redirect to a url that has that particular release.

Signed-off-by: Filip Zajdel <[email protected]>

package.json

@@ -36,6 +36,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-markdown": "^9.0.0",
+        "react-select": "^5.8.0",
         "supports-color": "^9.4.0",
         "tailwindcss": "^3.3.3"
     },

site/next.config.js

@@ -7,6 +7,9 @@
 const nextConfig = {
     output: 'export',
     basePath: '/ncs-app-index',
+    compiler: {
+        styledComponents: true,
+    }
 };
 
 module.exports = nextConfig;

site/src/app/AppBlock.tsx

@@ -19,9 +19,12 @@ import {
     VerifiedIcon,
 } from '@primer/octicons-react';
 
+import { useState } from 'react';
 import { NormalisedApp, Organization } from '../schema';
 import VSCodeButton from './VSCodeButton';
 import TagList from './TagList';
+import ReleasesDropDownList from './ReleasesDropDownList'
+import VSCodeQueryParams from './VSCodeQueryParams';
 
 interface Props {
     app: NormalisedApp;
@@ -37,6 +40,9 @@ function Avatar({ app }: { app: NormalisedApp }) {
 }
 
 function AppBlock({ app, setShowingAppId }: Props): JSX.Element {
+
+    const [queryParams, setQueryParams] = useState(new VSCodeQueryParams(app));
+
     return (
         <li className="flex w-full max-w-5xl flex-col gap-3 border border-gray-300 bg-white p-3 lg:w-2/3">
             <div className="flex gap-3">
@@ -89,7 +95,14 @@ function AppBlock({ app, setShowingAppId }: Props): JSX.Element {
             </Markdown>
 
             <div className="flex flex-wrap items-center gap-2">
-                <VSCodeButton app={app} />
+                <ReleasesDropDownList app={app}
+                    onReleaseChosen={(branch) => {
+                        const newQueryParams = new VSCodeQueryParams(app);
+                        newQueryParams.branch = branch;
+                        setQueryParams(newQueryParams);
+                }}/>
+
+                <VSCodeButton queryParams={queryParams} />
 
                 <button
                     className="button bg-[#768692] text-white"

site/src/app/ReleasesDropDownList.tsx

@@ -0,0 +1,36 @@
+/* Copyright (c) 2024 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import { NormalisedApp } from '../schema';
+import Select from 'react-select';
+
+interface Props {
+    app: NormalisedApp;
+    onReleaseChosen: (tag: string) => void;
+};
+
+function ReleasesDropDownList({ app, onReleaseChosen }: Props): JSX.Element {
+
+  const releases = [{ label: app.defaultBranch, value: app.defaultBranch }];
+
+  app.releases.reduce((releaseList, release) => {
+    releaseList.push({label: release.name, value: release.tag ?? ""});
+    return releaseList;
+  }, releases);
+
+  return (
+    <Select
+      instanceId={`${app.id}-release-select`}
+      defaultValue={releases[0]}
+      options={releases}
+      className="dropdown"
+      menuPlacement="auto"
+      onChange={(option) => { onReleaseChosen(option ? option.value : ""); }}
+      hideSelectedOptions={true}
+    />
+  )
+}
+
+export default ReleasesDropDownList;

site/src/app/VSCodeButton.tsx

@@ -4,23 +4,16 @@
  */
 
 import Image from 'next/image';
-import { NormalisedApp } from '../schema';
+import VSCodeQueryParams from './VSCodeQueryParams';
 
 interface Props {
-    app: NormalisedApp;
+    queryParams: VSCodeQueryParams;
 }
 
-function VSCodeButton({ app }: Props): JSX.Element {
-    const params = new URLSearchParams({
-        app: app.name,
-        branch: app.defaultBranch,
-        manifest: app.manifest ?? '',
-        repo: app.repo,
-    });
-
+function VSCodeButton({ queryParams }: Props): JSX.Element {
     return (
         <a
-            href={`vscode://nordic-semiconductor.nrf-connect-extension-pack/get-application?${params.toString()}`}
+            href={`vscode://nordic-semiconductor.nrf-connect-extension-pack/get-application?${queryParams.toString()}`}
             title="Open in nRF Connect for VS Code"
             className="button bg-[#0032A0] text-white"
         >

site/src/app/VSCodeQueryParams.ts

@@ -0,0 +1,32 @@
+/* Copyright (c) 2024 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import { NormalisedApp } from '../schema';
+
+
+class VSCodeQueryParams{
+    app: string;
+    branch: string;
+    manifest: string;
+    repo: string;
+
+    constructor(app: NormalisedApp) {
+        this.app = app.name;
+        this.branch = app.defaultBranch;
+        this.manifest = app.manifest ?? "";
+        this.repo = app.repo;
+    }
+
+    toString(): string {
+        return new URLSearchParams({
+            app: this.app,
+            branch: this.branch,
+            manifest: this.manifest,
+            repo: this.repo,
+        }).toString();
+    }
+};
+
+export default VSCodeQueryParams;

site/src/app/app.css

@@ -86,3 +86,7 @@ body {
 .description a {
     @apply text-blue-500 hover:text-blue-600 underline visited:text-purple-600 hover:visited:text-purple-700
 }
+
+.dropdown {
+    @apply font-thin max-w-[20%] min-w-[15%];
+}