chore: use PascalCase for pages files (#1089)

* chore: use PascalCase for pages files

* fixup

* fixup

* fixup

* fixup

* fixup

* fixup

site/src/AppRouter.tsx

@@ -4,21 +4,21 @@ import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
 import { RequireAuth } from "./components/Page/RequireAuth"
 import { PreferencesLayout } from "./components/Preferences/Layout"
 import { IndexPage } from "./pages"
-import { NotFoundPage } from "./pages/404"
-import { CliAuthenticationPage } from "./pages/cli-auth"
-import { HealthzPage } from "./pages/healthz"
-import { SignInPage } from "./pages/login"
-import { OrganizationsPage } from "./pages/orgs"
-import { PreferencesAccountPage } from "./pages/preferences/account"
-import { PreferencesLinkedAccountsPage } from "./pages/preferences/linkedAccounts"
-import { PreferencesSecurityPage } from "./pages/preferences/security"
-import { PreferencesSSHKeysPage } from "./pages/preferences/sshKeys"
-import { SettingsPage } from "./pages/settings"
-import { TemplatesPage } from "./pages/templates"
-import { TemplatePage } from "./pages/templates/[organization]/[template]"
-import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create"
+import { NotFoundPage } from "./pages/404Page/404Page"
+import { CliAuthenticationPage } from "./pages/CliAuthPage/CliAuthPage"
+import { HealthzPage } from "./pages/HealthzPage/HealthzPage"
+import { LoginPage } from "./pages/LoginPage/LoginPage"
+import { OrgsPage } from "./pages/OrgsPage/OrgsPage"
+import { AccountPage } from "./pages/PreferencesPages/AccountPage/AccountPage"
+import { LinkedAccountsPage } from "./pages/PreferencesPages/LinkedAccountsPage/LinkedAccountsPage"
+import { SecurityPage } from "./pages/PreferencesPages/SecurityPage/SecurityPage"
+import { SSHKeysPage } from "./pages/PreferencesPages/SSHKeysPage/SSHKeysPage"
+import { SettingsPage } from "./pages/SettingsPage/SettingsPage"
+import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
+import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
+import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
-import { WorkspacePage } from "./pages/workspaces/[workspace]"
+import { WorkspacePage } from "./pages/WorkspacesPage/WorkspacesPage"
 
 export const AppRouter: React.FC = () => (
   <Routes>
@@ -32,7 +32,7 @@ export const AppRouter: React.FC = () => (
         }
       />
 
-      <Route path="login" element={<SignInPage />} />
+      <Route path="login" element={<LoginPage />} />
       <Route path="healthz" element={<HealthzPage />} />
       <Route path="cli-auth" element={<CliAuthenticationPage />} />
 
@@ -88,7 +88,7 @@ export const AppRouter: React.FC = () => (
         path="orgs"
         element={
           <AuthAndFrame>
-            <OrganizationsPage />
+            <OrgsPage />
           </AuthAndFrame>
         }
       />
@@ -102,10 +102,10 @@ export const AppRouter: React.FC = () => (
       />
 
       <Route path="preferences" element={<PreferencesLayout />}>
-        <Route path="account" element={<PreferencesAccountPage />} />
-        <Route path="security" element={<PreferencesSecurityPage />} />
-        <Route path="ssh-keys" element={<PreferencesSSHKeysPage />} />
-        <Route path="linked-accounts" element={<PreferencesLinkedAccountsPage />} />
+        <Route path="account" element={<AccountPage />} />
+        <Route path="security" element={<SecurityPage />} />
+        <Route path="ssh-keys" element={<SSHKeysPage />} />
+        <Route path="linked-accounts" element={<LinkedAccountsPage />} />
       </Route>
 
       {/* Using path="*"" means "match anything", so this route

site/src/pages/CliAuthPage/CliAuthPage.tsx

@@ -1,10 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext, useEffect, useState } from "react"
-import { getApiKey } from "../api"
-import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
-import { CliAuthToken } from "../components/SignIn/CliAuthToken"
-import { XServiceContext } from "../xServices/StateContext"
+import { getApiKey } from "../../api"
+import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { CliAuthToken } from "../../components/SignIn/CliAuthToken"
+import { XServiceContext } from "../../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {
   const xServices = useContext(XServiceContext)

site/src/pages/LoginPage/LoginPage.test.tsx

@@ -2,12 +2,12 @@ import { act, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { rest } from "msw"
 import React from "react"
-import { Language } from "../components/SignIn/SignInForm"
-import { history, render } from "../testHelpers"
-import { server } from "../testHelpers/server"
-import { SignInPage } from "./login"
+import { Language } from "../../components/SignIn/SignInForm"
+import { history, render } from "../../testHelpers"
+import { server } from "../../testHelpers/server"
+import { LoginPage } from "./LoginPage"
 
-describe("SignInPage", () => {
+describe("LoginPage", () => {
   beforeEach(() => {
     history.replace("/login")
     // appear logged out
@@ -20,7 +20,7 @@ describe("SignInPage", () => {
 
   it("renders the sign-in form", async () => {
     // When
-    render(<SignInPage />)
+    render(<LoginPage />)
 
     // Then
     await screen.findByText(Language.signIn)
@@ -36,7 +36,7 @@ describe("SignInPage", () => {
     )
 
     // When
-    render(<SignInPage />)
+    render(<LoginPage />)
     const email = screen.getByLabelText(Language.emailLabel)
     const password = screen.getByLabelText(Language.passwordLabel)
     await userEvent.type(email, "test@coder.com")

site/src/pages/LoginPage/LoginPage.tsx

@@ -2,10 +2,10 @@ import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { Navigate, useLocation } from "react-router-dom"
-import { Footer } from "../components/Page/Footer"
-import { retrieveRedirect } from "../util/redirect"
-import { XServiceContext } from "../xServices/StateContext"
-import { SignInForm } from "./../components/SignIn/SignInForm"
+import { Footer } from "../../components/Page/Footer"
+import { SignInForm } from "../../components/SignIn/SignInForm"
+import { retrieveRedirect } from "../../util/redirect"
+import { XServiceContext } from "../../xServices/StateContext"
 
 export const useStyles = makeStyles((theme) => ({
   root: {
@@ -27,7 +27,7 @@ export const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const SignInPage: React.FC = () => {
+export const LoginPage: React.FC = () => {
   const styles = useStyles()
   const location = useLocation()
   const xServices = useContext(XServiceContext)

site/src/pages/OrgsPage/OrgsPage.tsx

@@ -1,5 +1,5 @@
 import React from "react"
 
-export const OrganizationsPage: React.FC = () => {
+export const OrgsPage: React.FC = () => {
   return <div>Coming soon!</div>
 }

site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx

@@ -1,16 +1,16 @@
 import { fireEvent, screen, waitFor } from "@testing-library/react"
 import React from "react"
-import * as API from "../../api"
-import * as AccountForm from "../../components/Preferences/AccountForm"
-import { GlobalSnackbar } from "../../components/Snackbar/GlobalSnackbar"
-import { renderWithAuth } from "../../testHelpers"
-import * as AuthXService from "../../xServices/auth/authXService"
-import { Language, PreferencesAccountPage } from "./account"
+import * as API from "../../../api"
+import * as AccountForm from "../../../components/Preferences/AccountForm"
+import { GlobalSnackbar } from "../../../components/Snackbar/GlobalSnackbar"
+import { renderWithAuth } from "../../../testHelpers"
+import * as AuthXService from "../../../xServices/auth/authXService"
+import { AccountPage, Language } from "./AccountPage"
 
 const renderPage = () => {
   return renderWithAuth(
     <>
-      <PreferencesAccountPage />
+      <AccountPage />
       <GlobalSnackbar />
     </>,
   )
@@ -30,7 +30,7 @@ const fillAndSubmitForm = async () => {
   fireEvent.click(screen.getByText(AccountForm.Language.updatePreferences))
 }
 
-describe("PreferencesAccountPage", () => {
+describe("AccountPage", () => {
   describe("when it is a success", () => {
     it("shows the success message", async () => {
       jest.spyOn(API, "updateProfile").mockImplementationOnce((userId, data) =>

site/src/pages/PreferencesPages/AccountPage/AccountPage.tsx

@@ -1,9 +1,9 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { isApiError, mapApiErrorToFieldErrors } from "../../api/errors"
-import { AccountForm } from "../../components/Preferences/AccountForm"
-import { Section } from "../../components/Section/Section"
-import { XServiceContext } from "../../xServices/StateContext"
+import { isApiError, mapApiErrorToFieldErrors } from "../../../api/errors"
+import { AccountForm } from "../../../components/Preferences/AccountForm"
+import { Section } from "../../../components/Section/Section"
+import { XServiceContext } from "../../../xServices/StateContext"
 
 export const Language = {
   title: "Account",
@@ -11,7 +11,7 @@ export const Language = {
   unknownError: "Oops, an unknown error occurred.",
 }
 
-export const PreferencesAccountPage: React.FC = () => {
+export const AccountPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
   const { me, updateProfileError } = authState.context

site/src/pages/PreferencesPages/AccountPage/LinkedAccountsPage.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section/Section"
+import { Section } from "../../../components/Section/Section"
 
 const Language = {
   title: "Linked Accounts",
@@ -7,6 +7,6 @@ const Language = {
     "Linking your Coder account will add your workspace SSH key, allowing you to perform Git actions on all your workspaces.",
 }
 
-export const PreferencesLinkedAccountsPage: React.FC = () => {
+export const LinkedAccountsPage: React.FC = () => {
   return <Section title={Language.title} description={Language.description} />
 }

site/src/pages/PreferencesPages/AccountPage/SSHKeysPage.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section/Section"
+import { Section } from "../../../components/Section/Section"
 
 const Language = {
   title: "SSH Keys",
@@ -7,6 +7,6 @@ const Language = {
     "Coder automatically inserts a private key into every workspace; you can add the corresponding public key to any services (such as Git) that you need access to from your workspace.",
 }
 
-export const PreferencesSSHKeysPage: React.FC = () => {
+export const SSHKeysPage: React.FC = () => {
   return <Section title={Language.title} description={Language.description} />
 }

site/src/pages/PreferencesPages/LinkedAccountsPage/LinkedAccountsPage.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { Section } from "../../../components/Section/Section"
+
+const Language = {
+  title: "Linked Accounts",
+  description:
+    "Linking your Coder account will add your workspace SSH key, allowing you to perform Git actions on all your workspaces.",
+}
+
+export const LinkedAccountsPage: React.FC = () => {
+  return <Section title={Language.title} description={Language.description} />
+}

site/src/pages/PreferencesPages/SSHKeysPage/SSHKeysPage.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { Section } from "../../../components/Section/Section"
+
+const Language = {
+  title: "SSH Keys",
+  description:
+    "Coder automatically inserts a private key into every workspace; you can add the corresponding public key to any services (such as Git) that you need access to from your workspace.",
+}
+
+export const SSHKeysPage: React.FC = () => {
+  return <Section title={Language.title} description={Language.description} />
+}

site/src/pages/PreferencesPages/SecurityPage/SecurityPage.tsx

@@ -1,11 +1,11 @@
 import React from "react"
-import { Section } from "../../components/Section/Section"
+import { Section } from "../../../components/Section/Section"
 
 const Language = {
   title: "Security",
   description: "Changing your password will sign you out of your current session.",
 }
 
-export const PreferencesSecurityPage: React.FC = () => {
+export const SecurityPage: React.FC = () => {
   return <Section title={Language.title} description={Language.description} />
 }