Don't make it breaking

owncloud · Sep 19, 2024 · 435fcc9 · 435fcc9
1 parent 9befe93
commit 435fcc9
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 57 deletions.
diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -1,45 +1,53 @@
 <template>
-  <section class="files-embed-actions">
-    <oc-text-input
-      v-if="chooseFileName"
-      v-model="fileName"
-      :selection-range="fileNameInputSelectionRange"
-      :label="$gettext('File name')"
-    />
-    <oc-button
-      data-testid="button-cancel"
-      appearance="raw-inverse"
-      variation="brand"
-      @click="emitCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      v-if="!isLocationPicker && !isFilePicker"
-      key="btn-share"
-      data-testid="button-share"
-      variation="inverse"
-      appearance="filled"
-      :disabled="
-        areSelectActionsDisabled || !createLinkAction.isVisible({ resources: selectedFiles, space })
-      "
-      @click="createLinkAction.handler({ resources: selectedFiles, space })"
-      >{{ $gettext('Share link(s)') }}
-    </oc-button>
-    <oc-button
-      v-if="!isFilePicker"
-      data-testid="button-select"
-      variation="inverse"
-      appearance="filled"
-      :disabled="areSelectActionsDisabled"
-      @click="emitSelect"
-      >{{ selectLabel }}
-    </oc-button>
+  <section class="files-embed-actions oc-width-1-1 oc-flex oc-flex-between oc-my-s">
+    <div class="oc-flex">
+      <oc-text-input
+        class="files-embed-actions-file-name oc-flex oc-flex-row oc-flex-middle oc-gap-s"
+        v-if="chooseFileName"
+        v-model="fileName"
+        :selection-range="fileNameInputSelectionRange"
+        :label="$gettext('File name')"
+      />
+    </div>
+    <div class="files-embed-actions-buttons oc-flex oc-flex-middle">
+      <oc-button
+        class="oc-mr-s"
+        data-testid="button-cancel"
+        appearance="raw-inverse"
+        variation="brand"
+        @click="emitCancel"
+        >{{ $gettext('Cancel') }}
+      </oc-button>
+      <oc-button
+        v-if="!isLocationPicker && !isFilePicker"
+        key="btn-share"
+        data-testid="button-share"
+        variation="inverse"
+        appearance="filled"
+        :disabled="
+          areSelectActionsDisabled ||
+          !createLinkAction.isVisible({ resources: selectedFiles, space })
+        "
+        @click="createLinkAction.handler({ resources: selectedFiles, space })"
+        >{{ $gettext('Share link(s)') }}
+      </oc-button>
+      <oc-button
+        v-if="!isFilePicker"
+        data-testid="button-select"
+        variation="inverse"
+        appearance="filled"
+        :disabled="areSelectActionsDisabled"
+        @click="emitSelect"
+        >{{ selectLabel }}
+      </oc-button>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref, unref } from 'vue'
 import {
+  embedModeLocationPickFileNameMessageData,
   embedModeLocationPickMessageData,
   FileAction,
   useAbility,
@@ -93,10 +101,18 @@ export default defineComponent({
     })
 
     const emitSelect = (): void => {
-      postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
-        resources: JSON.parse(JSON.stringify(selectedFiles.value)),
-        ...(unref(fileName) && { fileName: unref(fileName) })
-      })
+      if (unref(chooseFileName)) {
+        postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
+          resources: JSON.parse(JSON.stringify(selectedFiles.value)),
+          fileName: unref(fileName)
+        })
+      }
+
+      // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
+      postMessage<Resource[]>(
+        'owncloud-embed:select',
+        JSON.parse(JSON.stringify(selectedFiles.value))
+      )
     }
 
     const emitCancel = (): void => {
@@ -123,17 +139,16 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .files-embed-actions {
-  color: var(--oc-color-swatch-brand-contrast);
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--oc-space-medium);
-  justify-content: flex-end;
-  padding: var(--oc-space-medium) 0;
-  padding-right: var(--oc-space-small);
-  width: 100%;
+  color: var(--oc-color-text-inverse);
+
+  &-file-name {
+    gap: var(--oc-space-small) !important;
+  }
+
+  &-buttons {
+    margin-left: auto;
+  }
 }
 </style>
diff --git a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
@@ -41,9 +41,7 @@ describe('EmbedActions', () => {
 
       await wrapper.find(selectors.btnSelect).trigger('click')
 
-      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
-        resources: [{ id: '1' }]
-      })
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
     })
 
     it('should enable select action when embedTarget is set to location', () => {
@@ -60,9 +58,7 @@ describe('EmbedActions', () => {
 
       await wrapper.find(selectors.btnSelect).trigger('click')
 
-      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
-        resources: [{ id: '1' }]
-      })
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
     })
   })
 
@@ -139,7 +135,6 @@ function getWrapper(
       isLocationPicker: ref(isLocationPicker),
       isFilePicker: ref(isFilePicker),
       chooseFileName: ref(false),
-      chooseFileNameSuggestion: ref(''),
       postMessage: postMessageMock
     })
   )