App migrate views

.changeset/rare-chefs-hope.md

@@ -0,0 +1,6 @@
+---
+"@directus/app": patch
+"@directus/sdk": patch
+---
+
+Migrated views components in the App to the Sdk

app/src/components/v-upload.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import api from '@/api';
 import { emitter, Events } from '@/events';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { uploadFile } from '@/utils/upload-file';
 import { uploadFiles } from '@/utils/upload-files';
 import DrawerFiles from '@/views/private/components/drawer-files.vue';
+import { useSdk } from '@directus/composables';
+import { importFile, readFile, readFiles } from '@directus/sdk';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -146,28 +147,29 @@ function useDragging() {
 }
 
 function useSelection() {
+	const sdk = useSdk();
+
 	return { setSelection };
 
 	async function setSelection(selection: (string | number)[] | null) {
 		if (!selection) return;
 
 		if (props.multiple) {
-			const filesResponse = await api.get(`/files`, {
-				params: {
+			const filesResponse = await sdk.request(
+				readFiles({
 					filter: {
 						id: {
 							_in: selection,
 						},
 					},
-				},
-			});
+				}),
+			);
 
-			emit('input', filesResponse.data.data);
+			emit('input', filesResponse);
 		} else {
 			if (selection[0]) {
-				const id = selection[0];
-				const fileResponse = await api.get(`/files/${id}`);
-				emit('input', fileResponse.data.data);
+				const fileResponse = await sdk.request(readFile(String(selection[0])));
+				emit('input', fileResponse);
 			} else {
 				emit('input', null);
 			}
@@ -176,6 +178,7 @@ function useSelection() {
 }
 
 function useURLImport() {
+	const sdk = useSdk();
 	const url = ref('');
 	const loading = ref(false);
 
@@ -200,17 +203,14 @@ function useURLImport() {
 		};
 
 		try {
-			const response = await api.post(`/files/import`, {
-				url: url.value,
-				data,
-			});
+			const response = await sdk.request(importFile(url.value, data));
 
 			emitter.emit(Events.upload);
 
 			if (props.multiple) {
-				emit('input', [response.data.data]);
+				emit('input', [response]);
 			} else {
-				emit('input', response.data.data);
+				emit('input', response);
 			}
 
 			activeDialog.value = null;

app/src/sdk.ts

@@ -48,7 +48,7 @@ const baseClient = ofetch.create({
 	},
 });
 
-export const sdk: SdkClient = createDirectus(getPublicURL(), { globals: { fetch: baseClient.native } })
+export const sdk: SdkClient = createDirectus(getPublicURL(), { globals: { fetch: baseClient } })
 	.with(authentication('session', { credentials: 'include', msRefreshBeforeExpires: 10_000 }))
 	.with(rest({ credentials: 'include' }));
 

app/src/views/private/components/basic-import-sidebar-detail.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import api from '@/api';
 import { useCollectionPermissions } from '@/composables/use-permissions';
 import { notify } from '@/utils/notify';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import { unexpectedError } from '@/utils/unexpected-error';
-import type { AxiosProgressEvent } from 'axios';
+import { useSdk } from '@directus/composables';
+import { utilsImport } from '@directus/sdk';
 import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -48,6 +48,7 @@ function importData() {
 }
 
 function useUpload() {
+	const sdk = useSdk();
 	const uploading = ref(false);
 	const importing = ref(false);
 	const progress = ref(0);
@@ -63,13 +64,10 @@ function useUpload() {
 		formData.append('file', file);
 
 		try {
-			await api.post(`/utils/import/${collection.value}`, formData, {
-				onUploadProgress: (progressEvent: AxiosProgressEvent) => {
-					const percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total!);
-					progress.value = percentCompleted;
-					importing.value = percentCompleted === 100 ? true : false;
-				},
-			});
+			await sdk.request(utilsImport(collection.value, formData));
+
+			progress.value = 100;
+			importing.value = false;
 
 			clearFileInput();
 
@@ -79,7 +77,7 @@ function useUpload() {
 				title: t('import_data_success', { filename: file.name }),
 			});
 		} catch (error: any) {
-			const code = error?.response?.data?.errors?.[0]?.extensions?.code;
+			const code = error?.errors?.[0]?.extensions?.code;
 
 			notify({
 				title: te(`errors.${code}`) ? t(`errors.${code}`) : t('import_data_error'),

app/src/views/private/components/comment-input.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import api from '@/api';
 import { useShortcut } from '@/composables/use-shortcut';
 import { Activity } from '@/types/activity';
 import { getAssetUrl } from '@/utils/get-asset-url';
 import { md } from '@/utils/md';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { userName } from '@/utils/user-name';
+import { useSdk } from '@directus/composables';
+import { createComment, readUsers, updateComment, withOptions } from '@directus/sdk';
 import { User } from '@directus/types';
-import axios, { CancelTokenSource } from 'axios';
 import { cloneDeep, throttle } from 'lodash';
 import { ComponentPublicInstance, computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+const sdk = useSdk();
+
 const props = withDefaults(
 	defineProps<{
 		refresh: () => Promise<void>;
@@ -53,7 +55,8 @@ watch(
 const saving = ref(false);
 const showMentionDropDown = ref(false);
 
-const searchResult = ref<Pick<User, 'id' | 'email' | 'first_name' | 'last_name' | 'avatar'>[]>([]);
+type SearchUser = Pick<User, 'id' | 'email' | 'first_name' | 'last_name' | 'avatar'>;
+const searchResult = ref<SearchUser[]>([]);
 const userPreviews = ref<Record<string, string>>({});
 
 watch(
@@ -72,14 +75,14 @@ watch(
 let triggerCaretPosition = 0;
 const selectedKeyboardIndex = ref<number>(0);
 
-let cancelToken: CancelTokenSource | null = null;
+let abortController: AbortController | null = null;
 
 const loadUsers = throttle(async (name: string): Promise<any> => {
-	if (cancelToken !== null) {
-		cancelToken.cancel();
+	if (abortController !== null) {
+		abortController.abort();
 	}
 
-	cancelToken = axios.CancelToken.source();
+	abortController = new AbortController();
 
 	const regex = /\s@[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}/gi;
 
@@ -112,23 +115,25 @@ const loadUsers = throttle(async (name: string): Promise<any> => {
 	}
 
 	try {
-		const result = await api.get('/users', {
-			params: {
-				filter: name === '' || !name ? undefined : filter,
-				fields: ['first_name', 'last_name', 'email', 'id', 'avatar.id'],
-			},
-			cancelToken: cancelToken.token,
-		});
+		const result = await sdk.request<SearchUser[]>(
+			withOptions(
+				readUsers({
+					filter: name === '' || !name ? undefined : filter,
+					fields: ['first_name', 'last_name', 'email', 'id', 'avatar.id'],
+				}),
+				{ signal: abortController.signal },
+			),
+		);
 
 		const newUsers = cloneDeep(userPreviews.value);
 
-		result.data.data.forEach((user: any) => {
+		result.forEach((user: any) => {
 			newUsers[user.id] = userName(user);
 		});
 
 		userPreviews.value = newUsers;
 
-		searchResult.value = result.data.data;
+		searchResult.value = result;
 	} catch (error) {
 		return error;
 	}
@@ -228,15 +233,19 @@ async function postComment() {
 
 	try {
 		if (props.existingComment) {
-			await api.patch(`/activity/comment/${props.existingComment.id}`, {
-				comment: newCommentContent.value,
-			});
+			await sdk.request(
+				updateComment(props.existingComment.id, {
+					comment: newCommentContent.value,
+				}),
+			);
 		} else {
-			await api.post(`/activity/comment`, {
-				collection: props.collection,
-				item: props.primaryKey,
-				comment: newCommentContent.value,
-			});
+			await sdk.request(
+				createComment({
+					collection: props.collection,
+					item: String(props.primaryKey),
+					comment: newCommentContent.value,
+				}),
+			);
 		}
 
 		props.refresh();

app/src/views/private/components/comment-item-header.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import api from '@/api';
 import { Activity } from '@/types/activity';
 import { getAssetUrl } from '@/utils/get-asset-url';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { userName } from '@/utils/user-name';
+import { useSdk } from '@directus/composables';
+import { deleteComment } from '@directus/sdk';
 import type { User } from '@directus/types';
 import { format } from 'date-fns';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+const sdk = useSdk();
+
 const props = defineProps<{
 	activity: Activity & {
 		display: string;
@@ -48,7 +51,7 @@ function useDelete() {
 		deleting.value = true;
 
 		try {
-			await api.delete(`/activity/comment/${props.activity.id}`);
+			await sdk.request(deleteComment(props.activity.id));
 			await props.refresh();
 			confirmDelete.value = false;
 		} catch (error) {

app/src/views/private/components/comment-item.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import api from '@/api';
 import { Activity } from '@/types/activity';
 import { unexpectedError } from '@/utils/unexpected-error';
 import type { User } from '@directus/types';
 import { ref, watch } from 'vue';
 import CommentInput from './comment-input.vue';
 import CommentItemHeader from './comment-item-header.vue';
+import { useSdk } from '@directus/composables';
+import { updateComment } from '@directus/sdk';
+
+const sdk = useSdk();
 
 const props = withDefaults(
 	defineProps<{
@@ -41,9 +44,7 @@ function useEdits() {
 		savingEdits.value = true;
 
 		try {
-			await api.patch(`/activity/comment/${props.activity.id}`, {
-				comment: edits.value,
-			});
+			await sdk.request(updateComment(props.activity.id, { comment: edits.value }));
 
 			props.refresh();
 		} catch (error) {