DEVPROD-754: Add /distros redirect route (#2196)

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");
+  });
+});

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 />}>

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 = [
     {

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)}
+    />
+  );
+};

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,

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`,

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 };
 };