Fix: filtering + Fix: variable key is not a uuid (#1005)

Co-authored-by: takaro-ci-bot[bot] <138661031+takaro-ci-bot[bot]@users.noreply.github.com>

packages/e2e/src/web-main/views/studio.spec.ts

@@ -77,7 +77,7 @@ extendedTest.describe('filetab', () => {
     const fileName = 'my-hook';
     await studioPage.openFile(fileName);
     await studioPage.closeTab(fileName);
-    await expect(studioPage.page.getByRole('tab', { name: fileName })).not.toBeVisible();
+    await expect(studioPage.page.getByRole('tab', { name: fileName })).toHaveCount(0);
   });
 
   extendedTest.describe('context menu', () => {

packages/web-main/src/queries/variables/queries.tsx

@@ -8,7 +8,7 @@ import {
   VariableSearchInputDTO,
   VariableUpdateDTO,
 } from '@takaro/apiclient';
-import { queryParamsToArray, mutationWrapper } from '../util';
+import { mutationWrapper } from '../util';
 import { AxiosError } from 'axios';
 import { ErrorMessageMapping } from '@takaro/lib-components/src/errors';
 
@@ -33,7 +33,7 @@ export const variableQueryOptions = (variableId: string) =>
 
 export const variablesQueryOptions = (queryParams: VariableSearchInputDTO) =>
   queryOptions<VariableOutputArrayDTOAPI, AxiosError<VariableOutputArrayDTOAPI>>({
-    queryKey: [...variableKeys.list(), ...queryParamsToArray(queryParams)],
+    queryKey: [...variableKeys.list(), queryParams],
     queryFn: async () => (await getApiClient().variable.variableControllerSearch(queryParams)).data,
   });
 
@@ -45,10 +45,7 @@ export const useVariableCreate = () => {
     useMutation<VariableOutputDTO, AxiosError<VariableCreateDTO>, VariableCreateDTO>({
       mutationFn: async (variable) => (await apiClient.variable.variableControllerCreate(variable)).data.data,
       onSuccess: async (newVariable) => {
-        // update the list of variables to reflect the new variable
         await queryClient.invalidateQueries({ queryKey: variableKeys.list() });
-
-        // Create cache key for the new variable
         queryClient.setQueryData<VariableOutputDTO>(variableKeys.detail(newVariable.id), newVariable);
       },
     }),
@@ -70,10 +67,7 @@ export const useVariableUpdate = () => {
       mutationFn: async ({ variableId, variableDetails }) =>
         (await apiClient.variable.variableControllerUpdate(variableId, variableDetails)).data.data,
       onSuccess: async (updatedVar) => {
-        // renew the list of variables to reflect the new variable
         await queryClient.invalidateQueries({ queryKey: variableKeys.list() });
-
-        // update cache of updated variable
         queryClient.setQueryData<VariableOutputDTO>(variableKeys.detail(updatedVar.id), updatedVar);
       },
     }),
@@ -93,10 +87,7 @@ export const useVariableDelete = () => {
     useMutation<IdUuidDTO, AxiosError<VariableOutputDTO>, VariableDeleteInput>({
       mutationFn: async ({ variableId }) => (await apiClient.variable.variableControllerDelete(variableId)).data.data,
       onSuccess: async (removedVar) => {
-        // update the list of variables to reflect the new variable
         await queryClient.invalidateQueries({ queryKey: variableKeys.list() });
-
-        // Delete cache for the deleted variable
         queryClient.removeQueries({ queryKey: variableKeys.detail(removedVar.id) });
       },
     }),

packages/web-main/src/routes/_auth/_global/-variables/VariableCreateUpdateForm.tsx

@@ -15,8 +15,8 @@ export enum ExecutionType {
 }
 
 const validationSchema = z.object({
-  key: z.string().nonempty().max(25),
-  value: z.string().nonempty().max(255),
+  key: z.string().min(1).max(25),
+  value: z.string().min(1).max(255),
   playerId: z.string().uuid().optional(),
   gameServerId: z.string().uuid().optional(),
   moduleId: z.string().uuid().optional(),
@@ -33,7 +33,7 @@ interface CreateAndUpdateVariableformProps {
   variable?: VariableOutputDTO;
   isLoading: boolean;
   type: ExecutionType;
-  submit: (variable: IFormInputs) => Promise<void>;
+  submit: (variable: IFormInputs) => void;
   error?: string | string[] | null;
 }
 
@@ -60,8 +60,7 @@ export const VariablesForm: FC<CreateAndUpdateVariableformProps> = ({ variable,
   });
 
   const onSubmit: SubmitHandler<IFormInputs> = async (variable) => {
-    await submit(variable);
-    setOpen(false);
+    submit(variable);
   };
 
   return (

packages/web-main/src/routes/_auth/_global/players.tsx

@@ -44,18 +44,10 @@ export const Route = createFileRoute('/_auth/_global/players')({
       throw redirect({ to: '/forbidden' });
     }
   },
-  loader: ({ context }) =>
-    context.queryClient.ensureQueryData(
-      playersOptions({
-        sortBy: 'createdAt',
-        sortDirection: 'desc',
-      })
-    ),
   component: Component,
 });
 function Component() {
   useDocumentTitle('Players');
-  const loaderData = Route.useLoaderData();
 
   const { pagination, columnFilters, sorting, columnSearch } = useTableActions<PlayerOutputDTO>();
   const { data, isLoading } = useSuspenseQuery({
@@ -81,7 +73,6 @@ function Component() {
         xboxLiveId: columnSearch.columnSearchState.find((search) => search.id === 'xboxLiveId')?.value,
       },
     }),
-    initialData: loaderData,
   });
 
   // IMPORTANT: id should be identical to data object key.

packages/web-main/src/routes/_auth/_global/users.tsx

@@ -33,17 +33,12 @@ export const Route = createFileRoute('/_auth/_global/users')({
       throw redirect({ to: '/forbidden' });
     }
   },
-
-  loader: ({ context }) => {
-    return context.queryClient.ensureQueryData(usersQueryOptions({ page: 0 }));
-  },
   component: Component,
 });
 
 function Component() {
   useDocumentTitle('Users');
   const { pagination, columnFilters, sorting, columnSearch } = useTableActions<UserOutputWithRolesDTO>();
-  const loaderData = Route.useLoaderData();
 
   const { data, isLoading } = useSuspenseQuery({
     ...usersQueryOptions({
@@ -62,7 +57,6 @@ function Component() {
         discordId: columnSearch.columnSearchState.find((search) => search.id === 'discordId')?.value,
       },
     }),
-    initialData: loaderData,
   });
 
   const p =

packages/web-main/src/routes/_auth/_global/variables.create.tsx

@@ -1,7 +1,8 @@
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 import { ExecutionType, IFormInputs, VariablesForm } from './-variables/VariableCreateUpdateForm';
 import { useVariableCreate } from 'queries/variables/queries.js';
 import { hasPermission } from 'hooks/useHasPermission';
+import { useEffect } from 'react';
 
 export const Route = createFileRoute('/_auth/_global/variables/create')({
   beforeLoad: ({ context }) => {
@@ -13,16 +14,26 @@ export const Route = createFileRoute('/_auth/_global/variables/create')({
 });
 
 function Component() {
-  const { mutateAsync, isPending, error } = useVariableCreate();
+  const { mutate, isPending, error, isSuccess } = useVariableCreate();
+  const navigate = useNavigate();
 
-  async function createVariable(variable: IFormInputs) {
-    await mutateAsync({
+  function createVariable(variable: IFormInputs) {
+    mutate({
       key: variable.key,
       value: variable.value,
       moduleId: variable.moduleId,
       playerId: variable.playerId,
       gameServerId: variable.gameServerId,
     });
   }
+
+  console.log(isSuccess);
+
+  useEffect(() => {
+    if (isSuccess) {
+      navigate({ to: '/variables' });
+    }
+  }, [navigate, isSuccess]);
+
   return <VariablesForm isLoading={isPending} submit={createVariable} type={ExecutionType.CREATE} error={error} />;
 }

packages/web-main/src/routes/_auth/_global/variables.tsx

@@ -18,19 +18,11 @@ export const Route = createFileRoute('/_auth/_global/variables')({
       throw redirect({ to: '/forbidden' });
     }
   },
-  loader: ({ context }) =>
-    context.queryClient.ensureQueryData(
-      variablesQueryOptions({
-        page: 0,
-        extend: ['module', 'player', 'gameServer'],
-      })
-    ),
   component: Component,
 });
 
 function Component() {
   useDocumentTitle('Variables');
-  const loaderData = Route.useLoaderData();
   const { pagination, columnFilters, sorting, columnSearch, rowSelection } = useTableActions<VariableOutputDTO>();
   const navigate = useNavigate();
   const [openVariablesDialog, setOpenVariablesDialog] = useState<boolean>(false);
@@ -41,9 +33,11 @@ function Component() {
       limit: pagination.paginationState.pageSize,
       sortBy: sorting.sortingState[0]?.id,
       extend: ['module', 'player', 'gameServer'],
-      sortDirection: sorting.sortingState[0]?.desc
-        ? VariableSearchInputDTOSortDirectionEnum.Desc
-        : VariableSearchInputDTOSortDirectionEnum.Asc,
+      sortDirection: sorting.sortingState[0]
+        ? sorting.sortingState[0]?.desc
+          ? VariableSearchInputDTOSortDirectionEnum.Desc
+          : VariableSearchInputDTOSortDirectionEnum.Asc
+        : undefined,
       filters: {
         key: columnFilters.columnFiltersState.find((filter) => filter.id === 'key')?.value,
         gameServerId: columnFilters.columnFiltersState.find((filter) => filter.id === 'gameServerId')?.value,
@@ -57,15 +51,14 @@ function Component() {
         moduleId: columnSearch.columnSearchState.find((search) => search.id === 'moduleId')?.value,
       },
     }),
-    initialData: loaderData,
   });
 
   const columnHelper = createColumnHelper<VariableOutputDTO>();
   const columnDefs = [
     columnHelper.accessor('key', {
       header: 'Key',
       id: 'key',
-      meta: { dataType: 'uuid' },
+      meta: { dataType: 'string' },
       cell: (info) => info.getValue(),
       enableColumnFilter: true,
       enableSorting: true,

packages/web-main/src/routes/_auth/_global/variables.update.$variableId.tsx

@@ -6,6 +6,7 @@ import { VariablesForm, ExecutionType, IFormInputs } from './-variables/Variable
 import { useSnackbar } from 'notistack';
 import { queryClient } from 'queryClient';
 import { hasPermission } from 'hooks/useHasPermission';
+import { useEffect } from 'react';
 
 export const Route = createFileRoute('/_auth/_global/variables/update/$variableId')({
   beforeLoad: ({ context }) => {
@@ -22,18 +23,24 @@ function Component() {
   const navigate = useNavigate({ from: Route.fullPath });
   const data = Route.useLoaderData();
   const { enqueueSnackbar } = useSnackbar();
-  const { mutate, isPending } = useVariableUpdate();
+  const { mutate, isPending, isSuccess } = useVariableUpdate();
 
   if (!data) {
     enqueueSnackbar('Variable not found', { type: 'error' });
     throw notFound();
   }
 
-  async function updateVariable(variable: IFormInputs) {
+  function updateVariable(variable: IFormInputs) {
     mutate({ variableId: data.id, variableDetails: variable });
     navigate({ to: '/variables' });
   }
 
+  useEffect(() => {
+    if (isSuccess) {
+      navigate({ to: '/variables' });
+    }
+  }, [navigate, isSuccess]);
+
   // set null values to undefined otherwise zod will complain
   if (data?.playerId === null) {
     data.playerId = undefined;