Add permissions to mysql form (#2349)

nucleuscloud · Jul 25, 2024 · c4d077f · c4d077f
1 parent 4d5626d
commit c4d077f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 52 deletions.
diff --git a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/MysqlForm.tsx b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/MysqlForm.tsx
@@ -4,6 +4,7 @@ import FormError from '@/components/FormError';
 import { PasswordInput } from '@/components/PasswordComponent';
 import Spinner from '@/components/Spinner';
 import RequiredLabel from '@/components/labels/RequiredLabel';
+import PermissionsDialog from '@/components/permissions/PermissionsDialog';
 import { useAccount } from '@/components/providers/account-provider';
 import {
   Accordion,
@@ -49,10 +50,7 @@ import {
   isConnectionNameAvailable,
   updateConnection,
 } from '@neosync/sdk/connectquery';
-import {
-  CheckCircledIcon,
-  ExclamationTriangleIcon,
-} from '@radix-ui/react-icons';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { ReactElement, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { buildConnectionConfigMysql } from '../../util';
@@ -95,6 +93,8 @@ export default function MysqlForm(props: Props) {
     CheckConnectionConfigResponse | undefined
   >();
   const [isValidating, setIsValidating] = useState<boolean>(false);
+  const [openPermissionDialog, setOpenPermissionDialog] =
+    useState<boolean>(false);
 
   async function onSubmit(values: MysqlFormValues) {
     try {
@@ -473,6 +473,16 @@ export default function MysqlForm(props: Props) {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
+        <PermissionsDialog
+          checkResponse={
+            validationResponse ?? new CheckConnectionConfigResponse({})
+          }
+          openPermissionDialog={openPermissionDialog}
+          setOpenPermissionDialog={setOpenPermissionDialog}
+          isValidating={isValidating}
+          connectionName={form.getValues('connectionName')}
+          connectionType="mysql"
+        />
         <div className="flex flex-row gap-3 justify-between">
           <Button
             variant="outline"
@@ -488,8 +498,8 @@ export default function MysqlForm(props: Props) {
                   }),
                 });
 
-                setIsValidating(false);
                 setValidationResponse(res);
+                setOpenPermissionDialog(!!res?.isConnected);
               } catch (err) {
                 setValidationResponse(
                   new CheckConnectionConfigResponse({
@@ -523,9 +533,6 @@ export default function MysqlForm(props: Props) {
             />
           </Button>
         </div>
-        {validationResponse && validationResponse.isConnected && (
-          <SuccessAlert description={'Successfully connected!'} />
-        )}
         {validationResponse && !validationResponse.isConnected && (
           <ErrorAlert
             title="Unable to connect"
@@ -539,24 +546,6 @@ export default function MysqlForm(props: Props) {
   );
 }
 
-interface SuccessAlertProps {
-  description: string;
-}
-
-function SuccessAlert(props: SuccessAlertProps): ReactElement {
-  const { description } = props;
-  return (
-    <Alert variant="success">
-      <div className="flex flex-row items-center gap-2">
-        <CheckCircledIcon className="h-4 w-4 text-green-900 dark:text-green-400" />
-        <div className="font-normal text-green-900 dark:text-green-400">
-          {description}
-        </div>
-      </div>
-    </Alert>
-  );
-}
-
 interface ErrorAlertProps {
   title: string;
   description: string;

diff --git a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/page.tsx b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/page.tsx
@@ -97,6 +97,7 @@ export default function ConnectionPage({ params }: PageProps) {
 
   const showSubNav =
     data?.connection?.connectionConfig?.config.case === 'pgConfig' ||
+    data?.connection?.connectionConfig?.config.case === 'mysqlConfig' ||
     data?.connection?.connectionConfig?.config.case === 'dynamodbConfig' ||
     data?.connection?.connectionConfig?.config.case === 'mongoConfig';
 

diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/connection/mysql/MysqlForm.tsx b/frontend/apps/web/app/(mgmt)/[account]/new/connection/mysql/MysqlForm.tsx
@@ -5,6 +5,7 @@ import { PasswordInput } from '@/components/PasswordComponent';
 import Spinner from '@/components/Spinner';
 import RequiredLabel from '@/components/labels/RequiredLabel';
 import { buildAccountOnboardingConfig } from '@/components/onboarding-checklist/OnboardingChecklist';
+import PermissionsDialog from '@/components/permissions/PermissionsDialog';
 import { useAccount } from '@/components/providers/account-provider';
 import SkeletonForm from '@/components/skeleton/SkeletonForm';
 import {
@@ -61,10 +62,7 @@ import {
   isConnectionNameAvailable,
   setAccountOnboardingConfig,
 } from '@neosync/sdk/connectquery';
-import {
-  CheckCircledIcon,
-  ExclamationTriangleIcon,
-} from '@radix-ui/react-icons';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { usePostHog } from 'posthog-js/react';
@@ -122,6 +120,8 @@ export default function MysqlForm() {
   >();
 
   const [isValidating, setIsValidating] = useState<boolean>(false);
+  const [openPermissionDialog, setOpenPermissionDialog] =
+    useState<boolean>(false);
   const posthog = usePostHog();
   const { mutateAsync: createMysqlConnection } = useMutation(createConnection);
   const { mutateAsync: checkMysqlConnection } = useMutation(
@@ -702,6 +702,16 @@ the hook in the useEffect conditionally. This is used to retrieve the values for
             </AccordionContent>
           </AccordionItem>
         </Accordion>
+        <PermissionsDialog
+          checkResponse={
+            validationResponse ?? new CheckConnectionConfigResponse({})
+          }
+          openPermissionDialog={openPermissionDialog}
+          setOpenPermissionDialog={setOpenPermissionDialog}
+          isValidating={isValidating}
+          connectionName={form.getValues('connectionName')}
+          connectionType="mysql"
+        />
         <div className="flex flex-row gap-3 justify-between">
           <Button
             variant="outline"
@@ -717,8 +727,8 @@ the hook in the useEffect conditionally. This is used to retrieve the values for
                     db: values.db,
                   }),
                 });
-                setIsValidating(false);
                 setValidationResponse(res);
+                setOpenPermissionDialog(!!res?.isConnected);
               } catch (err) {
                 setValidationResponse(
                   new CheckConnectionConfigResponse({
@@ -760,32 +770,11 @@ the hook in the useEffect conditionally. This is used to retrieve the values for
             }
           />
         )}
-        {validationResponse && validationResponse.isConnected && (
-          <SuccessAlert description={'Successfully connected!'} />
-        )}
       </form>
     </Form>
   );
 }
 
-interface SuccessAlertProps {
-  description: string;
-}
-
-function SuccessAlert(props: SuccessAlertProps): ReactElement {
-  const { description } = props;
-  return (
-    <Alert variant="success">
-      <div className="flex flex-row items-center gap-2">
-        <CheckCircledIcon className="h-4 w-4 text-green-900 dark:text-green-400" />
-        <div className="font-normal text-green-900 dark:text-green-400">
-          {description}
-        </div>
-      </div>
-    </Alert>
-  );
-}
-
 interface ErrorAlertProps {
   title: string;
   description: string;