fix: refresh usage report banner when on usage tab (#12801)

web/src/enterprise/components/billings/UsageReportBanner.vue

@@ -20,6 +20,10 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
+    // Purely reactive: the banner derives everything from
+    // store.state.zoConfig.last_usage_report_ts. UsageTab refreshes that config
+    // on mount, so the banner updates on every Usage-tab visit without owning an
+    // API call itself.
     const elapsedMs = computed(() => {
       if (!store.state.zoConfig || !('last_usage_report_ts' in store.state.zoConfig)) return 0;
       const ts = store.state.zoConfig.last_usage_report_ts;

web/src/views/UsageTab.vue

@@ -626,6 +626,7 @@ import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import orgService from "@/services/organizations";
+import configService from "@/services/config";
 import config from "@/aws-exports";
 import { formatSizeFromMB, getImageURL } from "@/utils/zincutils";
 import CustomChartRenderer from "@/components/dashboards/panels/CustomChartRenderer.vue";
@@ -1143,9 +1144,23 @@ onMounted(() => {
   ) {
     getSummary(orgId.value);
   }
+  // Refresh config so the UsageReportBanner reflects the latest
+  // last_usage_report_ts each time the Usage tab is opened. UsageTab remounts on
+  // every visit (the home router-view is not kept-alive), and config is otherwise
+  // only fetched at app startup.
+  refreshConfig();
   window.addEventListener("themeColorChanged", onThemeColorChanged);
 });
 
+const refreshConfig = async () => {
+  try {
+    const res: any = await configService.get_config();
+    store.dispatch("setConfig", res.data);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 onUnmounted(() => {
   window.removeEventListener("themeColorChanged", onThemeColorChanged);
 });