[OPIK-347]: FE prompts list

apps/opik-frontend/src/api/api.ts

@@ -15,6 +15,7 @@ export const FEEDBACK_DEFINITIONS_REST_ENDPOINT =
   "/v1/private/feedback-definitions/";
 export const TRACES_REST_ENDPOINT = "/v1/private/traces/";
 export const SPANS_REST_ENDPOINT = "/v1/private/spans/";
+export const PROMPTS_REST_ENDPOINT = "/v1/private/prompts/";
 
 export type QueryConfig<TQueryFnData, TData = TQueryFnData> = Omit<
   UseQueryOptions<

apps/opik-frontend/src/api/prompts/useCreatePromptVersionMutation.ts

@@ -0,0 +1,56 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import get from "lodash/get";
+
+import api, { PROMPTS_REST_ENDPOINT } from "@/api/api";
+import { useToast } from "@/components/ui/use-toast";
+import { PromptVersion } from "@/types/prompts";
+
+type UseCreatePromptVersionMutationParams = {
+  name: string;
+  template: string;
+  onSetActiveVersionId: (versionId: string) => void;
+};
+
+const useCreatePromptVersionMutation = () => {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({
+      name,
+      template,
+    }: UseCreatePromptVersionMutationParams) => {
+      const { data } = await api.post(`${PROMPTS_REST_ENDPOINT}versions`, {
+        name,
+        version: {
+          template,
+        },
+      });
+
+      return data;
+    },
+    onError: (error: AxiosError) => {
+      const message = get(
+        error,
+        ["response", "data", "message"],
+        error.message,
+      );
+
+      toast({
+        title: "Error",
+        description: message,
+        variant: "destructive",
+      });
+    },
+    onSuccess: async (data: PromptVersion, { onSetActiveVersionId }) => {
+      onSetActiveVersionId(data.id);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["prompt-versions"] });
+      queryClient.invalidateQueries({ queryKey: ["prompt"] });
+    },
+  });
+};
+
+export default useCreatePromptVersionMutation;

apps/opik-frontend/src/api/prompts/usePromptById.ts

@@ -0,0 +1,29 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROMPTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { PromptWithLatestVersion } from "@/types/prompts";
+
+const getPromptById = async (
+  { signal }: QueryFunctionContext,
+  { promptId }: UsePromptByIdParams,
+) => {
+  const { data } = await api.get(`${PROMPTS_REST_ENDPOINT}${promptId}`, {
+    signal,
+  });
+
+  return data;
+};
+
+type UsePromptByIdParams = {
+  promptId: string;
+};
+
+export default function usePromptById(
+  params: UsePromptByIdParams,
+  options?: QueryConfig<PromptWithLatestVersion>,
+) {
+  return useQuery({
+    queryKey: ["prompt", params],
+    queryFn: (context) => getPromptById(context, params),
+    ...options,
+  });
+}

apps/opik-frontend/src/api/prompts/usePromptCreateMutation.ts

@@ -0,0 +1,49 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import get from "lodash/get";
+
+import api, { PROMPTS_REST_ENDPOINT } from "@/api/api";
+import { useToast } from "@/components/ui/use-toast";
+import { Prompt } from "@/types/prompts";
+
+interface CreatePromptTemplate {
+  template: string;
+}
+
+type UsePromptCreateMutationParams = {
+  prompt: Partial<Prompt> & CreatePromptTemplate;
+};
+
+const usePromptCreateMutation = () => {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({ prompt }: UsePromptCreateMutationParams) => {
+      const { data } = await api.post(PROMPTS_REST_ENDPOINT, {
+        ...prompt,
+      });
+
+      return data;
+    },
+
+    onError: (error: AxiosError) => {
+      const message = get(
+        error,
+        ["response", "data", "message"],
+        error.message,
+      );
+
+      toast({
+        title: "Error",
+        description: message,
+        variant: "destructive",
+      });
+    },
+    onSettled: () => {
+      return queryClient.invalidateQueries({ queryKey: ["prompts"] });
+    },
+  });
+};
+
+export default usePromptCreateMutation;

apps/opik-frontend/src/api/prompts/usePromptDeleteMutation.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import get from "lodash/get";
+import { useToast } from "@/components/ui/use-toast";
+import api, { PROMPTS_REST_ENDPOINT } from "@/api/api";
+
+type UsePromptDeleteMutationParams = {
+  promptId: string;
+};
+
+const usePromptDeleteMutation = () => {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({ promptId }: UsePromptDeleteMutationParams) => {
+      const { data } = await api.delete(PROMPTS_REST_ENDPOINT + promptId);
+      return data;
+    },
+    onError: (error) => {
+      const message = get(
+        error,
+        ["response", "data", "message"],
+        error.message,
+      );
+
+      toast({
+        title: "Error",
+        description: message,
+        variant: "destructive",
+      });
+    },
+    onSettled: () => {
+      return queryClient.invalidateQueries({ queryKey: ["prompts"] });
+    },
+  });
+};
+
+export default usePromptDeleteMutation;

apps/opik-frontend/src/api/prompts/usePromptUpdateMutation.ts

@@ -0,0 +1,48 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import get from "lodash/get";
+
+import api, { PROMPTS_REST_ENDPOINT } from "@/api/api";
+import { useToast } from "@/components/ui/use-toast";
+import { Prompt } from "@/types/prompts";
+
+type UsePromptUpdateMutationParams = {
+  prompt: Partial<Prompt>;
+};
+
+const usePromptUpdateMutation = () => {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({ prompt }: UsePromptUpdateMutationParams) => {
+      const { id: promptId, ...restPrompt } = prompt;
+
+      const { data } = await api.put(
+        `${PROMPTS_REST_ENDPOINT}${promptId}`,
+        restPrompt,
+      );
+
+      return data;
+    },
+
+    onError: (error: AxiosError) => {
+      const message = get(
+        error,
+        ["response", "data", "message"],
+        error.message,
+      );
+
+      toast({
+        title: "Error",
+        description: message,
+        variant: "destructive",
+      });
+    },
+    onSettled: () => {
+      return queryClient.invalidateQueries({ queryKey: ["prompts"] });
+    },
+  });
+};
+
+export default usePromptUpdateMutation;

apps/opik-frontend/src/api/prompts/usePromptVersionById.ts

@@ -0,0 +1,32 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROMPTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { PromptVersion } from "@/types/prompts";
+
+type UsePromptVersionByIdParams = {
+  versionId: string;
+};
+
+const getPromptVersionById = async (
+  { signal }: QueryFunctionContext,
+  { versionId }: UsePromptVersionByIdParams,
+) => {
+  const { data } = await api.get(
+    `${PROMPTS_REST_ENDPOINT}versions/${versionId}`,
+    {
+      signal,
+    },
+  );
+
+  return data;
+};
+
+export default function usePromptVersionById(
+  params: UsePromptVersionByIdParams,
+  options?: QueryConfig<PromptVersion>,
+) {
+  return useQuery({
+    queryKey: ["prompt-version", params],
+    queryFn: (context) => getPromptVersionById(context, params),
+    ...options,
+  });
+}

apps/opik-frontend/src/api/prompts/usePromptVersionsById.ts

@@ -0,0 +1,45 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROMPTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { PromptVersion } from "@/types/prompts";
+
+type UsePromptVersionsByIdParams = {
+  promptId: string;
+  search?: string;
+  page: number;
+  size: number;
+};
+
+type UsePromptsVersionsByIdResponse = {
+  content: PromptVersion[];
+  total: number;
+};
+
+const getPromptVersionsById = async (
+  { signal }: QueryFunctionContext,
+  { promptId, size, page, search }: UsePromptVersionsByIdParams,
+) => {
+  const { data } = await api.get(
+    `${PROMPTS_REST_ENDPOINT}${promptId}/versions`,
+    {
+      signal,
+      params: {
+        ...(search && { name: search }),
+        size,
+        page,
+      },
+    },
+  );
+
+  return data;
+};
+
+export default function usePromptVersionsById(
+  params: UsePromptVersionsByIdParams,
+  options?: QueryConfig<UsePromptsVersionsByIdResponse>,
+) {
+  return useQuery({
+    queryKey: ["prompt-versions", params],
+    queryFn: (context) => getPromptVersionsById(context, params),
+    ...options,
+  });
+}

apps/opik-frontend/src/api/prompts/usePromptsList.ts

@@ -0,0 +1,42 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROMPTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { Prompt } from "@/types/prompts";
+
+type UsePromptsListParams = {
+  workspaceName: string;
+  search?: string;
+  page: number;
+  size: number;
+};
+
+type UsePromptsListResponse = {
+  content: Prompt[];
+  total: number;
+};
+
+const getPromptsList = async (
+  { signal }: QueryFunctionContext,
+  { search, size, page }: UsePromptsListParams,
+) => {
+  const { data } = await api.get(PROMPTS_REST_ENDPOINT, {
+    signal,
+    params: {
+      ...(search && { name: search }),
+      size,
+      page,
+    },
+  });
+
+  return data;
+};
+
+export default function usePromptsList(
+  params: UsePromptsListParams,
+  options?: QueryConfig<UsePromptsListResponse>,
+) {
+  return useQuery({
+    queryKey: ["prompts", params],
+    queryFn: (context) => getPromptsList(context, params),
+    ...options,
+  });
+}