build: deploy on both environments (#5129)

* build: deploy on both environments

* build: missing whitespace

* build: add path filter

* build: add sentry env

* build: inherit secrets

* remove if check

* Revert "remove if check"

This reverts commit b2ffe1d611269ddaf13bdbfacfdb89cd40316c29.

* remove if check 2

* Fix Wrangler env

* Fix Wrangler env but for real this time

* Alternative method of getting URLs

* Check for environment instead

* Fix comment

* Clickable commit

* Set PREVIEW build var

* Fix commit shown in comment

* Fix linting errors

* )

* add preview banner

* prepr

* prepr again

* ..

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/frontend/src/components/ui/ModrinthFooter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { BlueskyIcon, DiscordIcon, GithubIcon, MastodonIcon, TwitterIcon } from '@modrinth/assets'
 import {
+	AutoLink,
 	ButtonStyled,
 	defineMessage,
 	defineMessages,
@@ -15,6 +16,7 @@ import TextLogo from '~/components/brand/TextLogo.vue'
 const flags = useFeatureFlags()
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
+const config = useRuntimeConfig()
 
 const messages = defineMessages({
 	modrinthInformation: {
@@ -302,6 +304,27 @@ function developerModeIncrement() {
 					</div>
 				</div>
 			</div>
+			<p v-if="flags.developerMode" class="m-0 text-sm text-secondary">
+				Based on
+				<a
+					v-if="config.public.owner && config.public.branch"
+					class="hover:underline"
+					target="_blank"
+					:href="`https://github.com/${config.public.owner}/code/tree/${config.public.branch}`"
+				>
+					{{ config.public.owner }}/{{ config.public.branch }}
+				</a>
+				@
+				<span v-if="config.public.hash === 'unknown'">unknown</span>
+				<AutoLink
+					v-else
+					class="text-link"
+					target="_blank"
+					:to="`https://github.com/${config.public.owner}/code/commit/${config.public.hash}`"
+				>
+					{{ config.public.hash }}
+				</AutoLink>
+			</p>
 			<div class="flex justify-center text-center text-xs font-medium text-secondary opacity-50">
 				{{ formatMessage(messages.legalDisclaimer) }}
 			</div>

apps/frontend/src/components/ui/banner/PreviewBanner.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	normalizeChildren,
+	PagewideBanner,
+	useVIntl,
+} from '@modrinth/ui'
+
+const { formatMessage } = useVIntl()
+const flags = useFeatureFlags()
+const config = useRuntimeConfig()
+
+const messages = defineMessages({
+	title: {
+		id: 'layout.banner.preview.title',
+		defaultMessage: `This is a preview deploy of the Modrinth website.`,
+	},
+	description: {
+		id: 'layout.banner.preview.description',
+		defaultMessage: `If you meant to access the official Modrinth website, visit <link>https://modrinth.com</link>. This preview deploy is used by Modrinth staff for testing purposes. It was built using <branch-link>{owner}/{branch}</branch-link> @ {commit}.`,
+	},
+})
+
+function hidePreviewBanner() {
+	flags.value.hidePreviewBanner = true
+	saveFeatureFlags()
+}
+</script>
+
+<template>
+	<PagewideBanner v-if="!flags.hidePreviewBanner" variant="info">
+		<template #title>
+			<span>{{ formatMessage(messages.title) }}</span>
+		</template>
+		<template #description>
+			<span>
+				<IntlFormatted
+					:message-id="messages.description"
+					:values="{
+						owner: config.public.owner,
+						branch: config.public.branch,
+					}"
+				>
+					<template #link="{ children }">
+						<a href="https://modrinth.com" target="_blank" rel="noopener" class="text-link">
+							<component :is="() => normalizeChildren(children)" />
+						</a>
+					</template>
+					<template #branch-link="{ children }">
+						<a
+							:href="`https://github.com/${config.public.owner}/code/tree/${config.public.branch}`"
+							target="_blank"
+							rel="noopener"
+							class="hover:underline"
+						>
+							<component :is="() => normalizeChildren(children)" />
+						</a>
+					</template>
+					<template #commit>
+						<span v-if="config.public.hash === 'unknown'">unknown</span>
+						<a
+							v-else
+							:href="`https://github.com/${config.public.owner}/code/commit/${config.public.hash}`"
+							target="_blank"
+							rel="noopener"
+							class="text-link"
+						>
+							{{ config.public.hash }}
+						</a>
+					</template>
+				</IntlFormatted>
+			</span>
+		</template>
+		<template #actions_right>
+			<ButtonStyled type="transparent" circular>
+				<button :aria-label="formatMessage(commonMessages.closeButton)" @click="hidePreviewBanner">
+					<XIcon aria-hidden="true" />
+				</button>
+			</ButtonStyled>
+		</template>
+	</PagewideBanner>
+</template>

apps/frontend/src/composables/featureFlags.ts

@@ -42,22 +42,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	hideRussiaCensorshipBanner: false,
 	serverDiscovery: false,
 	disablePrettyProjectUrlRedirects: false,
-	// advancedRendering: true,
-	// externalLinksNewTab: true,
-	// notUsingBlockers: false,
-	// hideModrinthAppPromos: false,
-	// preferredDarkTheme: 'dark',
-	// hideStagingBanner: false,
-
-	// Project display modes
-	// modSearchDisplayMode: 'list',
-	// pluginSearchDisplayMode: 'list',
-	// resourcePackSearchDisplayMode: 'gallery',
-	// modpackSearchDisplayMode: 'list',
-	// shaderSearchDisplayMode: 'gallery',
-	// dataPackSearchDisplayMode: 'list',
-	// userProjectDisplayMode: 'list',
-	// collectionProjectDisplayMode: 'list',
+	hidePreviewBanner: false,
 } as const)
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS

apps/frontend/src/layouts/default.vue

@@ -47,6 +47,7 @@
 				route.path !== '/settings/billing'
 			"
 		/>
+		<PreviewBanner v-if="config.public.buildEnv === 'production' && config.public.preview" />
 		<StagingBanner v-if="config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com')" />
 		<GeneratedStateErrorsBanner
 			:errors="generatedStateErrors"
@@ -723,6 +724,7 @@ import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 import TextLogo from '~/components/brand/TextLogo.vue'
 import BatchCreditModal from '~/components/ui/admin/BatchCreditModal.vue'
 import GeneratedStateErrorsBanner from '~/components/ui/banner/GeneratedStateErrorsBanner.vue'
+import PreviewBanner from '~/components/ui/banner/PreviewBanner.vue'
 import RussiaBanner from '~/components/ui/banner/RussiaBanner.vue'
 import StagingBanner from '~/components/ui/banner/StagingBanner.vue'
 import SubscriptionPaymentFailedBanner from '~/components/ui/banner/SubscriptionPaymentFailedBanner.vue'

apps/frontend/src/locales/en-US/index.json

@@ -1337,6 +1337,12 @@
   "layout.banner.build-fail.title": {
     "message": "Error generating state from API when building."
   },
+  "layout.banner.preview.description": {
+    "message": "If you meant to access the official Modrinth website, visit <link>https://modrinth.com</link>. This preview deploy is used by Modrinth staff for testing purposes. It was built using <branch-link>{owner}/{branch}</branch-link> @ {commit}."
+  },
+  "layout.banner.preview.title": {
+    "message": "This is a preview deploy of the Modrinth website."
+  },
   "layout.banner.staging.description": {
     "message": "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance."
   },

apps/frontend/src/server/plugins/sentry-cloudflare-plugin.ts

@@ -1,11 +1,13 @@
 import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins'
 
 declare const __SENTRY_RELEASE__: string
+declare const __SENTRY_ENVIRONMENT__: string
 
 export default defineNitroPlugin(
 	sentryCloudflareNitroPlugin({
 		dsn: 'https://9cf8f56ab7055ab6b1042fad535f2a44@o485889.ingest.us.sentry.io/4510709722185728',
 		tracesSampleRate: 0.0001, // match with wrangler.jsonc
 		release: __SENTRY_RELEASE__,
+		environment: __SENTRY_ENVIRONMENT__,
 	}),
 )