Add generic 412 http response handler to ask for dashboard refresh

dashboard/src/Index.vue

@@ -1,10 +1,15 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { onMounted, ref, useTemplateRef, provide } from 'vue';
-import { Notification, fetcher, SideBar } from '@cloudron/pankow';
+import { Notification, fetcher, SideBar, InputDialog } from '@cloudron/pankow';
 import { setLanguage } from './i18n.js';
 import { API_ORIGIN, TOKEN_TYPES } from './constants.js';
 import { redirectIfNeeded } from './utils.js';
+import AppstoreModel from './models/AppstoreModel.js';
 import ProfileModel from './models/ProfileModel.js';
 import ProvisionModel from './models/ProvisionModel.js';
 import DashboardModel from './models/DashboardModel.js';
@@ -68,6 +73,27 @@ const VIEWS = {
   VOLUMES: 'volumes',
 };
 
+const appstoreModel = AppstoreModel.create();
+
+const inputDialog = useTemplateRef('inputDialog');
+
+async function showDashboardRefreshRequired() {
+  // first trigger a subscription and feature refresh on the backend
+  await appstoreModel.getSubscription();
+
+  const yes = await inputDialog.value.confirm({
+    message: 'Something went wrong. Dashboard refresh required.',
+    confirmStyle: 'primary',
+    rejectStyle: 'secondary',
+    confirmLabel: 'Refresh',
+    rejectLabel: t('main.dialog.no')
+  });
+
+  if (!yes) return;
+
+  window.location.reload(true);
+}
+
 const offlineOverlay = useTemplateRef('offlineOverlay');
 
 function onOnline() {
@@ -83,6 +109,8 @@ fetcher.globalOptions.errorHook = (error) => {
   // re-login will make the code get a new token
   if (error.status === 401) return profileModel.logout();
 
+  if (error.status === 412) return showDashboardRefreshRequired();
+
   if (error.status === 500 || error.status === 501) {
     // actual internal server error, most likely a bug or timeout log to console only to not alert the user
     console.error(error);
@@ -257,6 +285,7 @@ onMounted(async () => {
     <Notification />
     <OfflineOverlay ref="offlineOverlay" @online="onOnline()" :href="'https://docs.cloudron.io/troubleshooting/'" :label="$t('main.offline')" />
     <SubscriptionRequiredDialog ref="subscriptionRequiredDialog"/>
+    <InputDialog ref="inputDialog"/>
 
     <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
       <SideBar v-if="profile.isAtLeastUserManager" ref="sidebar">