feat: hide update check if server is not available, show update check in admin settings

packages/web-app-admin-settings/src/components/General/InfoSection.vue

@@ -1,17 +1,30 @@
 <template>
   <div>
     <h2 class="py-2" v-text="$gettext('Info')" />
-    <oc-definition-list :items="infoItems" />
+    <dl class="details-list grid grid-cols-[auto_minmax(0,1fr)]">
+      <template v-if="backendEdition">
+        <dt v-text="$gettext('Edition')" />
+        <dt v-text="backendEdition" />
+      </template>
+      <dt class="flex items-start" v-text="$gettext('Version')" />
+      <dd>
+        <div class="flex flex-col">
+          <span v-text="backendVersion" />
+          <version-check />
+        </div>
+      </dd>
+    </dl>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useCapabilityStore } from '@opencloud-eu/web-pkg'
+import { useCapabilityStore, VersionCheck } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'InfoSection',
+  components: { VersionCheck },
   setup() {
     const capabilityStore = useCapabilityStore()
     const { $gettext } = useGettext()
@@ -28,17 +41,10 @@ export default defineComponent({
       backendEdition = backendStatus.edition
     }
 
-    const infoItems = [
-      { term: $gettext('OpenCloud'), definition: backendProductName },
-      ...(backendEdition ? [{ term: $gettext('Edition'), definition: backendEdition }] : []),
-      { term: $gettext('Version'), definition: backendVersion }
-    ]
-
     return {
       backendProductName,
       backendVersion,
-      backendEdition,
-      infoItems
+      backendEdition
     }
   }
 })

packages/web-pkg/src/components/VersionCheck.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="isEnabled">
+    <div v-if="isLoading" class="version-check-loading flex items-center">
+      <span v-text="$gettext('Checking for updates')" />
+      <oc-spinner class="ml-1" size="xsmall" />
+    </div>
+    <template v-else>
+      <div v-if="!updateAvailable" class="version-check-no-updates flex items-center">
+        <span v-text="$gettext('Up to date')" />
+        <oc-icon class="ml-0.5" name="checkbox-circle" size="xsmall" fill-type="line" />
+      </div>
+      <oc-button
+        v-else
+        class="version-check-update text-role-on-surface-variant"
+        size="small"
+        type="router-link"
+        :href="updateData.url"
+        target="_blank"
+        gap-size="small"
+        appearance="raw"
+        no-hover
+      >
+        <span
+          class="text-xs"
+          v-text="$gettext('Version %{version} available', { version: updateData.current_version })"
+        />
+        <oc-icon name="refresh" size="xsmall" fill-type="line" />
+      </oc-button>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, unref, computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
+import { useCapabilityStore, useUpdatesStore } from '../composables'
+import { UpdateChannel } from '../types'
+import { compareVersions } from '../utils'
+
+const { $gettext } = useGettext()
+const capabilityStore = useCapabilityStore()
+const updatesStore = useUpdatesStore()
+
+const checkForUpdates = capabilityStore.capabilities.core['check-for-updates']
+const { updates, isLoading, hasError } = storeToRefs(updatesStore)
+
+const isEnabled = computed(() => {
+  return checkForUpdates && !unref(hasError)
+})
+
+const updateAvailable = ref(false)
+const updateData = ref<UpdateChannel>()
+
+const serverEdition = capabilityStore.status.edition || 'rolling'
+const currentServerVersion = capabilityStore.status.productversion
+const currentServerVersionSanitized = currentServerVersion.split('+')[0]
+
+watch(
+  () => updates,
+  () => {
+    if (!unref(updates)) {
+      return
+    }
+    const newestVersion = unref(updates).channels[serverEdition].current_version
+    if (compareVersions(newestVersion, currentServerVersionSanitized) > 0) {
+      updateAvailable.value = true
+      updateData.value = unref(updates).channels[serverEdition]
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>

packages/web-pkg/src/components/index.ts

@@ -27,3 +27,4 @@ export { default as ViewOptions } from './ViewOptions.vue'
 export { default as PortalTarget } from './PortalTarget.vue'
 export { default as CreateShortcutModal } from './CreateShortcutModal.vue'
 export { default as CreateLinkModal } from './CreateLinkModal.vue'
+export { default as VersionCheck } from './VersionCheck.vue'

packages/web-runtime/tests/unit/components/VersionCheck.spec.ts → packages/web-pkg/tests/unit/components/VersionCheck.spec.ts

@@ -1,6 +1,6 @@
-import VersionCheck from '../../../src/components/VersionCheck.vue'
 import { defaultComponentMocks, defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
 import { nextTick } from 'vue'
+import { VersionCheck } from '../../../src'
 
 describe('VersionCheck component', () => {
   it('shows loading spinner while loading', async () => {
@@ -45,7 +45,9 @@ function getWrapper({
         plugins: [
           ...defaultPlugins({
             piniaOptions: {
-              capabilityState: { capabilities: { core: { status: { productversion } } } },
+              capabilityState: {
+                capabilities: { core: { status: { productversion }, 'check-for-updates': true } }
+              },
               updatesState: {
                 isLoading,
                 hasError,

packages/web-runtime/src/components/MobileNav.vue

@@ -40,7 +40,7 @@
         class="versions flex flex-col items-center justify-center py-2 mt-4 bg-role-surface-container text-xs text-role-on-surface-variant"
       >
         <div v-text="backendVersion" />
-        <version-check v-if="checkForUpdates" />
+        <version-check />
       </div>
     </oc-drop>
   </nav>
@@ -49,9 +49,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, unref } from 'vue'
 import { NavItem } from '../helpers/navItems'
-import VersionCheck from './VersionCheck.vue'
+import { VersionCheck, useCapabilityStore } from '@opencloud-eu/web-pkg'
 import { getBackendVersion } from '../container/versions'
-import { useCapabilityStore } from '@opencloud-eu/web-pkg/src'
 
 export default defineComponent({
   name: 'MobileNav',
@@ -65,14 +64,12 @@ export default defineComponent({
   setup(props) {
     const capabilityStore = useCapabilityStore()
 
-    const checkForUpdates = capabilityStore.capabilities.core['check-for-updates']
-
     const backendVersion = computed(() => getBackendVersion({ capabilityStore }))
     const activeNavItem = computed(() => {
       return unref(props.navItems).find((n) => n.active) || props.navItems[0]
     })
 
-    return { activeNavItem, checkForUpdates, backendVersion }
+    return { activeNavItem, backendVersion }
   }
 })
 </script>

packages/web-runtime/src/components/SidebarNav/SidebarNav.vue

@@ -55,7 +55,7 @@
         class="versions flex flex-col justify-end items-start grow pb-4 pl-4 text-xs text-role-on-surface-variant"
       >
         <span v-text="backendVersion" />
-        <version-check v-if="checkForUpdates" />
+        <version-check />
       </div>
     </slot>
   </div>
@@ -77,8 +77,7 @@ import { v4 as uuidV4 } from 'uuid'
 import SidebarNavItem from './SidebarNavItem.vue'
 import { NavItem } from '../../helpers/navItems'
 import { getBackendVersion } from '../../container/versions'
-import { useCapabilityStore } from '@opencloud-eu/web-pkg'
-import VersionCheck from '../VersionCheck.vue'
+import { useCapabilityStore, VersionCheck } from '@opencloud-eu/web-pkg'
 
 type NavItemRef = InstanceType<typeof SidebarNavItem>
 
@@ -100,7 +99,6 @@ export default defineComponent({
     const navItemRefs = ref<Record<string, NavItemRef>>({})
     const highlighterAttrs = ref<Record<string, unknown>>({})
     const capabilityStore = useCapabilityStore()
-    const checkForUpdates = capabilityStore.capabilities.core['check-for-updates']
 
     const backendVersion = computed(() => getBackendVersion({ capabilityStore }))
 
@@ -150,7 +148,7 @@ export default defineComponent({
       { deep: true, immediate: true }
     )
 
-    return { highlighterAttrs, navItemRefs, backendVersion, checkForUpdates }
+    return { highlighterAttrs, navItemRefs, backendVersion }
   },
   computed: {
     toggleSidebarButtonIcon() {

packages/web-runtime/tests/unit/components/MobileNav.spec.ts

@@ -37,7 +37,10 @@ function getWrapper() {
       },
       global: {
         plugins: [...defaultPlugins()],
-        mocks
+        mocks,
+        stubs: {
+          VersionCheck: true
+        }
       }
     })
   }

packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.ts

@@ -44,16 +44,6 @@ describe('OcSidebarNav', () => {
       }
     })
   })
-  describe('VersionCheck component', () => {
-    it('renders when capability "check-for-updates" is true', () => {
-      const { wrapper } = getWrapper({ closed: false, checkForUpdates: true })
-      expect(wrapper.findComponent({ name: 'version-check' }).exists()).toBeTruthy()
-    })
-    it('does not render when capability "check-for-updates" is false', () => {
-      const { wrapper } = getWrapper({ closed: false, checkForUpdates: false })
-      expect(wrapper.findComponent({ name: 'version-check' }).exists()).toBeFalsy()
-    })
-  })
 })
 
 function getWrapper({ closed = false, checkForUpdates = true, slots = {} } = {}) {
@@ -74,7 +64,6 @@ function getWrapper({ closed = false, checkForUpdates = true, slots = {} } = {})
               capabilityState: {
                 capabilities: {
                   core: {
-                    'check-for-updates': checkForUpdates,
                     status: { productversion: '3.5.0' }
                   }
                 }

packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap

@@ -22,7 +22,7 @@ exports[`OcSidebarNav > renders navItems into a list 1`] = `
     </ul>
   </nav> <!-- @slot bottom content of the sidebar -->
   <div class="versions flex flex-col justify-end items-start grow pb-4 pl-4 text-xs text-role-on-surface-variant"><span></span>
-    <div class="version-check-loading flex items-center"><span>Checking for updates</span> <span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin after:content-[''] after:border-b-transparent size-2 ml-1" aria-hidden="true" tabindex="-1"></span></div>
+    <!--v-if-->
   </div>
 </div>"
 `;