Show selectable groups only

changelog/unreleased/enhancement-show-selectable-groups-only

@@ -0,0 +1,6 @@
+Enhancement: Show selectable groups only
+
+When managing user group assignments, we now show selectable groups only, meaning groups that have been selected already will not show up as available options.
+
+https://github.com/owncloud/web/pull/8306
+https://github.com/owncloud/web/issues/8305

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

@@ -54,7 +54,7 @@
         <group-select
           class="oc-mb-s"
           :selected-groups="editUser.memberOf"
-          :available-groups="groups"
+          :group-options="groupOptions"
           @selectedOptionChange="changeSelectedGroupOption"
         />
       </div>
@@ -70,7 +70,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import * as EmailValidator from 'email-validator'
 import UserInfoBox from './UserInfoBox.vue'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
@@ -102,7 +102,7 @@ export default defineComponent({
       required: true
     }
   },
-  setup() {
+  setup(props) {
     const editUser: MaybeRef<User> = ref({})
     const formData = ref({
       displayName: {
@@ -114,7 +114,14 @@ export default defineComponent({
         valid: true
       }
     })
-    return { editUser, formData }
+    const groupOptions = computed(() => {
+      const { memberOf: selectedGroups } = unref(editUser)
+      return props.groups
+        .filter((g) => !selectedGroups.some((s) => s.id === g.id))
+        .sort((a, b) => a.displayName.localeCompare(b.displayName))
+    })
+
+    return { editUser, formData, groupOptions }
   },
   computed: {
     invalidFormData() {

packages/web-app-admin-settings/src/components/Users/SideBar/GroupSelect.vue

@@ -4,7 +4,7 @@
       :model-value="selectedOption"
       class="oc-mb-s"
       multiple
-      :options="availableGroups"
+      :options="groupOptions"
       option-label="displayName"
       :label="$gettext('Groups')"
       :fix-message-line="true"
@@ -49,7 +49,7 @@ export default defineComponent({
       type: Array as PropType<Group[]>,
       required: true
     },
-    availableGroups: {
+    groupOptions: {
       type: Array as PropType<Group[]>,
       required: true
     }

packages/web-app-admin-settings/tests/unit/components/Users/SideBar/EditPanel.spec.ts

@@ -1,11 +1,32 @@
 import EditPanel from '../../../../../src/components/Users/SideBar/EditPanel.vue'
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import { Group } from 'web-client/src/generated'
+
+const availableGroupOptions = [
+  mock<Group>({ id: '1', displayName: 'group1' }),
+  mock<Group>({ id: '2', displayName: 'group2' })
+]
+const selectors = {
+  groupSelectStub: 'group-select-stub'
+}
 
 describe('EditPanel', () => {
   it('renders all available inputs', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('filters selected groups when passing the options to the GroupSelect component', () => {
+    const { wrapper } = getWrapper({ selectedGroups: [availableGroupOptions[0]] })
+    const selectedGroups = wrapper
+      .findComponent<any>(selectors.groupSelectStub)
+      .props('selectedGroups')
+    const groupOptions = wrapper.findComponent<any>(selectors.groupSelectStub).props('groupOptions')
+    expect(selectedGroups.length).toBe(1)
+    expect(selectedGroups[0].id).toEqual(availableGroupOptions[0].id)
+    expect(groupOptions.length).toBe(1)
+    expect(groupOptions[0].id).toEqual(availableGroupOptions[1].id)
+  })
   describe('method "revertChanges"', () => {
     it('should revert changes on property editUser', () => {
       const { wrapper } = getWrapper()
@@ -69,7 +90,7 @@ describe('EditPanel', () => {
   })
 })
 
-function getWrapper() {
+function getWrapper({ selectedGroups = [] } = {}) {
   return {
     wrapper: shallowMount(EditPanel, {
       props: {
@@ -78,9 +99,11 @@ function getWrapper() {
           displayName: 'jan',
           mail: 'jan@owncloud.com',
           passwordProfile: { password: '' },
-          drive: { quota: {} }
+          drive: { quota: {} },
+          memberOf: selectedGroups
         },
-        roles: [{ id: '1', displayName: 'admin' }]
+        roles: [{ id: '1', displayName: 'admin' }],
+        groups: availableGroupOptions
       },
       global: {
         plugins: [...defaultPlugins()]

packages/web-app-admin-settings/tests/unit/components/Users/SideBar/GroupSelect.spec.ts

@@ -24,7 +24,7 @@ function getWrapper() {
     wrapper: shallowMount(GroupSelect, {
       props: {
         selectedGroups: [groupMock],
-        availableGroups: [groupMock]
+        groupOptions: [groupMock]
       },
       global: {
         plugins: [...defaultPlugins()]

packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap

@@ -13,7 +13,7 @@ exports[`EditPanel renders all available inputs 1`] = `
         <div class="oc-text-input-message"></div>
       </div>
       <quota-select-stub class="oc-mb-s" maxquota="0" title="Personal quota" totalquota="0"></quota-select-stub>
-      <group-select-stub class="oc-mb-s"></group-select-stub>
+      <group-select-stub class="oc-mb-s" groupoptions="undefined,undefined" selectedgroups=""></group-select-stub>
     </div>
     <compare-save-dialog-stub class="edit-compare-save-dialog oc-mb-l" compareobject="[object Object]" confirmbuttondisabled="false" originalobject="[object Object]"></compare-save-dialog-stub>
   </form>