From 2bad506d75849b33323e2f81cb731d5595940799 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Fri, 12 Apr 2024 20:52:35 +0800
Subject: [PATCH] Update account management features and improve test
 configurations

Multiple updates are made to refine the account management features, including updating the 'Your Teams' text to show the number of teams, and modifying the form data validation process in the 'deletePersonalAccountAction' service. Additionally, improvements have been made in test configurations including updating the test timeout settings, taking screenshots when a test fails, and adjusting the location for saving Playwright reports.
---
 .github/workflows/workflow.yml                |  2 +-
 apps/e2e/playwright.config.ts                 |  3 ++
 apps/e2e/tests/account/account.spec.ts        |  4 +-
 .../tests/team-accounts/team-accounts.po.ts   |  6 ++-
 .../tests/team-accounts/team-accounts.spec.ts |  4 +-
 apps/web/public/locales/en/teams.json         |  2 +-
 .../migrations/20221215192558_schema.sql      |  6 +--
 package.json                                  |  1 +
 .../src/components/account-selector.tsx       | 52 +++++++++++--------
 .../account-danger-zone.tsx                   | 11 ++--
 .../schema/delete-personal-account.schema.ts  |  5 ++
 .../personal-accounts-server-actions.ts       | 21 ++++++--
 .../delete-personal-account.service.ts        | 12 +++--
 .../update-team-account-name-form.tsx         | 13 ++++-
 .../services/delete-team-account.service.ts   |  2 +-
 15 files changed, 93 insertions(+), 51 deletions(-)
 create mode 100644 packages/features/accounts/src/schema/delete-personal-account.schema.ts

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
index 62008f5c9..9ec76def9 100644
--- a/.github/workflows/workflow.yml
+++ b/.github/workflows/workflow.yml
@@ -95,5 +95,5 @@ jobs:
         if: always()
         with:
           name: playwright-report
-          path: playwright-report/
+          path: apps/e2e/playwright-report/
           retention-days: 7
\ No newline at end of file
diff --git a/apps/e2e/playwright.config.ts b/apps/e2e/playwright.config.ts
index feb9be176..7f18f4e96 100644
--- a/apps/e2e/playwright.config.ts
+++ b/apps/e2e/playwright.config.ts
@@ -25,6 +25,9 @@ export default defineConfig({
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: 'http://localhost:3000',
 
+    // take a screenshot when a test fails
+    screenshot: "on",
+
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
diff --git a/apps/e2e/tests/account/account.spec.ts b/apps/e2e/tests/account/account.spec.ts
index 770d531fa..c9654b7f7 100644
--- a/apps/e2e/tests/account/account.spec.ts
+++ b/apps/e2e/tests/account/account.spec.ts
@@ -55,7 +55,9 @@ test.describe('Account Deletion', () => {
     await account.setup();
     await account.deleteAccount();
 
-    await page.waitForURL('http://localhost:3000');
+    await page.waitForURL('http://localhost:3000', {
+      timeout: 5000,
+    });
 
     expect(page.url()).toEqual('http://localhost:3000/');
   });
diff --git a/apps/e2e/tests/team-accounts/team-accounts.po.ts b/apps/e2e/tests/team-accounts/team-accounts.po.ts
index 912f29884..b202650aa 100644
--- a/apps/e2e/tests/team-accounts/team-accounts.po.ts
+++ b/apps/e2e/tests/team-accounts/team-accounts.po.ts
@@ -38,7 +38,9 @@ export class TeamAccountsPageObject {
     await this.page.fill('[data-test="create-team-form"] input', teamName);
     await this.page.click('[data-test="create-team-form"] button:last-child');
 
-    await this.page.waitForURL(`http://localhost:3000/home/${slug}`);
+    await this.page.waitForURL(`http://localhost:3000/home/${slug}`, {
+      timeout: 5000,
+    });
   }
 
   async updateName(name: string) {
@@ -56,7 +58,7 @@ export class TeamAccountsPageObject {
   }
 
    createTeamName() {
-    const random = (Math.random() * 1000000000).toFixed(0);
+    const random = (Math.random() * 10).toFixed(0);
 
     const teamName = `Team-Name-${random}`;
     const slug = `team-name-${random}`;
diff --git a/apps/e2e/tests/team-accounts/team-accounts.spec.ts b/apps/e2e/tests/team-accounts/team-accounts.spec.ts
index c9ba3e7f4..1d75c13d3 100644
--- a/apps/e2e/tests/team-accounts/team-accounts.spec.ts
+++ b/apps/e2e/tests/team-accounts/team-accounts.spec.ts
@@ -35,7 +35,9 @@ test.describe('Account Deletion', () => {
 
     await teamAccounts.deleteAccount(params.teamName);
 
-    await page.waitForURL('http://localhost:3000/home');
+    await page.waitForURL('http://localhost:3000/home', {
+      timeout: 5000,
+    });
 
     expect(page.url()).toEqual('http://localhost:3000/home');
 
diff --git a/apps/web/public/locales/en/teams.json b/apps/web/public/locales/en/teams.json
index 30622aeee..22df75bb3 100644
--- a/apps/web/public/locales/en/teams.json
+++ b/apps/web/public/locales/en/teams.json
@@ -18,7 +18,7 @@
   "billing": {
     "pageTitle": "Billing"
   },
-  "yourTeams": "Your Teams",
+  "yourTeams": "Your Teams ({{teamsCount}})",
   "createTeam": "Create a Team",
   "personalAccount": "Personal Account",
   "searchAccount": "Search Account...",
diff --git a/apps/web/supabase/migrations/20221215192558_schema.sql b/apps/web/supabase/migrations/20221215192558_schema.sql
index 4e3080c34..815b773b9 100644
--- a/apps/web/supabase/migrations/20221215192558_schema.sql
+++ b/apps/web/supabase/migrations/20221215192558_schema.sql
@@ -16,8 +16,6 @@ create extension if not exists "unaccent";
 -- Create a private Makerkit schema
 create schema if not exists kit;
 
-grant USAGE on schema kit to authenticated, authenticated;
-
 -- We remove all default privileges from public schema on functions to
 --   prevent public access to them
 alter default privileges revoke execute on functions from public;
@@ -1595,6 +1593,8 @@ grant execute on function kit.slugify(text) to service_role, authenticated;
 create or replace function kit.set_slug_from_account_name()
     returns trigger
     language plpgsql
+    security definer
+    set search_path = public
     as $$
 declare
     sql_string varchar;
@@ -1616,7 +1616,7 @@ begin
 
         end if;
 
-	sql_string = format('select count(1) cnt from accounts where slug = ''' || tmp_slug ||
+	sql_string = format('select count(1) cnt from public.accounts where slug = ''' || tmp_slug ||
 	    '''; ');
 
         for tmp_row in execute (sql_string)
diff --git a/package.json b/package.json
index 81cbe3972..3cbb366e4 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "supabase:web:start": "pnpm --filter web supabase:start",
     "supabase:web:stop": "pnpm --filter web supabase:stop",
     "supabase:web:typegen": "pnpm --filter web supabase:typegen",
+    "supabase:web:reset": "pnpm --filter web supabase:reset",
     "stripe:listen": "pnpm --filter '@kit/stripe' start"
   },
   "prettier": "@kit/prettier-config",
diff --git a/packages/features/accounts/src/components/account-selector.tsx b/packages/features/accounts/src/components/account-selector.tsx
index 1b2337dde..85e64b38b 100644
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -18,6 +18,7 @@ import {
 } from '@kit/ui/command';
 import { If } from '@kit/ui/if';
 import { Popover, PopoverContent, PopoverTrigger } from '@kit/ui/popover';
+import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
@@ -177,7 +178,14 @@ export function AccountSelector({
 
               <If condition={features.enableTeamAccounts}>
                 <If condition={accounts.length > 0}>
-                  <CommandGroup heading={<Trans i18nKey={'teams:yourTeams'} />}>
+                  <CommandGroup
+                    heading={
+                      <Trans
+                        i18nKey={'teams:yourTeams'}
+                        values={{ teamsCount: accounts.length }}
+                      />
+                    }
+                  >
                     {(accounts ?? []).map((account) => (
                       <CommandItem
                         data-test={'account-selector-team-' + account.value}
@@ -218,32 +226,30 @@ export function AccountSelector({
                       </CommandItem>
                     ))}
                   </CommandGroup>
-
-                  <CommandSeparator />
                 </If>
               </If>
-
-              <If condition={features.enableTeamCreation}>
-                <CommandGroup>
-                  <Button
-                    data-test={'create-team-account-trigger'}
-                    variant="ghost"
-                    className="w-full justify-start"
-                    onClick={() => {
-                      setIsCreatingAccount(true);
-                      setOpen(false);
-                    }}
-                  >
-                    <Plus className="mr-3 h-4 w-4" />
-
-                    <span>
-                      <Trans i18nKey={'teams:createTeam'} />
-                    </span>
-                  </Button>
-                </CommandGroup>
-              </If>
             </CommandList>
           </Command>
+
+          <Separator />
+
+          <If condition={features.enableTeamCreation}>
+            <Button
+              data-test={'create-team-account-trigger'}
+              variant="ghost"
+              className="w-full justify-start"
+              onClick={() => {
+                setIsCreatingAccount(true);
+                setOpen(false);
+              }}
+            >
+              <Plus className="mr-3 h-4 w-4" />
+
+              <span>
+                <Trans i18nKey={'teams:createTeam'} />
+              </span>
+            </Button>
+          </If>
         </PopoverContent>
       </Popover>
 
diff --git a/packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx b/packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx
index 5e9f1f9bc..b97a5d935 100644
--- a/packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx
@@ -5,7 +5,6 @@ import { useFormStatus } from 'react-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import {
@@ -23,6 +22,7 @@ import { Form, FormControl, FormItem, FormLabel } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
 
+import { DeletePersonalAccountSchema } from '../../schema/delete-personal-account.schema';
 import { deletePersonalAccountAction } from '../../server/personal-accounts-server-actions';
 
 export function AccountDangerZone() {
@@ -71,11 +71,7 @@ function DeleteAccountModal() {
 
 function DeleteAccountForm() {
   const form = useForm({
-    resolver: zodResolver(
-      z.object({
-        confirmation: z.string().refine((value) => value === 'DELETE'),
-      }),
-    ),
+    resolver: zodResolver(DeletePersonalAccountSchema),
     defaultValues: {
       confirmation: '',
     },
@@ -140,11 +136,10 @@ function DeleteAccountSubmitButton() {
 
   return (
     <Button
+      data-test={'confirm-delete-account-button'}
       type={'submit'}
       disabled={pending}
-      data-test={'confirm-delete-account-button'}
       name={'action'}
-      value={'delete'}
       variant={'destructive'}
     >
       <Trans i18nKey={'account:deleteAccount'} />
diff --git a/packages/features/accounts/src/schema/delete-personal-account.schema.ts b/packages/features/accounts/src/schema/delete-personal-account.schema.ts
new file mode 100644
index 000000000..32088c6c4
--- /dev/null
+++ b/packages/features/accounts/src/schema/delete-personal-account.schema.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const DeletePersonalAccountSchema = z.object({
+  confirmation: z.string().refine((value) => value === 'DELETE'),
+});
diff --git a/packages/features/accounts/src/server/personal-accounts-server-actions.ts b/packages/features/accounts/src/server/personal-accounts-server-actions.ts
index ea4c116ee..2d3f40707 100644
--- a/packages/features/accounts/src/server/personal-accounts-server-actions.ts
+++ b/packages/features/accounts/src/server/personal-accounts-server-actions.ts
@@ -1,5 +1,6 @@
 'use server';
 
+import { revalidatePath } from 'next/cache';
 import { RedirectType, redirect } from 'next/navigation';
 
 import { z } from 'zod';
@@ -8,6 +9,7 @@ import { getLogger } from '@kit/shared/logger';
 import { requireUser } from '@kit/supabase/require-user';
 import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
 
+import { DeletePersonalAccountSchema } from '../schema/delete-personal-account.schema';
 import { DeletePersonalAccountService } from './services/delete-personal-account.service';
 
 const emailSettings = getEmailSettingsFromEnvironment();
@@ -21,10 +23,13 @@ export async function refreshAuthSession() {
 }
 
 export async function deletePersonalAccountAction(formData: FormData) {
-  const confirmation = formData.get('confirmation');
+  // validate the form data
+  const { success } = DeletePersonalAccountSchema.safeParse(
+    Object.fromEntries(formData.entries()),
+  );
 
-  if (confirmation !== 'DELETE') {
-    throw new Error('Confirmation required to delete account');
+  if (!success) {
+    throw new Error('Invalid form data');
   }
 
   const client = getSupabaseServerActionClient();
@@ -32,7 +37,13 @@ export async function deletePersonalAccountAction(formData: FormData) {
 
   if (auth.error) {
     const logger = await getLogger();
-    logger.error(`User is not authenticated. Redirecting to login page`);
+
+    logger.error(
+      {
+        error: auth.error,
+      },
+      `User is not authenticated. Redirecting to login page.`,
+    );
 
     redirect(auth.redirectTo);
   }
@@ -55,6 +66,8 @@ export async function deletePersonalAccountAction(formData: FormData) {
   // sign out the user after deleting their account
   await client.auth.signOut();
 
+  revalidatePath('/', 'layout');
+
   // redirect to the home page
   redirect('/', RedirectType.replace);
 }
diff --git a/packages/features/accounts/src/server/services/delete-personal-account.service.ts b/packages/features/accounts/src/server/services/delete-personal-account.service.ts
index fabb11e13..8e8ca9b8c 100644
--- a/packages/features/accounts/src/server/services/delete-personal-account.service.ts
+++ b/packages/features/accounts/src/server/services/delete-personal-account.service.ts
@@ -35,11 +35,15 @@ export class DeletePersonalAccountService {
       productName: string;
     };
   }) {
-    const userId = params.userId;
     const logger = await getLogger();
+
+    const userId = params.userId;
     const ctx = { userId, name: this.namespace };
 
-    logger.info(ctx, 'User requested deletion. Processing...');
+    logger.info(
+      ctx,
+      'User requested to delete their personal account. Processing...',
+    );
 
     // execute the deletion of the user
     try {
@@ -50,12 +54,12 @@ export class DeletePersonalAccountService {
           ...ctx,
           error,
         },
-        'Error deleting user',
+        'Encountered an error deleting user',
       );
 
       throw new Error('Error deleting user');
     }
 
-    logger.info(ctx, 'User deleted successfully');
+    logger.info(ctx, 'User successfully deleted!');
   }
 }
diff --git a/packages/features/team-accounts/src/components/settings/update-team-account-name-form.tsx b/packages/features/team-accounts/src/components/settings/update-team-account-name-form.tsx
index 82c66a5d4..3d023c2a3 100644
--- a/packages/features/team-accounts/src/components/settings/update-team-account-name-form.tsx
+++ b/packages/features/team-accounts/src/components/settings/update-team-account-name-form.tsx
@@ -4,6 +4,8 @@ import { useTransition } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 
 import { Button } from '@kit/ui/button';
 import {
@@ -28,6 +30,7 @@ export const UpdateTeamAccountNameForm = (props: {
   path: string;
 }) => {
   const [pending, startTransition] = useTransition();
+  const { t } = useTranslation('teams');
 
   const form = useForm({
     resolver: zodResolver(TeamNameFormSchema),
@@ -43,12 +46,18 @@ export const UpdateTeamAccountNameForm = (props: {
           data-test={'update-team-account-name-form'}
           className={'flex flex-col space-y-4'}
           onSubmit={form.handleSubmit((data) => {
-            startTransition(async () => {
-              await updateTeamAccountName({
+            startTransition(() => {
+              const promise = updateTeamAccountName({
                 slug: props.account.slug,
                 name: data.name,
                 path: props.path,
               });
+
+              toast.promise(promise, {
+                loading: t('updateTeamLoadingMessage'),
+                success: t('updateTeamSuccessMessage'),
+                error: t('updateTeamErrorMessage'),
+              });
             });
           })}
         >
diff --git a/packages/features/team-accounts/src/server/services/delete-team-account.service.ts b/packages/features/team-accounts/src/server/services/delete-team-account.service.ts
index adcdf23af..0506c415c 100644
--- a/packages/features/team-accounts/src/server/services/delete-team-account.service.ts
+++ b/packages/features/team-accounts/src/server/services/delete-team-account.service.ts
@@ -6,7 +6,7 @@ import { getLogger } from '@kit/shared/logger';
 import { Database } from '@kit/supabase/database';
 
 export class DeleteTeamAccountService {
-  private readonly namespace = 'accounts.delete';
+  private readonly namespace = 'accounts.delete-team-account';
 
   /**
    * Deletes a team account. Permissions are not checked here, as they are