Add refresh button in files tab behind feature flag

Co-authored-by: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>

apps/app-frontend/src/pages/library/Index.vue

@@ -48,7 +48,7 @@ onUnmounted(() => {
 			]"
 		/>
 		<template v-if="instances.length > 0">
-			<RouterView :instances="instances" />
+			<RouterView v-if="route.path.startsWith('/library')" :instances="instances" />
 		</template>
 		<div v-else class="no-instance">
 			<div class="icon">

apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue

@@ -100,7 +100,7 @@
 			/>
 		</div>
 
-		<div v-for="field in selectedRail?.fields" :key="field.name" class="flex flex-col gap-2.5">
+		<div v-for="field in visibleFields" :key="field.name" class="flex flex-col gap-2.5">
 			<label>
 				<span class="text-md font-semibold text-contrast">
 					{{ formatMessage(field.label) }}
@@ -398,6 +398,26 @@ const isBusinessEntity = computed(() => {
 	return providerDataValue.kycData?.type === 'business'
 })
 
+const visibleFields = computed(() => {
+	const rail = selectedRail.value
+	if (!rail) return []
+
+	return rail.fields.filter((field) => {
+		if (!field.dependsOn) return true
+
+		const { field: dependsOnField, value: dependsOnValue } = field.dependsOn
+		const currentValue = formData.value[dependsOnField]
+
+		if (!currentValue) return false
+
+		if (Array.isArray(dependsOnValue)) {
+			return dependsOnValue.includes(currentValue)
+		} else {
+			return currentValue === dependsOnValue
+		}
+	})
+})
+
 const allRequiredFieldsFilled = computed(() => {
 	const rail = selectedRail.value
 	if (!rail) return false
@@ -407,7 +427,7 @@ const allRequiredFieldsFilled = computed(() => {
 
 	if (rail.requiresBankName && !formData.value.bankName) return false
 
-	const requiredFields = rail.fields.filter((f) => f.required)
+	const requiredFields = visibleFields.value.filter((f) => f.required)
 	const allRequiredPresent = requiredFields.every((f) => {
 		const value = formData.value[f.name]
 		return value !== undefined && value !== null && value !== ''

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>

apps/frontend/src/utils/muralpay-rails.ts

@@ -13,6 +13,10 @@ export interface FieldConfig {
 	pattern?: string
 	validate?: (value: string) => string | null
 	autocomplete?: string
+	dependsOn?: {
+		field: string
+		value?: string | string[]
+	}
 }
 
 export interface RailConfig {
@@ -330,6 +334,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: 'Enter PIX email',
 				}),
 				autocomplete: 'email',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'EMAIL',
+				},
 			},
 			{
 				name: 'pixPhone',
@@ -341,6 +349,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: '+55...',
 				}),
 				autocomplete: 'tel',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'PHONE',
+				},
 			},
 			{
 				name: 'branchCode',
@@ -352,6 +364,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: 'Enter branch code',
 				}),
 				autocomplete: 'off',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'BANK_ACCOUNT',
+				},
 			},
 			{
 				name: 'documentNumber',
@@ -367,6 +383,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: 'Brazilian tax identification number',
 				}),
 				autocomplete: 'off',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'DOCUMENT',
+				},
 			},
 		],
 	},

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()