Refactor old code

changelog/unreleased/enhancement-enable-rename-groups

@@ -0,0 +1,4 @@
+Enhancement: Enable rename groups
+
+https://github.com/owncloud/web/pull/8715
+https://github.com/owncloud/web/issues/8714

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

@@ -9,7 +9,7 @@ import { useActionsShowDetails } from '../../../../web-pkg/src/composables/actio
 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'
-import { useGroupActionsDelete } from '../../composables/actions/groups/useGroupActionsDelete'
+import { useGroupActionsEdit, useGroupActionsDelete } from '../../composables/actions/groups'
 import { useStore } from 'web-pkg/src/composables'
 
 export default defineComponent({
@@ -25,9 +25,12 @@ export default defineComponent({
     const store = useStore()
     const { actions: showDetailsActions } = useActionsShowDetails()
     const { actions: deleteActions } = useGroupActionsDelete({ store })
+    const { actions: editActions } = useGroupActionsEdit()
 
     const menuItemsPrimaryActions = computed(() =>
-      [...unref(deleteActions)].filter((item) => item.isEnabled(props.actionOptions))
+      [...unref(editActions), ...unref(deleteActions)].filter((item) =>
+        item.isEnabled(props.actionOptions)
+      )
     )
 
     const menuItemsSidebar = computed(() =>

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

@@ -27,19 +27,17 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { useClientService } from 'web-pkg'
 
 export default defineComponent({
   name: 'CreateGroupModal',
-  props: {
-    existingGroups: {
-      type: Array,
-      required: false,
-      default: () => {
-        return []
-      }
+  emits: ['cancel', 'confirm'],
+  setup() {
+    const clientService = useClientService()
+    return {
+      clientService
     }
   },
-  emits: ['cancel', 'confirm'],
   data: function () {
     return {
       formData: {
@@ -61,25 +59,25 @@ export default defineComponent({
     }
   },
   methods: {
-    validateDisplayName() {
+    async validateDisplayName() {
       this.formData.displayName.valid = false
 
       if (this.group.displayName.trim() === '') {
         this.formData.displayName.errorMessage = this.$gettext('Group name cannot be empty')
         return false
       }
 
-      if (
-        this.existingGroups.find(
-          (existingGroup) => existingGroup.displayName === this.group.displayName
-        )
-      ) {
+      try {
+        const client = this.clientService.graphAuthenticated
+        await client.groups.getGroup(this.group.displayName)
         this.formData.displayName.errorMessage = this.$gettext(
           'Group "%{groupName}" already exists',
-          { groupName: this.group.displayName }
+          {
+            groupName: this.group.displayName
+          }
         )
         return false
-      }
+      } catch (e) {}
 
       this.formData.displayName.errorMessage = ''
       this.formData.displayName.valid = true

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

@@ -58,6 +58,14 @@
         >
           <oc-icon name="information" fill-type="line" />
         </oc-button>
+        <oc-button
+          v-oc-tooltip="$gettext('Edit')"
+          appearance="raw"
+          class="oc-mr-xs quick-action-button oc-p-xs groups-table-btn-edit"
+          @click="showEditPanel(item)"
+        >
+          <oc-icon name="pencil" fill-type="line" />
+        </oc-button>
         <context-menu-quick-action
           ref="contextMenuButtonRef"
           :item="item"
@@ -153,13 +161,21 @@ export default defineComponent({
       displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButtonRef))
     }
 
+    const showEditPanel = (group) => {
+      if (!isGroupSelected(group)) {
+        selectGroup(group)
+      }
+      eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel')
+    }
+
     return {
       showDetails,
       rowClicked,
       isGroupSelected,
       showContextMenuOnBtnClick,
       showContextMenuOnRightClick,
-      contextMenuButtonRef
+      contextMenuButtonRef,
+      showEditPanel
     }
   },
   data() {

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

@@ -9,15 +9,7 @@
       <p>{{ multipleGroupsSelectedText }}</p>
     </div>
     <div v-if="group">
-      <div class="oc-flex group-info oc-mb-l">
-        <avatar-image
-          class="oc-mb-m"
-          :width="80"
-          :userid="group.id"
-          :user-name="group.displayName"
-        />
-        <span class="oc-text-muted group-info-display-name" v-text="group.displayName"></span>
-      </div>
+      <GroupInfoBox :group="group" />
       <table
         class="details-table"
         :aria-label="$gettext('Overview of the information about the selected group')"
@@ -32,9 +24,11 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import GroupInfoBox from './GroupInfoBox.vue'
 
 export default defineComponent({
   name: 'DetailsPanel',
+  components: { GroupInfoBox },
   props: {
     groups: {
       type: Array,

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

@@ -1,9 +1,6 @@
 <template>
   <div id="group-edit-panel" class="oc-mt-xl">
-    <div class="oc-flex group-info oc-mb-l">
-      <avatar-image class="oc-mb-m" :width="80" :userid="group.id" :user-name="group.displayName" />
-      <span class="oc-text-muted group-info-display-name" v-text="group.displayName"></span>
-    </div>
+    <GroupInfoBox :group="group" />
     <form id="group-edit-form" class="oc-background-highlight oc-p-m" autocomplete="off">
       <oc-text-input
         v-model="editGroup.displayName"
@@ -25,22 +22,32 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { Group } from 'web-client/src/generated'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
+import { useClientService } from 'web-pkg'
+import GroupInfoBox from './GroupInfoBox.vue'
 
 export default defineComponent({
   name: 'EditPanel',
   components: {
+    GroupInfoBox,
     CompareSaveDialog
   },
   props: {
-    groups: {
-      type: Array,
-      required: true
+    group: {
+      type: Object as PropType<Group>,
+      required: true,
+      default: null
     }
   },
   emits: ['confirm'],
+  setup() {
+    const clientService = useClientService()
+    return {
+      clientService
+    }
+  },
   data() {
     return {
       editGroup: {} as Group,
@@ -53,10 +60,8 @@ export default defineComponent({
     }
   },
   computed: {
-    group() {
-      return this.groups.length === 1 ? this.groups[0] : null
-    },
     invalidFormData() {
+      console.log(this.formData)
       return Object.values(this.formData)
         .map((v: any) => !!v.valid)
         .includes(false)
@@ -72,14 +77,28 @@ export default defineComponent({
     }
   },
   methods: {
-    validateDisplayName() {
+    async validateDisplayName() {
       this.formData.displayName.valid = false
 
       if (this.editGroup.displayName.trim() === '') {
         this.formData.displayName.errorMessage = this.$gettext('Name cannot be empty')
         return false
       }
 
+      if (this.group.displayName !== this.editGroup.displayName) {
+        try {
+          const client = this.clientService.graphAuthenticated
+          await client.groups.getGroup(this.editGroup.displayName)
+          this.formData.displayName.errorMessage = this.$gettext(
+            'Group "%{groupName}" already exists',
+            {
+              groupName: this.editGroup.displayName
+            }
+          )
+          return false
+        } catch (e) {}
+      }
+
       this.formData.displayName.errorMessage = ''
       this.formData.displayName.valid = true
       return true
@@ -104,12 +123,5 @@ export default defineComponent({
     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;
-  }
 }
 </style>

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="oc-flex group-info oc-mb-l">
+    <avatar-image class="oc-mb-m" :width="80" :userid="_group.id" :user-name="_group.displayName" />
+    <span class="oc-text-muted group-info-display-name" v-text="_group.displayName"></span>
+    <span class="oc-text-muted" v-text="groupMembersText"></span>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType, unref } from 'vue'
+import { Group } from 'web-client/src/generated'
+import { useGettext } from 'vue3-gettext'
+export default defineComponent({
+  name: 'GroupInfoBox',
+  setup(props) {
+    const _group = computed(() => props.group as Group)
+    const { $ngettext } = useGettext()
+    const groupMembersText = computed(() => {
+      return $ngettext(
+        '%{groupCount} member',
+        '%{groupCount} members',
+        unref(_group).members.length,
+        {
+          groupCount: unref(_group).members.length.toString()
+        }
+      )
+    })
+
+    return {
+      groupMembersText,
+      _group
+    }
+  },
+  props: {
+    group: {
+      type: Object as PropType<Group>,
+      required: true
+    }
+  }
+})
+</script>
+<style lang="scss">
+.gr-info {
+  align-items: center;
+  flex-direction: column;
+}
+.group-info-display-name {
+  font-size: 1.5rem;
+}
+</style>

packages/web-app-admin-settings/src/composables/actions/groups/index.ts

@@ -1 +1,2 @@
 export * from './useGroupActionsDelete'
+export * from './useGroupActionsEdit'

packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts

@@ -0,0 +1,27 @@
+import { eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { useGettext } from 'vue3-gettext'
+import { computed } from 'vue'
+import { UserAction } from 'web-pkg/src/composables/actions'
+
+export const useGroupActionsEdit = () => {
+  const { $gettext } = useGettext()
+
+  const actions = computed((): UserAction[] => [
+    {
+      name: 'edit',
+      icon: 'pencil',
+      label: () => $gettext('Edit'),
+      handler: () => eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel'),
+      isEnabled: ({ resources }) => {
+        return resources.length > 0
+      },
+      componentType: 'button',
+      class: 'oc-groups-actions-edit-trigger'
+    }
+  ])
+
+  return {
+    actions
+  }
+}

packages/web-app-admin-settings/src/views/Groups.vue

@@ -63,7 +63,6 @@
     </app-template>
     <create-group-modal
       v-if="createGroupModalOpen"
-      :existing-groups="groups"
       @cancel="toggleCreateGroupModal"
       @confirm="createGroup"
     />
@@ -184,10 +183,11 @@ export default defineComponent({
           title: this.$gettext('Edit group'),
           component: EditPanel,
           default: false,
-          enabled: false // this.selectedGroups.length === 1
-          /**
-           * Editing groups is currently not supported by backend
-           */
+          enabled: this.selectedGroups.length === 1,
+          componentAttrs: {
+            group: this.selectedGroups.length === 1 ? this.selectedGroups[0] : null,
+            onConfirm: this.editGroup
+          }
         }
       ].filter((p) => p.enabled)
     }
@@ -236,12 +236,21 @@ export default defineComponent({
       try {
         const client = this.clientService.graphAuthenticated
         await client.groups.editGroup(editGroup.id, editGroup)
-        const group = this.groups.find((group) => group.id === editGroup.id)
-        Object.assign(group, editGroup)
 
-        this.showMessage({
-          title: this.$gettext('Group was edited successfully')
-        })
+        const { data: updatedGroup } = await client.groups.getGroup(editGroup.id)
+        const groupIndex = this.groups.findIndex((group) => group.id === editGroup.id)
+        this.groups[groupIndex] = updatedGroup
+        const selectedGroupIndex = this.selectedGroups.findIndex(
+          (group) => group.id === updatedGroup.id
+        )
+        if (selectedGroupIndex >= 0) {
+          // FIXME: why do we need to update selectedUsers?
+          this.selectedGroups[selectedGroupIndex] = updatedGroup
+        }
+
+        eventBus.publish('sidebar.entity.saved')
+
+        return updatedGroup
       } catch (error) {
         console.error(error)
         this.showMessage({