refactor: move code parts from files app to web-pkg or web-client

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

@@ -12,7 +12,6 @@
         :is="inputComponent"
         :id="id"
         v-bind="additionalAttributes"
-        v-on="additionalListeners"
         ref="input"
         :aria-invalid="ariaInvalid"
         class="oc-text-input oc-input oc-rounded"
@@ -24,6 +23,7 @@
         :type="type"
         :value="displayValue"
         :disabled="disabled || readOnly"
+        v-on="additionalListeners"
         @change="onChange(($event.target as HTMLInputElement).value)"
         @input="onInput(($event.target as HTMLInputElement).value)"
         @password-challenge-completed="$emit('passwordChallengeCompleted')"

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

@@ -8,9 +8,9 @@
   >
     <input
       v-bind="$attrs"
+      ref="passwordInput"
       v-model="password"
       :type="showPassword ? 'text' : 'password'"
-      ref="passwordInput"
       @input="onPasswordEntered"
     />
     <oc-button

packages/web-app-admin-settings/src/components/Groups/ContextActions.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { useActionsShowDetails } from '../../../../web-pkg/src/composables/actions'
+import { useActionsShowDetails } from 'web-pkg'
 import { computed, defineComponent, PropType, unref } from 'vue'
 import ContextActionMenu from 'web-pkg/src/components/ContextActions/ContextActionMenu.vue'
 import { GroupActionOptions } from 'web-pkg/src/composables/actions'

packages/web-app-admin-settings/src/composables/keyboardActions/useKeyboardTableNavigation.ts

@@ -1,4 +1,4 @@
-import { useScrollTo } from 'web-app-admin-settings/src/composables/scrollTo'
+import { useScrollTo } from 'web-pkg/src/composables/scrollTo'
 import { Ref, unref } from 'vue'
 import { Key, KeyboardActions, ModifierKey } from 'web-pkg/src/composables/keyboardActions'
 import { find, findIndex } from 'lodash-es'
@@ -59,7 +59,7 @@ export const useKeyboardTableNavigation = (
     lastSelectedRowIndex.value = nextResourceIndex
     lastSelectedRowId.value = String(nextResource.id)
 
-    scrollToResource(nextResource.id)
+    scrollToResource(nextResource.id, { topbarElement: 'admin-settings-app-bar' })
   }
 
   const handleShiftUpAction = async () => {
@@ -86,7 +86,7 @@ export const useKeyboardTableNavigation = (
     lastSelectedRowIndex.value = nextResourceIndex
     lastSelectedRowId.value = String(nextResource.id)
     keyActions.selectionCursor.value = unref(keyActions.selectionCursor) - 1
-    scrollToResource(nextResource.id)
+    scrollToResource(nextResource.id, { topbarElement: 'admin-settings-app-bar' })
   }
   const handleShiftDownAction = () => {
     const nextResource = getNextResource(false)
@@ -121,7 +121,7 @@ export const useKeyboardTableNavigation = (
     lastSelectedRowIndex.value = nextResourceIndex
     lastSelectedRowId.value = String(nextResource.id)
     keyActions.selectionCursor.value = unref(keyActions.selectionCursor) + 1
-    scrollToResource(nextResource.id)
+    scrollToResource(nextResource.id, { topbarElement: 'admin-settings-app-bar' })
   }
 
   const handleSelectAllAction = () => {

packages/web-app-admin-settings/tests/unit/components/Groups/ContextActions.spec.ts

@@ -1,19 +1,22 @@
-import {
-  createMockActionComposables,
-  defaultPlugins,
-  defaultStoreMockOptions,
-  mount
-} from 'web-test-helpers'
+import { defaultPlugins, defaultStoreMockOptions, mount } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { Resource } from 'web-client/src/helpers'
 import ContextActions from '../../../../src/components/Groups/ContextActions.vue'
 import {
   useGroupActionsDelete,
   useGroupActionsEdit
 } from 'web-app-admin-settings/src/composables/actions'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Action } from 'web-pkg/src/composables/actions'
 
+function createMockActionComposables(module) {
+  const mockModule: Record<string, any> = {}
+  for (const m of Object.keys(module)) {
+    mockModule[m] = jest.fn(() => ({ actions: ref([]) }))
+  }
+  return mockModule
+}
+
 jest.mock('web-pkg/src/composables/actions/useActionsShowDetails', () =>
   createMockActionComposables(
     jest.requireActual('web-pkg/src/composables/actions/useActionsShowDetails')

packages/web-app-admin-settings/tests/unit/components/Spaces/ContextActions.spec.ts

@@ -1,5 +1,4 @@
 import {
-  createMockActionComposables,
   createStore,
   defaultComponentMocks,
   defaultPlugins,
@@ -17,7 +16,15 @@ import {
   useSpaceActionsEditQuota,
   useSpaceActionsRename
 } from 'web-pkg/src/composables/actions'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+
+function createMockActionComposables(module) {
+  const mockModule: Record<string, any> = {}
+  for (const m of Object.keys(module)) {
+    mockModule[m] = jest.fn(() => ({ actions: ref([]) }))
+  }
+  return mockModule
+}
 
 jest.mock('web-pkg/src/composables/actions/spaces', () =>
   createMockActionComposables(jest.requireActual('web-pkg/src/composables/actions/spaces'))

packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts

@@ -1,5 +1,4 @@
 import {
-  createMockActionComposables,
   createStore,
   defaultComponentMocks,
   defaultPlugins,
@@ -16,9 +15,17 @@ import {
   useSpaceActionsEditQuota,
   useSpaceActionsRename
 } from 'web-pkg/src/composables/actions/spaces'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Action } from 'web-pkg/src/composables/actions'
 
+function createMockActionComposables(module) {
+  const mockModule: Record<string, any> = {}
+  for (const m of Object.keys(module)) {
+    mockModule[m] = jest.fn(() => ({ actions: ref([]) }))
+  }
+  return mockModule
+}
+
 jest.mock('web-pkg/src/composables/actions/spaces', () =>
   createMockActionComposables(jest.requireActual('web-pkg/src/composables/actions/spaces'))
 )

packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts

@@ -3,14 +3,22 @@ import { Graph } from 'web-client'
 import { mockDeep } from 'jest-mock-extended'
 import { ClientService } from 'web-pkg/src'
 import {
-  createMockActionComposables,
   createStore,
   defaultComponentMocks,
   defaultPlugins,
   defaultStoreMockOptions,
   mount
 } from 'web-test-helpers'
 import Spaces from '../../../src/views/Spaces.vue'
+import { ref } from 'vue'
+
+function createMockActionComposables(module) {
+  const mockModule: Record<string, any> = {}
+  for (const m of Object.keys(module)) {
+    mockModule[m] = jest.fn(() => ({ actions: ref([]) }))
+  }
+  return mockModule
+}
 
 jest.mock('web-pkg/src/composables/actions/spaces', () =>
   createMockActionComposables(jest.requireActual('web-pkg/src/composables/actions/spaces'))

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

@@ -12,8 +12,8 @@ import { urlJoin } from 'web-client/src/utils'
 import { UppyResource } from 'web-runtime/src/composables/upload'
 import { UppyService } from 'web-runtime/src/services/uppyService'
 import { ResourceConflict } from './helpers/resource'
-import { locationPublicLink } from './router/public'
-import { locationSpacesGeneric } from './router/spaces'
+import { locationPublicLink } from 'web-pkg/src/router/public'
+import { locationSpacesGeneric } from 'web-pkg/src/router/spaces'
 import { isPersonalSpaceResource, isShareSpaceResource } from 'web-client/src/helpers'
 import { ClientService } from 'web-pkg/types'
 

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

@@ -159,14 +159,14 @@
 <script lang="ts">
 import { mapActions, mapGetters } from 'vuex'
 
-import { useFileActions } from '../../composables/actions/files/useFileActions'
-import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
+import { useFileActions } from 'web-pkg/src/composables/actions/files/useFileActions'
+import { isLocationPublicActive, isLocationSpacesActive } from 'web-pkg/src/router'
+import { useActiveLocation } from 'web-pkg/src/composables/router'
 import {
-  useActiveLocation,
   useFileActionsCreateNewFile,
   useFileActionsCreateNewFolder,
   useFileActionsPaste
-} from '../../composables'
+} from 'web-pkg/src/composables'
 
 import {
   useRequest,

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

@@ -17,7 +17,7 @@
 import { mapActions, mapMutations } from 'vuex'
 import { defineComponent } from 'vue'
 import { useClientService, useLoadingService } from 'web-pkg/src/composables'
-import { useCreateSpace } from 'web-app-files/src/composables'
+import { useCreateSpace } from 'web-pkg/src/composables'
 import { useSpaceHelpers } from 'web-pkg/src/composables/spaces'
 
 export default defineComponent({

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

@@ -42,15 +42,16 @@
 </template>
 
 <script lang="ts">
+import { isLocationSharesActive } from 'web-pkg/src/router'
 import {
-  isLocationSharesActive,
   locationSharesViaLink,
   locationSharesWithMe,
   locationSharesWithOthers
-} from '../../router/shares'
+} from 'web-pkg/src/router/shares'
+
 import { computed, defineComponent, unref } from 'vue'
 import { useRouter } from 'web-pkg/src/composables'
-import { useActiveLocation } from '../../composables'
+import { useActiveLocation } from 'web-pkg/src/composables'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({

packages/web-app-files/src/components/FilesList/NotFoundMessage.vue

@@ -50,7 +50,8 @@ import {
   createLocationSpaces,
   isLocationPublicActive,
   isLocationSpacesActive
-} from '../../router'
+} from 'web-pkg/src/router'
+
 import { useRouter } from 'web-pkg/src/composables'
 import { defineComponent, PropType } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'

packages/web-app-files/src/components/FilesList/ResourceDetails.vue

@@ -15,7 +15,7 @@ import { Resource, SpaceResource } from 'web-client/src/helpers'
 import FileActions from '../SideBar/Actions/FileActions.vue'
 import FileDetails from '../SideBar/Details/FileDetails.vue'
 import FileInfo from '../SideBar/FileInfo.vue'
-import { useFileActions } from 'web-app-files/src/composables/actions/files/useFileActions'
+import { useFileActions } from 'web-pkg/src/composables/actions/files/useFileActions'
 import { useRouteQuery } from 'web-pkg'
 
 export default defineComponent({

packages/web-app-files/src/components/FilesList/ResourceTiles.vue

@@ -103,13 +103,13 @@ import { useStore, SortDir, SortField, ViewModeConstants } from 'web-pkg/src/com
 import { ImageDimension } from 'web-pkg/src/constants'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { displayPositionedDropdown } from 'web-pkg/src/helpers/contextMenuDropdown'
-import { createLocationSpaces } from 'web-app-files/src/router'
+import { createLocationSpaces } from 'web-pkg/src/router'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
-import { useResourceRouteResolver } from '../../composables/filesList'
+import { useResourceRouteResolver } from 'web-pkg/src/composables/filesList'
 import { eventBus } from 'web-pkg'
 
 export default defineComponent({

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

@@ -112,16 +112,16 @@ import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageType, ImageDimension } from 'web-pkg/src/constants'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import ResourceTable from '../FilesList/ResourceTable.vue'
-import ContextActions from '../FilesList/ContextActions.vue'
+import ResourceTable from 'web-pkg/src/components/FilesList/ResourceTable.vue'
+import ContextActions from 'web-pkg/src/components/FilesList/ContextActions.vue'
 import { debounce } from 'lodash-es'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
 import { useGettext } from 'vue3-gettext'
-import AppBar from '../AppBar/AppBar.vue'
+import AppBar from 'web-pkg/src/components/AppBar/AppBar.vue'
 import { computed, defineComponent, nextTick, onMounted, ref, unref, VNodeRef, watch } from 'vue'
 import ListInfo from '../FilesList/ListInfo.vue'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
-import { useFileActions } from '../../composables/actions/files/useFileActions'
+import { useFileActions } from 'web-pkg/src/composables/actions/files/useFileActions'
 import { searchLimit } from '../../search/sdk/list'
 import { Resource } from 'web-client'
 import FilesViewWrapper from '../FilesViewWrapper.vue'
@@ -132,16 +132,17 @@ import {
   useClientService,
   useFileListHeaderPosition,
   useGetMatchingSpace,
+  useCapabilityFilesFullTextSearch,
   useRoute,
   useRouteQuery,
   useRouter,
   useStore
 } from 'web-pkg/src/composables'
 import { onBeforeRouteLeave } from 'vue-router'
 import { useTask } from 'vue-concurrency'
-import { eventBus, useCapabilityFilesFullTextSearch } from 'web-pkg'
+import { eventBus } from 'web-pkg'
 import ItemFilter from 'web-pkg/src/components/ItemFilter.vue'
-import { isLocationCommonActive } from 'web-app-files/src/router'
+import { isLocationCommonActive } from 'web-pkg/src/router'
 import ItemFilterToggle from 'web-pkg/src/components/ItemFilterToggle.vue'
 import { useKeyboardActions } from 'web-pkg/src/composables/keyboardActions'
 import {
@@ -362,7 +363,7 @@ export default defineComponent({
             : []
         })
         await nextTick()
-        this.scrollToResourceFromRoute(this.paginatedResources)
+        this.scrollToResourceFromRoute(this.paginatedResources, 'files-app-bar')
       }
     }
   },

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

@@ -21,14 +21,14 @@
 </template>
 
 <script lang="ts">
-import { useFileActions } from '../../composables/actions/files/useFileActions'
+import { useFileActions } from 'web-pkg/src/composables/actions/files/useFileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension } from 'web-pkg/src/constants'
-import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
+import { isResourceTxtFileAlmostEmpty } from 'web-client/src/helpers'
 import { debounce } from 'lodash-es'
 import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import { mapGetters } from 'vuex'
-import { createLocationShares, createLocationSpaces } from '../../router'
+import { createLocationShares, createLocationSpaces } from 'web-pkg/src/router'
 import { dirname } from 'path'
 import { useCapabilityShareJailEnabled, useGetMatchingSpace } from 'web-pkg/src/composables'
 import {

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

@@ -92,23 +92,23 @@
 </template>
 
 <script lang="ts">
-import ResourceTable from '../FilesList/ResourceTable.vue'
+import ResourceTable from 'web-pkg/src/components/FilesList/ResourceTable.vue'
 import { defineComponent, PropType } from 'vue'
 import { debounce } from 'lodash-es'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { mapActions } from 'vuex'
-import { useFileActions } from '../../composables/actions/files/useFileActions'
+import { useFileActions } from 'web-pkg/src/composables/actions/files/useFileActions'
 import { SortDir, useStore, useGetMatchingSpace } from 'web-pkg/src/composables'
-import { createLocationSpaces } from '../../router'
+import { createLocationSpaces } from 'web-pkg/src/router'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import { ShareStatus } from 'web-client/src/helpers/share'
-import ContextActions from '../../components/FilesList/ContextActions.vue'
+import ContextActions from 'web-pkg/src/components/FilesList/ContextActions.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useSelectedResources } from '../../composables/selection'
+import { useSelectedResources } from 'web-pkg/src/composables/selection'
 import { RouteLocationNamedRaw } from 'vue-router'
 import { Resource } from 'web-client/src/helpers'
-import { CreateTargetRouteOptions } from '../../helpers/folderLink'
+import { CreateTargetRouteOptions } from 'web-pkg/src/helpers/folderLink'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
 const visibilityObserver = new VisibilityObserver()