fix(capabilities): conditionally show links to calendar

lib/TInitialState.php

@@ -93,6 +93,11 @@ protected function publishInitialStateForUser(IUser $user, IRootFolder $rootFold
 			!$this->talkConfig->isNotAllowedToCreateConversations($user)
 		);
 
+		$this->initialState->provideInitialState(
+			'calendar_enabled',
+			$appManager->isEnabledForUser('calendar', $user)
+		);
+
 		$this->initialState->provideInitialState(
 			'circles_enabled',
 			$appManager->isEnabledForUser('circles', $user)

src/components/CalendarEventsDialog.vue

@@ -7,6 +7,7 @@
 import type { Conversation, Participant } from '../types/index.ts'
 
 import { showSuccess } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
 import { n, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
@@ -27,7 +28,6 @@ import IconAccountSearch from 'vue-material-design-icons/AccountSearch.vue'
 import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconReload from 'vue-material-design-icons/Reload.vue'
 import SelectableParticipant from './BreakoutRoomsEditor/SelectableParticipant.vue'
 import CalendarEventSmall from './UIShared/CalendarEventSmall.vue'
 import ContactSelectionBubble from './UIShared/ContactSelectionBubble.vue'
@@ -40,6 +40,8 @@ import { useGroupwareStore } from '../stores/groupware.ts'
 import { convertToUnix } from '../utils/formattedTime.ts'
 import { getDisplayNameWithFallback } from '../utils/getDisplayName.ts'
 
+const isCalendarEnabled = loadState('spreed', 'calendar_enabled', true)
+
 const props = defineProps<{
 	token: string
 	container?: string
@@ -72,8 +74,9 @@ const upcomingEvents = computed(() => {
 				? (event.start <= now) ? t('spreed', 'Now') : moment(event.start * 1000).calendar()
 				: ''
 			const color = calendars.value[event.calendarUri]?.color ?? usernameToColor(event.calendarUri).color
+			const href = isCalendarEnabled ? (event.calendarAppUrl ?? undefined) : undefined
 
-			return { ...event, start, color, href: event.calendarAppUrl ?? undefined }
+			return { ...event, start, color, href }
 		})
 })
 

src/components/ConversationSettings/BasicInfo.vue

@@ -6,7 +6,7 @@
 <template>
 	<Fragment>
 		<!-- eslint-disable-next-line vue/no-v-html -->
-		<p v-if="canFullModerate && isEventConversation" class="app-settings-section__hint" v-html="calendarHint" />
+		<p v-if="isCalendarEnabled && canFullModerate && isEventConversation" class="app-settings-section__hint" v-html="calendarHint" />
 		<h4 class="app-settings-section__subtitle">
 			{{ t('spreed', 'Name') }}
 		</h4>
@@ -47,6 +47,7 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { Fragment } from 'vue-frag'
@@ -55,6 +56,7 @@ import ConversationAvatarEditor from './ConversationAvatarEditor.vue'
 import { CONVERSATION } from '../../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 
+const isCalendarEnabled = loadState('spreed', 'calendar_enabled', true)
 const supportsAvatar = hasTalkFeature('local', 'avatar')
 const maxDescriptionLength = getTalkConfig('local', 'conversations', 'description-length') || 500
 
@@ -81,6 +83,7 @@ export default {
 
 	setup() {
 		return {
+			isCalendarEnabled,
 			supportsAvatar,
 			CONVERSATION,
 			maxDescriptionLength,

src/components/Dashboard/EventCard.vue

@@ -7,6 +7,7 @@
 
 import type { DashboardEventRoom } from '../../types/index.ts'
 
+import { loadState } from '@nextcloud/initial-state'
 import { getCanonicalLocale, getLanguage, n, t } from '@nextcloud/l10n'
 import { imagePath } from '@nextcloud/router'
 import usernameToColor from '@nextcloud/vue/functions/usernameToColor'
@@ -25,6 +26,8 @@ import { useStore } from '../../composables/useStore.js'
 import { CONVERSATION } from '../../constants.ts'
 import { formattedTime, ONE_DAY_IN_MS } from '../../utils/formattedTime.ts'
 
+const isCalendarEnabled = loadState('spreed', 'calendar_enabled', true)
+
 const props = defineProps<{
 	eventRoom: DashboardEventRoom
 }>()
@@ -213,7 +216,8 @@ function handleJoin({ call = false } = {}) {
 				</template>
 				{{ t('spreed', 'View conversation') }}
 			</NcButton>
-			<NcButton type="tertiary"
+			<NcButton v-if="isCalendarEnabled"
+				type="tertiary"
 				:href="props.eventRoom.eventLink"
 				target="_blank"
 				:title="t('spreed', 'View event on Calendar')"

src/components/Dashboard/TalkDashboard.vue

@@ -5,6 +5,7 @@
 <script lang="ts" setup>
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import { isRTL, t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -41,6 +42,7 @@ const canModerateSipDialOut = hasTalkFeature('local', 'sip-support-dialout')
 	&& getTalkConfig('local', 'call', 'sip-dialout-enabled')
 	&& getTalkConfig('local', 'call', 'can-enable-sip')
 const canStartConversations = getTalkConfig('local', 'conversations', 'can-create')
+const isCalendarEnabled = loadState('spreed', 'calendar_enabled', true)
 const isDirectionRTL = isRTL()
 
 const store = useStore()
@@ -267,7 +269,8 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 			<span class="secondary_text">
 				{{ t('spreed', 'Schedule a meeting with a colleague from your calendar') }}
 			</span>
-			<NcButton class="talk-dashboard__calendar-button"
+			<NcButton v-if="isCalendarEnabled"
+				class="talk-dashboard__calendar-button"
 				type="secondary"
 				:href="generateUrl('apps/calendar')"
 				target="_blank">

src/components/RightSidebar/RightSidebarContent.vue

@@ -10,6 +10,7 @@ import type {
 	UserProfileData,
 } from '../../types/index.ts'
 
+import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
@@ -38,10 +39,12 @@ type MutualEvent = {
 	uri: DashboardEvent['eventLink']
 	name: DashboardEvent['eventName']
 	start: string
-	href: DashboardEvent['eventLink']
+	href?: DashboardEvent['eventLink']
 	color: string
 }
 
+const isCalendarEnabled = loadState('spreed', 'calendar_enabled', true)
+
 const props = defineProps<{
 	isUser: boolean
 	state: 'default' | 'search'
@@ -135,7 +138,7 @@ const mutualEventsInformation = computed<MutualEvent[]>(() => {
 			uri: event.eventLink,
 			name: event.eventName,
 			start,
-			href: event.eventLink,
+			href: isCalendarEnabled ? event.eventLink : undefined,
 			color: event.calendars[0]?.calendarColor ?? 'var(--color-primary)',
 		}
 	})

src/components/UIShared/CalendarEventSmall.vue

@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
 import IconReload from 'vue-material-design-icons/Reload.vue'
 
 const props = defineProps<{
@@ -14,16 +15,31 @@ const props = defineProps<{
 	isRecurring?: boolean
 	href?: string
 }>()
+
+const event = computed(() => {
+	if (props.href) {
+		return {
+			component: 'a',
+			attrs: {
+				href: props.href,
+				title: t('spreed', 'Open Calendar'),
+				tabindex: 0,
+				target: '_blank',
+			},
+		}
+	}
+
+	return {
+		component: 'span',
+	}
+})
 </script>
 
 <template>
 	<li class="calendar-event">
-		<a class="calendar-event__item"
-			:class="{ 'calendar-event__item--thumb': !href }"
-			:href="href"
-			:title="t('spreed', 'Open Calendar')"
-			:tabindex="0"
-			target="_blank">
+		<component :is="event.component"
+			class="calendar-event__item"
+			v-bind="event.attrs">
 			<span class="calendar-event__badge" :style="{ backgroundColor: color }" />
 			<span class="calendar-event__content">
 				<span class="calendar-event__header">
@@ -32,7 +48,7 @@ const props = defineProps<{
 				</span>
 				<span>{{ start }}</span>
 			</span>
-		</a>
+		</component>
 	</li>
 </template>
 
@@ -46,14 +62,10 @@ const props = defineProps<{
 		padding-inline: var(--default-grid-baseline);
 		height: 100%;
 		border-radius: var(--border-radius);
+	}
 
-		&--thumb {
-			cursor: default;
-		}
-
-		&:hover {
-			background-color: var(--color-background-hover);
-		}
+	a.calendar-event__item:hover {
+		background-color: var(--color-background-hover);
 	}
 
 	&__badge {