Remove caret and enhance no options text (#10138)

owncloud · Dec 13, 2023 · 213f6e3 · 213f6e3
1 parent 0d3b306
commit 213f6e3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/changelog/unreleased/enhancement-manage-tags-in-details-panel b/changelog/unreleased/enhancement-manage-tags-in-details-panel
@@ -5,4 +5,7 @@ That change makes it easier for the user to manage tags, as they don't need to c
 context menu action.
 
 https://github.com/owncloud/web/pull/9905
+https://github.com/owncloud/web/pull/10138
 https://github.com/owncloud/web/issues/9783
+https://github.com/owncloud/web/issues/10115
+https://github.com/owncloud/web/issues/10114
diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -1,5 +1,6 @@
 <template>
   <oc-select
+    class="tags-select"
     ref="tagSelect"
     v-model="selectedTags"
     :multiple="true"
@@ -10,11 +11,10 @@
     :create-option="createOption"
     :selectable="isOptionSelectable"
     :map-keydown="keydownMethods"
-    data-test-id="tags-select"
     @update:model-value="save"
   >
     <template #selected-option-container="{ option, deselect }">
-      <oc-tag class="tags-control-tag oc-ml-xs" :rounded="true" size="small">
+      <oc-tag class="tags-select-tag oc-ml-xs" :rounded="true" size="small">
         <component
           :is="type"
           v-bind="getAdditionalAttributes(option.label)"
@@ -44,14 +44,17 @@
     <template #option="{ label, error }">
       <div class="oc-flex test">
         <span class="oc-flex oc-flex-center">
-          <oc-tag class="tags-control-tag oc-ml-xs" :rounded="true" size="small">
+          <oc-tag class="tags-select-tag oc-ml-xs" :rounded="true" size="small">
             <oc-icon name="price-tag-3" size="small" />
             <span class="oc-text-truncate">{{ label }}</span>
           </oc-tag>
         </span>
       </div>
       <div v-if="error" class="oc-text-input-danger">{{ error }}</div>
     </template>
+    <template #no-options
+      ><span class="oc-text-small oc-text-muted" v-text="$gettext('Enter text to create a Tag')" />
+    </template>
   </oc-select>
 </template>
 
@@ -293,15 +296,19 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="scss">
-.oc-tag {
-  height: 1.5rem;
-}
+<style lang="scss">
+.tags-select {
+  .vs__actions {
+    display: none !important;
+  }
 
-.tags-control-tag {
-  &-link {
-    color: var(--oc-color-swatch-passive-default);
-    pointer-events: visible;
+  &-tag {
+    height: 1.5rem;
+
+    &-link {
+      color: var(--oc-color-swatch-passive-default);
+      pointer-events: visible;
+    }
   }
 }
 </style>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/TagsSelect.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/TagsSelect.spec.ts
@@ -20,7 +20,7 @@ describe('Tag Select', () => {
   it('show tags input form if loaded successfully', () => {
     const resource = mockDeep<Resource>({ tags: [] })
     const { wrapper } = createWrapper(resource)
-    expect(wrapper.find('[data-test-id="tags-select"]').exists()).toBeTruthy()
+    expect(wrapper.find('.tags-select').exists()).toBeTruthy()
   })
 
   it('all available tags are selectable', async () => {

diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -78,7 +78,7 @@ const tagTableCell =
 const tagInFilesTable = '//*[contains(@class, "oc-tag")]//span[text()="%s"]//ancestor::a'
 const tagInDetailsPanel = '//*[@data-testid="tags"]/td//span[text()="%s"]'
 const tagInInputForm =
-  '//span[contains(@class, "tags-control-tag")]//span[text()="%s"]//ancestor::span//button[contains(@class, "vs__deselect")]'
+  '//span[contains(@class, "tags-select-tag")]//span[text()="%s"]//ancestor::span//button[contains(@class, "vs__deselect")]'
 const tagFormInput = '//*[@data-testid="tags"]//input'
 const resourcesAsTiles = '#files-view .oc-tiles'
 const fileVersionSidebar = '#oc-file-versions-sidebar'