Merge pull request #224 from akhilmhdh/feat/migration-ts-v2

feat(frontend): migrated to ts completed.

frontend/components/RouteGuard.tsx

@@ -1,8 +1,8 @@
-import { ReactNode, useEffect, useState } from "react";
-import { useRouter } from "next/router";
+import { ReactNode, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 
-import { publicPaths } from "~/const";
-import checkAuth from "~/pages/api/auth/CheckAuth";
+import { publicPaths } from '~/const';
+import checkAuth from '~/pages/api/auth/CheckAuth';
 
 // #TODO: finish spinner only when the data loads fully
 // #TODO: Redirect somewhere if the page does not exist
@@ -11,7 +11,7 @@ type Prop = {
   children: ReactNode;
 };
 
-export default function RouteGuard({ children }: Prop) {
+export default function RouteGuard({ children }: Prop): JSX.Element {
   const router = useRouter();
   const [authorized, setAuthorized] = useState(false);
 
@@ -25,16 +25,16 @@ export default function RouteGuard({ children }: Prop) {
     // #TODO: add the loading page when not yet authorized.
     const hideContent = () => setAuthorized(false);
     // const onError = () => setAuthorized(true)
-    router.events.on("routeChangeStart", hideContent);
+    router.events.on('routeChangeStart', hideContent);
     // router.events.on("routeChangeError", onError);
 
     // on route change complete - run auth check
-    router.events.on("routeChangeComplete", authCheck);
+    router.events.on('routeChangeComplete', authCheck);
 
     // unsubscribe from events in useEffect return function
     return () => {
-      router.events.off("routeChangeStart", hideContent);
-      router.events.off("routeChangeComplete", authCheck);
+      router.events.off('routeChangeStart', hideContent);
+      router.events.off('routeChangeComplete', authCheck);
       // router.events.off("routeChangeError", onError);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -43,9 +43,9 @@ export default function RouteGuard({ children }: Prop) {
   /**
    * redirect to login page if accessing a private page and not logged in
    */
-  async function authCheck(url:string) {
+  async function authCheck(url: string) {
     // Make sure that we don't redirect when the user is on the following pages.
-    const path = "/" + url.split("?")[0].split("/")[1];
+    const path = '/' + url.split('?')[0].split('/')[1];
 
     // Check if the user is authenticated
     const response = await checkAuth();
@@ -54,21 +54,21 @@ export default function RouteGuard({ children }: Prop) {
     if (!publicPaths.includes(path)) {
       try {
         if (response.status !== 200) {
-          router.push("/login");
-          console.log("Unauthorized to access.");
+          router.push('/login');
+          console.log('Unauthorized to access.');
           setAuthorized(false);
         } else {
           setAuthorized(true);
-          console.log("Authorized to access.");
+          console.log('Authorized to access.');
         }
       } catch (error) {
         console.log(
-          "Error (probably the authCheck route is stuck again...):",
+          'Error (probably the authCheck route is stuck again...):',
           error
         );
       }
     }
   }
 
-  return children;
+  return children as JSX.Element;
 }

frontend/components/basic/dialog/ActivateBotDialog.tsx

@@ -0,0 +1,98 @@
+import { Fragment } from 'react';
+import { useTranslation } from 'next-i18next';
+import { Dialog, Transition } from '@headlessui/react';
+
+import Button from '../buttons/Button';
+
+type Props = {
+  isOpen: boolean;
+  closeModal: () => void;
+  selectedIntegrationOption: never[] | null;
+  handleBotActivate: () => Promise<void>;
+  handleIntegrationOption: (arg: { integrationOption: never[] }) => void;
+};
+
+const ActivateBotDialog = ({
+  isOpen,
+  closeModal,
+  selectedIntegrationOption,
+  handleBotActivate,
+  handleIntegrationOption,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const submit = async () => {
+    try {
+      // 1. activate bot
+      await handleBotActivate();
+
+      // type check
+      if (!selectedIntegrationOption) return;
+      // 2. start integration
+      await handleIntegrationOption({
+        integrationOption: selectedIntegrationOption,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+
+    closeModal();
+  };
+
+  return (
+    <div>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as='div' className='relative z-10' onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter='ease-out duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='ease-in duration-200'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <div className='fixed inset-0 bg-black bg-opacity-70' />
+          </Transition.Child>
+          <div className='fixed inset-0 overflow-y-auto'>
+            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+              <Transition.Child
+                as={Fragment}
+                enter='ease-out duration-300'
+                enterFrom='opacity-0 scale-95'
+                enterTo='opacity-100 scale-100'
+                leave='ease-in duration-200'
+                leaveFrom='opacity-100 scale-100'
+                leaveTo='opacity-0 scale-95'
+              >
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                  <Dialog.Title
+                    as='h3'
+                    className='text-lg font-medium leading-6 text-gray-400'
+                  >
+                    {t('integrations:grant-access-to-secrets')}
+                  </Dialog.Title>
+                  <div className='mt-2 mb-2'>
+                    <p className='text-sm text-gray-500'>
+                      {t('integrations:why-infisical-needs-access')}
+                    </p>
+                  </div>
+                  <div className='mt-6 max-w-max'>
+                    <Button
+                      onButtonPressed={submit}
+                      color='mineshaft'
+                      text={t('integrations:grant-access-button') as string}
+                      size='md'
+                    />
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default ActivateBotDialog;