refactor(ui): refactor admin's Users store to setup syntax

Author: luizhf42

ui/admin/src/components/User/UserDelete.vue

@@ -44,14 +44,14 @@ const emit = defineEmits(["update"]);
 const showDialog = ref(false);
 const router = useRouter();
 const snackbar = useSnackbar();
-const userStore = useUsersStore();
+const usersStore = useUsersStore();
 
 const remove = async () => {
   try {
-    await userStore.remove(props.id);
-    if (props.redirect) router.push("/users");
+    await usersStore.deleteUser(props.id);
     snackbar.showSuccess("User removed successfully.");
-    await userStore.refresh();
+    if (props.redirect) router.push("/users");
+    await usersStore.fetchUsersList();
     showDialog.value = false;
     emit("update");
   } catch (error) {

ui/admin/src/components/User/UserExport.vue

@@ -52,7 +52,7 @@ const isLoading = ref(false);
 const showDialog = ref(false);
 const selectedFilter = ref<FilterOptions>(FilterOptions.MoreThan);
 const snackbar = useSnackbar();
-const userStore = useUsersStore();
+const usersStore = useUsersStore();
 const { value: numberOfNamespaces,
   errorMessage: numberOfNamespacesError,
 } = useField<number>("numberOfNamespaces", yup.number().integer().required().min(0), { initialValue: 0 });
@@ -81,8 +81,7 @@ const handleSubmit = async () => {
   isLoading.value = true;
   const encodedFilter = encodeFilter();
   try {
-    await userStore.setFilterUsers(encodedFilter);
-    const response = await userStore.exportUsersToCsv();
+    const response = await usersStore.exportUsersToCsv(encodedFilter);
     const blob = new Blob([response], { type: "text/csv;charset=utf-8" });
     saveAs(blob, getFilename());
     snackbar.showSuccess("Exported users successfully.");

ui/admin/src/components/User/UserFormDialog.vue

@@ -134,13 +134,13 @@ import axios, { AxiosError } from "axios";
 import * as yup from "yup";
 import { useField, useForm } from "vee-validate";
 import useUsersStore from "@admin/store/modules/users";
-import { IUser } from "@admin/interfaces/IUser";
+import { IAdminUser, IAdminUserFormData } from "@admin/interfaces/IUser";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "@/components/BaseDialog.vue";
 
 const props = defineProps<{
   createUser?: boolean;
-  user?: IUser;
+  user?: IAdminUser;
   titleCard: string;
 }>();
 
@@ -151,7 +151,7 @@ const disableNamespaceCreation = ref(false);
 const maxNamespaces = ref(props.user?.max_namespaces || 0);
 const canChangeStatus = props.user?.status === "not-confirmed"; // Only allow changing status if the user is not confirmed
 const snackbar = useSnackbar();
-const userStore = useUsersStore();
+const usersStore = useUsersStore();
 const statusTooltipMessage = props.user?.status === "invited"
   ? "You cannot change the status of an invited user."
   : "You cannot remove confirmation from a user.";
@@ -208,7 +208,7 @@ const setMaxNamespaces = () => {
   maxNamespaces.value = disableNamespaceCreation.value ? 0 : maxNamespaces.value;
 };
 
-const { handleSubmit } = useForm<IUser>();
+const { handleSubmit } = useForm<IAdminUser>();
 
 const handleErrors = (error: AxiosError) => {
   if (!error.response?.data) return;
@@ -234,14 +234,14 @@ const handleErrors = (error: AxiosError) => {
   });
 };
 
-const submitUser = async (isCreating: boolean, userData: Record<string, unknown>) => {
+const submitUser = async (isCreating: boolean, userData: IAdminUserFormData) => {
   try {
-    const userStoreAction = isCreating ? userStore.addUser : userStore.put;
-    await userStoreAction(userData);
+    const usersStoreAction = isCreating ? usersStore.addUser : usersStore.updateUser;
+    await usersStoreAction(userData);
 
     snackbar.showSuccess(`User ${isCreating ? "added" : "updated"} successfully.`);
 
-    await userStore.refresh();
+    await usersStore.fetchUsersList();
     showDialog.value = false;
   } catch (error: unknown) {
     if (axios.isAxiosError(error)) {
@@ -261,7 +261,7 @@ const getStatus = () => {
   return props.user?.status;
 };
 
-const prepareUserData = (): Record<string, unknown> => ({
+const prepareUserData = () => ({
   name: name.value,
   email: email.value,
   username: username.value,
@@ -270,7 +270,7 @@ const prepareUserData = (): Record<string, unknown> => ({
   confirmed: !props.createUser ? isConfirmed.value : undefined,
   status: getStatus(),
   id: !props.createUser ? props.user?.id : undefined,
-});
+}) as IAdminUserFormData;
 
 const validateErrors = (): boolean => !nameError.value && !emailError.value && !usernameError.value;
 

ui/admin/src/components/User/UserList.vue

@@ -64,10 +64,10 @@
             <UserResetPassword
               v-if="userPrefersSAMLAuthentication(item.preferences.auth_methods)"
               :userId="item.id"
-              @update="refreshUsers"
+              @update="fetchUsers"
             />
 
-            <UserDelete :id="item.id" @update="refreshUsers" />
+            <UserDelete :id="item.id" />
           </td>
         </tr>
       </template>
@@ -79,7 +79,7 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import useUsersStore from "@admin/store/modules/users";
-import { IUser, UserAuthMethods } from "@admin/interfaces/IUser";
+import { IAdminUser, UserAuthMethods } from "@admin/interfaces/IUser";
 import useAuthStore from "@admin/store/modules/auth";
 import useSnackbar from "@/helpers/snackbar";
 import DataTable from "@/components/DataTable.vue";
@@ -91,13 +91,13 @@ import handleError from "@/utils/handleError";
 
 const router = useRouter();
 const snackbar = useSnackbar();
-const userStore = useUsersStore();
+const usersStore = useUsersStore();
 const authStore = useAuthStore();
 const page = ref(1);
 const itemsPerPage = ref(10);
 const loading = ref(false);
-const users = computed(() => userStore.getUsers as unknown as IUser[]);
-const userCount = computed(() => userStore.numberUsers);
+const users = computed(() => usersStore.users as IAdminUser[]);
+const userCount = computed(() => usersStore.usersCount);
 const headers = [
   {
     text: "Name",
@@ -132,7 +132,7 @@ const userPrefersSAMLAuthentication = (authMethods: UserAuthMethods) => (
 const fetchUsers = async () => {
   try {
     loading.value = true;
-    await userStore.fetch({
+    await usersStore.fetchUsersList({
       perPage: itemsPerPage.value,
       page: page.value,
       filter: "",
@@ -156,11 +156,7 @@ const loginWithToken = async (userId: string) => {
   }
 };
 
-const refreshUsers = async () => {
-  await userStore.refresh();
-};
-
-const redirectToUser = async (user: IUser) => {
+const redirectToUser = async (user: IAdminUser) => {
   router.push({ name: "userDetails", params: { id: user.id } });
 };
 

ui/admin/src/components/User/UserResetPassword.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import useUsersStore from "@admin/store/modules/users";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "@/components/BaseDialog.vue";
@@ -79,10 +79,10 @@ const props = defineProps<{ userId: string }>();
 const emit = defineEmits(["update"]);
 
 const snackbar = useSnackbar();
-const userStore = useUsersStore();
+const usersStore = useUsersStore();
 const showDialog = ref(false);
 const step = ref("step-1");
-const generatedPassword = computed(() => userStore.generatedPassword);
+const generatedPassword = ref("");
 
 const close = () => {
   showDialog.value = false;
@@ -99,7 +99,7 @@ const copyText = (value: string | undefined) => {
 
 const proceedToSecondStep = async () => {
   try {
-    await userStore.resetUserPassword(props.userId);
+    generatedPassword.value = await usersStore.resetUserPassword(props.userId);
     step.value = "step-2";
   } catch (error) {
     snackbar.showError("Failed to reset user password. Please try again.");

ui/admin/src/interfaces/IUser.ts

@@ -2,7 +2,7 @@ export type UserStatus = "confirmed" | "invited" | "not-confirmed";
 
 export type UserAuthMethods = Array<"saml" | "local">;
 
-export interface IUser {
+export interface IAdminUser {
   id: string;
   namespaces: number;
   max_namespaces: number;
@@ -17,3 +17,14 @@ export interface IUser {
     auth_methods: UserAuthMethods;
   }
 }
+
+export interface IAdminUserFormData {
+  name: string;
+  email: string;
+  username: string;
+  password: string;
+  max_namespaces?: number;
+  confirmed?: boolean;
+  status: UserStatus;
+  id?: string;
+}

ui/admin/src/store/api/users.ts

@@ -1,26 +1,26 @@
-import { IUser } from "@admin/interfaces/IUser";
+import { IAdminUserFormData } from "@admin/interfaces/IUser";
 import { UserAdminRequest } from "@admin/api/client";
 import { adminApi } from "@admin/api/http";
 
-const fetchUsers = async (
-  perPage: number,
+export const fetchUsers = async (
   page: number,
+  perPage: number,
   search?: string,
 ) => adminApi.getUsers(search, page, perPage);
 
-const getUser = (id: string) => adminApi.getUser(id);
+export const getUser = (id: string) => adminApi.getUser(id);
 
-const exportUsers = async (filter: string) => adminApi.exportUsers(filter);
+export const exportUsers = async (filter: string) => adminApi.exportUsers(filter);
 
-const addUser = (userData: IUser) => adminApi.createUserAdmin({
+export const addUser = (userData: IAdminUserFormData) => adminApi.createUserAdmin({
   name: userData.name,
   email: userData.email,
   username: userData.username,
   password: userData.password,
   max_namespaces: userData.max_namespaces,
 });
 
-const putUser = async (id: string, userData: IUser) => adminApi.adminUpdateUser(id, {
+export const updateUser = async (id: string, userData: IAdminUserFormData) => adminApi.adminUpdateUser(id, {
   name: userData.name,
   email: userData.email,
   username: userData.username,
@@ -29,8 +29,6 @@ const putUser = async (id: string, userData: IUser) => adminApi.adminUpdateUser(
   max_namespaces: userData.max_namespaces,
 } as UserAdminRequest);
 
-const resetUserPassword = async (id: string) => adminApi.adminResetUserPassword(id);
-
-const removeUser = (id: string) => adminApi.deleteUser(id);
+export const resetUserPassword = async (id: string) => adminApi.adminResetUserPassword(id);
 
-export { fetchUsers, getUser, exportUsers, addUser, putUser, resetUserPassword, removeUser };
+export const deleteUser = (id: string) => adminApi.deleteUser(id);