Hide search bar in public link context

changelog/unreleased/bugfix-hide-search-bar-in-public-links

@@ -0,0 +1,6 @@
+Bugfix: Hide search bar in public link context
+
+The search bar in a public link context has been hidden because it requires authentication.
+
+https://github.com/owncloud/web/issues/7603
+https://github.com/owncloud/web/pull/7849

packages/web-app-search/src/portals/SearchBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="availableProviders.length"
+    v-if="isSearchBarEnabled"
     id="files-global-search"
     ref="searchBar"
     class="oc-flex"
@@ -99,11 +99,18 @@ import { providerStore } from '../service'
 import { createLocationCommon } from 'web-app-files/src/router'
 import Mark from 'mark.js'
 import debounce from 'lodash-es/debounce'
+import { useStore, useUserContext } from 'web-pkg/src/composables'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
   name: 'SearchBar',
+  setup() {
+   const store = useStore()
+    return {
+      isUserContext: useUserContext({ store })
+    }
+  },
 
   data() {
     return {
@@ -127,6 +134,9 @@ export default defineComponent({
     availableProviders() {
       return this.providerStore.availableProviders
     },
+    isSearchBarEnabled() {
+      return this.availableProviders.length && this.isUserContext
+    },
     displayProviders() {
       /**
        * Computed to filter and sort providers that will be displayed
@@ -191,11 +201,15 @@ export default defineComponent({
   },
 
   mounted() {
-    this.resizeObserver.observe(this.$refs.searchBar)
+    if (this.isSearchBarEnabled) {
+      this.resizeObserver.observe(this.$refs.searchBar)
+    }
   },
 
   beforeDestroy() {
-    this.resizeObserver.unobserve(this.$refs.searchBar)
+    if (this.isSearchBarEnabled) {
+      this.resizeObserver.unobserve(this.$refs.searchBar)
+    }
   },
 
   methods: {

packages/web-app-search/tests/unit/portals/SearchBar.spec.ts

@@ -4,10 +4,15 @@ import SearchBar from '../../../src/portals/SearchBar.vue'
 import AsyncComputed from 'vue-async-computed'
 import { createLocationCommon } from 'web-app-files/src/router'
 import flushPromises from 'flush-promises'
+import { createStore } from 'vuex-extensions'
+import Vuex from 'vuex'
+import CompositionAPI from '@vue/composition-api'
 
 const localVue = createLocalVue()
 localVue.use(DesignSystem)
 localVue.use(AsyncComputed)
+localVue.use(Vuex)
+localVue.use(CompositionAPI)
 
 let wrapper: Wrapper<any>
 
@@ -87,10 +92,14 @@ afterEach(() => {
 })
 
 describe('Search Bar portal component', () => {
-  test('does not render a search field if not all requirements are fulfilled', () => {
+  test('does not render a search field if no availableProviders given', () => {
     wrapper = getMountedWrapper({ data: { providerStore: { availableProviders: [] } } })
     expect(wrapper.element.innerHTML).toBeFalsy()
   })
+  test('does not render a search field if no user given', () => {
+    wrapper = getMountedWrapper({ isUserContextReady: false })
+    expect(wrapper.element.innerHTML).toBeFalsy()
+  })
   test('updates the search term on input', () => {
     wrapper = getMountedWrapper()
     wrapper.find(selectors.searchInput).setValue('alice')
@@ -236,7 +245,7 @@ describe('Search Bar portal component', () => {
   })
 })
 
-function getMountedWrapper({ data = {}, mocks = {} } = {}) {
+function getMountedWrapper({ data = {}, mocks = {}, isUserContextReady = true } = {}) {
   return mount(SearchBar, {
     localVue,
     attachTo: document.body,
@@ -262,6 +271,21 @@ function getMountedWrapper({ data = {}, mocks = {} } = {}) {
     },
     stubs: {
       'router-link': true
-    }
+    },
+    store: createStore(Vuex.Store, {
+      modules: {
+        runtime: {
+          namespaced: true,
+          modules: {
+            auth: {
+              namespaced: true,
+              getters: {
+                isUserContextReady: () => isUserContextReady
+              }
+            }
+          }
+        }
+      }
+    })
   })
 }