Merge pull request #394 from epinio/feat/dashboard-page

Feat/dashboard page

Author: dcharles525

dashboard/pkg/epinio/components/dashboard/Cards.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
+import { computed, defineProps, useSlots } from 'vue';
+const slots = useSlots();
 const props = defineProps<{
   isLoaded: boolean,
-  title: string,
+  title: string | undefined,
   icon: string,
   cta: object,
   link: object,
@@ -52,16 +52,16 @@ const setLoading = computed(() => {
       {{ props.linkText }}
     </router-link>
 
-    <hr v-if="$slots.default">
+    <hr v-if="slots.default">
 
     <div
-      v-if="$slots.default"
+      v-if="slots.default"
       class="d-slot"
     >
       <h2 v-if="props.slotTitle">
         {{ props.slotTitle }}
       </h2>
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -108,36 +108,6 @@ const setLoading = computed(() => {
       min-height: 18px;
       font-size: 16px;
     }
-
-    ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: $space-s;
-
-      li, .link {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        font-size: 14px;
-
-        &:not(:last-child) {
-          border-bottom: 1px solid var(--border);
-          padding-bottom: $space-s;
-        }
-      }
-
-      li > .disabled {
-        color: var(--disabled-text);
-      }
-
-      .disabled {
-        cursor: not-allowed;
-      }
-    }
   }
 }
 

dashboard/pkg/epinio/index.ts

@@ -1,34 +1,14 @@
-// import { importTypes } from '@rancher/auto-import';
-// import { IPlugin } from '@shell/core/types';
-// import extensionRouting from './routing/extension-routing';
-
-// // Init the package
-// export default function (plugin: IPlugin) {
-//   // Auto-import model, detail, edit from the folders
-//   importTypes(plugin);
-
-//   // Provide extension metadata from package.json
-//   // it will grab information such as `name` and `description`
-//   plugin.metadata = require('./package.json');
-
-//   // Load a product
-//   plugin.addProduct(require('./product'));
-
-//   // Add Vue Routes
-//   plugin.addRoutes(extensionRouting);
-// }
-
 import { importTypes } from '@rancher/auto-import';
 import {
   ActionLocation, ActionOpts, IPlugin, OnNavAwayFromPackage, OnNavToPackage
 } from '@shell/core/types';
 import { EPINIO_TYPES } from './types';
 import epinioRoutes from './routing/epinio-routing';
-// import extensionRouting from './routing/extension-routing';
 
 import epinioMgmtStore from './store/epinio-mgmt-store';
 import epinioStore from './store/epinio-store';
 import { createEpinioRoute } from './utils/custom-routing';
+import { createI18n } from 'vue-i18n';
 
 const epinioObjAnnotations = [
   'epinio.io/app-container',
@@ -67,12 +47,19 @@ export default function(plugin: IPlugin) {
   // plugin.addProduct(require('./product'));
 
   // Add Vuex stores
-  plugin.addDashboardStore(epinioMgmtStore.config.namespace, epinioMgmtStore.specifics, epinioMgmtStore.config);
-  plugin.addDashboardStore(epinioStore.config.namespace, epinioStore.specifics, epinioStore.config);
+  plugin.addDashboardStore(
+    epinioMgmtStore.config.namespace, 
+    epinioMgmtStore.specifics, 
+    epinioMgmtStore.config,
+  );
+  plugin.addDashboardStore(
+    epinioStore.config.namespace, 
+    epinioStore.specifics, 
+    epinioStore.config,
+  );
 
   // Add Vue Routes
   plugin.addRoutes(epinioRoutes);
-  // plugin.addRoutes(extensionRouting);
 
   // Add hooks to Vue navigation world
   plugin.addNavHooks(onEnter, onLeave);