fix(ui): add missing page titles (#3066)

# Changes Fixes https://linear.app/nango/issue/NAN-2254/add-missing-title-for-all-pages - Add missing page titles - Consolidate error handling
NangoHQ · Nov 26, 2024 · b1fadd7 · b1fadd7
1 parent 8452fb1
commit b1fadd7
Show file tree

Hide file tree

Showing 16 changed files with 195 additions and 170 deletions.
diff --git a/packages/webapp/src/components/ErrorComponent.tsx b/packages/webapp/src/components/ErrorComponent.tsx
@@ -3,6 +3,7 @@ import PageNotFound from '../pages/PageNotFound';
 import DashboardLayout from '../layout/DashboardLayout';
 import { Info } from './Info';
 import type { LeftNavBarItems } from './LeftNavBar';
+import { Helmet } from 'react-helmet';
 
 export const ErrorPageComponent: React.FC<{ title: string; error: ApiError<string>; page: LeftNavBarItems }> = ({ title, error, page }) => {
     if (error.error.code === 'not_found') {
@@ -11,6 +12,9 @@ export const ErrorPageComponent: React.FC<{ title: string; error: ApiError<strin
 
     return (
         <DashboardLayout selectedItem={page}>
+            <Helmet>
+                <title>Error - Nango</title>
+            </Helmet>
             <h2 className="text-3xl font-semibold text-white mb-16">{title}</h2>
             <Info variant={'destructive'}>
                 An error occurred, refresh your page or reach out to the support.{' '}

diff --git a/packages/webapp/src/pages/Account/ForgotPassword.tsx b/packages/webapp/src/pages/Account/ForgotPassword.tsx
@@ -5,6 +5,7 @@ import { useRequestPasswordResetAPI } from '../../utils/api';
 import DefaultLayout from '../../layout/DefaultLayout';
 import { Input } from '../../components/ui/input/Input';
 import Button from '../../components/ui/button/Button';
+import { Helmet } from 'react-helmet';
 
 export default function Signin() {
     const requestPasswordResetAPI = useRequestPasswordResetAPI();
@@ -34,6 +35,9 @@ export default function Signin() {
 
     return (
         <DefaultLayout>
+            <Helmet>
+                <title>Forgot Password - Nango</title>
+            </Helmet>
             <div className="flex flex-col justify-center">
                 <div className="w-80 flex flex-col gap-6">
                     <h2 className="mt-4 text-center text-[20px] text-white">Request password reset</h2>

diff --git a/packages/webapp/src/pages/Account/ResetPassword.tsx b/packages/webapp/src/pages/Account/ResetPassword.tsx
@@ -6,6 +6,7 @@ import { useResetPasswordAPI } from '../../utils/api';
 import DefaultLayout from '../../layout/DefaultLayout';
 import { Password } from './components/Password';
 import Button from '../../components/ui/button/Button';
+import { Helmet } from 'react-helmet';
 
 export default function ResetPassword() {
     const resetPasswordAPI = useResetPasswordAPI();
@@ -40,6 +41,9 @@ export default function ResetPassword() {
 
     return (
         <DefaultLayout>
+            <Helmet>
+                <title>Reset Password - Nango</title>
+            </Helmet>
             <div className="flex flex-col justify-center">
                 <div className="w-80 flex flex-col gap-4">
                     <h2 className="text-center text-[20px] text-white">Reset password</h2>

diff --git a/packages/webapp/src/pages/Account/Signin.tsx b/packages/webapp/src/pages/Account/Signin.tsx
@@ -8,6 +8,7 @@ import DefaultLayout from '../../layout/DefaultLayout';
 import GoogleButton from '../../components/ui/button/Auth/Google';
 import Button from '../../components/ui/button/Button';
 import { globalEnv } from '../../utils/env';
+import { Helmet } from 'react-helmet';
 
 export default function Signin() {
     const [serverErrorMessage, setServerErrorMessage] = useState('');
@@ -67,104 +68,105 @@ export default function Signin() {
     };
 
     return (
-        <>
-            <DefaultLayout>
-                <div className="flex flex-col justify-center">
-                    <div className="flex flex-col justify-center w-80 mx-4">
-                        <h2 className="mt-4 text-center text-[20px] text-white">Log in to Nango</h2>
-                        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-                            <div>
-                                <div className="mt-1">
-                                    <input
-                                        id="email"
-                                        placeholder="Email"
-                                        name="email"
-                                        type="email"
-                                        autoComplete="email"
-                                        required
-                                        className="border-border-gray bg-dark-600 placeholder-dark-500 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
-                                    />
-                                </div>
+        <DefaultLayout>
+            <Helmet>
+                <title>Login - Nango</title>
+            </Helmet>
+            <div className="flex flex-col justify-center">
+                <div className="flex flex-col justify-center w-80 mx-4">
+                    <h2 className="mt-4 text-center text-[20px] text-white">Log in to Nango</h2>
+                    <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+                        <div>
+                            <div className="mt-1">
+                                <input
+                                    id="email"
+                                    placeholder="Email"
+                                    name="email"
+                                    type="email"
+                                    autoComplete="email"
+                                    required
+                                    className="border-border-gray bg-dark-600 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
+                                />
                             </div>
+                        </div>
 
-                            <div>
-                                <div className="flex justify-end">
-                                    <div className="flex flex-end text-sm">
-                                        <a href="/forgot-password" className="text-dark-500 text-xs ml-1">
-                                            Forgot your password?
-                                        </a>
-                                    </div>
-                                </div>
-                                <div className="mt-2">
-                                    <input
-                                        id="password"
-                                        name="password"
-                                        type="password"
-                                        placeholder="Password"
-                                        autoComplete="current-password"
-                                        required
-                                        className="border-border-gray bg-dark-600 placeholder-dark-500 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
-                                    />
+                        <div>
+                            <div className="flex justify-end">
+                                <div className="flex flex-end text-sm">
+                                    <Link to="/forgot-password" className="text-dark-500 text-xs ml-1">
+                                        Forgot your password?
+                                    </Link>
                                 </div>
                             </div>
-
-                            <div className="grid">
-                                <button
-                                    type="submit"
-                                    className="bg-white mt-4 flex h-11 justify-center rounded-md border px-4 pt-3 text-[14px] text-black shadow hover:border-2 active:ring-2 active:ring-offset-2"
-                                >
-                                    Log in
-                                </button>
-                                {serverErrorMessage && (
-                                    <>
-                                        <p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>
-                                        {showResendEmail && (
-                                            <Button onClick={resendVerificationEmail} className="flex justify-center mt-2 text-light-gray" variant="danger">
-                                                Resend verification email
-                                            </Button>
-                                        )}
-                                    </>
-                                )}
+                            <div className="mt-2">
+                                <input
+                                    id="password"
+                                    name="password"
+                                    type="password"
+                                    placeholder="Password"
+                                    autoComplete="current-password"
+                                    required
+                                    className="border-border-gray bg-dark-600 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
+                                />
                             </div>
+                        </div>
 
-                            {globalEnv.features.managedAuth && (
+                        <div className="grid">
+                            <button
+                                type="submit"
+                                className="bg-white mt-4 flex h-11 justify-center rounded-md border px-4 pt-3 text-[14px] text-black shadow hover:border-2 active:ring-2 active:ring-offset-2"
+                            >
+                                Log in
+                            </button>
+                            {serverErrorMessage && (
                                 <>
-                                    <div className="flex items-center justify-center my-4 text-xs">
-                                        <div className="border-t border-gray-600 flex-grow mr-7"></div>
-                                        <span className="text-dark-500">or continue with</span>
-                                        <div className="border-t border-gray-600 flex-grow ml-7"></div>
-                                    </div>
-
-                                    <GoogleButton text="Sign in with Google" setServerErrorMessage={setServerErrorMessage} />
+                                    <p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>
+                                    {showResendEmail && (
+                                        <Button onClick={resendVerificationEmail} className="flex justify-center mt-2 text-light-gray" variant="danger">
+                                            Resend verification email
+                                        </Button>
+                                    )}
                                 </>
                             )}
-                        </form>
-                    </div>
-                    <div className="grid text-xs">
-                        <div className="mt-7 flex place-self-center">
-                            <p className="text-dark-500">Don&apos;t have an account?</p>
-                            <Link to="/signup" className="text-white ml-1">
-                                Sign up.
-                            </Link>
                         </div>
+
+                        {globalEnv.features.managedAuth && (
+                            <>
+                                <div className="flex items-center justify-center my-4 text-xs">
+                                    <div className="border-t border-gray-600 flex-grow mr-7"></div>
+                                    <span className="text-dark-500">or continue with</span>
+                                    <div className="border-t border-gray-600 flex-grow ml-7"></div>
+                                </div>
+
+                                <GoogleButton text="Sign in with Google" setServerErrorMessage={setServerErrorMessage} />
+                            </>
+                        )}
+                    </form>
+                </div>
+                <div className="grid text-xs">
+                    <div className="mt-7 flex place-self-center">
+                        <p className="text-dark-500">Don&apos;t have an account?</p>
+                        <Link to="/signup" className="text-white ml-1">
+                            Sign up.
+                        </Link>
                     </div>
-                    <div className="grid w-full">
-                        <div className="mt-8 flex text-xs">
-                            <p className="text-dark-500">
-                                By signing in, you agree to our
-                                <a href="https://www.nango.dev/terms" target="_blank" rel="noreferrer" className="text-white ml-1">
-                                    Terms of Service
-                                </a>
-                                <span className="text-dark-500 ml-1">and</span>
-                                <a href="https://www.nango.dev/privacy-policy" target="_blank" rel="noreferrer" className="text-white ml-1">
-                                    Privacy Policy
-                                </a>
-                                <span className="text-dark-500">.</span>
-                            </p>
-                        </div>
+                </div>
+                <div className="grid w-full">
+                    <div className="mt-8 flex text-xs">
+                        <p className="text-dark-500">
+                            By signing in, you agree to our
+                            <a href="https://www.nango.dev/terms" target="_blank" rel="noreferrer" className="text-white ml-1">
+                                Terms of Service
+                            </a>
+                            <span className="text-dark-500 ml-1">and</span>
+                            <a href="https://www.nango.dev/privacy-policy" target="_blank" rel="noreferrer" className="text-white ml-1">
+                                Privacy Policy
+                            </a>
+                            <span className="text-dark-500">.</span>
+                        </p>
                     </div>
                 </div>
-            </DefaultLayout>
-        </>
+            </div>
+        </DefaultLayout>
     );
 }
diff --git a/packages/webapp/src/pages/Account/Signup.tsx b/packages/webapp/src/pages/Account/Signup.tsx
@@ -1,9 +1,13 @@
+import { Helmet } from 'react-helmet';
 import DefaultLayout from '../../layout/DefaultLayout';
 import { SignupForm } from './components/SignupForm';
 
 export const Signup: React.FC = () => {
     return (
         <DefaultLayout>
+            <Helmet>
+                <title>Signup - Nango</title>
+            </Helmet>
             <div className="flex flex-col justify-center">
                 <div className="w-80">
                     <SignupForm />

diff --git a/packages/webapp/src/pages/Connection/Create.tsx b/packages/webapp/src/pages/Connection/Create.tsx
@@ -20,6 +20,7 @@ import SecretTextArea from '../../components/ui/input/SecretTextArea';
 import { useStore } from '../../store';
 import type { AuthModeType } from '@nangohq/types';
 import { useEnvironment } from '../../hooks/useEnvironment';
+import { Helmet } from 'react-helmet';
 
 export default function IntegrationCreate() {
     const { mutate } = useSWRConfig();
@@ -625,6 +626,9 @@ nango.${integration?.authMode === 'NONE' ? 'create' : 'auth'}('${integration?.un
 
     return (
         <DashboardLayout selectedItem={LeftNavBarItems.Connections}>
+            <Helmet>
+                <title>Create Connection - Nango</title>
+            </Helmet>
             {integrations && !!integrations.length && publicKey && hostUrl && (
                 <div className="pb-40">
                     <h2 className="text-left text-3xl font-semibold tracking-tight text-white mb-12">Add New Connection</h2>

diff --git a/packages/webapp/src/pages/Connection/List.tsx b/packages/webapp/src/pages/Connection/List.tsx
@@ -20,7 +20,6 @@ import { useDebounce, useUnmount } from 'react-use';
 import { globalEnv } from '../../utils/env';
 import { apiConnectSessions } from '../../hooks/useConnect';
 import { useListIntegration } from '../../hooks/useIntegration';
-import { Info } from '../../components/Info';
 import { Skeleton } from '../../components/ui/Skeleton';
 import type { ColumnDef } from '@tanstack/react-table';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
@@ -34,6 +33,8 @@ import { useToast } from '../../hooks/useToast';
 import type { ApiConnectionSimple } from '@nangohq/types';
 import { CopyText } from '../../components/CopyText';
 import { SimpleTooltip } from '../../components/SimpleTooltip';
+import { Helmet } from 'react-helmet';
+import { ErrorPageComponent } from '../../components/ErrorComponent';
 
 const defaultFilter = ['all'];
 const filterErrors = [
@@ -253,23 +254,15 @@ export const ConnectionList: React.FC = () => {
     const hasFiltered = debouncedSearch || selectedIntegration[0] !== 'all' || filterWithError !== 'all';
 
     if (error) {
-        return (
-            <DashboardLayout selectedItem={LeftNavBarItems.Connections}>
-                <Info variant={'destructive'}>
-                    An error occurred, refresh your page or reach out to the support.{' '}
-                    {error.error.code === 'generic_error_support' && (
-                        <>
-                            (id: <span className="select-all">{error.error.payload}</span>)
-                        </>
-                    )}
-                </Info>
-            </DashboardLayout>
-        );
+        return <ErrorPageComponent title="Connections" error={error} page={LeftNavBarItems.Connections} />;
     }
 
     if (!connections || !readyToDisplay) {
         return (
             <DashboardLayout selectedItem={LeftNavBarItems.Connections}>
+                <Helmet>
+                    <title>Connections - Nango</title>
+                </Helmet>
                 <h2 className="text-3xl font-semibold text-white mb-4">Connections</h2>
 
                 <div className="flex gap-2 flex-col">
@@ -283,6 +276,9 @@ export const ConnectionList: React.FC = () => {
 
     return (
         <DashboardLayout selectedItem={LeftNavBarItems.Connections}>
+            <Helmet>
+                <title>Connections - Nango</title>
+            </Helmet>
             <div className="flex justify-between mb-8 items-center">
                 <h2 className="flex text-left text-3xl font-semibold tracking-tight text-white">Connections</h2>
                 <div className="flex gap-2">

diff --git a/packages/webapp/src/pages/Connection/Show.tsx b/packages/webapp/src/pages/Connection/Show.tsx
@@ -124,6 +124,9 @@ export const ConnectionShow: React.FC = () => {
     if (loading || loadingSyncs) {
         return (
             <DashboardLayout selectedItem={LeftNavBarItems.Integrations}>
+                <Helmet>
+                    <title>Connection - Nango</title>
+                </Helmet>
                 <div className="flex gap-4 justify-between">
                     <div className="flex gap-6">
                         <div className="shrink-0">
@@ -146,7 +149,7 @@ export const ConnectionShow: React.FC = () => {
     }
 
     if (error) {
-        return <ErrorPageComponent title="Connection" error={error || errorSyncs} page={LeftNavBarItems.TeamSettings} />;
+        return <ErrorPageComponent title="Connection" error={error || errorSyncs} page={LeftNavBarItems.Connections} />;
     }
 
     if (!connection || !syncs) {
@@ -155,6 +158,9 @@ export const ConnectionShow: React.FC = () => {
 
     return (
         <DashboardLayout selectedItem={LeftNavBarItems.Connections}>
+            <Helmet>
+                <title>{connection.endUser?.email || connection.connection.connection_id} - Connection - Nango</title>
+            </Helmet>
             <div className="mx-auto">
                 <div className="flex gap-4 justify-between">
                     <div className="flex gap-6">

diff --git a/packages/webapp/src/pages/Environment/Settings.tsx b/packages/webapp/src/pages/Environment/Settings.tsx
@@ -30,6 +30,7 @@ import { globalEnv } from '../../utils/env';
 import { useLocalStorage } from 'react-use';
 import { Info } from '../../components/Info';
 import { Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 export const EnvironmentSettings: React.FC = () => {
     const env = useStore((state) => state.env);
@@ -460,6 +461,9 @@ export const EnvironmentSettings: React.FC = () => {
 
     return (
         <DashboardLayout selectedItem={LeftNavBarItems.EnvironmentSettings}>
+            <Helmet>
+                <title>Environment Settings - Nango</title>
+            </Helmet>
             <Modal {...bindings} wrapClassName="!w-max overflow-visible">
                 <div className="flex justify-between">
                     <div className="flex h-full">