Merge pull request #63838 from nextcloud/feat/unified-search-connected-services-settings

feat(core): link to connected services settings from unified search

Author: pringelmann

core/src/components/UnifiedSearch/ConnectedServicesBar.vue

@@ -0,0 +1,57 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { computed } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
+
+const props = defineProps<{
+	active: boolean
+}>()
+
+const emit = defineEmits<{
+	toggle: []
+}>()
+
+const label = computed(() => (props.active
+	? t('core', 'Less from connected services')
+	: t('core', 'More from connected services')))
+
+const settingsUrl = generateUrl('/settings/user/connected-accounts')
+const settingsLabel = t('core', 'Connected services settings')
+</script>
+
+<template>
+	<div class="connected-services-bar">
+		<NcButton
+			variant="secondary"
+			wide
+			@click="emit('toggle')">
+			{{ label }}
+		</NcButton>
+		<NcButton
+			variant="secondary"
+			:aria-label="settingsLabel"
+			:href="settingsUrl"
+			:title="settingsLabel"
+			target="_blank">
+			<template #icon>
+				<IconCogOutline :size="20" />
+			</template>
+		</NcButton>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.connected-services-bar {
+	display: flex;
+	gap: var(--default-grid-baseline);
+	width: 100%;
+	margin-block-start: calc(var(--default-grid-baseline) * 3);
+}
+</style>

core/src/components/UnifiedSearch/UnifiedSearchModal.vue

@@ -147,11 +147,10 @@
 						</template>
 					</NcEmptyContent>
 					<!-- Offered even with zero results, so the user can reach external providers. -->
-					<div v-if="showConnectedServicesButton" class="unified-search-modal__connected-services">
-						<NcButton variant="secondary" wide @click="toggleExternalResources">
-							{{ connectedServicesLabel }}
-						</NcButton>
-					</div>
+					<ConnectedServicesBar
+						v-if="showConnectedServicesButton"
+						:active="searchExternalResources"
+						@toggle="toggleExternalResources" />
 				</div>
 
 				<div
@@ -237,11 +236,10 @@
 					<!-- Last, so results that land are never pushed down. -->
 					<SearchResultSkeleton v-if="skeletonRows > 0" :rows="skeletonRows" />
 					<!-- Connected-services opt-in. Toggling re-runs find() (searchExternalResources watcher). Hidden in detail view. -->
-					<div v-if="showConnectedServicesButton" class="unified-search-modal__connected-services">
-						<NcButton variant="secondary" wide @click="toggleExternalResources">
-							{{ connectedServicesLabel }}
-						</NcButton>
-					</div>
+					<ConnectedServicesBar
+						v-if="showConnectedServicesButton"
+						:active="searchExternalResources"
+						@toggle="toggleExternalResources" />
 				</div>
 			</div>
 			<!-- `modal-mask` is how @nextcloud/vue's useHotKey guard recognises an open modal and
@@ -279,6 +277,7 @@ import IconClose from 'vue-material-design-icons/Close.vue'
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 import IconShapeOutline from 'vue-material-design-icons/ShapeOutline.vue'
+import ConnectedServicesBar from './ConnectedServicesBar.vue'
 import CustomDateRangeModal from './CustomDateRangeModal.vue'
 import SearchableList from './SearchableList.vue'
 import FilterChip from './SearchFilterChip.vue'
@@ -324,6 +323,7 @@ export default defineComponent({
 		IconMagnify,
 		IconShapeOutline,
 
+		ConnectedServicesBar,
 		CustomDateRangeModal,
 		FilterChip,
 		NcActions,
@@ -663,12 +663,6 @@ export default defineComponent({
 				&& !this.isBusy
 		},
 
-		connectedServicesLabel() {
-			return this.searchExternalResources
-				? t('core', 'Less from connected services')
-				: t('core', 'More from connected services')
-		},
-
 		// The rendered rows flattened into a single list in visual order (filtered
 		// groups first, then the partial-matches groups), each with the DOM id of its
 		// option element. This is the index space the arrow keys walk; it must stay in
@@ -1785,16 +1779,6 @@ export default defineComponent({
 		justify-content: center;
 	}
 
-	// End-of-list (and empty-state) connected-services opt-in.
-	&__connected-services {
-		display: flex;
-		flex-wrap: wrap;
-		// Stretch to panel width so the wide button fills it (the empty-state's centred column
-		// would otherwise shrink it to content width).
-		width: 100%;
-		margin-block-start: calc(var(--default-grid-baseline) * 3);
-	}
-
 	// Directional glyphs (back arrow, more-from chevron) point the other way in RTL.
 	// :dir(rtl) tracks the computed direction, unlike an [dir=rtl] attribute selector.
 	&__rtl-icon:dir(rtl) {

core/src/tests/components/ConnectedServicesBar.spec.ts

@@ -0,0 +1,50 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: (_app: string, text: string) => text,
+}))
+vi.mock('@nextcloud/router', () => ({
+	generateUrl: (path: string) => path,
+}))
+
+import ConnectedServicesBar from '../../components/UnifiedSearch/ConnectedServicesBar.vue'
+
+function factory(active = false) {
+	return mount(ConnectedServicesBar, { propsData: { active } })
+}
+
+describe('ConnectedServicesBar', () => {
+	// Matched by label, not position, so it still finds the toggle if the gear ever
+	// stops rendering as an <a>.
+	const toggle = (wrapper: ReturnType<typeof factory>) => wrapper.findAll('button').wrappers
+		.find((button) => button.text().includes('connected services'))!
+
+	it('offers to opt in while connected services are off', () => {
+		expect(factory().text()).toContain('More from connected services')
+	})
+
+	it('offers to opt back out once they are on', () => {
+		expect(factory(true).text()).toContain('Less from connected services')
+	})
+
+	it('asks the parent to flip the opt-in', async () => {
+		const wrapper = factory()
+
+		await toggle(wrapper).trigger('click')
+
+		expect(wrapper.emitted('toggle')).toHaveLength(1)
+	})
+
+	it('links to the connected accounts settings in a new tab', () => {
+		const link = factory().find('a')
+
+		expect(link.attributes('href')).toBe('/settings/user/connected-accounts')
+		expect(link.attributes('target')).toBe('_blank')
+		expect(link.attributes('aria-label')).toBe('Connected services settings')
+	})
+})

core/src/tests/components/UnifiedSearchModal.spec.ts

@@ -43,6 +43,7 @@ vi.mock('../../logger.js', () => ({
 	unifiedSearchLogger: { debug: vi.fn(), error: vi.fn() },
 }))
 
+import ConnectedServicesBar from '../../components/UnifiedSearch/ConnectedServicesBar.vue'
 import UnifiedSearchModal from '../../components/UnifiedSearch/UnifiedSearchModal.vue'
 import { isCategoryVisible } from '../../services/UnifiedSearchController.ts'
 
@@ -1047,7 +1048,7 @@ describe('UnifiedSearchModal result presentation', () => {
 		expect(wrapper.vm.detailCategory).toBeNull()
 	})
 
-	it('labels the connected-services button by the toggle state and re-runs find on toggle', async () => {
+	it('offers the connected-services opt-in and re-runs find when it is flipped', async () => {
 		const wrapper = factory()
 		wrapper.vm.providers = [
 			{ id: 'files', name: 'Files', order: 0 },
@@ -1061,13 +1062,14 @@ describe('UnifiedSearchModal result presentation', () => {
 		wrapper.vm.find('query')
 		await wrapper.vm.$nextTick()
 
-		expect(buttonWithText(wrapper, 'More from connected services')).toBeTruthy()
+		const bar = wrapper.findComponent(ConnectedServicesBar)
+		expect(bar.props('active')).toBe(false)
 
-		wrapper.vm.toggleExternalResources()
+		bar.vm.$emit('toggle')
 		await wrapper.vm.$nextTick()
 
 		expect(searchSpy).toHaveBeenCalled()
-		expect(buttonWithText(wrapper, 'Less from connected services')).toBeTruthy()
+		expect(bar.props('active')).toBe(true)
 	})
 
 	it('returns focus to the search input after toggling connected services', async () => {
@@ -1105,7 +1107,7 @@ describe('UnifiedSearchModal result presentation', () => {
 		await wrapper.vm.$nextTick()
 
 		expect(wrapper.vm.showEmptyContentInfo).toBe(true)
-		expect(buttonWithText(wrapper, 'connected services')).toBeTruthy()
+		expect(wrapper.findComponent(ConnectedServicesBar).exists()).toBe(true)
 	})
 
 	it('no longer renders the connected-services switch in the filter row', async () => {