[full-ci] Rename groups + refactoring (#8715)

changelog/unreleased/enhancement-enable-rename-groups

@@ -0,0 +1,6 @@
+Enhancement: Enable rename groups
+
+Groups can now be renamed via the admin-settings.
+
+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

@@ -26,32 +26,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { Group } from 'web-client/src/generated'
+import { MaybeRef, useClientService } from 'web-pkg'
 
 export default defineComponent({
   name: 'CreateGroupModal',
-  props: {
-    existingGroups: {
-      type: Array as PropType<Group[]>,
-      required: false,
-      default: () => {
-        return []
-      }
-    }
-  },
   emits: ['cancel', 'confirm'],
-  data: function () {
+  setup() {
+    const clientService = useClientService()
+
+    const group: MaybeRef<Group> = ref({ displayName: '' })
+    const formData = ref({
+      displayName: {
+        errorMessage: '',
+        valid: false
+      }
+    })
+
     return {
-      formData: {
-        displayName: {
-          errorMessage: '',
-          valid: false
-        }
-      },
-      group: {
-        displayName: ''
-      } as Group
+      clientService,
+      group,
+      formData
     }
   },
   computed: {
@@ -62,25 +58,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,10 +24,12 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import GroupInfoBox from './GroupInfoBox.vue'
 import { Group } from 'web-client/src/generated'
 
 export default defineComponent({
   name: 'DetailsPanel',
+  components: { GroupInfoBox },
   props: {
     groups: {
       type: Array as PropType<Group[]>,

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

@@ -1,11 +1,9 @@
 <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>
+    <group-info-box :group="group" />
     <form id="group-edit-form" class="oc-background-highlight oc-p-m" autocomplete="off">
       <oc-text-input
+        id="displayName-input"
         v-model="editGroup.displayName"
         class="oc-mb-s"
         :label="$gettext('Group name')"
@@ -25,37 +23,44 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
 import { Group } from 'web-client/src/generated'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
+import { MaybeRef, useClientService } from 'web-pkg'
+import GroupInfoBox from './GroupInfoBox.vue'
 
 export default defineComponent({
   name: 'EditPanel',
   components: {
+    GroupInfoBox,
     CompareSaveDialog
   },
   props: {
-    groups: {
-      type: Array as PropType<Group[]>,
-      required: true
+    group: {
+      type: Object as PropType<Group>,
+      required: true,
+      default: null
     }
   },
   emits: ['confirm'],
-  data() {
-    return {
-      editGroup: {} as Group,
-      formData: {
-        displayName: {
-          errorMessage: '',
-          valid: true
-        }
+  setup() {
+    const clientService = useClientService()
+
+    const editGroup: MaybeRef<Group> = ref({})
+    const formData = ref({
+      displayName: {
+        errorMessage: '',
+        valid: true
       }
+    })
+
+    return {
+      clientService,
+      editGroup,
+      formData
     }
   },
   computed: {
-    group() {
-      return this.groups.length === 1 ? this.groups[0] : null
-    },
     invalidFormData() {
       return Object.values(this.formData)
         .map((v: any) => !!v.valid)
@@ -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

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',
+  props: {
+    group: {
+      type: Object as PropType<Group>,
+      required: true
+    }
+  },
+  setup(props) {
+    const _group = computed<Group>(() => props.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
+    }
+  }
+})
+</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 { GroupAction } from 'web-pkg/src/composables/actions'
+
+export const useGroupActionsEdit = () => {
+  const { $gettext } = useGettext()
+
+  const actions = computed((): GroupAction[] => [
+    {
+      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
+  }
+}