From 6e723fdbd740b4f1efbb328ed3bc3b5176be1c61 Mon Sep 17 00:00:00 2001
From: Thomas Arrow <thomas.arrow@wikimedia.de>
Date: Wed, 22 Jul 2026 14:42:57 +0100
Subject: [PATCH 1/5] Add HostingPolicyRenderer Component

This commit introduces the HostingPolicyRenderer component which calls the Platform API
to render the hosting-policy routes looking like /hosting-policy/:activeFrom

It follows a similar pattern to the TermsOfUseRenderer but doesn't include
a navigation component since we do not have multiple versions to consider yet.

It also introduces a stub hosting policy content for
viewing on staging. This won't be visible on production because
there is not a corresponding Policy object in the production DB

This commit also adjusts the TermsOfUseRenderer to determine the
vue component to load using the content_vue_file key from the
API response rather than by trying to determine it from the
active_from date.

Bug: T432340
---
 .../HostingPolicy/HostingPolicyRenderer.vue   | 62 +++++++++++++++++++
 .../hosting-policy/version-1.vue              | 18 ++++++
 .../Pages/TermsOfUse/TermsOfUseRenderer.vue   |  4 +-
 .../{2022-01-01.vue => version-1.vue}         |  0
 src/router/index.js                           |  6 ++
 5 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
 create mode 100644 src/components/Pages/HostingPolicy/hosting-policy/version-1.vue
 rename src/components/Pages/TermsOfUse/terms-of-use/{2022-01-01.vue => version-1.vue} (100%)

diff --git a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
new file mode 100644
index 00000000..5e97723e
--- /dev/null
+++ b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
@@ -0,0 +1,62 @@
+<template>
+  <v-main>
+    <v-container class="fill-height" fluid>
+      <v-row justify="center">
+        <v-col cols="11" md="4" order-md="last">
+        </v-col>
+
+        <v-col cols="11" md="8">
+          <component :is="policy" v-if="policy" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+
+export const versions = {
+  'hosting-policy/version-1.vue': () => ({ component: import('./hosting-policy/version-1.vue') }),
+}
+
+export default {
+  name: 'HostingPolicyRenderer',
+  components: {},
+  computed: {
+    policyActiveFrom: function () {
+      return this.$route.params.activeFrom
+    },
+  },
+  data () {
+    return {
+      policy: undefined,
+    }
+  },
+  methods: {
+    async loadPolicy () {
+      try {
+        const policyType = 'hosting-policy' // TODO read this from component property
+        const activeFrom = this.policyActiveFrom
+
+        const response = await this.$api.policyByDate({ policyType, activeFrom })
+
+        const metadata = await response.metadata
+        this.policy = versions[metadata.content_vue_file]
+      } catch (error) {
+        console.error(error)
+        alert('Failed to load policy.')
+      }
+    },
+  },
+  mounted () {
+    this.loadPolicy()
+  },
+  watch: {
+    policyId: function () {
+      this.loadPolicy()
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/Pages/HostingPolicy/hosting-policy/version-1.vue b/src/components/Pages/HostingPolicy/hosting-policy/version-1.vue
new file mode 100644
index 00000000..6d38a82a
--- /dev/null
+++ b/src/components/Pages/HostingPolicy/hosting-policy/version-1.vue
@@ -0,0 +1,18 @@
+<template>
+  <v-main>
+    <v-container class="fill-height" fluid>
+      <v-row justify="center">
+        <v-col cols="8" class="policy-content text-body-1">
+          <h1 id="hosting-policy-for-wikibase-cloud" class="mb-7">Hosting Policy for Wikibase Cloud Staging Fake Version</h1>
+          <h2 id="purpose-and-scope" class="mb-3">Rest of the content would be here.</h2>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+export default {
+  name: 'HostingPolicy',
+}
+</script>
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
index d30f65a0..dfae1c63 100644
--- a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
+++ b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
@@ -18,7 +18,7 @@
 import TermsOfUseNavigationPanel from './TermsOfUseNavigationPanel.vue'
 
 export const versions = {
-  '2022-01-01': () => ({ component: import('./terms-of-use/2022-01-01.vue') }),
+  'terms-of-use/version-1.vue': () => ({ component: import('./terms-of-use/version-1.vue') }),
 }
 
 export default {
@@ -45,7 +45,7 @@ export default {
         const response = await this.$api.policyByDate({ policyType, activeFrom })
 
         const metadata = await response.metadata
-        this.policy = versions[metadata.active_from]
+        this.policy = versions[metadata.content_vue_file]
       } catch (error) {
         console.error(error)
         alert('Failed to load policy.')
diff --git a/src/components/Pages/TermsOfUse/terms-of-use/2022-01-01.vue b/src/components/Pages/TermsOfUse/terms-of-use/version-1.vue
similarity index 100%
rename from src/components/Pages/TermsOfUse/terms-of-use/2022-01-01.vue
rename to src/components/Pages/TermsOfUse/terms-of-use/version-1.vue
diff --git a/src/router/index.js b/src/router/index.js
index 7b005e77..9c7f89ab 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,6 +22,7 @@ import User from '@/components/Pages/User'
 import Discovery from '@/components/Pages/Discovery/Discovery'
 import Complaint from '@/components/Pages/Complaint.vue'
 import HostingPolicy from '@/components/Pages/HostingPolicy.vue'
+import HostingPolicyRenderer from '@/components/Pages/HostingPolicy/HostingPolicyRenderer.vue'
 import DsaInfo from '@/components/Pages/DsaInfo/DsaInfo'
 
 Vue.use(Router)
@@ -94,6 +95,11 @@ const router = new Router({
       name: 'Hosting Policy',
       component: HostingPolicy,
     },
+    {
+      path: '/hosting-policy/:activeFrom',
+      name: 'Hosting Policy',
+      component: HostingPolicyRenderer,
+    },
     {
       path: '/privacy-policy',
       name: 'Privacy',

From 3cad5bcafc9c5d5566149aae3286a264db3eb1d6 Mon Sep 17 00:00:00 2001
From: dena <dena@wikimedia.de>
Date: Thu, 23 Jul 2026 13:48:34 +0200
Subject: [PATCH 2/5] refine error handling UX

---
 .../Pages/HostingPolicy/HostingPolicyRenderer.vue           | 6 +++++-
 src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue      | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
index 5e97723e..1248635b 100644
--- a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
+++ b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
@@ -1,5 +1,8 @@
 <template>
   <v-main>
+    <v-alert class="mt-8 mr-2 ml-2" outlined type="error" border="left" v-if="error">
+      An error occurred while trying to load the requested policy. Please try again later.
+    </v-alert>
     <v-container class="fill-height" fluid>
       <v-row justify="center">
         <v-col cols="11" md="4" order-md="last">
@@ -30,6 +33,7 @@ export default {
   data () {
     return {
       policy: undefined,
+      error: undefined,
     }
   },
   methods: {
@@ -44,7 +48,7 @@ export default {
         this.policy = versions[metadata.content_vue_file]
       } catch (error) {
         console.error(error)
-        alert('Failed to load policy.')
+        this.error = error;
       }
     },
   },
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
index dfae1c63..dec468bc 100644
--- a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
+++ b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
@@ -1,5 +1,8 @@
 <template>
   <v-main>
+    <v-alert class="mt-8 mr-2 ml-2" outlined type="error" border="left" v-if="error">
+      An error occurred while trying to load the requested policy. Please try again later.
+    </v-alert>
     <v-container class="fill-height" fluid>
       <v-row justify="center">
         <v-col cols="11" md="4" order-md="last">
@@ -34,6 +37,7 @@ export default {
   data () {
     return {
       policy: undefined,
+      error: undefined,
     }
   },
   methods: {
@@ -47,8 +51,8 @@ export default {
         const metadata = await response.metadata
         this.policy = versions[metadata.content_vue_file]
       } catch (error) {
+        this.error = error;
         console.error(error)
-        alert('Failed to load policy.')
       }
     },
   },

From a94493c7d72866034f5ee3286410cb8c2775c795 Mon Sep 17 00:00:00 2001
From: dena <dena@wikimedia.de>
Date: Thu, 23 Jul 2026 13:49:40 +0200
Subject: [PATCH 3/5] formattin

---
 src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue | 2 +-
 src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
index 1248635b..6f9d352a 100644
--- a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
+++ b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
@@ -48,7 +48,7 @@ export default {
         this.policy = versions[metadata.content_vue_file]
       } catch (error) {
         console.error(error)
-        this.error = error;
+        this.error = error
       }
     },
   },
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
index dec468bc..feb3e8dd 100644
--- a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
+++ b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
@@ -51,7 +51,7 @@ export default {
         const metadata = await response.metadata
         this.policy = versions[metadata.content_vue_file]
       } catch (error) {
-        this.error = error;
+        this.error = error
         console.error(error)
       }
     },

From 7bdc8ea7a65e015f0e75309689189531f62e207c Mon Sep 17 00:00:00 2001
From: dena <dena@wikimedia.de>
Date: Thu, 23 Jul 2026 13:51:27 +0200
Subject: [PATCH 4/5] hide whole content when error

---
 src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue | 2 +-
 src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
index 6f9d352a..47209ebb 100644
--- a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
+++ b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
@@ -3,7 +3,7 @@
     <v-alert class="mt-8 mr-2 ml-2" outlined type="error" border="left" v-if="error">
       An error occurred while trying to load the requested policy. Please try again later.
     </v-alert>
-    <v-container class="fill-height" fluid>
+    <v-container class="fill-height" fluid v-if="!error">
       <v-row justify="center">
         <v-col cols="11" md="4" order-md="last">
         </v-col>
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
index feb3e8dd..b7d335b8 100644
--- a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
+++ b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
@@ -3,7 +3,7 @@
     <v-alert class="mt-8 mr-2 ml-2" outlined type="error" border="left" v-if="error">
       An error occurred while trying to load the requested policy. Please try again later.
     </v-alert>
-    <v-container class="fill-height" fluid>
+    <v-container class="fill-height" fluid v-if="!error">
       <v-row justify="center">
         <v-col cols="11" md="4" order-md="last">
           <TermsOfUseNavigationPanel />

From b1726a66cbd3bf982da43721952ebdbd2c5ffd13 Mon Sep 17 00:00:00 2001
From: dena <dena@wikimedia.de>
Date: Thu, 23 Jul 2026 13:58:38 +0200
Subject: [PATCH 5/5] more robust policy loading

---
 .../Pages/HostingPolicy/HostingPolicyRenderer.vue         | 8 +++++++-
 src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue    | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
index 47209ebb..d21c1430 100644
--- a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
+++ b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
@@ -45,7 +45,13 @@ export default {
         const response = await this.$api.policyByDate({ policyType, activeFrom })
 
         const metadata = await response.metadata
-        this.policy = versions[metadata.content_vue_file]
+        const policy = versions[metadata.content_vue_file]
+
+        if (policy !== undefined) {
+          this.policy = policy
+        } else {
+          this.error = 'missing policy'
+        }
       } catch (error) {
         console.error(error)
         this.error = error
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
index b7d335b8..c3603503 100644
--- a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
+++ b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
@@ -49,7 +49,13 @@ export default {
         const response = await this.$api.policyByDate({ policyType, activeFrom })
 
         const metadata = await response.metadata
-        this.policy = versions[metadata.content_vue_file]
+        const policy = versions[metadata.content_vue_file]
+
+        if (policy !== undefined) {
+          this.policy = policy
+        } else {
+          this.error = 'missing policy'
+        }
       } catch (error) {
         this.error = error
         console.error(error)