Add refresh button in files tab behind feature flag (#5431)

apps/frontend/src/composables/featureFlags.ts

@@ -32,6 +32,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	projectBackground: false,
 	searchBackground: false,
 	advancedDebugInfo: false,
+	FilesRefreshButton: false,
 	showProjectPageDownloadModalServersPromo: false,
 	showProjectPageCreateServersTooltip: true,
 	showProjectPageQuickServerButton: false,

apps/frontend/src/pages/hosting/manage/[id]/files.vue

@@ -10,5 +10,8 @@ useHead({
 </script>
 
 <template>
-	<ServersManageFilesPage :show-debug-info="flags.advancedDebugInfo" />
+	<ServersManageFilesPage
+		:show-debug-info="flags.advancedDebugInfo"
+		:show-refresh-button="flags.FilesRefreshButton"
+	/>
 </template>

packages/ui/src/components/servers/files/FileNavbar.vue

@@ -80,6 +80,17 @@
 				@update:model-value="$emit('update:searchQuery', $event)"
 			/>
 
+			<ButtonStyled v-if="showRefreshButton" type="outlined">
+				<button
+					type="button"
+					class="flex h-10 items-center gap-2 !border-[1px] !border-surface-5"
+					@click="$emit('refresh')"
+				>
+					<RefreshCwIcon aria-hidden="true" class="h-5 w-5" />
+					Refresh
+				</button>
+			</ButtonStyled>
+
 			<ButtonStyled type="outlined">
 				<OverflowMenu
 					:dropdown-id="`create-new-${baseId}`"
@@ -178,6 +189,7 @@ const props = defineProps<{
 	editingFilePath?: string
 	isEditingImage?: boolean
 	searchQuery: string
+	showRefreshButton?: boolean
 	baseId: string
 }>()
 
@@ -190,6 +202,7 @@ defineEmits<{
 	upload: []
 	uploadZip: []
 	unzipFromUrl: [cf: boolean]
+	refresh: []
 	save: []
 	saveAs: []
 	saveRestart: []

packages/ui/src/pages/hosting/manage/files.vue

@@ -30,6 +30,7 @@
 						:editing-file-path="editingFile?.path"
 						:is-editing-image="fileEditorRef?.isEditingImage"
 						:search-query="searchQuery"
+						:show-refresh-button="showRefreshButton"
 						:base-id="baseId"
 						@navigate="navigateToSegment"
 						@navigate-home="() => navigateToSegment(-1)"
@@ -39,6 +40,7 @@
 						@upload="initiateFileUpload"
 						@upload-zip="() => {}"
 						@unzip-from-url="showUnzipFromUrlModal"
+						@refresh="refreshList"
 						@save="() => fileEditorRef?.saveFileContent(true)"
 						@save-as="() => fileEditorRef?.saveFileContent(false)"
 						@save-restart="() => fileEditorRef?.saveAndRestart()"
@@ -303,6 +305,7 @@ import {
 
 defineProps<{
 	showDebugInfo?: boolean
+	showRefreshButton?: boolean
 }>()
 
 const notifications = injectNotificationManager()