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]>
nrfconnect · Mar 26, 2024 · 9880dd7 · 9880dd7
1 parent 391e851
commit 9880dd7
Show file tree

Hide file tree

Showing 8 changed files with 1,012 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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"
     },

diff --git a/site/src/app/AppBlock.tsx b/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"

diff --git a/site/src/app/InstructionsDialog.tsx b/site/src/app/InstructionsDialog.tsx
@@ -27,7 +27,7 @@ const Step = ({ children }: PropsWithChildren) => (
 );
 
 function InstructionsDialog({ app, close }: Props): JSX.Element {
-    const latestRelease = app.releases.at(-1);
+    const latestRelease = app.releases.at(0)?.tag ?? app.defaultBranch;
 
     return (
         <div className="flex flex-col">
@@ -44,7 +44,7 @@ function InstructionsDialog({ app, close }: Props): JSX.Element {
 
                     <CodeBlock
                         text={`west init -m "${app.repo}" --mr ${
-                            latestRelease?.tag ?? '<latest tag>'
+                            latestRelease ?? '<latest tag>'
                         }`}
                     />
                 </Step>

diff --git a/site/src/app/ReleasesDropDownList.tsx b/site/src/app/ReleasesDropDownList.tsx
@@ -0,0 +1,30 @@
+/* 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.map((release) => ({ label: release.name, value: release.tag ?? '' })),];
+
+  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;
diff --git a/site/src/app/VSCodeButton.tsx b/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"
         >

diff --git a/site/src/app/VSCodeQueryParams.ts b/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;
diff --git a/site/src/app/app.css b/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%];
+}