fix(ui): environment settings title (#1920)

## Describe your changes

Fixes NAN-556

- Correct title and reference for environment settings

docs-v2/host/self-host/self-hosting-instructions.mdx

@@ -20,7 +20,7 @@ SERVER_PORT=<PORT>
 
 The resulting callback URL for OAuth will be `<INSTANCE-URL>/oauth/callback`.
 
-<Note>You can customize the callback URL by updating "Callback URL" field in the "Project Settings" tab in the Nango admin.</Note>
+<Note>You can customize the callback URL by updating "Callback URL" field in the "Environment Settings" tab in the Nango admin.</Note>
 
 <Note>
     If you are using a custom domain, you should change the `NANGO_SERVER_URL` server environment variable accordingly (in the `.env` file or directly on
@@ -87,7 +87,7 @@ encryption key once you have set it.
 
 ### Custom websockets path[](#custom-websockets-path 'Direct link to Custom websockets path')
 
-The Nango server serves websockets from the `/` path by default for use by `@nangohq/frontend` during the login flow. 
+The Nango server serves websockets from the `/` path by default for use by `@nangohq/frontend` during the login flow.
 If you want more isolation between websockets and the dashboard (also served from `/`), then you can set the `NANGO_SERVER_WEBSOCKETS_PATH` environment variable to serve websockets from a different path:
 
 ```

docs-v2/reference/api/authentication.mdx

@@ -2,8 +2,8 @@
 title: 'Authentication'
 ---
 
-Use the Nango Secret Key available in your [Project Settings](https://app.nango.dev/project-settings) as Bearer token in the `Authorization` header:
+Use the Nango Secret Key available in your [Environment Settings](https://app.nango.dev/environment-settings) as Bearer token in the `Authorization` header:
 
 ```
 Authorization: Bearer {nango-secret-key}
-```
+```

docs-v2/reference/cli.mdx

@@ -6,7 +6,7 @@ icon: 'terminal'
 
 ### Install the Nango CLI
 
-Install the Nango CLI globally: 
+Install the Nango CLI globally:
 ```bash
 npm install nango -g
 ```
@@ -24,20 +24,20 @@ NANGO_SECRET_KEY_PROD='<prod-secret-key>'
 NANGO_SECRET_KEY_DEV='<dev-secret-key>'
 ```
 
-Get your `prod` and `dev` secret keys from the [Project Settings tab](https://app.nango.dev/project-settings) (toggle between the `prod` and `dev` environment in the left nav bar).
+Get your `prod` and `dev` secret keys from the [Environment Settings tab](https://app.nango.dev/environment-settings) (toggle between the `prod` and `dev` environment in the left nav bar).
 
 <Info>
 For self-hosting, set the `NANGO_HOSTPORT` env variable to `http://localhost:3003` (for local development) or your instance's URL.
 </Info>
 
 ## All CLI commands & command details
 
-Check out all CLI commands by running: 
+Check out all CLI commands by running:
 ```bash
 nango
 ```
 
-Get details about a specific command by running: 
+Get details about a specific command by running:
 ```bash
 nango [command] --help
 ```
@@ -57,14 +57,14 @@ Global command flags:
 
 ```bash
 # Command flag to auto-confirm all prompts (useful for CI).
---auto-confirm 
+--auto-confirm
 ```
 
 Environment variables:
 ```bash
 # Recommendation: in a ".env" file in ./nango-integrations.
 
-# Authenticates the CLI (get the keys in the dashboard's Projects Settings).
+# Authenticates the CLI (get the keys in the dashboard's Environment Settings).
 NANGO_SECRET_KEY_DEV=xxxx-xxx-xxxx
 NANGO_SECRET_KEY_PROD=xxxx-xxx-xxxx
 

packages/cli/lib/cli.ts

@@ -231,7 +231,7 @@ export const init = async (debug = false) => {
         }
         fs.writeFileSync(
             envFileLocation,
-            `# Authenticates the CLI (get the keys in the dashboard's Projects Settings).
+            `# Authenticates the CLI (get the keys in the dashboard's Environment Settings).
 #NANGO_SECRET_KEY_DEV=xxxx-xxx-xxxx
 #NANGO_SECRET_KEY_PROD=xxxx-xxx-xxxx
 

packages/cli/lib/index.ts

@@ -57,7 +57,7 @@ Available environment variables available:
 
 # Recommendation: in a ".env" file in ./nango-integrations.
 
-# Authenticates the CLI (get the keys in the dashboard's Projects Settings).
+# Authenticates the CLI (get the keys in the dashboard's Environment Settings).
 NANGO_SECRET_KEY_DEV=xxxx-xxx-xxxx
 NANGO_SECRET_KEY_PROD=xxxx-xxx-xxxx
 

packages/webapp/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { SWRConfig } from 'swr';
-import { Routes, Route, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes } from 'react-router-dom';
+import { Routes, Route, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes, Navigate } from 'react-router-dom';
 import { MantineProvider } from '@mantine/core';
 import * as Sentry from '@sentry/react';
 import { useSignout } from './utils/user';
@@ -20,7 +20,7 @@ import ShowIntegration from './pages/Integration/Show';
 import ConnectionList from './pages/Connection/List';
 import Connection from './pages/Connection/Show';
 import ConnectionCreate from './pages/Connection/Create';
-import ProjectSettings from './pages/ProjectSettings';
+import { EnvironmentSettings } from './pages/EnvironmentSettings';
 import PrivateRoute from './components/PrivateRoute';
 import ForgotPassword from './pages/ForgotPassword';
 import ResetPassword from './pages/ResetPassword';
@@ -103,7 +103,8 @@ const App = () => {
                         <Route path="/:env/connections/create/:providerConfigKey" element={<ConnectionCreate />} />
                         <Route path="/:env/connections/:providerConfigKey/:connectionId" element={<Connection />} />
                         <Route path="/:env/activity" element={<Activity />} />
-                        <Route path="/:env/project-settings" element={<ProjectSettings />} />
+                        <Route path="/:env/environment-settings" element={<EnvironmentSettings />} />
+                        <Route path="/:env/project-settings" element={<Navigate to="/environment-settings" />} />
                         {AUTH_ENABLED && (
                             <>
                                 <Route path="/:env/account-settings" element={<AccountSettings />} />

packages/webapp/src/components/LeftNavBar.tsx

@@ -22,7 +22,7 @@ import { useEnvironment } from '../hooks/useEnvironment';
 export enum LeftNavBarItems {
     Integrations = 0,
     Connections,
-    ProjectSettings,
+    EnvironmentSettings,
     Activity,
     Syncs,
     AccountSettings,
@@ -172,13 +172,13 @@ export default function LeftNavBar(props: LeftNavBarProps) {
                             <p>Activity</p>
                         </Link>
                         <Link
-                            to={`/${env}/project-settings`}
+                            to={`/${env}/environment-settings`}
                             className={`flex h-9 p-2 gap-x-3 items-center rounded-md text-sm ${navTextColor} ${
-                                props.selectedItem === LeftNavBarItems.ProjectSettings ? `${navActiveBg} text-white` : `text-gray-400 ${navHoverBg}`
+                                props.selectedItem === LeftNavBarItems.EnvironmentSettings ? `${navActiveBg} text-white` : `text-gray-400 ${navHoverBg}`
                             }`}
                         >
                             <AdjustmentsHorizontalIcon
-                                className={`flex h-5 w-5 ${props.selectedItem === LeftNavBarItems.ProjectSettings ? 'text-white' : 'text-gray-400'}`}
+                                className={`flex h-5 w-5 ${props.selectedItem === LeftNavBarItems.EnvironmentSettings ? 'text-white' : 'text-gray-400'}`}
                             />
                             <p>Environment Settings</p>
                         </Link>

packages/webapp/src/pages/ProjectSettings.tsx → packages/webapp/src/pages/EnvironmentSettings.tsx

@@ -23,7 +23,7 @@ import { useStore } from '../store';
 import Button from '../components/ui/button/Button';
 import { useEnvironment } from '../hooks/useEnvironment';
 
-export default function ProjectSettings() {
+export const EnvironmentSettings: React.FC = () => {
     const [secretKey, setSecretKey] = useState('');
     const [secretKeyRotatable, setSecretKeyRotatable] = useState(true);
     const [hasPendingSecretKey, setHasPendingSecretKey] = useState(false);
@@ -386,7 +386,7 @@ export default function ProjectSettings() {
     };
 
     return (
-        <DashboardLayout selectedItem={LeftNavBarItems.ProjectSettings}>
+        <DashboardLayout selectedItem={LeftNavBarItems.EnvironmentSettings}>
             <Modal {...bindings} wrapClassName="!w-max overflow-visible">
                 <div className="flex justify-between">
                     <div className="flex h-full">
@@ -437,7 +437,7 @@ export default function ProjectSettings() {
             </Modal>
             {secretKey && (
                 <div className="h-full mb-20">
-                    <h2 className="text-left text-3xl font-semibold tracking-tight text-white mb-12">Project Settings</h2>
+                    <h2 className="text-left text-3xl font-semibold tracking-tight text-white mb-12">Environment Settings</h2>
                     <div className="border border-border-gray rounded-md h-fit pt-6 pb-14">
                         <div>
                             <div className="mx-8 mt-8">
@@ -947,4 +947,4 @@ export default function ProjectSettings() {
             )}
         </DashboardLayout>
     );
-}
+};

packages/webapp/src/pages/NotFound.tsx

@@ -10,6 +10,7 @@ const VALID_PATHS = [
     'connections',
     'activity',
     'project-settings',
+    'environment-settings',
     'user-settings',
     'account-settings'
 ];