From 95cfa19889139bef99442d368ea1e514846e5c41 Mon Sep 17 00:00:00 2001
From: Franziska Bath <franziska.bath@strato.de>
Date: Mon, 16 Sep 2024 19:42:17 +0200
Subject: [PATCH] feat(files): replace NavigationQuota with SidebarQuota

Signed-off-by: Franziska Bath <franziska.bath@strato.de>
---
 apps/files/src/components/NavigationQuota.vue | 176 ------------------
 apps/files/src/views/Navigation.vue           |   6 +-
 2 files changed, 3 insertions(+), 179 deletions(-)
 delete mode 100644 apps/files/src/components/NavigationQuota.vue

diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue
deleted file mode 100644
index 8f96481232d95..0000000000000
--- a/apps/files/src/components/NavigationQuota.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-	<NcAppNavigationItem v-if="storageStats"
-		:aria-label="t('files', 'Storage informations')"
-		:class="{ 'app-navigation-entry__settings-quota--not-unlimited': storageStats.quota >= 0}"
-		:loading="loadingStorageStats"
-		:name="storageStatsTitle"
-		:title="storageStatsTooltip"
-		class="app-navigation-entry__settings-quota"
-		data-cy-files-navigation-settings-quota
-		@click.stop.prevent="debounceUpdateStorageStats">
-		<ChartPie slot="icon" :size="20" />
-
-		<!-- Progress bar -->
-		<NcProgressBar v-if="storageStats.quota >= 0"
-			slot="extra"
-			:error="storageStats.relative > 80"
-			:value="Math.min(storageStats.relative, 100)" />
-	</NcAppNavigationItem>
-</template>
-
-<script>
-import { debounce, throttle } from 'throttle-debounce'
-import { formatFileSize } from '@nextcloud/files'
-import { generateUrl } from '@nextcloud/router'
-import { loadState } from '@nextcloud/initial-state'
-import { showError } from '@nextcloud/dialogs'
-import { subscribe } from '@nextcloud/event-bus'
-import { translate } from '@nextcloud/l10n'
-import axios from '@nextcloud/axios'
-
-import ChartPie from 'vue-material-design-icons/ChartPie.vue'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
-
-import logger from '../logger.js'
-
-export default {
-	name: 'NavigationQuota',
-
-	components: {
-		ChartPie,
-		NcAppNavigationItem,
-		NcProgressBar,
-	},
-
-	data() {
-		return {
-			loadingStorageStats: false,
-			storageStats: loadState('files', 'storageStats', null),
-		}
-	},
-
-	computed: {
-		storageStatsTitle() {
-			const usedQuotaByte = formatFileSize(this.storageStats?.used, false, false)
-			const quotaByte = formatFileSize(this.storageStats?.quota, false, false)
-
-			// If no quota set
-			if (this.storageStats?.quota < 0) {
-				return this.t('files', '{usedQuotaByte} used', { usedQuotaByte })
-			}
-
-			return this.t('files', '{used} of {quota} used', {
-				used: usedQuotaByte,
-				quota: quotaByte,
-			})
-		},
-		storageStatsTooltip() {
-			if (!this.storageStats.relative) {
-				return ''
-			}
-
-			return this.t('files', '{relative}% used', this.storageStats)
-		},
-	},
-
-	beforeMount() {
-		/**
-		 * Update storage stats every minute
-		 * TODO: remove when all views are migrated to Vue
-		 */
-		setInterval(this.throttleUpdateStorageStats, 60 * 1000)
-
-		subscribe('files:node:created', this.throttleUpdateStorageStats)
-		subscribe('files:node:deleted', this.throttleUpdateStorageStats)
-		subscribe('files:node:moved', this.throttleUpdateStorageStats)
-		subscribe('files:node:updated', this.throttleUpdateStorageStats)
-	},
-
-	mounted() {
-		// If the user has a quota set, warn if the available account storage is <=0
-		//
-		// NOTE: This doesn't catch situations where actual *server* 
-		// disk (non-quota) space is low, but those should probably
-		// be handled differently anyway since a regular user can't
-		// can't do much about them (If we did want to indicate server disk 
-		// space matters to users, we'd probably want to use a warning
-		// specific to that situation anyhow. So this covers warning covers 
-		// our primary day-to-day concern (individual account quota usage).
-		//
-		if (this.storageStats?.quota > 0 && this.storageStats?.free <= 0) {
-			this.showStorageFullWarning()
-		}
-	},
-
-	methods: {
-		// From user input
-		debounceUpdateStorageStats: debounce(200, function(event) {
-			this.updateStorageStats(event)
-		}),
-		// From interval or event bus
-		throttleUpdateStorageStats: throttle(1000, function(event) {
-			this.updateStorageStats(event)
-		}),
-
-		/**
-		 * Update the storage stats
-		 * Throttled at max 1 refresh per minute
-		 *
-		 * @param {Event} [event = null] if user interaction
-		 */
-		async updateStorageStats(event = null) {
-			if (this.loadingStorageStats) {
-				return
-			}
-
-			this.loadingStorageStats = true
-			try {
-				const response = await axios.get(generateUrl('/apps/files/api/v1/stats'))
-				if (!response?.data?.data) {
-					throw new Error('Invalid storage stats')
-				}
-
-				// Warn the user if the available account storage changed from > 0 to 0 
-				// (unless only because quota was intentionally set to 0 by admin in the interim)
-				if (this.storageStats?.free > 0 && response.data.data?.free <= 0 && response.data.data?.quota > 0) {
-					this.showStorageFullWarning()
-				}
-
-				this.storageStats = response.data.data
-			} catch (error) {
-				logger.error('Could not refresh storage stats', { error })
-				// Only show to the user if it was manually triggered
-				if (event) {
-					showError(t('files', 'Could not refresh storage stats'))
-				}
-			} finally {
-				this.loadingStorageStats = false
-			}
-		},
-
-		showStorageFullWarning() {
-			showError(this.t('files', 'Your storage is full, files can not be updated or synced anymore!'))
-		},
-
-		t: translate,
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-// User storage stats display
-.app-navigation-entry__settings-quota {
-	// Align title with progress and icon
-	&--not-unlimited::v-deep .app-navigation-entry__name {
-		margin-top: -6px;
-	}
-
-	progress {
-		position: absolute;
-		bottom: 12px;
-		margin-left: 44px;
-		width: calc(100% - 44px - 22px);
-	}
-}
-</style>
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 7df1b70b1a49b..43ce63c315f4b 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -55,7 +55,7 @@
 		<template #footer>
 			<ul class="app-navigation-entry__settings">
 				<!-- User storage usage statistics -->
-				<NavigationQuota />
+				<SidebarQuota />
 
 				<!-- Files settings modal toggle-->
 				<NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
@@ -85,7 +85,7 @@ import IconCog from 'vue-material-design-icons/Cog.vue'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
-import NavigationQuota from '../components/NavigationQuota.vue'
+import SidebarQuota from '../components/SidebarQuota.vue'
 import SettingsModal from './Settings.vue'
 
 import { useNavigation } from '../composables/useNavigation'
@@ -98,11 +98,11 @@ export default defineComponent({
 	components: {
 		IconCog,
 
-		NavigationQuota,
 		NcAppNavigation,
 		NcAppNavigationItem,
 		NcIconSvgWrapper,
 		SettingsModal,
+		SidebarQuota,
 	},
 
 	setup() {