feat: add auth

Signed-off-by: Jonathan Perchoc <[email protected]>

packages/manager/apps/pci-ai-notebooks/src/data/api/test/test.api.ts

@@ -0,0 +1,31 @@
+import { apiClient } from '@ovh-ux/manager-core-api';
+import { PCIAi } from '..';
+
+export interface TestType {
+  id?: string;
+  delay: number;
+  email: string;
+  monthlyThreshold: number;
+}
+
+export interface TestPostType extends PCIAi {
+  test: TestType;
+}
+
+export const getTest = async ({ projectId }: PCIAi) =>
+  apiClient.v6
+    .get(`/cloud/project/${projectId}/alerting`, {
+      headers: {
+        'X-Pagination-Mode': 'CachedObjectList-Pages',
+        'X-Pagination-Size': '50000',
+      },
+    })
+    .then((res) => res.data as string[]);
+
+export const postTest = async ({ projectId, test }: TestPostType) =>
+  apiClient.v6
+    .post(`/cloud/project/${projectId}/alerting`, test)
+    .then((res) => res.data as TestType);
+
+export const deleteTest = async ({ projectId, test }: TestPostType) =>
+  apiClient.v6.delete(`/cloud/project/${projectId}/alerting/${test.id}`);

packages/manager/apps/pci-ai-notebooks/src/hooks/api/test/useTest.hook.tsx

@@ -0,0 +1,85 @@
+import { useParams } from 'react-router-dom';
+import {
+  QueryObserverOptions,
+  UseQueryResult,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+import {
+  TestType,
+  deleteTest,
+  getTest,
+  postTest,
+} from '@/data/api/test/test.api';
+import { AIError } from '@/data/api';
+import { useQueryImmediateRefetch } from '../useImmediateRefetch';
+
+export function useGetTest(
+  projectId: string,
+  options: Omit<QueryObserverOptions, 'queryKey'> = {},
+) {
+  const queryKey = [projectId, 'alerting'];
+  return useQueryImmediateRefetch({
+    queryKey,
+    queryFn: () => getTest({ projectId }),
+    ...options,
+  }) as UseQueryResult<TestType[], Error>;
+}
+
+export interface PostMutateTestProps {
+  onError: (cause: AIError) => void;
+  onSuccess: (test?: TestType) => void;
+}
+
+export function usePostTest({ onError, onSuccess }: PostMutateTestProps) {
+  const queryClient = useQueryClient();
+  const { projectId } = useParams();
+  const mutation = useMutation({
+    mutationFn: (testInfo: TestType) => {
+      return postTest({ projectId, test: testInfo });
+    },
+    onError,
+    onSuccess: (data) => {
+      // invalidate notebook list to avoid displaying
+      // old list
+      queryClient.invalidateQueries({
+        queryKey: [projectId, 'alerting'],
+      });
+      onSuccess(data);
+    },
+  });
+
+  return {
+    postTest: (postInfo: TestType) => {
+      return mutation.mutate(postInfo);
+    },
+    ...mutation,
+  };
+}
+
+export function useDeleteTest({ onError, onSuccess }: PostMutateTestProps) {
+  const queryClient = useQueryClient();
+  const { projectId } = useParams();
+  const mutation = useMutation({
+    mutationFn: (testInfo: TestType) => {
+      return deleteTest({ projectId, test: testInfo });
+    },
+    onError,
+    onSuccess: () => {
+      // invalidate notebook list to avoid displaying
+      // old list
+      queryClient.invalidateQueries({
+        queryKey: [projectId, 'alerting'],
+      });
+      onSuccess();
+    },
+  });
+
+  return {
+    deleteTest: (postInfo: TestType) => {
+      return mutation.mutate(postInfo);
+    },
+    ...mutation,
+  };
+}

packages/manager/apps/pci-ai-notebooks/src/hooks/useTracking.ts

@@ -79,6 +79,7 @@ export function useTrackPageAuto() {
       name: injectedTrackingKey,
       level2: PCI_LEVEL2,
     });
+    console.debug('TRACK', injectedTrackingKey);
     hasTrackedRef.current = true;
   }, [location.pathname, params.serviceId]);
 

packages/manager/apps/pci-ai-notebooks/src/pages/Root.layout.tsx

@@ -11,7 +11,6 @@ import { defineCurrentPage } from '@ovh-ux/request-tagger';
 import queryClient from '@/query.client';
 import { useLoadingIndicatorContext } from '@/contexts/LoadingIndicator.context';
 import { getProject } from '@/data/api/project/project.api';
-import Breadcrumb from '@/components/breadcrumb/Breadcrumb.component';
 import BreadcrumbItem from '@/components/breadcrumb/BreadcrumbItem.component';
 import { Toaster } from '@/components/ui/toaster';
 import PageLayout from '@/components/page-layout/PageLayout.component';
@@ -31,20 +30,19 @@ interface NotebooksLayoutProps {
   };
   request: Request;
 }
-// try to fetch the service data, redirect to service page if it fails
+// try to get project details from project id, redirect if the projectId is invalid
 export const Loader = async ({ params }: NotebooksLayoutProps) => {
   const { projectId } = params;
-
   // check if we have a correct projectId
-  return queryClient
-    .fetchQuery({
+  try {
+    await queryClient.fetchQuery({
       queryKey: ['projectId', projectId],
       queryFn: () => getProject(projectId),
-    })
-    .then(
-      () => null,
-      () => redirect(`/pci/projects`),
-    );
+    });
+  } catch (_error) {
+    return redirect(`/pci/projects`);
+  }
+  return null;
 };
 
 function RoutingSynchronisation() {
@@ -83,7 +81,6 @@ export default function Layout() {
   return (
     <PageLayout>
       <UserActivityProvider timeout={USER_INACTIVITY_TIMEOUT}>
-        <Breadcrumb />
         <RoutingSynchronisation />
         <Outlet />
         <Toaster />

packages/manager/apps/pci-ai-notebooks/src/pages/Root.page.tsx

@@ -2,7 +2,6 @@ import { redirect } from 'react-router-dom';
 import queryClient from '@/query.client';
 import Notebooks from './notebooks/Notebooks.page';
 import { getNotebooks } from '@/data/api/ai/notebook/notebook.api';
-import { getAuthorization } from '@/data/api/ai/authorization.api';
 
 interface NotebooksProps {
   params: {
@@ -11,32 +10,17 @@ interface NotebooksProps {
   request: Request;
 }
 
-export const Loader = ({ params }: NotebooksProps) => {
+export const Loader = async ({ params }: NotebooksProps) => {
   // check if we have a correct category
   const { projectId } = params;
-  return queryClient
-    .fetchQuery({
-      queryKey: [projectId, 'auth'],
-      queryFn: () => getAuthorization({ projectId }),
-    })
-    .then((auth) => {
-      if (!auth.authorized) {
-        return redirect(`/pci/projects/${projectId}/ai/notebooks/auth`);
-      }
-      return queryClient
-        .fetchQuery({
-          queryKey: [projectId, 'ai/notebooks'],
-          queryFn: () => getNotebooks({ projectId }),
-        })
-        .then((notebooks) => {
-          if (notebooks.length === 0) {
-            return redirect(
-              `/pci/projects/${projectId}/ai/notebooks/onboarding`,
-            );
-          }
-          return null;
-        });
-    });
+  const notebooks = await queryClient.fetchQuery({
+    queryKey: [projectId, 'ai/notebooks'],
+    queryFn: () => getNotebooks({ projectId }),
+  });
+  if (notebooks.length === 0) {
+    return redirect(`/pci/projects/${projectId}/ai/notebooks/onboarding`);
+  }
+  return null;
 };
 
 export default function Root() {

packages/manager/apps/pci-ai-notebooks/src/pages/WithAuth.layout.tsx

@@ -0,0 +1,36 @@
+import { Outlet, redirect } from 'react-router-dom';
+import Breadcrumb from '@/components/breadcrumb/Breadcrumb.component';
+import queryClient from '@/query.client';
+import { getTest } from '@/data/api/test/test.api';
+
+interface WithAuthLayoutProps {
+  params: {
+    projectId: string;
+  };
+  request: Request;
+}
+// check if the user has authentication
+export const Loader = async ({ params }: WithAuthLayoutProps) => {
+  const { projectId } = params;
+  try {
+    const authResult = await queryClient.fetchQuery({
+      queryKey: [projectId, 'alerting'],
+      queryFn: () => getTest({ projectId }),
+    });
+    if (authResult.length === 0) {
+      return redirect(`/pci/projects/${projectId}/ai/notebooks/auth`);
+    }
+  } catch (_error) {
+    return redirect(`/pci/projects/${projectId}/ai/notebooks/auth`);
+  }
+  return null;
+};
+
+export default function Layout() {
+  return (
+    <>
+      <Breadcrumb />
+      <Outlet />
+    </>
+  );
+}

packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/auth/Auth.page.tsx

@@ -1,16 +1,24 @@
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
-import { AlertCircle, ArrowRight } from 'lucide-react';
+import { redirect, useNavigate, useParams } from 'react-router-dom';
+import { AlertCircle, ArrowRight, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/use-toast';
-import {
-  PostMutateAuthorizationProps,
-  usePostAuthorization,
-} from '@/hooks/api/ai/authorization/usePostAuthorization.hook';
+// import {
+//   PostMutateAuthorizationProps,
+//   usePostAuthorization,
+// } from '@/hooks/api/ai/authorization/usePostAuthorization.hook';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import OvhLink from '@/components/links/OvhLink.component';
 import usePciProject from '@/hooks/api/project/usePciProject.hook';
 import { PlanCode } from '@/configuration/project';
+import {
+  PostMutateTestProps,
+  useDeleteTest,
+  useGetTest,
+  usePostTest,
+} from '@/hooks/api/test/useTest.hook';
+import { TestType } from '@/data/api/test/test.api';
+import Link from '@/components/links/Link.component';
 
 export default function Auth() {
   const { t } = useTranslation('pci-ai-notebooks/auth');
@@ -19,10 +27,13 @@ export default function Auth() {
   const { projectId } = useParams();
   const projectData = usePciProject();
 
+  const tests = useGetTest(projectId);
+
   const isProjectDiscoveryMode =
     projectData.data?.planCode === PlanCode.DISCOVERY;
 
-  const PostAuthorizationProps: PostMutateAuthorizationProps = {
+  // const PostAuthorizationProps: PostMutateAuthorizationProps = {
+  const PostTestProps: PostMutateTestProps = {
     onError(err) {
       toast.toast({
         title: t(`formActiveUserToastErrorTitle`),
@@ -39,12 +50,21 @@ export default function Auth() {
     },
   };
 
-  const { postAuthorization } = usePostAuthorization(PostAuthorizationProps);
+  // const { postAuthorization } = usePostAuthorization(PostAuthorizationProps);
+  const { postTest } = usePostTest(PostTestProps);
+  const { deleteTest } = useDeleteTest(PostTestProps);
 
   const activateProject = () => {
-    postAuthorization({
-      projectId,
-    });
+    // postAuthorization({
+    //   projectId,
+    // });
+
+    const test: TestType = {
+      delay: 3600,
+      email: '[email protected]',
+      monthlyThreshold: 1,
+    };
+    postTest(test);
   };
 
   return (
@@ -92,6 +112,21 @@ export default function Auth() {
         >
           {t('authActivateProjectButton')}
         </Button>
+
+        <ul>
+          {tests.isSuccess &&
+            tests.data.map((test) => (
+              <li key={test.id}>
+                {test.id}{' '}
+                <Button variant="ghost" onClick={() => deleteTest(test)}>
+                  <X />
+                </Button>
+              </li>
+            ))}
+        </ul>
+        {tests.isSuccess && tests.data.length > 0 && (
+          <Link to={'../'}>Go to notebooks</Link>
+        )}
       </div>
     </>
   );

packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/onboarding/Onboarding.page.tsx

@@ -21,7 +21,7 @@ const Onboarding = () => {
       <p>{t('description3')}</p>
       <Button data-testid="create-notebook-link" asChild>
         <Link
-          to="new"
+          to="../new"
           className="hover:no-underline hover:text-primary-foreground"
         >
           {t('createNotebookButton')}