From 7d282bf1d0201f68eb034c3a5e669298dc1902cf Mon Sep 17 00:00:00 2001
From: Cody Jackson <cody.jackson@suse.com>
Date: Thu, 18 Apr 2024 13:45:09 -0700
Subject: [PATCH] Migrate the usage of asyncData to fetch

After the migration we will then remove all of the initialization code. This is motivated by the Vue3 migration.
---
 shell/pages/auth/login.vue                   | 170 +++++++++----------
 shell/pages/auth/logout.vue                  |   4 +-
 shell/pages/auth/setup.vue                   |  99 ++++++-----
 shell/pages/c/_cluster/auth/config/index.vue |  18 +-
 shell/pages/c/_cluster/auth/roles/index.vue  |  14 +-
 5 files changed, 158 insertions(+), 147 deletions(-)

diff --git a/shell/pages/auth/login.vue b/shell/pages/auth/login.vue
index 57c9f088a01..a58e2d48374 100644
--- a/shell/pages/auth/login.vue
+++ b/shell/pages/auth/login.vue
@@ -23,113 +23,50 @@ import { LOGIN_ERRORS } from '@shell/store/auth';
 import {
   getBrand,
   getVendor,
-  getProduct,
   setBrand,
   setVendor
 } from '@shell/config/private-label';
 import loadPlugins from '@shell/plugins/plugin';
 import { fetchInitialSettings } from '@shell/utils/settings';
+import Loading from '@shell/components/Loading';
 
 export default {
   name:       'Login',
   components: {
-    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector
+    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector, Loading
   },
 
-  async asyncData({ route, redirect, store }) {
-    const drivers = await store.dispatch('auth/getAuthProviders');
-    const providers = sortBy(drivers.map((x) => x.id), ['id']);
-
-    const hasLocal = providers.includes('local');
-    const hasOthers = hasLocal && !!providers.find((x) => x !== 'local');
-
-    if ( hasLocal ) {
-      // Local is special and handled here so that it can be toggled
-      removeObject(providers, 'local');
-    }
-
-    let firstLoginSetting, plSetting, brand;
-
-    // Load settings.
-    // For newer versions this will return all settings if you are somehow logged in,
-    // and just the public ones if you aren't.
-    try {
-      await fetchInitialSettings(store);
-
-      firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
-      plSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
-      brand = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
-    } catch (e) {
-      // Older versions used Norman API to get these
-      firstLoginSetting = await store.dispatch('rancher/find', {
-        type: NORMAN.SETTING,
-        id:   SETTING.FIRST_LOGIN,
-        opt:  { url: `/v3/settings/${ SETTING.FIRST_LOGIN }` }
-      });
-
-      plSetting = await store.dispatch('rancher/find', {
-        type: NORMAN.SETTING,
-        id:   SETTING.PL,
-        opt:  { url: `/v3/settings/${ SETTING.PL }` }
-      });
-
-      brand = await store.dispatch('rancher/find', {
-        type: NORMAN.SETTING,
-        id:   SETTING.BRAND,
-        opt:  { url: `/v3/settings/${ SETTING.BRAND }` }
-      });
-    }
-
-    if (plSetting.value?.length && plSetting.value !== getVendor()) {
-      setVendor(plSetting.value);
-    }
-
-    if (brand?.value?.length && brand.value !== getBrand()) {
-      setBrand(brand.value);
-    }
-
-    let singleProvider;
-
-    if (providers.length === 1) {
-      singleProvider = providers[0];
-    }
+  data() {
+    const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
 
     return {
-      vendor:             getVendor(),
-      providers,
-      hasOthers,
-      hasLocal,
-      showLocal:          !hasOthers || (route.query[LOCAL] === _FLAGGED),
-      firstLogin:         firstLoginSetting?.value === 'true',
-      singleProvider,
-      showLocaleSelector: !process.env.loginLocaleSelector || process.env.loginLocaleSelector === 'true'
-    };
-  },
-
-  data({ $cookies }) {
-    const username = $cookies.get(USERNAME, { parseJSON: false }) || '';
-
-    return {
-      product: getProduct(),
-
       username,
       remember: !!username,
       password: '',
 
-      timedOut:    this.$route.query[TIMED_OUT] === _FLAGGED,
-      loggedOut:   this.$route.query[LOGGED_OUT] === _FLAGGED,
-      isSsoLogout: this.$route.query[IS_SSO] === _FLAGGED,
-      err:         this.$route.query.err,
+      timedOut:           this.$route.query[TIMED_OUT] === _FLAGGED,
+      loggedOut:          this.$route.query[LOGGED_OUT] === _FLAGGED,
+      isSsoLogout:        this.$route.query[IS_SSO] === _FLAGGED,
+      err:                this.$route.query.err,
+      showLocaleSelector: !process.env.loginLocaleSelector || process.env.loginLocaleSelector === 'true',
 
+      hasLocal:           false,
+      showLocal:          false,
       providers:          [],
       providerComponents: [],
-      customLoginError:   {}
+      customLoginError:   {},
+      firstLogin:         false,
+      vendor:             getVendor()
     };
   },
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
+    singleProvider() {
+      return this.providers.length === 1 ? this.providers[0] : undefined;
+    },
+
     nonLocalPrompt() {
       if (this.singleProvider) {
         const provider = this.displayName(this.singleProvider);
@@ -179,12 +116,24 @@ export default {
   },
 
   async fetch() {
+    const { firstLoginSetting } = await this.loadInitialSettings();
     const { value } = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.BANNERS });
+    const drivers = await this.$store.dispatch('auth/getAuthProviders');
+    const providers = sortBy(drivers.map((x) => x.id), ['id']);
+    const hasLocal = providers.includes('local');
+    const hasOthers = hasLocal && !!providers.find((x) => x !== 'local');
 
-    this.customLoginError = JSON.parse(value).loginError;
-  },
+    if ( hasLocal ) {
+      // Local is special and handled here so that it can be toggled
+      removeObject(providers, 'local');
+    }
 
-  mounted() {
+    this.vendor = getVendor();
+    this.providers = providers;
+    this.hasLocal = hasLocal;
+    this.showLocal = !hasOthers || (this.$route.query[LOCAL] === _FLAGGED);
+    this.customLoginError = JSON.parse(value).loginError;
+    this.firstLogin = firstLoginSetting?.value === 'true';
     this.username = this.firstLogin ? 'admin' : this.username;
     this.$nextTick(() => {
       this.focusSomething();
@@ -192,6 +141,52 @@ export default {
   },
 
   methods: {
+    async loadInitialSettings() {
+      let firstLoginSetting, plSetting, brand;
+
+      // Load settings.
+      // For newer versions this will return all settings if you are somehow logged in,
+      // and just the public ones if you aren't.
+      try {
+        await fetchInitialSettings(this.$store);
+
+        firstLoginSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
+        plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
+        brand = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+      } catch (e) {
+        // Older versions used Norman API to get these
+        firstLoginSetting = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.SETTING,
+          id:   SETTING.FIRST_LOGIN,
+          opt:  { url: `/v3/settings/${ SETTING.FIRST_LOGIN }` }
+        });
+
+        plSetting = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.SETTING,
+          id:   SETTING.PL,
+          opt:  { url: `/v3/settings/${ SETTING.PL }` }
+        });
+
+        brand = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.SETTING,
+          id:   SETTING.BRAND,
+          opt:  { url: `/v3/settings/${ SETTING.BRAND }` }
+        });
+      }
+
+      if (plSetting.value?.length && plSetting.value !== getVendor()) {
+        setVendor(plSetting.value);
+      }
+
+      if (brand?.value?.length && brand.value !== getBrand()) {
+        setBrand(brand.value);
+      }
+
+      return {
+        firstLoginSetting, plSetting, brand
+      };
+    },
+
     displayName(provider) {
       return this.t(`model.authConfig.provider.${ provider }`);
     },
@@ -290,7 +285,11 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout login">
+  <Loading v-if="$fetchState.pending" />
+  <main
+    v-else
+    class="main-layout login"
+  >
     <div class="row gutless mb-20">
       <div class="col span-6 p-20">
         <p class="text-center">
@@ -480,7 +479,6 @@ export default {
           <LocaleSelector mode="login" />
         </div>
       </div>
-
       <BrandImage
         class="col span-6 landscape"
         data-testid="login-landscape__img"
diff --git a/shell/pages/auth/logout.vue b/shell/pages/auth/logout.vue
index 37b4a95e0f4..39d17340d6a 100644
--- a/shell/pages/auth/logout.vue
+++ b/shell/pages/auth/logout.vue
@@ -1,8 +1,8 @@
 <script>
 
 export default {
-  async asyncData({ redirect, store, router }) {
-    await store.dispatch('auth/logout', null, { root: true });
+  async fetch() {
+    await this.$store.dispatch('auth/logout', null, { root: true });
   }
 };
 </script>
diff --git a/shell/pages/auth/setup.vue b/shell/pages/auth/setup.vue
index ccfa587fb0f..d4466df3b3b 100644
--- a/shell/pages/auth/setup.vue
+++ b/shell/pages/auth/setup.vue
@@ -21,6 +21,7 @@ import { Banner } from '@components/Banner';
 import FormValidation from '@shell/mixins/form-validation';
 import isUrl from 'is-url';
 import { isLocalhost } from '@shell/utils/validators/setting';
+import Loading from '@shell/components/Loading';
 
 const calcIsFirstLogin = (store) => {
   const firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
@@ -48,11 +49,31 @@ export default {
         path:       'serverUrl',
         rootObject: this,
         rules:      ['required', 'https', 'url', 'trailingForwardSlash']
-      }]
+      }],
+      productName: '',
+      vendor:      getVendor(),
+      product:     getProduct(),
+      step:        parseInt(this.$route.query.step, 10) || 1,
+
+      useRandom:          true,
+      haveCurrent:        false,
+      username:           null,
+      isFirstLogin:       false,
+      mustChangePassword: false,
+      current:            null,
+      password:           randomStr(),
+      confirm:            null,
+      v3User:             null,
+      serverUrl:          null,
+      mcmEnabled:         null,
+      telemetry:          null,
+      eula:               false,
+      principals:         null,
+      errors:             []
     };
   },
 
-  async middleware({ store, redirect, route } ) {
+  async middleware({ store, redirect } ) {
     try {
       await fetchInitialSettings(store);
     } catch (e) {
@@ -81,13 +102,13 @@ export default {
   },
 
   components: {
-    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password, BrandImage, Banner
+    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password, BrandImage, Banner, Loading
   },
 
-  async asyncData({ route, req, store }) {
-    const telemetrySetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.TELEMETRY);
-    const serverUrlSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
-    const rancherVersionSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.VERSION_RANCHER);
+  async fetch() {
+    const telemetrySetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.TELEMETRY);
+    const serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
+    const rancherVersionSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.VERSION_RANCHER);
     let telemetry = true;
 
     if (telemetrySetting?.value && telemetrySetting.value !== 'prompt') {
@@ -99,12 +120,12 @@ export default {
     let plSetting;
 
     try {
-      await fetchInitialSettings(store);
+      await fetchInitialSettings(this.$store);
 
-      plSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
+      plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
     } catch (e) {
       // Older versions used Norman API to get these
-      plSetting = await store.dispatch('rancher/find', {
+      plSetting = await this.$store.dispatch('rancher/find', {
         type: NORMAN.SETTING,
         id:   SETTING.PL,
         opt:  { url: `/v3/settings/${ SETTING.PL }` }
@@ -117,13 +138,13 @@ export default {
 
     const productName = plSetting.default;
 
-    const principals = await store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL, opt: { url: '/v3/principals' } });
+    const principals = await this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL, opt: { url: '/v3/principals' } });
     const me = findBy(principals, 'me', true);
 
-    const current = route.query[SETUP] || store.getters['auth/initialPass'];
-    const v3User = store.getters['auth/v3User'] ?? {};
+    const current = this.$route.query[SETUP] || this.$store.getters['auth/initialPass'];
+    const v3User = this.$store.getters['auth/v3User'] ?? {};
 
-    const mcmFeature = await store.dispatch('management/find', {
+    const mcmFeature = await this.$store.dispatch('management/find', {
       type: MANAGEMENT.FEATURE, id: 'multi-cluster-management', opt: { url: `/v1/${ MANAGEMENT.FEATURE }/multi-cluster-management` }
     });
 
@@ -137,36 +158,20 @@ export default {
       serverUrl = window.location.origin;
     }
 
-    const isFirstLogin = await calcIsFirstLogin(store);
-    const mustChangePassword = await calcMustChangePassword(store);
-
-    return {
-      productName,
-      vendor:  getVendor(),
-      product: getProduct(),
-      step:    parseInt(route.query.step, 10) || 1,
-
-      useRandom:   true,
-      haveCurrent: !!current,
-      username:    me?.loginName || 'admin',
-      isFirstLogin,
-      mustChangePassword,
-      current,
-      password:    randomStr(),
-      confirm:     '',
-
-      v3User,
-
-      serverUrl,
-      mcmEnabled,
-
-      telemetry,
-
-      eula: false,
-      principals,
-
-      errors: []
-    };
+    const isFirstLogin = await calcIsFirstLogin(this.$store);
+    const mustChangePassword = await calcMustChangePassword(this.$store);
+
+    this.$set(this, 'productName', productName);
+    this.$set(this, 'haveCurrent', !!current);
+    this.$set(this, 'username', me?.loginName || 'admin');
+    this.$set(this, 'isFirstLogin', isFirstLogin);
+    this.$set(this, 'mustChangePassword', mustChangePassword);
+    this.$set(this, 'current', current);
+    this.$set(this, 'v3User', v3User);
+    this.$set(this, 'serverUrl', serverUrl);
+    this.$set(this, 'mcmEnabled', mcmEnabled);
+    this.$set(this, 'telemetry', telemetry);
+    this.$set(this, 'principals', principals);
   },
 
   computed: {
@@ -278,7 +283,11 @@ export default {
 </script>
 
 <template>
-  <form class="setup">
+  <Loading v-if="$fetchState.pending" />
+  <form
+    v-else
+    class="setup"
+  >
     <div class="row">
       <div class="col span-6 form-col">
         <div>
diff --git a/shell/pages/c/_cluster/auth/config/index.vue b/shell/pages/c/_cluster/auth/config/index.vue
index b2c75dca6d9..d443baafd7b 100644
--- a/shell/pages/c/_cluster/auth/config/index.vue
+++ b/shell/pages/c/_cluster/auth/config/index.vue
@@ -5,18 +5,22 @@ import { sortBy } from '@shell/utils/sort';
 import { MODE, _EDIT } from '@shell/config/query-params';
 import { authProvidersInfo } from '@shell/utils/auth';
 import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
 
 export default {
-  components: { SelectIconGrid, Banner },
+  components: {
+    SelectIconGrid, Banner, Loading
+  },
 
-  async asyncData({ store, redirect }) {
-    const authProvs = await authProvidersInfo(store);
+  async fetch() {
+    const authProvs = await authProvidersInfo(this.$store);
 
     if (!!authProvs.enabledLocation) {
-      redirect(authProvs.enabledLocation);
+      return this.$router.replace(authProvs.enabledLocation);
     }
 
-    return { nonLocal: authProvs.nonLocal, enabled: authProvs.enabled };
+    this.$set(this, 'enabled', authProvs.enabled);
+    this.$set(this, 'nonLocal', authProvs.nonLocal);
   },
 
   data() {
@@ -34,6 +38,7 @@ export default {
       hasEditComponent,
 
       // Provided by asyncData later
+      enabled:  false,
       nonLocal: null,
     };
   },
@@ -82,7 +87,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <h1 class="m-0">
       {{ displayName }}
     </h1>
diff --git a/shell/pages/c/_cluster/auth/roles/index.vue b/shell/pages/c/_cluster/auth/roles/index.vue
index a6cd9318b8c..1a12ef4f433 100644
--- a/shell/pages/c/_cluster/auth/roles/index.vue
+++ b/shell/pages/c/_cluster/auth/roles/index.vue
@@ -36,14 +36,12 @@ export default {
     Tab, Tabbed, ResourceTable, Loading, Banner
   },
 
-  async asyncData({ store }) {
-    const globalRoleSchema = store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
-    const roleTemplatesSchema = store.getters[`management/schemaFor`](MANAGEMENT.ROLE_TEMPLATE);
+  async fetch() {
+    const globalRoleSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
+    const roleTemplatesSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.ROLE_TEMPLATE);
 
-    return {
-      globalRoles:   globalRoleSchema ? await store.dispatch(`management/findAll`, { type: MANAGEMENT.GLOBAL_ROLE }) : [],
-      roleTemplates: roleTemplatesSchema ? await store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }) : [],
-    };
+    this.$set(this, 'globalRoles', globalRoleSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.GLOBAL_ROLE }) : []);
+    this.$set(this, 'roleTemplates', roleTemplatesSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }) : []);
   },
 
   data() {
@@ -158,7 +156,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="!globalRoles || !roleTemplates" />
+  <Loading v-if="$fetchState.pending" />
   <div v-else>
     <header>
       <div class="title">