fix: types in files app

packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue

@@ -50,7 +50,7 @@ import uniqueId from '../../utils/uniqueId'
 
 export type ListElement = {
   text: string
-  headline?: string
+  headline?: boolean
 }
 
 export default defineComponent({

packages/web-app-files/src/App.vue

@@ -20,7 +20,7 @@ export default defineComponent({
     const hideDropzone = () => {
       dragareaEnabled.value = false
     }
-    const onDragOver = (event) => {
+    const onDragOver = (event: DragEvent) => {
       dragareaEnabled.value = (event.dataTransfer.types || []).some((e) => e === 'Files')
     }
 

packages/web-app-files/src/HandleUpload.ts

@@ -1,5 +1,4 @@
-import Uppy, { UppyFile } from '@uppy/core'
-import BasePlugin from '@uppy/core/lib/BasePlugin.js'
+import Uppy, { BasePlugin, UppyFile } from '@uppy/core'
 import { filesize } from 'filesize'
 import { basename, dirname, join } from 'path'
 import * as uuid from 'uuid'
@@ -46,10 +45,6 @@ export interface HandleUploadOptions {
  * 5. start upload
  */
 export class HandleUpload extends BasePlugin {
-  id: string
-  type: string
-  uppy: Uppy
-
   clientService: ClientService
   language: Language
   route: Ref<RouteLocationNormalizedLoaded>
@@ -161,7 +156,7 @@ export class HandleUpload extends BasePlugin {
         ...file.meta,
         // file data
         name: file.name,
-        mtime: (file.data as any).lastModified / 1000,
+        mtime: file.data.lastModified / 1000,
         // current path & space
         spaceId: this.space.id,
         spaceName: this.space.name,
@@ -170,7 +165,7 @@ export class HandleUpload extends BasePlugin {
         currentFolder: currentFolderPath,
         currentFolderId,
         // upload data
-        uppyId: this.uppyService.generateUploadId(file as any),
+        uppyId: this.uppyService.generateUploadId(file),
         relativeFolder: directory,
         tusEndpoint: endpoint,
         uploadId: uuid.v4(),
@@ -343,7 +338,7 @@ export class HandleUpload extends BasePlugin {
       }
 
       const foldersToBeCreated = Object.keys(current)
-      const promises = []
+      const promises: Promise<unknown>[] = []
       for (const folder of foldersToBeCreated) {
         promises.push(createDirectoryLevel(current[folder], join(path, folder)))
       }

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -181,6 +181,7 @@
 
 <script lang="ts">
 import {
+  FileAction,
   isLocationPublicActive,
   isLocationSpacesActive,
   useClipboardStore,
@@ -219,7 +220,7 @@ import {
   isPublicSpaceResource,
   isShareSpaceResource
 } from '@ownclouders/web-client'
-import { useService, useUpload, UppyService, UppyResource } from '@ownclouders/web-pkg'
+import { useService, useUpload, UppyService, UploadResult } from '@ownclouders/web-pkg'
 import { HandleUpload } from 'web-app-files/src/HandleUpload'
 import { useRoute } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
@@ -336,13 +337,13 @@ export default defineComponent({
       return action.isDisabled ? action.isDisabled() : false
     }
 
-    const handlePasteFileEvent = (event) => {
+    const handlePasteFileEvent = (event: ClipboardEvent) => {
       // Ignore file in clipboard if there are already files from owncloud in the clipboard
       if (unref(clipboardResources).length || !unref(canUpload)) {
         return
       }
       // Browsers only allow single files to be pasted for security reasons
-      const items = (event.clipboardData || event.originalEvent.clipboardData).items
+      const items = event.clipboardData.items
       const fileItem = [...items].find((i) => i.kind === 'file')
       if (!fileItem) {
         return
@@ -352,9 +353,9 @@ export default defineComponent({
       event.preventDefault()
     }
 
-    const onUploadComplete = async (result) => {
+    const onUploadComplete = async (result: UploadResult) => {
       if (result.successful) {
-        const file = result.successful[0] as UppyResource
+        const file = result.successful[0]
 
         if (!file) {
           return
@@ -496,7 +497,7 @@ export default defineComponent({
     }
   },
   methods: {
-    getIconResource(fileHandler) {
+    getIconResource(fileHandler: FileAction) {
       return { type: 'file', extension: fileHandler.ext } as Resource
     }
   }

packages/web-app-files/src/components/AppBar/SharesNavigation.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import { isLocationSharesActive } from '@ownclouders/web-pkg'
+import { isLocationSharesActive, RouteShareTypes } from '@ownclouders/web-pkg'
 import {
   locationSharesViaLink,
   locationSharesWithMe,
@@ -53,6 +53,7 @@ import { computed, defineComponent, unref } from 'vue'
 import { useRouter } from '@ownclouders/web-pkg'
 import { useActiveLocation } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
+import { RouteRecordNormalized } from 'vue-router'
 
 export default defineComponent({
   setup() {
@@ -62,38 +63,38 @@ export default defineComponent({
       locationSharesWithMe,
       locationSharesWithOthers,
       locationSharesViaLink
-    ].reduce((routes, route) => {
-      routes[route.name] = router.getRoutes().find((r) => r.name === route.name)
+    ].reduce<Record<string, RouteRecordNormalized>>((routes, route) => {
+      routes[route.name as string] = router.getRoutes().find((r) => r.name === route.name)
       return routes
     }, {})
     const sharesWithMeActive = useActiveLocation(
       isLocationSharesActive,
-      locationSharesWithMe.name as string
+      locationSharesWithMe.name as RouteShareTypes
     )
     const sharesWithOthersActive = useActiveLocation(
       isLocationSharesActive,
-      locationSharesWithOthers.name as string
+      locationSharesWithOthers.name as RouteShareTypes
     )
     const sharesViaLinkActive = useActiveLocation(
       isLocationSharesActive,
-      locationSharesViaLink.name as string
+      locationSharesViaLink.name as RouteShareTypes
     )
     const navItems = computed(() => [
       {
         icon: 'share-forward',
-        to: sharesRoutes[locationSharesWithMe.name].path,
+        to: sharesRoutes[locationSharesWithMe.name as string].path,
         text: $gettext('Shared with me'),
         active: unref(sharesWithMeActive)
       },
       {
         icon: 'reply',
-        to: sharesRoutes[locationSharesWithOthers.name].path,
+        to: sharesRoutes[locationSharesWithOthers.name as string].path,
         text: $gettext('Shared with others'),
         active: unref(sharesWithOthersActive)
       },
       {
         icon: 'link',
-        to: sharesRoutes[locationSharesViaLink.name].path,
+        to: sharesRoutes[locationSharesViaLink.name as string].path,
         text: $gettext('Shared via link'),
         active: unref(sharesViaLinkActive)
       }

packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue

@@ -56,8 +56,8 @@ export default defineComponent({
     const uppyService = useService<UppyService>('$uppyService')
     const isRemoteUploadInProgress = ref(uppyService.isRemoteUploadInProgress())
 
-    let uploadStartedSub
-    let uploadCompletedSub
+    let uploadStartedSub: string
+    let uploadCompletedSub: string
 
     const resource = computed(() => {
       return { extension: '', isFolder: props.isFolder } as Resource

packages/web-app-files/src/components/Search/List.vue

@@ -154,6 +154,7 @@
 import { useResourcesViewDefaults } from '../../composables'
 import {
   AppLoadingSpinner,
+  SearchResult,
   useCapabilityStore,
   useConfigStore,
   useResourcesStore
@@ -166,12 +167,23 @@ import { ContextActions, FileSideBar } from '@ownclouders/web-pkg'
 import { debounce } from 'lodash-es'
 import { useGettext } from 'vue3-gettext'
 import { AppBar } from '@ownclouders/web-pkg'
-import { computed, defineComponent, nextTick, onMounted, Ref, ref, unref, watch } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  PropType,
+  Ref,
+  ref,
+  unref,
+  watch
+} from 'vue'
 import ListInfo from '../FilesList/ListInfo.vue'
 import { Pagination } from '@ownclouders/web-pkg'
 import { useFileActions } from '@ownclouders/web-pkg'
 import { searchLimit } from '../../search/sdk/list'
-import { Resource } from '@ownclouders/web-client'
+import { Resource, SearchResource, call } from '@ownclouders/web-client'
 import FilesViewWrapper from '../FilesViewWrapper.vue'
 import {
   queryItemAsString,
@@ -225,7 +237,7 @@ export default defineComponent({
   },
   props: {
     searchResult: {
-      type: Object,
+      type: Object as PropType<SearchResult>,
       default: function () {
         return { totalResults: null, values: [] }
       }
@@ -287,7 +299,7 @@ export default defineComponent({
     const loadAvailableTagsTask = useTask(function* () {
       const {
         data: { value: tags = [] }
-      } = yield clientService.graphAuthenticated.tags.getTags()
+      } = yield* call(clientService.graphAuthenticated.tags.getTags())
       availableTags.value = [...tags.map((t) => ({ id: t, label: t }))]
     })
 
@@ -296,7 +308,7 @@ export default defineComponent({
     })
 
     // transifex hack b/c dynamically fetched values from backend will otherwise not be automatically translated
-    const lastModifiedTranslations = {
+    const lastModifiedTranslations: Record<string, string> = {
       today: $gettext('today'),
       yesterday: $gettext('yesterday'),
       'this week': $gettext('this week'),
@@ -317,7 +329,7 @@ export default defineComponent({
       })) || []
     )
 
-    const mediaTypeMapping = {
+    const mediaTypeMapping: Record<string, { label: string; icon: string }> = {
       file: { label: $gettext('File'), icon: 'txt' },
       folder: { label: $gettext('Folder'), icon: 'folder' },
       document: { label: $gettext('Document'), icon: 'doc' },
@@ -336,7 +348,7 @@ export default defineComponent({
       ).map((key) => ({ id: key, ...mediaTypeMapping[key] }))
     })
 
-    const getFakeResourceForIcon = (item) => {
+    const getFakeResourceForIcon = (item: { label: string; icon: string }) => {
       return { type: 'file', extension: item.icon, isFolder: item.icon == 'folder' } as Resource
     }
 
@@ -512,7 +524,7 @@ export default defineComponent({
         'Found %{totalResults}, showing the %{itemCount} best matching results',
         {
           itemCount: this.itemCount.toString(),
-          totalResults: this.searchResult.totalResults
+          totalResults: this.searchResult.totalResults.toString()
         }
       )
     }
@@ -525,10 +537,10 @@ export default defineComponent({
         }
 
         this.clearResourceList()
-        this.initResourceList({
+        this.initResourceList<SearchResource>({
           currentFolder: null,
           resources: this.searchResult.values.length
-            ? this.searchResult.values.map((searchResult) => searchResult.data)
+            ? this.searchResult.values.map((searchResult) => searchResult.data as SearchResource)
             : []
         })
         await nextTick()
@@ -540,7 +552,7 @@ export default defineComponent({
     visibilityObserver.disconnect()
   },
   methods: {
-    rowMounted(resource: Resource, component) {
+    rowMounted(resource: Resource, component: ComponentPublicInstance<unknown>) {
       if (!this.displayThumbnails) {
         return
       }

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -97,7 +97,7 @@ import {
   useFileActionsToggleHideShare,
   useResourcesStore
 } from '@ownclouders/web-pkg'
-import { computed, defineComponent, PropType, unref } from 'vue'
+import { ComponentPublicInstance, computed, defineComponent, PropType, unref } from 'vue'
 import { debounce } from 'lodash-es'
 import { ImageDimension } from '@ownclouders/web-pkg'
 import { VisibilityObserver } from '@ownclouders/web-pkg'
@@ -253,7 +253,7 @@ export default defineComponent({
     visibilityObserver.disconnect()
   },
   methods: {
-    rowMounted(resource: IncomingShareResource, component) {
+    rowMounted(resource: IncomingShareResource, component: ComponentPublicInstance<unknown>) {
       const loadPreview = async () => {
         const preview = await this.$previewService.loadPreview(
           {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -242,7 +242,7 @@ export default defineComponent({
        */
       return resourcesStore.areWebDavDetailsShown && unref(resource).webDavPath
     })
-    const formatDateRelative = (date) => {
+    const formatDateRelative = (date: string) => {
       return formatRelativeDateFromJSDate(new Date(date), language.current)
     }
 

packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue

@@ -83,7 +83,7 @@ import {
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
 import diff from 'lodash-es/difference'
-import { Resource } from '@ownclouders/web-client'
+import { call, Resource } from '@ownclouders/web-client'
 
 type TagOption = {
   label: string
@@ -144,7 +144,7 @@ export default defineComponent({
     const loadAvailableTagsTask = useTask(function* () {
       const {
         data: { value: tags = [] }
-      } = yield clientService.graphAuthenticated.tags.getTags()
+      } = yield* call(clientService.graphAuthenticated.tags.getTags())
 
       allTags = tags
       const selectedLabels = new Set(unref(selectedTags).map((o) => o.label))
@@ -241,12 +241,12 @@ export default defineComponent({
       }
     })
 
-    const keydownMethods = (map, vm) => {
+    const keydownMethods = (map: Record<string, (e: Event) => void>) => {
       const objectMapping = {
         ...map
       }
-      objectMapping[KeyCode.Backspace] = async (e) => {
-        if (e.target.value || selectedTags.value.length === 0) {
+      objectMapping[KeyCode.Backspace] = async (e: Event) => {
+        if ((e.target as HTMLInputElement).value || selectedTags.value.length === 0) {
           return
         }
 

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue

@@ -48,7 +48,7 @@
 
 <script lang="ts">
 import { DateTime } from 'luxon'
-import { computed, watch, defineComponent, customRef } from 'vue'
+import { computed, watch, defineComponent, customRef, PropType } from 'vue'
 import { useCapabilityStore } from '@ownclouders/web-pkg'
 import { ShareTypes } from '@ownclouders/web-client'
 import { formatRelativeDateFromDateTime, getLocaleFromLanguage } from '@ownclouders/web-pkg'
@@ -58,9 +58,9 @@ export default defineComponent({
   name: 'DateCurrentpicker',
   props: {
     shareTypes: {
-      type: Array,
+      type: Array as PropType<number[]>,
       required: false,
-      default: () => []
+      default: (): number[] => []
     }
   },
   emits: ['optionChange'],
@@ -107,7 +107,7 @@ export default defineComponent({
     })
     const dateMax = computed(() => (enforced.value ? dateDefault.value : null))
     const dateCurrent = customRef<Date>((track, trigger) => {
-      let date = null
+      let date: Date = null
       return {
         get() {
           track()