completed migration of file view to generic model list

vue/src/apps/ModelListView/ModelListView.vue

@@ -15,12 +15,10 @@
       <div class="col-xl-8 col-12">
         <div class="container-fluid d-flex flex-column flex-grow-1">
 
-          <div class="row" v-if="this_model === Models.AUTOMATION">
+          <!-- dynamically loaded header components -->
+          <div class="row" v-if="header_component_name !== ''">
             <div class="col-md-12">
-              <b-alert show variant="warning">
-                <b-badge>BETA</b-badge>
-                {{ $t('warning_feature_beta') }}
-              </b-alert>
+              <component :is="headerComponent"></component>
             </div>
           </div>
 
@@ -109,6 +107,7 @@ import GenericHorizontalCard from "@/components/GenericHorizontalCard";
 import GenericModalForm from "@/components/Modals/GenericModalForm";
 import ModelMenu from "@/components/ModelMenu";
 import {ApiApiFactory} from "@/utils/openapi/api";
+//import StorageQuota from "@/components/StorageQuota";
 
 Vue.use(BootstrapVue)
 
@@ -117,7 +116,9 @@ export default {
   // or i'm capturing it incorrectly
   name: 'ModelListView',
   mixins: [CardMixin, ApiMixin, ToastMixin],
-  components: {GenericHorizontalCard, GenericModalForm, GenericInfiniteCards, ModelMenu},
+  components: {
+     GenericHorizontalCard, GenericModalForm, GenericInfiniteCards, ModelMenu,
+  },
   data() {
     return {
       // this.Models and this.Actions inherited from ApiMixin
@@ -134,6 +135,12 @@ export default {
       show_modal: false,
       show_split: false,
       paginated: false,
+      header_component_name: undefined,
+    }
+  },
+  computed: {
+    headerComponent() {
+      return () => import(`@/components/${this.header_component_name}`)
     }
   },
   mounted() {
@@ -142,6 +149,7 @@ export default {
     this.this_model = this.Models[model_config?.model]
     this.this_recipe_param = model_config?.recipe_param
     this.paginated = this.this_model?.paginated ?? false
+    this.header_component_name = this.this_model?.list?.header_component?.name ?? undefined
     this.$nextTick(() => {
       if (!this.paginated) {
         this.getItems({page:1},'left')