From 36b2db918535fc3c50be449e2adb3b34f29e70dd Mon Sep 17 00:00:00 2001
From: minnakt <47064971+minnakt@users.noreply.github.com>
Date: Mon, 18 Dec 2023 14:11:17 -0500
Subject: [PATCH] DEVPROD-754: Add /distros redirect route (#2196)

---
 .../integration/distroSettings/navigation.ts  |  8 ++++++++
 src/components/Content/index.tsx              |  5 +++++
 src/components/Header/AuxiliaryDropdown.tsx   |  2 +-
 .../Redirects/DistroSettingsRedirect.tsx      | 19 +++++++++++++++++++
 src/components/Redirects/index.ts             |  2 ++
 src/constants/routes.ts                       |  2 ++
 src/hooks/useFirstDistro.ts                   | 17 ++++++++++-------
 7 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Redirects/DistroSettingsRedirect.tsx

diff --git a/cypress/integration/distroSettings/navigation.ts b/cypress/integration/distroSettings/navigation.ts
index 8b0e39fd26..9d92d620e6 100644
--- a/cypress/integration/distroSettings/navigation.ts
+++ b/cypress/integration/distroSettings/navigation.ts
@@ -62,3 +62,11 @@ describe("using the distro dropdown", () => {
     });
   });
 });
+
+describe("/distros redirect route", () => {
+  it("should redirect to the first distro available", () => {
+    cy.visit("/distros");
+    cy.location("pathname").should("not.contain", "/distros");
+    cy.location("pathname").should("eq", "/distro/localhost/settings/general");
+  });
+});
diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index fb016acab5..b6df1ed174 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes, Navigate } from "react-router-dom";
 import {
+  DistroSettingsRedirect,
   ProjectSettingsRedirect,
   UserPatchesRedirect,
   WaterfallCommitsRedirect,
@@ -45,6 +46,10 @@ export const Content: React.FC = () => (
       <Route path={`${routes.distroSettings}/*`} element={<Distro />}>
         <Route path={tab} element={null} />
       </Route>
+      <Route
+        path={redirectRoutes.distroSettings}
+        element={<DistroSettingsRedirect />}
+      />
       <Route path={routes.host} element={<Host />} />
       <Route path={routes.hosts} element={<Hosts />} />
       <Route path={routes.jobLogs} element={<JobLogs />}>
diff --git a/src/components/Header/AuxiliaryDropdown.tsx b/src/components/Header/AuxiliaryDropdown.tsx
index dc71cf8b53..84c7c1e8f3 100644
--- a/src/components/Header/AuxiliaryDropdown.tsx
+++ b/src/components/Header/AuxiliaryDropdown.tsx
@@ -18,7 +18,7 @@ export const AuxiliaryDropdown: React.FC<AuxiliaryDropdownProps> = ({
   projectIdentifier,
 }) => {
   const { sendEvent } = useNavbarAnalytics();
-  const distro = useFirstDistro();
+  const { distro } = useFirstDistro();
 
   const menuItems = [
     {
diff --git a/src/components/Redirects/DistroSettingsRedirect.tsx b/src/components/Redirects/DistroSettingsRedirect.tsx
new file mode 100644
index 0000000000..345f180668
--- /dev/null
+++ b/src/components/Redirects/DistroSettingsRedirect.tsx
@@ -0,0 +1,19 @@
+import { Navigate } from "react-router-dom";
+import {
+  getDistroSettingsRoute,
+  DistroSettingsTabRoutes,
+} from "constants/routes";
+import { useFirstDistro } from "hooks";
+
+export const DistroSettingsRedirect: React.FC = () => {
+  const { distro, loading } = useFirstDistro();
+
+  if (loading) {
+    return null;
+  }
+  return (
+    <Navigate
+      to={getDistroSettingsRoute(distro, DistroSettingsTabRoutes.General)}
+    />
+  );
+};
diff --git a/src/components/Redirects/index.ts b/src/components/Redirects/index.ts
index bfea8f8f1c..d8b9def686 100644
--- a/src/components/Redirects/index.ts
+++ b/src/components/Redirects/index.ts
@@ -1,8 +1,10 @@
+import { DistroSettingsRedirect } from "./DistroSettingsRedirect";
 import { ProjectSettingsRedirect } from "./ProjectSettingsRedirect";
 import { UserPatchesRedirect } from "./UserPatchesRedirect";
 import { WaterfallCommitsRedirect } from "./WaterfallCommitsRedirect";
 
 export {
+  DistroSettingsRedirect,
   ProjectSettingsRedirect,
   UserPatchesRedirect,
   WaterfallCommitsRedirect,
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 777442bc65..34bf04c19c 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -56,6 +56,7 @@ const paths = {
   commits: "/commits",
   container: "/container",
   distro: "/distro",
+  distros: "/distros",
   host: "/host",
   hosts: "/hosts",
   jobLogs: "/job-logs",
@@ -74,6 +75,7 @@ const paths = {
   waterfall: "/waterfall",
 };
 export const redirectRoutes = {
+  distroSettings: paths.distros,
   projectSettings: paths.projects,
   userPatches: `${paths.user}/:id`,
   waterfall: `${paths.waterfall}/:projectIdentifier`,
diff --git a/src/hooks/useFirstDistro.ts b/src/hooks/useFirstDistro.ts
index 7c09714de3..fb0972b665 100644
--- a/src/hooks/useFirstDistro.ts
+++ b/src/hooks/useFirstDistro.ts
@@ -5,14 +5,17 @@ import { DISTROS } from "gql/queries";
 /**
  * `useFirstDistro` returns the alphabetically first distro from Evergreen's list of distros.
  * This can be used to generate a general link to distro settings.
- * @returns the distro ID
+ * @returns an object containing the distro ID (string) and loading state (boolean)
  */
 export const useFirstDistro = () => {
-  const { data } = useQuery<DistrosQuery, DistrosQueryVariables>(DISTROS, {
-    variables: {
-      onlySpawnable: false,
-    },
-  });
+  const { data, loading } = useQuery<DistrosQuery, DistrosQueryVariables>(
+    DISTROS,
+    {
+      variables: {
+        onlySpawnable: false,
+      },
+    }
+  );
 
-  return data?.distros?.[0]?.name ?? "ubuntu2204-large";
+  return { distro: data?.distros?.[0]?.name ?? "ubuntu2204-large", loading };
 };