Feature/minor UI updates

src/components/dashboard/HappsCard.vue

@@ -27,7 +27,7 @@ const emit = defineEmits(['try-again-clicked'])
         v-if="!props.data || props.data.length === 0"
         class="no-happs"
       >
-        {{ $t('hosted_happs.no_happs') }}
+        {{ $t('hosted_happs.no_enabled_happs') }}
       </div>
       <div
         v-for="happ in props.data"
@@ -72,6 +72,8 @@ const emit = defineEmits(['try-again-clicked'])
   align-items: center;
   height: 100%;
   color: var(--grey-color);
+  font-size: 15px;
   font-weight: bold;
+	text-align: center;
 }
 </style>

src/interfaces/HposInterface.ts

@@ -10,7 +10,6 @@ import { eraseHpAdminKeypair, getHpAdminKeypair } from '@/utils/keyManagement'
 
 interface HposInterface {
   getUsage: () => Promise<UsageResponse | { error: unknown }>
-  getTopHostedHapps: () => Promise<HApp[] | { error: unknown }>
   getHostedHapps: () => Promise<HApp[] | { error: unknown }>
   getHostEarnings: () => Promise<HostEarnings | { error: unknown }>
   getHostPreferences: () => Promise<HostPreferencesResponse | { error: unknown }>
@@ -369,30 +368,6 @@ export function useHposInterface(): HposInterface {
     }
   }
 
-  async function getTopHostedHapps(): Promise<HposHolochainCallResponse | { error: unknown }> {
-    try {
-      // NB: the `/hosted_happs` endpoint returns happs sorted by earnings in descending order
-      const result = await hposHolochainCall({
-        method: 'get',
-        path: '/hosted_happs',
-        params: {
-          usage_interval: 7,
-          quantity: kTopHappsToDisplay
-        }
-      })
-
-      if (isHappArray(result)) {
-        return result.filter((happ: HApp) => happ.enabled)
-      } else {
-        console.error("getTopHostedHapps didn't return an array")
-        return []
-      }
-    } catch (error) {
-      console.error('getTopHostedHapps encountered an error: ', error)
-      return { error }
-    }
-  }
-
   async function getHostedHapps(): Promise<HposHolochainCallResponse | { error: unknown }> {
     try {
       const result = await hposHolochainCall({
@@ -748,7 +723,6 @@ export function useHposInterface(): HposInterface {
 
   return {
     getUsage,
-    getTopHostedHapps,
     getHostedHapps,
     getHostEarnings,
     checkAuth,

src/locales/en.ts

@@ -48,9 +48,11 @@ export default {
     ...commonTranslations.holofuel_modal
   },
   hosted_happs: {
+    disabled: 'Disabled hApps',
+    enabled: 'Enabled hApps',
     hosted_for: 'Hosted for',
-    no_active_happs: 'You’re not hosting any hApps',
-    no_inactive_happs: 'You do not have any inactive hApps',
+    no_enabled_happs: 'You have not enabled any hApps for hosting',
+    no_disabled_happs: 'You have not disabled any hApps',
     no_filtered_happs: 'No hApps match your search',
     title: 'Top Hosted hApps'
   },

src/pages/DashboardPage.vue

@@ -14,6 +14,7 @@ import { isError } from '@/types/predicates'
 import type { HoloFuelCardData, Error } from '@/types/types'
 
 const kPaymentsToDisplay = 3
+const kTopHostedHAppsToDisplay = 3
 
 const router = useRouter()
 const dashboardStore = useDashboardStore()
@@ -41,7 +42,11 @@ const holoFuelCardData = computed((): HoloFuelCardData | Error => {
   }
 })
 
-const topHostedHapps = computed(() => dashboardStore.hostedHapps)
+const topHostedHapps = computed(() =>
+  isError(dashboardStore.hostedHapps)
+    ? dashboardStore.hostedHapps
+    : dashboardStore.hostedHapps.filter((hApp) => !hApp.enabled).slice(0, kTopHostedHAppsToDisplay)
+)
 
 const earnings = computed(() =>
   isError(dashboardStore.hostEarnings)
@@ -59,7 +64,7 @@ const usage = computed(() => dashboardStore.usage)
 
 async function getTopHostedHapps(): Promise<void> {
   isLoadingHostedHapps.value = true
-  await dashboardStore.getTopHostedHapps()
+  await dashboardStore.getHostedHapps()
   isLoadingHostedHapps.value = false
 }
 

src/pages/HAppsPage.vue

@@ -4,6 +4,7 @@ import BaseSearchInput from '@uicommon/components/BaseSearchInput.vue'
 import HAppCard from '@uicommon/components/HAppCard.vue'
 import { EChipType } from '@uicommon/types/ui'
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import BaseTabSelect from '@/components/BaseTabSelect.vue'
 import SortByDropdown from '@/components/hApps/SortByDropdown.vue'
 import PrimaryLayout from '@/components/PrimaryLayout.vue'
@@ -13,18 +14,23 @@ import { isError as isErrorPredicate } from '@/types/predicates'
 
 const { getHostedHapps } = useHposInterface()
 
+const { t } = useI18n()
+
 const isLoading = ref(false)
 const isError = ref(false)
 
-const selectedTab = ref('active')
+const selectedTab = ref('enabled')
 
 const tabs = computed(() => [
-  { value: 'active', name: 'Active hApps', current: selectedTab.value === 'active' },
   {
-    value: 'inactive',
-    name: 'Inactive hApps',
-    href: '#',
-    current: selectedTab.value === 'inactive'
+    value: 'enabled',
+    name: t('hosted_happs.enabled'),
+    current: selectedTab.value === 'enabled'
+  },
+  {
+    value: 'disabled',
+    name: t('hosted_happs.disabled'),
+    current: selectedTab.value === 'disabled'
   }
 ])
 
@@ -49,9 +55,9 @@ const happs = ref<HApp[] | { error: unknown }>([])
 const sortBy = ref(kSortOptions.alphabetical.value)
 
 const filteredHapps = computed((): HApp[] => {
-	let hAppsFilteredByActivity: HApp[] = []
+  let hAppsFilteredByActivity: HApp[] = []
 
-	const sortByLogic: (a: HApp, b: HApp) => number =
+  const sortByLogic: (a: HApp, b: HApp) => number =
     // Sorting by earnings is not available now as we don't have a property
     // like that in the HApp, we use 'sourceChains' for now
     sortBy.value === kSortOptions.earnings.value
@@ -64,7 +70,7 @@ const filteredHapps = computed((): HApp[] => {
   } else if (!isErrorPredicate(happs.value)) {
     // If hApps are hosted filter them by activity
     hAppsFilteredByActivity =
-      selectedTab.value === 'active'
+      selectedTab.value === 'enabled'
         ? happs.value.filter((hApp: HApp) => hApp.enabled)
         : happs.value.filter((hApp: HApp) => !hApp.enabled)
   }
@@ -164,7 +170,7 @@ onMounted(async () => {
       >
         <HAppCard
           is-empty
-          :empty-card-label="filterValue ? 'hosted_happs.no_filtered_happs' : selectedTab === 'active' ? 'hosted_happs.no_active_happs' : 'hosted_happs.no_inactive_happs'"
+          :empty-card-label="filterValue ? 'hosted_happs.no_filtered_happs' : selectedTab === 'enabled' ? 'hosted_happs.no_enabled_happs' : 'hosted_happs.no_disabled_happs'"
           class="happs__happ-list-item"
         />
       </div>

src/store/dashboard.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { HApp, HostEarnings, UsageResponse, useHposInterface } from '@/interfaces/HposInterface'
 
-const { getUsage, getTopHostedHapps, getHostEarnings } = useHposInterface()
+const { getUsage, getHostedHapps, getHostEarnings } = useHposInterface()
 
 interface State {
   usage: UsageResponse | { error: unknown }
@@ -33,8 +33,8 @@ export const useDashboardStore = defineStore('dashboard', {
       this.usage = await getUsage()
     },
 
-    async getTopHostedHapps(): Promise<void> {
-      this.hostedHapps = await getTopHostedHapps()
+    async getHostedHapps(): Promise<void> {
+      this.hostedHapps = await getHostedHapps()
     },
 
     async getEarnings(): Promise<void> {