Fix keyboard nav reactivity broken after delete on item in admin settins

changelog/unreleased/bugfix-admin-settings-keyboard-navigation

@@ -0,0 +1,7 @@
+Bugfix: Admin settings keyboard navigation
+
+We've fixed a bug where keyboard navigation stopped working after deleting a resource in the admin settings app.
+We also fixed a bug where initial keyboard navigation didn't work, when no resource was selected.
+
+https://github.com/owncloud/web/pull/10417
+https://github.com/owncloud/web/issues/10186

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

@@ -17,7 +17,8 @@
 import { useGettext } from 'vue3-gettext'
 import { computed, defineComponent, ref, PropType, unref, watch } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
-import { MaybeRef, Modal, useClientService, useEventBus, useMessages } from '@ownclouders/web-pkg'
+import { MaybeRef, Modal, useClientService, useMessages } from '@ownclouders/web-pkg'
+import { useGroupSettingsStore } from '../../composables'
 
 export default defineComponent({
   name: 'CreateGroupModal',
@@ -28,8 +29,8 @@ export default defineComponent({
   setup(props, { emit, expose }) {
     const { $gettext } = useGettext()
     const { showMessage, showErrorMessage } = useMessages()
-    const eventBus = useEventBus()
     const clientService = useClientService()
+    const groupSettingsStore = useGroupSettingsStore()
 
     const group: MaybeRef<Group> = ref({ displayName: '' })
     const formData = ref({
@@ -62,7 +63,7 @@ export default defineComponent({
         const client = clientService.graphAuthenticated
         const response = await client.groups.createGroup(unref(group))
         showMessage({ title: $gettext('Group was created successfully') })
-        eventBus.publish('app.admin-settings.groups.add', { ...response?.data, members: [] })
+        groupSettingsStore.upsertGroup(response?.data)
       } catch (error) {
         console.error(error)
         showErrorMessage({

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

@@ -29,7 +29,7 @@
           :model-value="allGroupsSelected"
           hide-label
           @update:model-value="
-            allGroupsSelected ? $emit('unSelectAllGroups') : $emit('selectGroups', paginatedItems)
+            allGroupsSelected ? unselectAllGroups() : selectGroups(paginatedItems)
           "
         />
       </template>
@@ -41,7 +41,7 @@
           :option="rowData.item"
           :label="getSelectGroupLabel(rowData.item)"
           hide-label
-          @update:model-value="toggleGroup(rowData.item)"
+          @update:model-value="selectGroup(rowData.item)"
           @click.stop="rowClicked([rowData.item, $event])"
         />
       </template>
@@ -106,13 +106,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, unref, computed, watch } from 'vue'
+import { defineComponent, ref, unref, computed, watch } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 import {
   displayPositionedDropdown,
   eventBus,
   SortDir,
+  useKeyboardActions,
   useRoute,
   useRouter
 } from '@ownclouders/web-pkg'
@@ -124,28 +125,18 @@ import { defaultFuseOptions } from '@ownclouders/web-pkg'
 import { useFileListHeaderPosition, usePagination } from '@ownclouders/web-pkg'
 import { Pagination } from '@ownclouders/web-pkg'
 import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults'
-import { useKeyboardActions } from '@ownclouders/web-pkg'
 import {
   useKeyboardTableMouseActions,
   useKeyboardTableNavigation
-} from 'web-app-admin-settings/src/composables/keyboardActions'
+} from '../../composables/keyboardActions'
+import { useGroupSettingsStore } from '../../composables'
+import { storeToRefs } from 'pinia'
 import { findIndex } from 'lodash-es'
 
 export default defineComponent({
   name: 'GroupsList',
   components: { ContextMenuQuickAction, Pagination },
-  props: {
-    groups: {
-      type: Array as PropType<Group[]>,
-      required: true
-    },
-    selectedGroups: {
-      type: Array as PropType<Group[]>,
-      required: true
-    }
-  },
-  emits: ['selectGroups', 'unSelectAllGroups', 'toggleSelectGroup'],
-  setup(props, { emit }) {
+  setup(props) {
     const { $gettext } = useGettext()
     const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
     const contextMenuButtonRef = ref(undefined)
@@ -159,12 +150,33 @@ export default defineComponent({
     const lastSelectedGroupIndex = ref(0)
     const lastSelectedGroupId = ref(null)
 
+    const groupSettingsStore = useGroupSettingsStore()
+    const { groups, selectedGroups } = storeToRefs(groupSettingsStore)
+
     const isGroupSelected = (group) => {
-      return props.selectedGroups.some((s) => s.id === group.id)
+      return unref(selectedGroups).some((s) => s.id === group.id)
     }
-    const selectGroup = (group) => {
-      emit('unSelectAllGroups')
-      emit('toggleSelectGroup', group)
+    const selectGroup = (selectedGroup: Group) => {
+      lastSelectedGroupIndex.value = findIndex(unref(groups), (g) => g.id === selectedGroup.id)
+      lastSelectedGroupId.value = selectedGroup.id
+      keyActions.resetSelectionCursor()
+
+      const isGroupSelected = unref(selectedGroups).find((group) => group.id === selectedGroup.id)
+      if (!isGroupSelected) {
+        return groupSettingsStore.addSelectedGroup(selectedGroup)
+      }
+
+      groupSettingsStore.setSelectedGroups(
+        unref(selectedGroups).filter((group) => group.id !== selectedGroup.id)
+      )
+    }
+
+    const unselectAllGroups = () => {
+      groupSettingsStore.setSelectedGroups([])
+    }
+
+    const selectGroups = (groups: Group[]) => {
+      groupSettingsStore.setSelectedGroups(groups)
     }
 
     const showDetails = (group) => {
@@ -195,7 +207,9 @@ export default defineComponent({
       if (isCheckboxClicked) {
         return
       }
-      toggleGroup(resource, true)
+
+      unselectAllGroups()
+      selectGroup(resource)
     }
     const showContextMenuOnBtnClick = (data, group) => {
       const { dropdown, event } = data
@@ -246,7 +260,7 @@ export default defineComponent({
 
     const items = computed(() => {
       return orderBy(
-        filter(props.groups, unref(filterTerm)),
+        filter(unref(groups), unref(filterTerm)),
         unref(sortBy),
         unref(sortDir) === SortDir.Desc
       )
@@ -262,27 +276,20 @@ export default defineComponent({
     useKeyboardTableNavigation(
       keyActions,
       paginatedItems,
-      props.selectedGroups,
+      selectedGroups,
       lastSelectedGroupIndex,
       lastSelectedGroupId
     )
     useKeyboardTableMouseActions(
       keyActions,
       paginatedItems,
-      props.selectedGroups,
+      selectedGroups,
       lastSelectedGroupIndex,
       lastSelectedGroupId
     )
 
-    const toggleGroup = (group, deselect = false) => {
-      lastSelectedGroupIndex.value = findIndex(props.groups, (u) => u.id === group.id)
-      lastSelectedGroupId.value = group.id
-      keyActions.resetSelectionCursor()
-      emit('toggleSelectGroup', group, deselect)
-    }
-
     watch(currentPage, () => {
-      emit('unSelectAllGroups')
+      unselectAllGroups()
     })
 
     watch(filterTerm, async () => {
@@ -303,7 +310,6 @@ export default defineComponent({
       isGroupSelected,
       showContextMenuOnBtnClick,
       showContextMenuOnRightClick,
-      toggleGroup,
       fileListHeaderY,
       contextMenuButtonRef,
       showEditPanel,
@@ -317,7 +323,12 @@ export default defineComponent({
       totalPages,
       filter,
       orderBy,
-      markInstance
+      markInstance,
+      selectedGroups,
+      unselectAllGroups,
+      selectGroups,
+      selectGroup,
+      groups
     }
   },
   computed: {

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

@@ -17,17 +17,19 @@
         :compare-object="editGroup"
         :confirm-button-disabled="invalidFormData"
         @revert="revertChanges"
-        @confirm="$emit('confirm', editGroup)"
+        @confirm="onEditGroup(editGroup)"
       ></compare-save-dialog>
     </form>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
-import { CompareSaveDialog } from '@ownclouders/web-pkg'
+import { CompareSaveDialog, eventBus, useMessages } from '@ownclouders/web-pkg'
 import { MaybeRef, useClientService } from '@ownclouders/web-pkg'
 import GroupInfoBox from './GroupInfoBox.vue'
+import { useGroupSettingsStore } from '../../../composables'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'EditPanel',
@@ -45,6 +47,9 @@ export default defineComponent({
   emits: ['confirm'],
   setup() {
     const clientService = useClientService()
+    const { showErrorMessage } = useMessages()
+    const groupSettingsStore = useGroupSettingsStore()
+    const { $gettext } = useGettext()
 
     const editGroup: MaybeRef<Group> = ref({})
     const formData = ref({
@@ -54,10 +59,30 @@ export default defineComponent({
       }
     })
 
+    const onEditGroup = async (editGroup: Group) => {
+      try {
+        const client = clientService.graphAuthenticated
+        await client.groups.editGroup(editGroup.id, editGroup)
+        const { data: updatedGroup } = await client.groups.getGroup(editGroup.id)
+        groupSettingsStore.upsertGroup(updatedGroup)
+
+        eventBus.publish('sidebar.entity.saved')
+
+        return updatedGroup
+      } catch (error) {
+        console.error(error)
+        showErrorMessage({
+          title: $gettext('Failed to edit group'),
+          errors: [error]
+        })
+      }
+    }
+
     return {
       clientService,
       editGroup,
-      formData
+      formData,
+      onEditGroup
     }
   },
   computed: {
@@ -126,14 +151,17 @@ export default defineComponent({
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }
+
   .edit-compare-save-dialog {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
+
   .group-info {
     align-items: center;
     flex-direction: column;
   }
+
   .group-info-display-name {
     font-size: 1.5rem;
   }