EVG-17523 Set up route infrastructure (#10)

Author: khelif96

.eslintrc.js

@@ -41,6 +41,13 @@ module.exports = {
   },
   rules: {
     // Rules for ESLint.
+    "arrow-body-style": [
+      errorIfStrict,
+      "as-needed",
+      {
+        requireReturnForObjectLiteral: false,
+      },
+    ],
     "consistent-return": OFF,
     curly: [errorIfStrict, "multi-line"],
     eqeqeq: [errorIfStrict, "always", { null: "ignore" }],

cypress/integration/app.ts

@@ -5,8 +5,7 @@ describe("Basic app test", () => {
     cy.visit("/");
   });
 
-  it("should be able to see the search bar", () => {
-    cy.dataCy("searchbar-select").should("exist");
-    cy.dataCy("searchbar-input").should("exist");
+  it("should be able to see the loading page", () => {
+    cy.contains("I am the loading page");
   });
 });

cypress/integration/evergreenLogs/logView.ts

@@ -0,0 +1,11 @@
+// This file can be deleted later.
+
+describe("Basic evergreen log view", () => {
+  beforeEach(() => {
+    cy.visit("/evergreen/task_0/0/tasks");
+  });
+
+  it("should be able to see the log page", () => {
+    cy.contains("EVERGREEN_TASK_LOGS").should("be.visible");
+  });
+});

cypress/integration/evergreenTestLogs/logView.ts

@@ -0,0 +1,11 @@
+// This file can be deleted later.
+
+describe("Basic evergreen test log view", () => {
+  beforeEach(() => {
+    cy.visit("/test/task_0/0/test_0");
+  });
+
+  it("should be able to see the log page", () => {
+    cy.contains("EVERGREEN_TEST_LOGS").should("be.visible");
+  });
+});

cypress/integration/resmokeLogs/logView.ts

@@ -0,0 +1,11 @@
+// This file can be deleted later.
+
+describe("Basic resmoke log view", () => {
+  beforeEach(() => {
+    cy.visit("/resmoke/build_0/test_0");
+  });
+
+  it("should be able to see the log page", () => {
+    cy.contains("RESMOKE_LOGS").should("be.visible");
+  });
+});

src/App.tsx

@@ -1,7 +1,25 @@
-import SearchBar from "components/SearchBar";
+import { Global, css } from "@emotion/react";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import NavBar from "components/NavBar";
+import Content from "pages/Content";
 
-const App = () => {
-  return <SearchBar />;
-};
+const globalStyles = css`
+  background-color: white;
+  body {
+    margin: 0;
+  }
+`;
+
+const App = () => (
+  <>
+    <Global styles={globalStyles} />
+    <Router>
+      <NavBar />
+      <Routes>
+        <Route element={<Content />} path="/*" />
+      </Routes>
+    </Router>
+  </>
+);
 
 export default App;

src/components/NavBar/index.tsx

@@ -0,0 +1,18 @@
+import Styled from "@emotion/styled";
+import { palette } from "@leafygreen-ui/palette";
+import { size } from "constants/tokens";
+
+const { gray, white } = palette;
+
+const NavBar: React.FC = () => <Container>OUR TRUSTY NAVBAR</Container>;
+
+const Container = Styled.nav`
+    align-items: center;
+    background-color: ${white};
+    border-bottom: 1px solid ${gray.light2};
+    display: flex;
+    height: ${size.xl};
+    padding: 0 ${size.s};
+`;
+
+export default NavBar;

src/components/SearchBar/SearchBar.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import SearchBar from ".";
 
@@ -7,6 +7,13 @@ export default {
   component: SearchBar,
 } as ComponentMeta<typeof SearchBar>;
 
-export const Default = () => <SearchBar disabled={false} />;
+// 👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof SearchBar> = (args) => (
+  <SearchBar {...args} />
+);
 
-export const Disabled = () => <SearchBar disabled />;
+export const Default = Template.bind({});
+
+Default.args = {
+  disabled: false,
+};

src/constants/enums.ts

@@ -0,0 +1,7 @@
+enum LogTypes {
+  EVERGREEN_TASK_LOGS = "EVERGREEN_TASK_LOGS",
+  EVERGREEN_TEST_LOGS = "EVERGREEN_TEST_LOGS",
+  RESMOKE_LOGS = "RESMOKE_LOGS",
+}
+
+export { LogTypes };

src/constants/routes.ts

@@ -0,0 +1,23 @@
+const paths = {
+  home: "/",
+  evergreenLogs: "/evergreen",
+  testLogs: "/test",
+  resmokeLogs: "/resmoke",
+};
+
+const slugs = {
+  taskID: ":task_id",
+  execution: ":execution",
+  origin: ":origin",
+  testID: ":test_id",
+  buildID: ":build_id",
+};
+
+const routes = {
+  root: paths.home,
+  evergreenLogs: `${paths.evergreenLogs}/${slugs.taskID}/${slugs.execution}/${slugs.origin}`,
+  testLogs: `${paths.testLogs}/${slugs.taskID}/${slugs.execution}/${slugs.testID}`,
+  resmokeLogs: `${paths.resmokeLogs}/${slugs.buildID}/${slugs.testID}`,
+};
+
+export default routes;