From d02eb7d4c1e30caaa7f1f0e68ab4fd479f97e428 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Tue, 28 Jul 2026 17:38:50 +0200
Subject: [PATCH 1/4] fix(policies): remove frontend date interpretation and
 use API-driven current/upcoming policy selection

---
 .../Components/PolicyNavigationPanel.vue      | 78 ++++++++-----------
 .../HostingPolicy/HostingPolicyRenderer.vue   | 23 ++----
 2 files changed, 40 insertions(+), 61 deletions(-)

diff --git a/src/components/Pages/Components/PolicyNavigationPanel.vue b/src/components/Pages/Components/PolicyNavigationPanel.vue
index 1c74d72b..219c344a 100644
--- a/src/components/Pages/Components/PolicyNavigationPanel.vue
+++ b/src/components/Pages/Components/PolicyNavigationPanel.vue
@@ -25,32 +25,6 @@
 </template>
 
 <script>
-const parseActiveFrom = (activeFrom) => {
-  if (activeFrom === null || activeFrom === undefined) {
-    return null
-  }
-
-  return new Date(`${activeFrom}T00:00:00Z`)
-}
-
-const comparePolicies = (left, right) => {
-  const leftActiveFrom = parseActiveFrom(left.metadata.active_from)
-  const rightActiveFrom = parseActiveFrom(right.metadata.active_from)
-
-  if (leftActiveFrom === null && rightActiveFrom === null) {
-    return 0
-  }
-
-  if (leftActiveFrom === null) {
-    return 1
-  }
-
-  if (rightActiveFrom === null) {
-    return -1
-  }
-
-  return rightActiveFrom - leftActiveFrom || right.metadata.policy_id - left.metadata.policy_id
-}
 
 export default {
   name: 'PolicyNavigationPanel',
@@ -70,30 +44,31 @@ export default {
   },
   data: () => ({
     policies: [],
+    currentPolicyId: null,
+    upcomingPolicyId: null,
     error: undefined,
   }),
   computed: {
     links: function () {
-      const sortedPolicies = [...this.policies].sort(comparePolicies)
-      const today = new Date()
-      today.setHours(0, 0, 0, 0)
+      const policyById = new Map(this.policies.map(policy => [policy.metadata.policy_id, policy]))
+      const currentPolicy = policyById.get(this.currentPolicyId)
+      const upcomingPolicy = policyById.get(this.upcomingPolicyId)
 
-      const currentPolicy = sortedPolicies.find(policy => {
-        const activeFrom = parseActiveFrom(policy.metadata.active_from)
-        return activeFrom <= today
-      })
-
-      const upcomingPolicy = sortedPolicies.find(policy => {
-        const activeFrom = parseActiveFrom(policy.metadata.active_from)
-        return activeFrom > today || activeFrom === null
-      })
-
-      const otherPolicies = sortedPolicies.filter(policy => {
+      const otherPolicies = this.policies.filter(policy => {
         const policyId = policy.metadata.policy_id
-        const currentPolicyId = currentPolicy ? currentPolicy.metadata.policy_id : null
-        const upcomingPolicyId = upcomingPolicy ? upcomingPolicy.metadata.policy_id : null
+        const currentPolicyId = this.currentPolicyId
+        const upcomingPolicyId = this.upcomingPolicyId
 
         return policyId !== currentPolicyId && policyId !== upcomingPolicyId
+      }).sort((left, right) => {
+        const leftActiveFrom = left.metadata.active_from || ''
+        const rightActiveFrom = right.metadata.active_from || ''
+
+        if (leftActiveFrom === rightActiveFrom) {
+          return right.metadata.policy_id - left.metadata.policy_id
+        }
+
+        return rightActiveFrom.localeCompare(leftActiveFrom)
       })
 
       const orderedPolicies = [currentPolicy, upcomingPolicy, ...otherPolicies].filter(Boolean)
@@ -127,8 +102,23 @@ export default {
       this.error = undefined
 
       try {
-        const response = await this.$api.getAllPoliciesByType({ policyType: this.policyType })
-        this.policies = response
+        const [policies, currentPolicy] = await Promise.all([
+          this.$api.getAllPoliciesByType({ policyType: this.policyType }),
+          this.$api.getCurrentPolicyByType({ policyType: this.policyType }),
+        ])
+
+        this.policies = policies
+        this.currentPolicyId = currentPolicy.metadata.policy_id
+
+        try {
+          const upcomingPolicy = await this.$api.getUpcomingPolicyByType({ policyType: this.policyType })
+          this.upcomingPolicyId = upcomingPolicy.metadata.policy_id
+        } catch (error) {
+          if (!(error && error.response && error.response.status === 404)) {
+            console.error(error)
+          }
+          this.upcomingPolicyId = null
+        }
       } catch (error) {
         this.error = error
         console.error(error)
diff --git a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
index 4fe5c97a..8121eb16 100644
--- a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
+++ b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
@@ -4,7 +4,7 @@
       An error occurred while trying to load the requested policy. Please try again later.
     </v-alert>
     <v-container class="fill-height" fluid v-if="!error">
-      <v-row v-if="isUpcomingPolicy" justify="center">
+      <v-row v-if="isUpcomingRoute" justify="center">
         <v-col cols="11">
           <v-alert type="info">
             This is an upcoming version. You can find the
@@ -34,18 +34,6 @@ export const versions = {
   'hosting-policy/version-1.vue': () => ({ component: import('./hosting-policy/version-1.vue') }),
 }
 
-const isFutureDate = (activeFrom) => {
-  if (activeFrom === null || activeFrom === undefined) {
-    return false
-  }
-
-  const date = new Date(`${activeFrom}T00:00:00Z`)
-  const today = new Date()
-  today.setHours(0, 0, 0, 0)
-
-  return date > today
-}
-
 export default {
   name: 'HostingPolicyRenderer',
   components: {
@@ -58,8 +46,8 @@ export default {
     isUpcomingRoute: function () {
       return this.$route.path === '/hosting-policy/upcoming'
     },
-    isUpcomingPolicy: function () {
-      return isFutureDate(this.policyMetadata && this.policyMetadata.active_from)
+    isCurrentRoute: function () {
+      return this.policyActiveFrom === undefined
     },
   },
   data () {
@@ -67,6 +55,7 @@ export default {
       policy: undefined,
       policyMetadata: undefined,
       error: undefined,
+      policyType: 'hosting-policy',
     }
   },
   methods: {
@@ -76,13 +65,13 @@ export default {
       this.error = undefined
 
       try {
-        const policyType = 'hosting-policy' // TODO for a generalized component, read this from component property
+        const policyType = this.policyType // TODO for a generalized component, read this from component property
         const activeFrom = this.policyActiveFrom
         let response
 
         if (this.isUpcomingRoute) {
           response = await this.$api.getUpcomingPolicyByType({ policyType })
-        } else if (activeFrom === undefined) {
+        } else if (this.isCurrentRoute) {
           response = await this.$api.getCurrentPolicyByType({ policyType })
         } else {
           response = await this.$api.getPolicyByDate({ policyType, activeFrom })

From bbf805d08a3f94d1cf272526f24f9a95fc80cfab Mon Sep 17 00:00:00 2001
From: Thomas Arrow <thomas.arrow@wikimedia.de>
Date: Wed, 29 Jul 2026 10:42:50 +0100
Subject: [PATCH 2/4] refactor to clarify meaning of word 'current'

---
 .../Pages/Components/PolicyNavigationPanel.vue     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Pages/Components/PolicyNavigationPanel.vue b/src/components/Pages/Components/PolicyNavigationPanel.vue
index 219c344a..8a5dc5c0 100644
--- a/src/components/Pages/Components/PolicyNavigationPanel.vue
+++ b/src/components/Pages/Components/PolicyNavigationPanel.vue
@@ -7,7 +7,7 @@
             <v-list class="wrap">
                 <v-list-item v-for="(link, index) in links" :key="link.routePath">
                     <v-list-item-content>
-                        <v-list-item-title v-if="index == currentLink">
+                        <v-list-item-title v-if="index == currentlyRenderedLink">
                             {{ link.title }}
                         </v-list-item-title>
 
@@ -71,7 +71,7 @@ export default {
         return rightActiveFrom.localeCompare(leftActiveFrom)
       })
 
-      const orderedPolicies = [currentPolicy, upcomingPolicy, ...otherPolicies].filter(Boolean)
+      const orderedPolicies = [upcomingPolicy, currentPolicy, ...otherPolicies].filter(Boolean)
 
       return orderedPolicies.map(policy => {
         const activeFrom = policy.metadata.active_from
@@ -84,14 +84,14 @@ export default {
         }
       })
     },
-    currentLink: function () {
-      const isCurrentPath = (element) => element.routePath === this.$route.path
-      const positionInList = this.links.findIndex(isCurrentPath)
+    currentlyRenderedLink: function () {
+      const isRenderedPath = (element) => element.routePath === this.$route.path
+      const positionInList = this.links.findIndex(isRenderedPath)
 
       if (positionInList === -1) {
-        const currentVersionIndex = this.links.findIndex(element => element.routePath === this.basePath)
+        const renderedVersionIndex = this.links.findIndex(element => element.routePath === this.basePath)
 
-        return currentVersionIndex === -1 ? 0 : currentVersionIndex
+        return renderedVersionIndex === -1 ? 0 : renderedVersionIndex
       }
 
       return positionInList

From 7004631c48c2e00a75c1ad19b2c15c5f62dccd7e Mon Sep 17 00:00:00 2001
From: Thomas Arrow <thomas.arrow@wikimedia.de>
Date: Wed, 29 Jul 2026 11:05:13 +0100
Subject: [PATCH 3/4] consider case of current policy also missing

---
 .../Pages/Components/PolicyNavigationPanel.vue  | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/Components/PolicyNavigationPanel.vue b/src/components/Pages/Components/PolicyNavigationPanel.vue
index 8a5dc5c0..4dd0069e 100644
--- a/src/components/Pages/Components/PolicyNavigationPanel.vue
+++ b/src/components/Pages/Components/PolicyNavigationPanel.vue
@@ -90,7 +90,6 @@ export default {
 
       if (positionInList === -1) {
         const renderedVersionIndex = this.links.findIndex(element => element.routePath === this.basePath)
-
         return renderedVersionIndex === -1 ? 0 : renderedVersionIndex
       }
 
@@ -102,14 +101,15 @@ export default {
       this.error = undefined
 
       try {
-        const [policies, currentPolicy] = await Promise.all([
+        const [policies] = await Promise.all([
           this.$api.getAllPoliciesByType({ policyType: this.policyType }),
-          this.$api.getCurrentPolicyByType({ policyType: this.policyType }),
         ])
 
         this.policies = policies
         this.currentPolicyId = currentPolicy.metadata.policy_id
 
+        // TODO: this doesn't handle the case where there is no current policy.
+
         try {
           const upcomingPolicy = await this.$api.getUpcomingPolicyByType({ policyType: this.policyType })
           this.upcomingPolicyId = upcomingPolicy.metadata.policy_id
@@ -119,6 +119,16 @@ export default {
           }
           this.upcomingPolicyId = null
         }
+
+        try {
+          const currentPolicy = await this.$api.getCurrentPolicyByType({ policyType: this.policyType })
+          this.currentPolicyId = currentPolicy.metadata.policy_id
+        } catch (error) {
+          if (!(error && error.response && error.response.status === 404)) {
+            console.error(error)
+          }
+          this.currentPolicyId = null
+        }
       } catch (error) {
         this.error = error
         console.error(error)
@@ -139,7 +149,6 @@ export default {
       if (isCurrentPolicy) {
         return 'Current version'
       }
-
       if (isUpcomingPolicy) {
         return 'Upcoming version'
       }

From 7715ed8babb426910404e9f39741d78e2b56adc8 Mon Sep 17 00:00:00 2001
From: Thomas Arrow <thomas.arrow@wikimedia.de>
Date: Wed, 29 Jul 2026 11:25:25 +0100
Subject: [PATCH 4/4] fix current policy was used before defined and document
 decision for additional api calls

---
 .../Pages/Components/PolicyNavigationPanel.vue        | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Pages/Components/PolicyNavigationPanel.vue b/src/components/Pages/Components/PolicyNavigationPanel.vue
index 4dd0069e..d711e6ef 100644
--- a/src/components/Pages/Components/PolicyNavigationPanel.vue
+++ b/src/components/Pages/Components/PolicyNavigationPanel.vue
@@ -101,15 +101,14 @@ export default {
       this.error = undefined
 
       try {
-        const [policies] = await Promise.all([
-          this.$api.getAllPoliciesByType({ policyType: this.policyType }),
-        ])
+        const policies = await this.$api.getAllPoliciesByType({ policyType: this.policyType })
 
         this.policies = policies
-        this.currentPolicyId = currentPolicy.metadata.policy_id
-
-        // TODO: this doesn't handle the case where there is no current policy.
 
+        // We look up the Current and Upcoming policy of this type to avoid needing to have the complex
+        // date calculations in the frontend and instead do them in the platform api.
+        // This is quite inefficient but it keeps the frontend less complex to reason about.
+        // We need to consider that there may be neither an upcoming or current policy and gracefully handle that,
         try {
           const upcomingPolicy = await this.$api.getUpcomingPolicyByType({ policyType: this.policyType })
           this.upcomingPolicyId = upcomingPolicy.metadata.policy_id