Address PR issues

owncloud · Apr 18, 2023 · 3319661 · 3319661
1 parent 8be8707
commit 3319661
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 38 deletions.
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersPanel.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, inject, ref, watch, unref } from 'vue'
+import { computed, defineComponent, inject, ref, watch, unref, Ref } from 'vue'
 import MembersRoleSection from '../../Groups/SideBar/MembersRoleSection.vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
@@ -27,7 +27,7 @@ export default defineComponent({
   name: 'GroupsMembersPanel',
   components: { MembersRoleSection },
   setup() {
-    const group = inject<Group>('group')
+    const group = inject<Ref<Group>>('group')
     const filterTerm = ref('')
     const markInstance = ref(null)
     const membersListRef = ref(null)

diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue
@@ -4,7 +4,7 @@
       v-for="(member, index) in groupMembers"
       :key="index"
       class="oc-flex oc-flex-middle oc-mb-s"
-      data-testid="space-members-list"
+      data-testid="group-members-list"
     >
       <oc-avatar :user-name="member.displayName" :width="36" class="oc-mr-s" />
       {{ member.displayName }}

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
@@ -15,23 +15,23 @@
         data-testid="space-members-role-managers"
       >
         <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Managers')" />
-        <members-role-section :space-members="filteredSpaceManagers" />
+        <members-role-section :members="filteredSpaceManagers" />
       </div>
       <div
         v-if="filteredSpaceEditors.length"
         class="oc-mb-m"
         data-testid="space-members-role-editors"
       >
         <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Editors')" />
-        <members-role-section :space-members="filteredSpaceEditors" />
+        <members-role-section :members="filteredSpaceEditors" />
       </div>
       <div
         v-if="filteredSpaceViewers.length"
         class="oc-mb-m"
         data-testid="space-members-role-viewers"
       >
         <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Viewers')" />
-        <members-role-section :space-members="filteredSpaceViewers" />
+        <members-role-section :members="filteredSpaceViewers" />
       </div>
     </div>
   </div>
@@ -52,7 +52,6 @@ export default defineComponent({
     const filterTerm = ref('')
     const markInstance = ref(null)
     const membersListRef = ref(null)
-
     const filterMembers = (collection, term) => {
       if (!(term || '').trim()) {
         return collection
@@ -69,23 +68,20 @@ export default defineComponent({
     }
 
     const spaceMembers = computed(() => {
-      if (resource) {
-        return [
-          ...unref(resource).spaceRoles.manager.map((r) => ({
-            ...r,
-            roleType: spaceRoleManager.name
-          })),
-          ...unref(resource).spaceRoles.editor.map((r) => ({
-            ...r,
-            roleType: spaceRoleEditor.name
-          })),
-          ...unref(resource).spaceRoles.viewer.map((r) => ({
-            ...r,
-            roleType: spaceRoleViewer.name
-          }))
-        ].sort((a, b) => a.displayName.localeCompare(b.displayName))
-      }
-      return []
+      return [
+        ...unref(resource).spaceRoles.manager.map((r) => ({
+          ...r,
+          roleType: spaceRoleManager.name
+        })),
+        ...unref(resource).spaceRoles.editor.map((r) => ({
+          ...r,
+          roleType: spaceRoleEditor.name
+        })),
+        ...unref(resource).spaceRoles.viewer.map((r) => ({
+          ...r,
+          roleType: spaceRoleViewer.name
+        }))
+      ].sort((a, b) => a.displayName.localeCompare(b.displayName))
     })
 
     const filteredSpaceMembers = computed(() => {

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue
@@ -1,13 +1,13 @@
 <template>
   <ul class="oc-list">
     <li
-      v-for="(member, index) in spaceMembers"
+      v-for="(member, index) in members"
       :key="index"
       class="oc-flex oc-flex-middle oc-mb-s"
       data-testid="space-members-list"
     >
       <oc-avatar
-        v-if="showOcAvatar(member)"
+        v-if="member.kind === 'user'"
         :user-name="member.displayName"
         :width="36"
         class="oc-mr-s"
@@ -31,19 +31,16 @@ import { SpaceRole } from 'web-client/src/helpers'
 export default defineComponent({
   name: 'MembersRoleSection',
   props: {
-    spaceMembers: {
+    members: {
       type: Array as PropType<SpaceRole[]>,
-      required: false
+      required: true
     }
   },
-  setup(props) {
+  setup() {
     const groupIcon = computed(() => {
       return ShareTypes.group.icon
     })
-    const showOcAvatar = (member) => {
-      return (member as any).kind === 'user'
-    }
-    return { groupIcon, showOcAvatar }
+    return { groupIcon }
   }
 })
 </script>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts
@@ -30,7 +30,7 @@ describe('MembersPanel', () => {
     await wrapper.vm.$nextTick
     expect(wrapper.findAll(selectors.membersRolePanelStub).length).toBe(1)
     expect(
-      wrapper.findComponent<any>(selectors.membersRolePanelStub).props().spaceMembers[0].displayName
+      wrapper.findComponent<any>(selectors.membersRolePanelStub).props().members[0].displayName
     ).toEqual(userToFilterFor.displayName)
   })
   it('should display an empty result if no matching members found', async () => {

diff --git a/...min-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/...min-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -21,15 +21,15 @@ exports[`MembersPanel should render all members accordingly to their role assign
     <!--v-if-->
     <div class="oc-mb-m">
       <h3 class="oc-text-bold oc-text-medium">Managers</h3>
-      <members-role-section-stub spacemembers="[object Object]"></members-role-section-stub>
+      <members-role-section-stub members="[object Object]"></members-role-section-stub>
     </div>
     <div class="oc-mb-m">
       <h3 class="oc-text-bold oc-text-medium">Editors</h3>
-      <members-role-section-stub spacemembers="[object Object],[object Object]"></members-role-section-stub>
+      <members-role-section-stub members="[object Object],[object Object]"></members-role-section-stub>
     </div>
     <div class="oc-mb-m">
       <h3 class="oc-text-bold oc-text-medium">Viewers</h3>
-      <members-role-section-stub spacemembers="[object Object]"></members-role-section-stub>
+      <members-role-section-stub members="[object Object]"></members-role-section-stub>
     </div>
   </div>
 </div>

diff --git a/...ttings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap b/...ttings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap
@@ -1,3 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MembersRoleSection should render all members accordingly 1`] = `<ul class="oc-list" members="undefined,undefined"></ul>`;
+exports[`MembersRoleSection should render all members accordingly 1`] = `
+<ul class="oc-list">
+  <li class="oc-flex oc-flex-middle oc-mb-s">
+    <oc-avatar-stub accessiblelabel="" class="oc-mr-s" src="" username="einstein" width="36"></oc-avatar-stub> einstein
+  </li>
+  <li class="oc-flex oc-flex-middle oc-mb-s">
+    <oc-avatar-item-stub accessiblelabel="" background="var(--oc-color-swatch-passive-default)" class="oc-mr-s" icon="group" iconcolor="var(--oc-color-text-inverse)" iconfilltype="fill" iconsize="medium" name="group" width="36"></oc-avatar-item-stub> physic-lovers
+  </li>
+</ul>
+`;