Convert buttons in files list to urls, align in context menu

docs/getting-started.md

@@ -46,7 +46,6 @@ Depending on the backend you are using, there are sample config files provided i
 
 #### Options
 
-- `options.openAppsInTab` Configures whether apps and extensions generally should open in a new tab. Defaults to false.
 - `options.accountEditLink` This accepts an object with the following optional fields to have a link on the account page:
     - `options.accountEditLink.href` Set a different target URL for the edit link. Make sure to prepend it with `http(s)://`.
 - `options.disableFeedbackLink` Set this option to `true` to disable the feedback link in the topbar. Keeping it enabled (value `false` or absence of the option)

packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue

@@ -72,6 +72,7 @@ export default defineComponent({
     display: inline-flex;
     gap: 10px;
     vertical-align: top;
+    text-decoration: none;
   }
 }
 </style>

packages/web-app-files/src/components/SideBar/Actions/FileActions.vue

@@ -52,6 +52,7 @@ export default defineComponent({
     display: inline-flex;
     gap: 10px;
     vertical-align: top;
+    text-decoration: none;
   }
 
   > li:hover {

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -54,23 +54,26 @@
         </oc-button>
       </div>
       <p v-if="space.description" class="oc-mt-rm oc-text-bold">{{ space.description }}</p>
-      <div ref="markdownContainerRef" class="markdown-container oc-flex oc-flex-middle">
+      <div
+        v-if="markdownResource && markdownContent"
+        ref="markdownContainerRef"
+        class="markdown-container oc-flex oc-flex-middle"
+      >
         <text-editor
-          v-if="markdownContent"
           :resource="markdownResource"
           :current-content="markdownContent"
           :is-read-only="true"
           :application-config="{}"
         />
         <div class="markdown-container-edit oc-ml-s">
-          <oc-button
-            v-oc-tooltip="editReadmeContentActions[0].label"
+          <router-link
+            v-oc-tooltip="$gettext('Edit description')"
             size="small"
             appearance="raw"
-            @click="editReadmeContentActions[0].handler({ resources: [space] })"
+            :to="editReadMeContentLink"
           >
             <oc-icon name="pencil" size="small" fill-type="line" />
-          </oc-button>
+          </router-link>
         </div>
       </div>
       <div
@@ -106,7 +109,7 @@ import {
   ProcessorType,
   useResourcesStore,
   TextEditor,
-  useSpaceActionsEditReadmeContent
+  useFileActions
 } from '@ownclouders/web-pkg'
 import { ImageDimension } from '@ownclouders/web-pkg'
 import { VisibilityObserver } from '@ownclouders/web-pkg'
@@ -139,7 +142,7 @@ export default defineComponent({
     const { getFileContents, getFileInfo } = clientService.webdav
     const previewService = usePreviewService()
     const resourcesStore = useResourcesStore()
-    const { actions: editReadmeContentActions } = useSpaceActionsEditReadmeContent()
+    const { getDefaultAction } = useFileActions()
 
     const markdownContainerRef = ref(null)
     const markdownContent = ref('')
@@ -220,6 +223,16 @@ export default defineComponent({
 
     const imageContent = ref(null)
     const imageExpanded = ref(false)
+
+    const editReadMeContentLink = computed(() => {
+      const action = getDefaultAction({ resources: [unref(markdownResource)], space: props.space })
+
+      if (!action.route) {
+        return null
+      }
+
+      return action.route({ space: props.space, resources: [unref(markdownResource)] })
+    })
     const toggleImageExpanded = () => {
       imageExpanded.value = !unref(imageExpanded)
     }
@@ -278,7 +291,7 @@ export default defineComponent({
       memberCountString,
       openSideBarSharePanel,
       loadPreviewTask,
-      editReadmeContentActions
+      editReadMeContentLink
     }
   }
 })

packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts

@@ -1,8 +1,16 @@
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import SpaceHeader from 'web-app-files/src/components/Spaces/SpaceHeader.vue'
 import { Drive } from '@ownclouders/web-client/graph/generated'
-import { SpaceResource, buildSpace } from '@ownclouders/web-client'
+import { SpaceResource, buildSpace, Resource } from '@ownclouders/web-client'
 import { defaultPlugins, mount, defaultComponentMocks } from 'web-test-helpers'
+import { mock } from 'vitest-mock-extended'
+
+vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useFileActions: vi.fn().mockReturnValue({
+    getDefaultAction: vi.fn().mockReturnValue({ handler: vi.fn() })
+  })
+}))
 
 describe('SpaceHeader', () => {
   it('should add the "squashed"-class when the sidebar is opened', () => {
@@ -39,6 +47,16 @@ describe('SpaceHeader', () => {
       expect(wrapper.find('.space-header-image').classes()).toContain('space-header-image-expanded')
     })
   })
+  describe('space description', () => {
+    it('should show the description', async () => {
+      const wrapper = getWrapper({ space: buildSpace({ id: '1' } as unknown as Drive) })
+      wrapper.vm.markdownResource = mock<Resource>()
+      wrapper.vm.markdownContent = 'content'
+      await nextTick()
+      expect(wrapper.find('.markdown-container').exists()).toBeTruthy()
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
 })
 
 function getWrapper({ space = {} as SpaceResource, isSideBarOpen = false, isMobileWidth = false }) {

packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap

@@ -21,19 +21,13 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="markdown-container oc-flex oc-flex-middle">
-      <!--v-if-->
-      <div class="markdown-container-edit oc-ml-s"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
-          <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
-        </button></div>
-    </div>
+    <!--v-if-->
     <!--v-if-->
   </div>
 </div>"
 `;
 
-exports[`SpaceHeader > space image > should show the default image if no other image is set 1`] = `
+exports[`SpaceHeader > space description > should show the description 1`] = `
 "<div class="space-header oc-p-m oc-flex">
   <div class="space-header-image">
     <div class="space-header-image-default oc-flex oc-flex-middle oc-flex-center"><span class="oc-icon oc-icon-xxl oc-icon-passive oc-px-m oc-py-m"><!----></span></div>
@@ -55,13 +49,37 @@ exports[`SpaceHeader > space image > should show the default image if no other i
     </div>
     <!--v-if-->
     <div class="markdown-container oc-flex oc-flex-middle">
-      <!--v-if-->
-      <div class="markdown-container-edit oc-ml-s"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
+      <!---->
+      <div class="markdown-container-edit oc-ml-s"><a attrs="[object Object]" size="small" appearance="raw"></a></div>
+    </div>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`SpaceHeader > space image > should show the default image if no other image is set 1`] = `
+"<div class="space-header oc-p-m oc-flex">
+  <div class="space-header-image">
+    <div class="space-header-image-default oc-flex oc-flex-middle oc-flex-center"><span class="oc-icon oc-icon-xxl oc-icon-passive oc-px-m oc-py-m"><!----></span></div>
+  </div>
+  <div class="space-header-infos">
+    <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
+      <div class="oc-flex oc-flex-middle space-header-infos-heading">
+        <h2 class="space-header-name"></h2> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-ml-s" id="space-context-btn">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
-        </button></div>
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
+        </button>
+        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
+          <div class="oc-card oc-card-body oc-background-secondary oc-p-s">
+            <space-context-actions-stub actionoptions="[object Object]"></space-context-actions-stub>
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
     </div>
     <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
   </div>
 </div>"
 `;
@@ -85,13 +103,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="markdown-container oc-flex oc-flex-middle">
-      <!--v-if-->
-      <div class="markdown-container-edit oc-ml-s"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
-          <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
-        </button></div>
-    </div>
+    <!--v-if-->
     <!--v-if-->
   </div>
 </div>"

packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue

@@ -34,29 +34,30 @@
       />
       <span
         v-if="!action.hideLabel"
-        class="oc-files-context-action-label"
+        class="oc-files-context-action-label oc-flex"
         data-testid="action-label"
       >
-        {{ action.label(actionOptions) }}
+        <span v-text="action.label(actionOptions)" />
+        <span
+          v-if="action.showOpenInNewTabHint"
+          class="oc-text-muted oc-text-xsmall"
+          v-text="openInNewTabHint"
+        />
       </span>
       <span
         v-if="action.shortcut && shortcutHint"
         class="oc-files-context-action-shortcut"
         v-text="action.shortcut"
       />
-      <span
-        v-if="action.opensInNewWindow"
-        data-testid="action-sr-hint"
-        class="oc-invisible-sr"
-        v-text="$gettext('(Opens in new window)')"
-      />
     </oc-button>
   </li>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import { Action, ActionOptions } from '../../composables'
+import { computed, defineComponent, PropType, unref } from 'vue'
+import { Action, ActionOptions, useConfigStore } from '../../composables'
+import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'ActionMenuItem',
@@ -94,6 +95,10 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { $gettext } = useGettext()
+    const configStore = useConfigStore()
+    const { options } = storeToRefs(configStore)
+
     const componentProps = computed(() => {
       const properties = {
         appearance: props.action.appearance || props.appearance,
@@ -107,15 +112,29 @@ export default defineComponent({
       if (props.action.componentType === 'router-link' && props.action.route) {
         return {
           ...properties,
-          to: props.action.route(props.actionOptions)
+          to: props.action.route(props.actionOptions),
+          target: options.value.cernFeatures ? '_blank' : '_self'
         }
       }
 
       return properties
     })
 
+    const isMacOs = computed(() => {
+      return window.navigator.platform.match('Mac')
+    })
+
+    const openInNewTabHint = computed(() => {
+      return $gettext(
+        'Hold %{key} and click to open in new tab',
+        { key: unref(isMacOs) ? '⌘' : 'ctrl' },
+        true
+      )
+    })
+
     return {
-      componentProps
+      componentProps,
+      openInNewTabHint
     }
   },
   computed: {
@@ -150,6 +169,11 @@ export default defineComponent({
 .action-menu-item {
   vertical-align: middle;
 }
+
+.oc-files-context-action-label {
+  flex-direction: column;
+}
+
 .oc-files-context-action-shortcut {
   justify-content: right !important;
   font-size: var(--oc-font-size-small);

packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue

@@ -85,7 +85,6 @@ export default defineComponent({
     span {
       display: inline-flex;
       font-weight: normal !important;
-      gap: 10px;
       justify-content: flex-start;
       vertical-align: top;
       width: 100%;