From f266cf204817b098937e0d8db9effb6c0184b5e5 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 28 Nov 2023 16:32:40 +0100
Subject: [PATCH] refactor: move link role dropdown to a re-usable component

---
 .../SideBar/Shares/Links/DetailsAndEdit.vue   | 149 ++++--------------
 .../__snapshots__/DetailsAndEdit.spec.ts.snap |  51 +-----
 .../src/components/LinkRoleDropdown.vue       | 145 +++++++++++++++++
 packages/web-pkg/src/components/index.ts      |   1 +
 .../unit/components/LinkRoleDropdown.spec.ts  |  62 ++++++++
 .../FilesPageElement/publicLinksDialog.js     |   2 +-
 .../support/objects/app-files/link/actions.ts |   4 +-
 7 files changed, 246 insertions(+), 168 deletions(-)
 create mode 100644 packages/web-pkg/src/components/LinkRoleDropdown.vue
 create mode 100644 packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 24be0e4b18a..9436fe626f2 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -1,66 +1,12 @@
 <template>
   <div class="link-details oc-flex oc-flex-between oc-flex-middle">
     <div v-if="isModifiable">
-      <oc-button
-        :id="`edit-public-link-role-dropdown-toggle-${link.id}`"
-        appearance="raw"
-        class="edit-public-link-role-dropdown-toggle oc-text-left"
-        gap-size="none"
-      >
-        <span
-          class="link-current-role"
-          v-text="currentLinkRoleLabel || $gettext('Select a role')"
-        />
-        <oc-icon name="arrow-down-s" />
-      </oc-button>
-      <oc-drop
-        ref="editPublicLinkRoleDropdown"
-        class="edit-public-link-role-dropdown"
-        :drop-id="`edit-public-link-role-dropdown`"
-        :toggle="`#edit-public-link-role-dropdown-toggle-${link.id}`"
-        padding-size="small"
-        offset="0"
-        mode="click"
-      >
-        <oc-list class="role-dropdown-list">
-          <li v-for="roleOption in availableRoleOptions" :key="`role-dropdown-${roleOption.key}`">
-            <oc-button
-              :id="`files-role-${roleOption.name}`"
-              :class="{
-                selected: isSelectedRole(roleOption),
-                'oc-background-primary-gradient': isSelectedRole(roleOption)
-              }"
-              :appearance="isSelectedRole(roleOption) ? 'raw-inverse' : 'raw'"
-              :variation="isSelectedRole(roleOption) ? 'primary' : 'passive'"
-              justify-content="space-between"
-              class="oc-p-s"
-              @click="
-                updateLink({
-                  link: {
-                    ...link,
-                    permissions: roleOption.bitmask(false)
-                  },
-                  dropRef: $refs.editPublicLinkRoleDropdown
-                })
-              "
-            >
-              <span class="oc-flex oc-flex-middle">
-                <oc-icon :name="roleOption.icon" class="oc-pl-s oc-pr-m" variation="inherit" />
-                <span>
-                  <span
-                    class="oc-text-bold oc-display-block oc-width-1-1"
-                    v-text="$gettext(roleOption.label)"
-                  />
-                  <span class="oc-text-small">{{ $gettext(roleOption.description(false)) }}</span>
-                </span>
-              </span>
-              <span class="oc-flex">
-                <oc-icon v-if="isSelectedRole(roleOption)" name="check" variation="inherit" />
-              </span>
-            </oc-button>
-          </li>
-        </oc-list>
-      </oc-drop>
+      <link-role-dropdown
+        :model-value="currentLinkRole"
+        :available-role-options="availableRoleOptions"
+        drop-offset="0"
+        @update:model-value="updateSelectedRole"
+      />
     </div>
     <p v-else class="oc-my-rm">
       <span
@@ -199,7 +145,11 @@ import { basename } from 'path'
 import { DateTime } from 'luxon'
 import { mapActions, mapGetters } from 'vuex'
 import * as EmailValidator from 'email-validator'
-import { createLocationSpaces, useConfigurationManager } from '@ownclouders/web-pkg'
+import {
+  createLocationSpaces,
+  useConfigurationManager,
+  LinkRoleDropdown
+} from '@ownclouders/web-pkg'
 import {
   linkRoleInternalFile,
   linkRoleInternalFolder,
@@ -207,7 +157,7 @@ import {
   LinkShareRoles,
   ShareRole
 } from '@ownclouders/web-client/src/helpers/share'
-import { computed, defineComponent, inject, PropType, Ref } from 'vue'
+import { computed, defineComponent, inject, PropType, Ref, ref } from 'vue'
 import { formatDateFromDateTime, formatRelativeDateFromDateTime } from '@ownclouders/web-pkg'
 import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import { createFileRouteOptions } from '@ownclouders/web-pkg'
@@ -217,6 +167,7 @@ import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'DetailsAndEdit',
+  components: { LinkRoleDropdown },
   props: {
     availableRoleOptions: {
       type: Array as PropType<ShareRole[]>,
@@ -253,10 +204,15 @@ export default defineComponent({
     }
   },
   emits: ['removePublicLink', 'updateLink'],
-  setup(props) {
+  setup(props, { emit }) {
     const { current } = useGettext()
     const configurationManager = useConfigurationManager()
     const passwordPolicyService = usePasswordPolicyService()
+
+    const currentLinkRole = ref<ShareRole>(
+      LinkShareRoles.getByBitmask(props.link.permissions, props.isFolderShare)
+    ) as Ref<ShareRole>
+
     const dateExpire = computed(() => {
       return formatRelativeDateFromDateTime(
         DateTime.fromISO(props.link.expiration).endOf('day'),
@@ -264,11 +220,25 @@ export default defineComponent({
       )
     })
 
+    const updateLink = ({ link, onSuccess = () => {} }) => {
+      link = link || props.link
+      emit('updateLink', { link, onSuccess })
+    }
+    const updateSelectedRole = (role: ShareRole) => {
+      currentLinkRole.value = role
+      updateLink({
+        link: { ...props.link, permissions: role.bitmask(false) }
+      })
+    }
+
     return {
       space: inject<Ref<SpaceResource>>('space'),
       resource: inject<Ref<Resource>>('resource'),
       passwordPolicyService,
       dateExpire,
+      updateLink,
+      updateSelectedRole,
+      currentLinkRole,
       isRunningOnEos: computed(() => configurationManager.options.isRunningOnEos)
     }
   },
@@ -279,9 +249,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters('runtime/spaces', ['spaces']),
-    currentLinkRole() {
-      return LinkShareRoles.getByBitmask(this.link.permissions, this.isFolderShare)
-    },
+
     currentLinkRoleDescription() {
       return this.currentLinkRole?.description(false) || ''
     },
@@ -492,15 +460,6 @@ export default defineComponent({
       'setModalConfirmButtonDisabled'
     ]),
 
-    isSelectedRole(role: ShareRole) {
-      return this.link.permissions === role.bitmask(false)
-    },
-    updateLink({ link, dropRef = undefined, onSuccess = () => {} }) {
-      link = link || this.link
-      dropRef = dropRef || this.$refs.editPublicLinkDropdown
-      dropRef.hide()
-      this.$emit('updateLink', { link, onSuccess })
-    },
     deleteLink() {
       this.$emit('removePublicLink', { link: this.link })
       ;(this.$refs.editPublicLinkDropdown as InstanceType<typeof OcDrop>).hide()
@@ -634,46 +593,6 @@ export default defineComponent({
   justify-content: flex-end;
 }
 
-@media (max-width: $oc-breakpoint-medium-default) {
-  .edit-public-link-role-dropdown {
-    width: 100%;
-  }
-}
-
-@media (min-width: $oc-breakpoint-medium-default) {
-  .edit-public-link-role-dropdown {
-    width: 400px;
-  }
-}
-
-.role-dropdown-list span {
-  line-height: 1.3;
-}
-
-.role-dropdown-list li {
-  margin: var(--oc-space-xsmall) 0;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  .oc-button {
-    text-align: left;
-    width: 100%;
-    gap: var(--oc-space-medium);
-
-    &:hover,
-    &:focus {
-      background-color: var(--oc-color-background-hover);
-      text-decoration: none;
-    }
-  }
-}
-
 .edit-public-link-dropdown-menu {
   .action-menu-item {
     width: 100%;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap
index 2b33ad2de67..4504ab9017b 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap
@@ -3,56 +3,7 @@
 exports[`DetailsAndEdit component if user can edit renders dropdown and edit button 1`] = `
 <div class="link-details oc-flex oc-flex-between oc-flex-middle" file="undefined">
   <div>
-    <oc-button-stub appearance="raw" class="edit-public-link-role-dropdown-toggle oc-text-left" disabled="false" gapsize="none" id="edit-public-link-role-dropdown-toggle-undefined" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-      <span class="link-current-role">Anyone with the link can view</span>
-      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-    </oc-button-stub>
-    <oc-drop-stub class="edit-public-link-role-dropdown" closeonclick="false" dropid="edit-public-link-role-dropdown" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#edit-public-link-role-dropdown-toggle-undefined">
-      <oc-list-stub class="role-dropdown-list" raw="false">
-        <li>
-          <oc-button-stub appearance="raw" class="oc-p-s" disabled="false" gapsize="medium" id="files-role-internal" justifycontent="space-between" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-            <span class="oc-flex oc-flex-middle">
-              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="user" size="medium" type="span" variation="inherit"></oc-icon-stub>
-              <span>
-                <span class="oc-text-bold oc-display-block oc-width-1-1">Invited People</span>
-                <span class="oc-text-small">Link works only for invited people. Login is required.</span>
-              </span>
-            </span>
-            <span class="oc-flex">
-              <!--v-if-->
-            </span>
-          </oc-button-stub>
-        </li>
-        <li>
-          <oc-button-stub appearance="raw-inverse" class="selected oc-background-primary-gradient oc-p-s" disabled="false" gapsize="medium" id="files-role-viewer" justifycontent="space-between" showspinner="false" size="medium" submit="button" type="button" variation="primary">
-            <span class="oc-flex oc-flex-middle">
-              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="inherit"></oc-icon-stub>
-              <span>
-                <span class="oc-text-bold oc-display-block oc-width-1-1">Can view</span>
-                <span class="oc-text-small">Anyone with the link can view and download.</span>
-              </span>
-            </span>
-            <span class="oc-flex">
-              <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="inherit"></oc-icon-stub>
-            </span>
-          </oc-button-stub>
-        </li>
-        <li>
-          <oc-button-stub appearance="raw" class="oc-p-s" disabled="false" gapsize="medium" id="files-role-editor" justifycontent="space-between" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-            <span class="oc-flex oc-flex-middle">
-              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="inherit"></oc-icon-stub>
-              <span>
-                <span class="oc-text-bold oc-display-block oc-width-1-1">Can edit</span>
-                <span class="oc-text-small">Anyone with the link can view, download and edit.</span>
-              </span>
-            </span>
-            <span class="oc-flex">
-              <!--v-if-->
-            </span>
-          </oc-button-stub>
-        </li>
-      </oc-list-stub>
-    </oc-drop-stub>
+    <link-role-dropdown-stub availableroleoptions="[object Object],[object Object],[object Object]" dropoffset="0" modelvalue="[object Object]"></link-role-dropdown-stub>
   </div>
   <!--v-if-->
   <div class="details-buttons">
diff --git a/packages/web-pkg/src/components/LinkRoleDropdown.vue b/packages/web-pkg/src/components/LinkRoleDropdown.vue
new file mode 100644
index 00000000000..193f5202864
--- /dev/null
+++ b/packages/web-pkg/src/components/LinkRoleDropdown.vue
@@ -0,0 +1,145 @@
+<template>
+  <oc-button
+    v-if="availableRoleOptions.length > 1"
+    :id="`link-role-dropdown-toggle-${dropUuid}`"
+    appearance="raw"
+    gap-size="none"
+    class="oc-text-left link-role-dropdown-toggle"
+  >
+    <span class="link-current-role" v-text="currentLinkRoleLabel || $gettext('Select a role')" />
+    <oc-icon name="arrow-down-s" />
+  </oc-button>
+  <span
+    v-else
+    v-oc-tooltip="modelValue?.description(false)"
+    class="link-current-role oc-mr-m"
+    v-text="currentLinkRoleLabel"
+  />
+  <oc-drop
+    v-if="availableRoleOptions.length > 1"
+    class="link-role-dropdown"
+    :drop-id="`link-role-dropdown-${dropUuid}`"
+    :toggle="`#link-role-dropdown-toggle-${dropUuid}`"
+    padding-size="small"
+    mode="click"
+    :offset="dropOffset"
+    close-on-click
+  >
+    <oc-list class="role-dropdown-list">
+      <li v-for="roleOption in availableRoleOptions" :key="`role-dropdown-${roleOption.key}`">
+        <oc-button
+          :id="`files-role-${roleOption.name}`"
+          :class="{
+            selected: isSelectedRole(roleOption),
+            'oc-background-primary-gradient': isSelectedRole(roleOption)
+          }"
+          :appearance="isSelectedRole(roleOption) ? 'raw-inverse' : 'raw'"
+          :variation="isSelectedRole(roleOption) ? 'primary' : 'passive'"
+          justify-content="space-between"
+          class="oc-p-s"
+          @click="updateSelectedRole(roleOption)"
+        >
+          <span class="oc-flex oc-flex-middle">
+            <oc-icon :name="roleOption.icon" class="oc-pl-s oc-pr-m" variation="inherit" />
+            <span>
+              <span
+                class="role-dropdown-list-option-label oc-text-bold oc-display-block oc-width-1-1"
+                v-text="$gettext(roleOption.label)"
+              />
+              <span class="oc-text-small">{{ $gettext(roleOption.description(false)) }}</span>
+            </span>
+          </span>
+          <span class="oc-flex">
+            <oc-icon v-if="isSelectedRole(roleOption)" name="check" variation="inherit" />
+          </span>
+        </oc-button>
+      </li>
+    </oc-list>
+  </oc-drop>
+</template>
+
+<script lang="ts">
+import * as uuid from 'uuid'
+import { defineComponent, PropType } from 'vue'
+import { ShareRole } from '@ownclouders/web-client/src/helpers'
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+export default defineComponent({
+  name: 'LinkRoleDropdown',
+  props: {
+    modelValue: { type: Object as PropType<ShareRole>, required: true },
+    availableRoleOptions: { type: Array as PropType<ShareRole[]>, required: true },
+    dropOffset: { type: String, default: undefined }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const { $gettext } = useGettext()
+
+    const isSelectedRole = (role: ShareRole) => {
+      return props.modelValue?.bitmask(false) === role.bitmask(false)
+    }
+
+    const updateSelectedRole = (role: ShareRole) => {
+      emit('update:modelValue', role)
+    }
+
+    const currentLinkRoleLabel = computed(() => {
+      if (props.modelValue?.longLabel !== '') {
+        return $gettext(props.modelValue.longLabel)
+      }
+      return $gettext(props.modelValue?.label || '')
+    })
+
+    const dropUuid = uuid.v4()
+
+    return { isSelectedRole, updateSelectedRole, currentLinkRoleLabel, dropUuid }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@media (max-width: $oc-breakpoint-medium-default) {
+  .link-role-dropdown {
+    width: 100%;
+  }
+}
+
+@media (min-width: $oc-breakpoint-medium-default) {
+  .link-role-dropdown {
+    width: 400px;
+  }
+}
+
+.role-dropdown-list span {
+  line-height: 1.3;
+}
+
+.role-dropdown-list li {
+  margin: var(--oc-space-xsmall) 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .oc-button {
+    text-align: left;
+    width: 100%;
+    gap: var(--oc-space-medium);
+
+    &:hover,
+    &:focus {
+      background-color: var(--oc-color-background-hover);
+      text-decoration: none;
+    }
+  }
+
+  .selected span {
+    color: var(--oc-color-swatch-primary-contrast);
+  }
+}
+</style>
diff --git a/packages/web-pkg/src/components/index.ts b/packages/web-pkg/src/components/index.ts
index 99d8456e672..99c6e35ddc3 100644
--- a/packages/web-pkg/src/components/index.ts
+++ b/packages/web-pkg/src/components/index.ts
@@ -12,6 +12,7 @@ export { default as AppTopBar } from './AppTopBar.vue'
 export { default as BatchActions } from './BatchActions.vue'
 export { default as ItemFilter } from './ItemFilter.vue'
 export { default as ItemFilterToggle } from './ItemFilterToggle.vue'
+export { default as LinkRoleDropdown } from './LinkRoleDropdown.vue'
 export { default as LoadingIndicator } from './LoadingIndicator.vue'
 export { default as NoContentMessage } from './NoContentMessage.vue'
 export { default as Pagination } from './Pagination.vue'
diff --git a/packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts b/packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts
new file mode 100644
index 00000000000..ed7d0784c7c
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts
@@ -0,0 +1,62 @@
+import LinkRoleDropdown from '../../../src/components/LinkRoleDropdown.vue'
+import {
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  mount
+} from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import {
+  ShareRole,
+  linkRoleInternalFolder,
+  linkRoleViewerFolder
+} from '@ownclouders/web-client/src/helpers'
+
+const selectors = {
+  currentRole: '.link-current-role',
+  roleOption: '.role-dropdown-list li',
+  roleOptionLabel: '.role-dropdown-list-option-label'
+}
+
+describe('LinkRoleDropdown', () => {
+  it('renders the long label of the modelValue as button label', () => {
+    const modelValue = mock<ShareRole>({ label: 'someLabel', longLabel: 'someLabel' })
+    const { wrapper } = getWrapper({ modelValue })
+
+    expect(wrapper.find(selectors.currentRole).text()).toEqual(modelValue.longLabel)
+  })
+  it('renders all available role options', () => {
+    const modelValue = mock<ShareRole>({ label: 'someLabel', longLabel: 'someLabel' })
+    const availableRoleOptions = [linkRoleInternalFolder, linkRoleViewerFolder]
+    const { wrapper } = getWrapper({ modelValue, availableRoleOptions })
+
+    expect(wrapper.findAll(selectors.roleOption).length).toEqual(availableRoleOptions.length)
+    availableRoleOptions.forEach((role, index) => {
+      expect(wrapper.findAll(selectors.roleOptionLabel).at(index).text()).toEqual(role.label)
+    })
+  })
+})
+
+function getWrapper({ modelValue = mock<ShareRole>(), availableRoleOptions = [] } = {}) {
+  const storeOptions = { ...defaultStoreMockOptions }
+  const store = createStore(storeOptions)
+
+  const mocks = { ...defaultComponentMocks() }
+
+  return {
+    mocks,
+    storeOptions,
+    wrapper: mount(LinkRoleDropdown, {
+      props: {
+        modelValue,
+        availableRoleOptions
+      },
+      global: {
+        plugins: [...defaultPlugins(), store],
+        mocks,
+        provide: mocks
+      }
+    })
+  }
+}
diff --git a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
index 1dacf2b6492..f86f9081545 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
@@ -603,7 +603,7 @@ module.exports = {
     },
     publicLinkEditRoleButton: {
       selector:
-        '//h4[contains(@class, "oc-files-file-link-name") and text()="%s"]//ancestor::li//div[contains(@class, "link-details")]/div/button[contains(@class, "edit-public-link-role-dropdown-toggle")]',
+        '//h4[contains(@class, "oc-files-file-link-name") and text()="%s"]//ancestor::li//div[contains(@class, "link-details")]/div/button[contains(@class, "link-role-dropdown-toggle")]',
       locateStrategy: 'xpath'
     },
     publicLinkEditButton: {
diff --git a/tests/e2e/support/objects/app-files/link/actions.ts b/tests/e2e/support/objects/app-files/link/actions.ts
index af55dcfa23f..ffa4a212cb8 100644
--- a/tests/e2e/support/objects/app-files/link/actions.ts
+++ b/tests/e2e/support/objects/app-files/link/actions.ts
@@ -65,7 +65,7 @@ const publicLinkSetRoleButton = `#files-role-%s`
 const linkExpiryDatepicker = '.link-expiry-picker:not(.vc-container)'
 const publicLinkEditRoleButton =
   `//h4[contains(@class, "oc-files-file-link-name") and text()="%s"]//ancestor::li//div[contains(@class, "link-details")]/` +
-  `div/button[contains(@class, "edit-public-link-role-dropdown-toggle")]`
+  `div/button[contains(@class, "link-role-dropdown-toggle")]`
 const addPublicLinkButton = '#files-file-link-add'
 const publicLinkNameList =
   '//div[@id="oc-files-file-link"]//ul//h4[contains(@class,"oc-files-file-link-name")]'
@@ -73,7 +73,7 @@ const publicLinkUrlList =
   '//div[@id="oc-files-file-link"]//ul//p[contains(@class,"oc-files-file-link-url")]'
 const publicLink = `//ul//h4[text()='%s']/following-sibling::div//p`
 const publicLinkCurrentRole =
-  '//button[contains(@class,"edit-public-link-role-dropdown-toggle")]//span[contains(@class,"link-current-role")]'
+  '//button[contains(@class,"link-role-dropdown-toggle")]//span[contains(@class,"link-current-role")]'
 const linkUpdateDialog = '//div[contains(@class,"oc-notification-message-title")]'
 const editPublicLinkButton =
   `//h4[contains(@class, "oc-files-file-link-name") and text()="%s"]` +