feat: Add git tags to ref select

2i2c-org · Sep 5, 2024 · 1a84275 · 1a84275
1 parent 0c2f068
commit 1a84275
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 27 deletions.
diff --git a/src/ImageBuilder.jsx b/src/ImageBuilder.jsx
@@ -160,11 +160,11 @@ export function ImageBuilder({ name }) {
           className={`profile-option-container ${repoError ? "has-error" : ""}`}
         >
           <div className="profile-option-label-container">
-            <label>Branch</label>
+            <label>Git Ref</label>
           </div>
           <div className="profile-option-control-container">
             <Select
-              aria-label="Branch"
+              aria-label="Git Ref"
               ref={branchFieldRef}
               {...refFieldProps}
               aria-invalid={!!refError}

diff --git a/src/ImageBuilder.test.js b/src/ImageBuilder.test.js
@@ -8,7 +8,8 @@ import { SpawnerFormProvider } from "./state";
 test("select repository by org/repo", async () => {
   fetch
     .mockResponseOnce("")
-    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]));
+    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]))
+    .mockResponseOnce(JSON.stringify([{ name: "v1.0" }]));
   const user = userEvent.setup();
 
   render(
@@ -30,7 +31,7 @@ test("select repository by org/repo", async () => {
   await user.type(repoField, "org/repo");
   await user.click(document.body);
 
-  const branchField = await screen.getByLabelText("Branch");
+  const branchField = await screen.getByLabelText("Git Ref");
   await user.click(branchField);
   await user.click(screen.getByText("main"));
   expect(fetch.mock.calls[0][0]).toEqual(
@@ -41,7 +42,8 @@ test("select repository by org/repo", async () => {
 test("select repository by https://github.com/org/repo", async () => {
   fetch
     .mockResponseOnce("")
-    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]));
+    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]))
+    .mockResponseOnce(JSON.stringify([{ name: "v1.0" }]));
   const user = userEvent.setup();
 
   render(
@@ -63,7 +65,7 @@ test("select repository by https://github.com/org/repo", async () => {
   await user.type(repoField, "https://github.com/org/repo");
   await user.click(document.body);
 
-  const branchField = await screen.getByLabelText("Branch");
+  const branchField = await screen.getByLabelText("Git Ref");
   await user.click(branchField);
   await user.click(screen.getByText("main"));
   expect(fetch.mock.calls[0][0]).toEqual(
@@ -74,7 +76,8 @@ test("select repository by https://github.com/org/repo", async () => {
 test("select repository by https://www.github.com/org/repo", async () => {
   fetch
     .mockResponseOnce("")
-    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]));
+    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]))
+    .mockResponseOnce(JSON.stringify([{ name: "v1.0" }]));
   const user = userEvent.setup();
 
   render(
@@ -96,7 +99,7 @@ test("select repository by https://www.github.com/org/repo", async () => {
   await user.type(repoField, "https://www.github.com/org/repo");
   await user.click(document.body);
 
-  const branchField = await screen.getByLabelText("Branch");
+  const branchField = await screen.getByLabelText("Git Ref");
   await user.click(branchField);
   await user.click(screen.getByText("main"));
   expect(fetch.mock.calls[0][0]).toEqual(
@@ -107,7 +110,8 @@ test("select repository by https://www.github.com/org/repo", async () => {
 test("select repository by github.com/org/repo", async () => {
   fetch
     .mockResponseOnce("")
-    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]));
+    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]))
+    .mockResponseOnce(JSON.stringify([{ name: "v1.0" }]));
   const user = userEvent.setup();
 
   render(
@@ -129,7 +133,7 @@ test("select repository by github.com/org/repo", async () => {
   await user.type(repoField, "github.com/org/repo");
   await user.click(document.body);
 
-  const branchField = await screen.getByLabelText("Branch");
+  const branchField = await screen.getByLabelText("Git Ref");
   await user.click(branchField);
   await user.click(screen.getByText("main"));
   expect(fetch.mock.calls[0][0]).toEqual(
@@ -140,7 +144,8 @@ test("select repository by github.com/org/repo", async () => {
 test("select repository by www.github.com/org/repo", async () => {
   fetch
     .mockResponseOnce("")
-    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]));
+    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]))
+    .mockResponseOnce(JSON.stringify([{ name: "v1.0" }]));
   const user = userEvent.setup();
 
   render(
@@ -162,7 +167,7 @@ test("select repository by www.github.com/org/repo", async () => {
   await user.type(repoField, "www.github.com/org/repo");
   await user.click(document.body);
 
-  const branchField = await screen.getByLabelText("Branch");
+  const branchField = await screen.getByLabelText("Git Ref");
   await user.click(branchField);
   await user.click(screen.getByText("main"));
   expect(fetch.mock.calls[0][0]).toEqual(
@@ -197,7 +202,7 @@ test("invalid org/repo string (not matching pattern)", async () => {
       "Provide the repository as the format 'organization/repository'.",
     ),
   );
-  expect(screen.queryByLabelText("Branch")).not.toBeInTheDocument();
+  expect(screen.queryByLabelText("Git Ref")).not.toBeInTheDocument();
 });
 
 test("invalid org/repo string (wrong base URL)", async () => {
@@ -227,7 +232,7 @@ test("invalid org/repo string (wrong base URL)", async () => {
       "Provide the repository as the format 'organization/repository'.",
     ),
   );
-  expect(screen.queryByLabelText("Branch")).not.toBeInTheDocument();
+  expect(screen.queryByLabelText("Git Ref")).not.toBeInTheDocument();
 });
 
 test("repo not found", async () => {
@@ -253,7 +258,7 @@ test("repo not found", async () => {
   await user.type(repoField, "https://github.com/org/repo");
   await user.click(document.body);
 
-  expect(screen.queryByLabelText("Branch")).not.toBeInTheDocument();
+  expect(screen.queryByLabelText("Git Ref")).not.toBeInTheDocument();
 });
 
 test("no org/repo provided", async () => {
@@ -285,7 +290,8 @@ test("no org/repo provided", async () => {
 test("no branch selected", async () => {
   fetch
     .mockResponseOnce("")
-    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]));
+    .mockResponseOnce(JSON.stringify([{ name: "main" }, { name: "develop" }]))
+    .mockResponseOnce(JSON.stringify([{ name: "v1.0" }]));
   const user = userEvent.setup();
 
   render(
@@ -307,8 +313,8 @@ test("no branch selected", async () => {
   await user.type(repoField, "org/repo");
   await user.click(document.body);
 
-  expect(screen.queryByLabelText("Branch")).toBeInTheDocument();
+  expect(screen.queryByLabelText("Git Ref")).toBeInTheDocument();
   await user.click(screen.getByRole("button", { name: "Build image" }));
 
-  expect(screen.getByText("Select a branch."));
+  expect(screen.getByText("Select a git ref."));
 });
diff --git a/src/hooks/useRefField.js b/src/hooks/useRefField.js
@@ -1,5 +1,12 @@
 import { useState, useEffect, useMemo } from "react";
 
+function fetchRef(repository, refType) {
+  return fetch(`https://api.github.com/repos/${repository}/${refType}`)
+    .then((r) => {
+      if (r.ok) return r.json();
+    })
+}
+
 export default function useRefField(repository) {
   const [value, setValue] = useState("");
   const [options, setOptions] = useState();
@@ -13,17 +20,17 @@ export default function useRefField(repository) {
   useEffect(() => {
     setOptions();
     if (repository) {
-      fetch(`https://api.github.com/repos/${repository}/branches`)
-        .then((r) => {
-          if (r.ok) return r.json();
-        })
-        .then((r) => {
-          const branchNames = r.map(({ name }) => ({
+      Promise.all([
+        fetchRef(repository, "branches"),
+        fetchRef(repository, "tags"),
+      ])
+        .then((results) => {
+          const refOptions = results.flat().map(({ name }) => ({
             label: name,
             value: name,
           }));
-          setOptions(branchNames);
-        });
+          setOptions(refOptions);
+        })
     }
   }, [repository]);
 
@@ -35,7 +42,7 @@ export default function useRefField(repository) {
   const onBlur = () => {
     setError();
     if (!value) {
-      setError("Select a branch.");
+      setError("Select a git ref.");
     }
   };