[full-ci] TypeScript almost everything (#8289)

* Rename .js files to .ts

This renames most of the actively used .js files to .ts.
Notable exceptions: acceptance tests, docs, a few legacy (config) files for design system or web-app-skeleton

* Fix imports

* Fix global variables usage

* fixup! Fix imports

* Fix exports

* Fix non-isolated modules

* Fix types in clientRegistration

* Fix breadcrumbs unit test

* Fix jest config

* Fix remaining type issues

* Fix textUtils.naturalSortCompare

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

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { shareType } from '../../utils/shareType.js'
+import { shareType } from '../../utils/shareType'
 import OcAvatar from '../OcAvatar/OcAvatar.vue'
 import OcAvatarCount from '../OcAvatarCount/OcAvatarCount.vue'
 import OcAvatarLink from '../OcAvatarLink/OcAvatarLink.vue'

packages/design-system/src/composables/useIsVisible/index.spec.js → packages/design-system/src/composables/useIsVisible/index.spec.ts

@@ -17,7 +17,7 @@ const mockIntersectionObserver = () => {
     return {
       mock,
       callback: (args, fastForward = 0) => {
-        window.IntersectionObserver.mock.calls[0][0](args)
+        ;(window.IntersectionObserver as any).mock.calls[0][0](args)
         jest.advanceTimersByTime(fastForward)
       }
     }

packages/design-system/src/index.ts

@@ -1,5 +1,5 @@
-import { getSizeClass } from './utils/sizeClasses.js'
-import './utils/webFontLoader.js'
+import { getSizeClass } from './utils/sizeClasses'
+import './utils/webFontLoader'
 
 import * as components from './components'
 import * as directives from './directives'

packages/design-system/src/utils/uniqueId.js → packages/design-system/src/utils/uniqueId.ts

@@ -1,6 +1,6 @@
 let num = 0
 
-export default function uniqueId(prefix) {
+export default function uniqueId(prefix?) {
   prefix = prefix || ''
   num += 1
   return prefix + num

packages/web-app-admin-settings/src/index.js → packages/web-app-admin-settings/src/index.ts

@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import Users from './views/Users.vue'
 import Groups from './views/Groups.vue'
 import Spaces from './views/Spaces.vue'
@@ -15,7 +15,7 @@ const appInfo = {
 }
 
 // FIXME: a better way to access this is needed
-const permissionManager = () => window.__$permissionManager
+const permissionManager = () => (window as any).__$permissionManager
 
 const routes = [
   {

packages/web-app-draw-io/src/index.js → packages/web-app-draw-io/src/index.ts

@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import App from './App.vue'
 
 const routes = [

packages/web-app-external/src/index.js → packages/web-app-external/src/index.ts

@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import App from './App.vue'
 import store from './store'
 

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

@@ -75,7 +75,7 @@ const panelGenerators: (({
     component: FileDetails,
     default: !isLocationTrashActive(router, 'files-trash-generic'),
     get enabled() {
-      return (
+      return !!(
         !isLocationTrashActive(router, 'files-trash-generic') &&
         !multipleSelection &&
         !rootFolder &&
@@ -119,7 +119,7 @@ const panelGenerators: (({
     component: FileActions,
     default: isLocationTrashActive(router, 'files-trash-generic'),
     get enabled() {
-      return !multipleSelection && !rootFolder && highlightedFile
+      return !!(!multipleSelection && !rootFolder && highlightedFile)
     }
   }),
   ({ multipleSelection, highlightedFile, user }) => ({
@@ -134,7 +134,7 @@ const panelGenerators: (({
       if (highlightedFile?.type !== 'space') {
         return false
       }
-      return [
+      return !![
         ...highlightedFile.spaceRoles[spaceRoleManager.name],
         ...highlightedFile.spaceRoles[spaceRoleEditor.name]
       ].find((role) => role.id === user.uuid)

packages/web-app-files/src/helpers/textUtils.js → packages/web-app-files/src/helpers/textUtils.ts

@@ -3,7 +3,7 @@ function _chunkify(t) {
   const tz = []
   let x = 0
   let y = -1
-  let n = 0
+  let n: number | boolean = 0
   let c
 
   while (x < t.length) {

packages/web-app-files/src/mixins/actions/downloadArchive.js → packages/web-app-files/src/mixins/actions/downloadArchive.ts

@@ -8,7 +8,7 @@ import isFilesAppActive from './helpers/isFilesAppActive'
 import path from 'path'
 import first from 'lodash-es/first'
 import { archiverService } from '../../services'
-import { isPublicSpaceResource } from 'web-client/src/helpers'
+import { isPublicSpaceResource, Resource } from 'web-client/src/helpers'
 
 export default {
   mixins: [isFilesAppActive],
@@ -69,7 +69,7 @@ export default {
             fileIds: resources.map((resource) => resource.fileId)
           }
         : {
-            dir: path.dirname(first(resources).path) || '/',
+            dir: path.dirname(first<Resource>(resources).path) || '/',
             files: resources.map((resource) => resource.name)
           }
       await archiverService

packages/web-app-files/src/mixins/spaces/actions/uploadImage.js → packages/web-app-files/src/mixins/spaces/actions/uploadImage.ts

@@ -1,4 +1,5 @@
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
+import { Drive } from 'web-client/src/generated'
 import { clientService } from 'web-pkg/src/services'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { thumbnailService } from '../../../services'
@@ -90,7 +91,7 @@ export default {
                     id: image['OC-FileId']
                   }
                 ]
-              },
+              } as Drive,
               {}
             )
             .then(({ data }) => {

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

@@ -1,25 +1,26 @@
-import Vue, { ComponentOptions } from 'vue'
+import { defineComponent } from 'vue'
 
 /**
  * we need to inject the vue files into the route builders,
  * this is because we also import the provided helpers from other js|ts files
  * like mixins, rollup seems to have a problem to import files which contain vue file imports
  * into js files which then again get imported by other vue files...
  */
+
+type Component = ReturnType<typeof defineComponent>
+
 export interface RouteComponents {
-  App: ComponentOptions<typeof Vue>
-  Favorites: ComponentOptions<typeof Vue>
-  FilesDrop: ComponentOptions<typeof Vue>
-  PrivateLink: ComponentOptions<typeof Vue>
-  SearchResults: ComponentOptions<typeof Vue>
-  PublicLink: ComponentOptions<typeof Vue>
+  App: Component
+  Favorites: Component
+  FilesDrop: Component
+  SearchResults: Component
   Shares: {
-    SharedWithMe: ComponentOptions<typeof Vue>
-    SharedWithOthers: ComponentOptions<typeof Vue>
-    SharedViaLink: ComponentOptions<typeof Vue>
+    SharedWithMe: Component
+    SharedWithOthers: Component
+    SharedViaLink: Component
   }
   Spaces: {
-    DriveResolver: ComponentOptions<typeof Vue>
-    Projects: ComponentOptions<typeof Vue>
+    DriveResolver: Component
+    Projects: Component
   }
 }

packages/web-app-files/tests/__fixtures__/fileActions.js → packages/web-app-files/tests/__fixtures__/fileActions.ts

@@ -84,7 +84,7 @@ export const apps = {
   meta
 }
 
-const fileActions = {
+export const fileActions = {
   download: {
     name: 'download-file',
     icon: 'file-download',
@@ -165,9 +165,7 @@ const fileActions = {
   }
 }
 
-exports.fileActions = fileActions
-
-exports.getActions = function (actions = []) {
+export const getActions = function (actions = []) {
   const defaultActions = ['download', 'text-editor', 'draw-io', 'preview', 'navigate']
 
   const res = []
@@ -190,4 +188,4 @@ exports.getActions = function (actions = []) {
   return res
 }
 
-exports.filesPersonalRoute = { name: 'files-personal' }
+export const filesPersonalRoute = { name: 'files-personal' }

packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts

@@ -1,5 +1,5 @@
 import FileActions from 'web-app-files/src/components/SideBar/Actions/FileActions.vue'
-import { getActions, fileActions } from 'web-app-files/tests/__fixtures__/fileActions.js'
+import { getActions, fileActions } from 'web-app-files/tests/__fixtures__/fileActions'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { mock } from 'jest-mock-extended'
 import {

packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.js → packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts

@@ -1,8 +1,12 @@
+import { RouteLocation } from 'web-test-helpers/src'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../../src/helpers/breadcrumbs'
 
 describe('builds an array of breadcrumbitems', () => {
   it('from a path', () => {
-    const breadCrumbs = breadcrumbsFromPath({ path: '/files/spaces/personal/home/test' }, '/test')
+    const breadCrumbs = breadcrumbsFromPath(
+      { path: '/files/spaces/personal/home/test' } as RouteLocation,
+      '/test'
+    )
     expect(breadCrumbs).toEqual([
       {
         allowContextActions: true,
@@ -14,15 +18,18 @@ describe('builds an array of breadcrumbitems', () => {
 
   it('from an array of breadcrumbitems', () => {
     const initialBreadCrumbs = [{ text: 'Foo' }, { text: 'Bar' }]
-    const breadCrumbsFromPath = breadcrumbsFromPath({ path: '/app/foo/bar?all=500' }, '/bar')
-    const result = concatBreadcrumbs(...initialBreadCrumbs, breadCrumbsFromPath)
+    const breadCrumbsFromPath = breadcrumbsFromPath(
+      { path: '/app/foo/bar?all=500' } as RouteLocation,
+      '/bar'
+    )
+    const result = concatBreadcrumbs(...initialBreadCrumbs, ...breadCrumbsFromPath)
     expect(result[0]).toMatchObject({ text: 'Foo' })
     expect(result[1]).toMatchObject({ text: 'Bar' })
     expect(JSON.stringify(result[2])).toEqual(
       JSON.stringify({
-        allowContextActions: undefined,
-        onClick: () => jest.fn(() => {}),
-        text: undefined
+        allowContextActions: true,
+        text: 'bar',
+        onClick: () => undefined
       })
     )
   })

packages/web-app-files/tests/unit/helpers/permissions.spec.js → packages/web-app-files/tests/unit/helpers/permissions.spec.ts

@@ -1,4 +1,4 @@
-import { canBeMoved } from 'web-app-files/src/helpers/permissions.js'
+import { canBeMoved } from 'web-app-files/src/helpers/permissions'
 
 describe('permissions helper', () => {
   describe('canBeMoved function', () => {

packages/web-app-files/tests/unit/helpers/statusIndicator.spec.js → packages/web-app-files/tests/unit/helpers/statusIndicator.spec.ts

@@ -1,3 +1,5 @@
+import { describe, it } from '@jest/globals'
+
 describe('statusIndicator', () => {
   describe('getIndicators', () => {
     it.todo(

packages/web-app-files/tests/unit/helpers/textUtils.spec.ts

@@ -0,0 +1,49 @@
+import { describe, it } from '@jest/globals'
+import { textUtils } from '../../../src/helpers/textUtils'
+
+describe('textUtils', () => {
+  // textUtils compares two strings to provide a natural sort
+  describe('naturalSortCompare', () => {
+    it('sorts a list naturally', () => {
+      const actual = ['Brian Murphy', 'Alice Hansen', 'grp1', 'grp11']
+
+      actual.sort(textUtils.naturalSortCompare)
+
+      expect(actual.join(',')).toBe('Alice Hansen,Brian Murphy,grp1,grp11')
+    })
+
+    /**
+     * variations
+     *
+     [
+       { firstString: 'b', secondString: 'a' },
+       { firstString: 'bb', secondString: 'ba' },
+       { firstString: '1', secondString: '0' }
+     ]
+     */
+    it.todo('should return negative integer if "b" comes before "a"')
+
+    /**
+     * variations
+     *
+     [
+       { firstString: 'a', secondString: 'b' },
+       { firstString: 'aa', secondString: 'ab' },
+       { firstString: '0', secondString: '1' }
+     ]
+     */
+    it.todo('should return positive integer if "a" comes before "b"')
+
+    /**
+     * variations
+     *
+     [
+       { firstString: '0', secondString: '0' },
+       { firstString: 'a', secondString: 'a' },
+       { firstString: 'aa', secondString: 'aa' },
+       { firstString: 'ab', secondString: 'ab' }
+     ]
+     */
+    it.todo('should return 0 if the provided strings are identical')
+  })
+})

packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.ts

@@ -1,4 +1,4 @@
-import clearSelection from 'web-app-files/src/mixins/actions/clearSelection.js'
+import clearSelection from 'web-app-files/src/mixins/actions/clearSelection'
 import { createStore, defaultPlugins, mount, defaultStoreMockOptions } from 'web-test-helpers'
 
 const Component = {

packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts

@@ -1,5 +1,5 @@
 import { mock } from 'jest-mock-extended'
-import Delete from 'web-app-files/src/mixins/actions/delete.js'
+import Delete from 'web-app-files/src/mixins/actions/delete'
 
 import {
   createStore,

packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts

@@ -1,4 +1,4 @@
-import EmptyTrashBin from 'web-app-files/src/mixins/actions/emptyTrashBin.js'
+import EmptyTrashBin from 'web-app-files/src/mixins/actions/emptyTrashBin'
 import { createLocationTrash, createLocationSpaces } from '../../../../src/router'
 import { mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'

packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts

@@ -1,4 +1,4 @@
-import uploadImage from 'web-app-files/src/mixins/spaces/actions/uploadImage.js'
+import uploadImage from 'web-app-files/src/mixins/spaces/actions/uploadImage'
 import { thumbnailService } from '../../../../src/services'
 import { mock, mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'

packages/web-app-pdf-viewer/src/index.js → packages/web-app-pdf-viewer/src/index.ts

@@ -1,4 +1,4 @@
-import translations from '../l10n/translations'
+import translations from '../l10n/translations.json'
 import App from './App.vue'
 
 // just a dummy function to trick gettext tools

packages/web-app-preview/src/index.js → packages/web-app-preview/src/index.ts

@@ -1,5 +1,6 @@
-import translations from '../l10n/translations'
-import App, { mimeTypes, appId } from './App.vue'
+import translations from '../l10n/translations.json'
+import * as app from './App.vue'
+const { default: App, mimeTypes, appId } = app as any
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {