Revert "Unify workspace dropdowns; Update layouts (#458)"

This reverts commit 4bc8448a1d.

packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx

@@ -1,9 +1,10 @@
 'use client';
 
+import { useFormStatus } from 'react-dom';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useAction } from 'next-safe-action/hooks';
 import { useForm, useWatch } from 'react-hook-form';
-import * as z from 'zod';
+import { z } from 'zod';
 
 import { ErrorBoundary } from '@kit/monitoring/components';
 import { VerifyOtpForm } from '@kit/otp/components';
@@ -99,12 +100,12 @@ function DeleteTeamContainer(props: {
     <div className={'flex flex-col space-y-4'}>
       <div className={'flex flex-col space-y-1'}>
         <span className={'text-sm font-medium'}>
-          <Trans i18nKey={'teams.deleteTeam'} />
+          <Trans i18nKey={'teams:deleteTeam'} />
         </span>
 
         <p className={'text-muted-foreground text-sm'}>
           <Trans
-            i18nKey={'teams.deleteTeamDescription'}
+            i18nKey={'teams:deleteTeamDescription'}
             values={{
               teamName: props.account.name,
             }}
@@ -114,27 +115,25 @@ function DeleteTeamContainer(props: {
 
       <div>
         <AlertDialog>
-          <AlertDialogTrigger
-            render={
-              <Button
-                data-test={'delete-team-trigger'}
-                type={'button'}
-                variant={'destructive'}
-              >
-                <Trans i18nKey={'teams.deleteTeam'} />
-              </Button>
-            }
-          />
+          <AlertDialogTrigger asChild>
+            <Button
+              data-test={'delete-team-trigger'}
+              type={'button'}
+              variant={'destructive'}
+            >
+              <Trans i18nKey={'teams:deleteTeam'} />
+            </Button>
+          </AlertDialogTrigger>
 
-          <AlertDialogContent>
+          <AlertDialogContent onEscapeKeyDown={(e) => e.preventDefault()}>
             <AlertDialogHeader>
               <AlertDialogTitle>
-                <Trans i18nKey={'teams.deletingTeam'} />
+                <Trans i18nKey={'teams:deletingTeam'} />
               </AlertDialogTitle>
 
               <AlertDialogDescription>
                 <Trans
-                  i18nKey={'teams.deletingTeamDescription'}
+                  i18nKey={'teams:deletingTeamDescription'}
                   values={{
                     teamName: props.account.name,
                   }}
@@ -162,8 +161,6 @@ function DeleteTeamConfirmationForm({
 }) {
   const { data: user } = useUser();
 
-  const { execute, isPending } = useAction(deleteTeamAccountAction);
-
   const form = useForm({
     mode: 'onChange',
     reValidateMode: 'onChange',
@@ -191,7 +188,7 @@ function DeleteTeamConfirmationForm({
         onSuccess={(otp) => form.setValue('otp', otp, { shouldValidate: true })}
         CancelButton={
           <AlertDialogCancel className={'m-0'}>
-            <Trans i18nKey={'common.cancel'} />
+            <Trans i18nKey={'common:cancel'} />
           </AlertDialogCancel>
         }
       />
@@ -204,10 +201,7 @@ function DeleteTeamConfirmationForm({
         <form
           data-test={'delete-team-form'}
           className={'flex flex-col space-y-4'}
-          onSubmit={(e) => {
-            e.preventDefault();
-            execute({ accountId: id, otp });
-          }}
+          action={deleteTeamAccountAction}
         >
           <div className={'flex flex-col space-y-2'}>
             <div
@@ -217,7 +211,7 @@ function DeleteTeamConfirmationForm({
             >
               <div>
                 <Trans
-                  i18nKey={'teams.deleteTeamDisclaimer'}
+                  i18nKey={'teams:deleteTeamDisclaimer'}
                   values={{
                     teamName: name,
                   }}
@@ -225,24 +219,20 @@ function DeleteTeamConfirmationForm({
               </div>
 
               <div className={'text-sm'}>
-                <Trans i18nKey={'common.modalConfirmationQuestion'} />
+                <Trans i18nKey={'common:modalConfirmationQuestion'} />
               </div>
             </div>
+
+            <input type="hidden" value={id} name={'accountId'} />
+            <input type="hidden" value={otp} name={'otp'} />
           </div>
 
           <AlertDialogFooter>
             <AlertDialogCancel>
-              <Trans i18nKey={'common.cancel'} />
+              <Trans i18nKey={'common:cancel'} />
             </AlertDialogCancel>
 
-            <Button
-              type="submit"
-              data-test={'delete-team-form-confirm-button'}
-              disabled={isPending}
-              variant={'destructive'}
-            >
-              <Trans i18nKey={'teams.deleteTeam'} />
-            </Button>
+            <DeleteTeamSubmitButton />
           </AlertDialogFooter>
         </form>
       </Form>
@@ -250,14 +240,26 @@ function DeleteTeamConfirmationForm({
   );
 }
 
+function DeleteTeamSubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      data-test={'delete-team-form-confirm-button'}
+      disabled={pending}
+      variant={'destructive'}
+    >
+      <Trans i18nKey={'teams:deleteTeam'} />
+    </Button>
+  );
+}
+
 function LeaveTeamContainer(props: {
   account: {
     name: string;
     id: string;
   };
 }) {
-  const { execute, isPending } = useAction(leaveTeamAccountAction);
-
   const form = useForm({
     resolver: zodResolver(
       z.object({
@@ -276,7 +278,7 @@ function LeaveTeamContainer(props: {
     <div className={'flex flex-col space-y-4'}>
       <p className={'text-muted-foreground text-sm'}>
         <Trans
-          i18nKey={'teams.leaveTeamDescription'}
+          i18nKey={'teams:leaveTeamDescription'}
           values={{
             teamName: props.account.name,
           }}
@@ -284,26 +286,26 @@ function LeaveTeamContainer(props: {
       </p>
 
       <AlertDialog>
-        <AlertDialogTrigger
-          render={
+        <AlertDialogTrigger asChild>
+          <div>
             <Button
               data-test={'leave-team-button'}
               type={'button'}
               variant={'destructive'}
             >
-              <Trans i18nKey={'teams.leaveTeam'} />
+              <Trans i18nKey={'teams:leaveTeam'} />
             </Button>
-          }
-        />
+          </div>
+        </AlertDialogTrigger>
 
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              <Trans i18nKey={'teams.leavingTeamModalHeading'} />
+              <Trans i18nKey={'teams:leavingTeamModalHeading'} />
             </AlertDialogTitle>
 
             <AlertDialogDescription>
-              <Trans i18nKey={'teams.leavingTeamModalDescription'} />
+              <Trans i18nKey={'teams:leavingTeamModalDescription'} />
             </AlertDialogDescription>
           </AlertDialogHeader>
 
@@ -311,20 +313,21 @@ function LeaveTeamContainer(props: {
             <Form {...form}>
               <form
                 className={'flex flex-col space-y-4'}
-                onSubmit={form.handleSubmit((data) => {
-                  execute({
-                    accountId: props.account.id,
-                    confirmation: data.confirmation,
-                  });
-                })}
+                action={leaveTeamAccountAction}
               >
+                <input
+                  type={'hidden'}
+                  value={props.account.id}
+                  name={'accountId'}
+                />
+
                 <FormField
                   name={'confirmation'}
                   render={({ field }) => {
                     return (
                       <FormItem>
                         <FormLabel>
-                          <Trans i18nKey={'teams.leaveTeamInputLabel'} />
+                          <Trans i18nKey={'teams:leaveTeamInputLabel'} />
                         </FormLabel>
 
                         <FormControl>
@@ -341,7 +344,7 @@ function LeaveTeamContainer(props: {
                         </FormControl>
 
                         <FormDescription>
-                          <Trans i18nKey={'teams.leaveTeamInputDescription'} />
+                          <Trans i18nKey={'teams:leaveTeamInputDescription'} />
                         </FormDescription>
 
                         <FormMessage />
@@ -352,17 +355,10 @@ function LeaveTeamContainer(props: {
 
                 <AlertDialogFooter>
                   <AlertDialogCancel>
-                    <Trans i18nKey={'common.cancel'} />
+                    <Trans i18nKey={'common:cancel'} />
                   </AlertDialogCancel>
 
-                  <Button
-                    type="submit"
-                    data-test={'confirm-leave-organization-button'}
-                    disabled={isPending}
-                    variant={'destructive'}
-                  >
-                    <Trans i18nKey={'teams.leaveTeam'} />
-                  </Button>
+                  <LeaveTeamSubmitButton />
                 </AlertDialogFooter>
               </form>
             </Form>
@@ -373,22 +369,36 @@ function LeaveTeamContainer(props: {
   );
 }
 
+function LeaveTeamSubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      data-test={'confirm-leave-organization-button'}
+      disabled={pending}
+      variant={'destructive'}
+    >
+      <Trans i18nKey={'teams:leaveTeam'} />
+    </Button>
+  );
+}
+
 function LeaveTeamErrorAlert() {
   return (
     <div className={'flex flex-col space-y-4'}>
       <Alert variant={'destructive'}>
         <AlertTitle>
-          <Trans i18nKey={'teams.leaveTeamErrorHeading'} />
+          <Trans i18nKey={'teams:leaveTeamErrorHeading'} />
         </AlertTitle>
 
         <AlertDescription>
-          <Trans i18nKey={'common.genericError'} />
+          <Trans i18nKey={'common:genericError'} />
         </AlertDescription>
       </Alert>
 
       <AlertDialogFooter>
         <AlertDialogCancel>
-          <Trans i18nKey={'common.cancel'} />
+          <Trans i18nKey={'common:cancel'} />
         </AlertDialogCancel>
       </AlertDialogFooter>
     </div>
@@ -400,17 +410,17 @@ function DeleteTeamErrorAlert() {
     <div className={'flex flex-col space-y-4'}>
       <Alert variant={'destructive'}>
         <AlertTitle>
-          <Trans i18nKey={'teams.deleteTeamErrorHeading'} />
+          <Trans i18nKey={'teams:deleteTeamErrorHeading'} />
         </AlertTitle>
 
         <AlertDescription>
-          <Trans i18nKey={'common.genericError'} />
+          <Trans i18nKey={'common:genericError'} />
         </AlertDescription>
       </Alert>
 
       <AlertDialogFooter>
         <AlertDialogCancel>
-          <Trans i18nKey={'common.cancel'} />
+          <Trans i18nKey={'common:cancel'} />
         </AlertDialogCancel>
       </AlertDialogFooter>
     </div>
@@ -422,11 +432,11 @@ function DangerZoneCard({ children }: React.PropsWithChildren) {
     <Card className={'border-destructive border'}>
       <CardHeader>
         <CardTitle>
-          <Trans i18nKey={'teams.settings.dangerZone'} />
+          <Trans i18nKey={'teams:settings.dangerZone'} />
         </CardTitle>
 
         <CardDescription>
-          <Trans i18nKey={'teams.settings.dangerZoneDescription'} />
+          <Trans i18nKey={'teams:settings.dangerZoneDescription'} />
         </CardDescription>
       </CardHeader>