Merge pull request #163 from simonredfern/develop

About page and saving space in the header

Author: simonredfern

src/components/HeaderNav.vue

@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { ref, inject, watchEffect, onMounted, onUnmounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { OBP_API_DEFAULT_RESOURCE_DOC_VERSION, getCurrentUser, getOBPBanks } from '../obp'
+import { OBP_API_DEFAULT_RESOURCE_DOC_VERSION, getCurrentUser } from '../obp'
 import { getOBPAPIVersions } from '../obp/api-version'
 import {
   LOGO_URL as logoSource,
@@ -63,31 +63,12 @@ const combinedMessageDocs = computed(() => {
 // Help menu items (includes debug pages)
 const helpMenuRoutes: Record<string, string> = {
   'Help': '/help',
+  'About': '/about',
   'Providers Status': '/debug/providers-status',
   'OIDC': '/debug/oidc'
 }
 const helpMenuItems = ref(Object.keys(helpMenuRoutes))
 
-// Banks state
-const banks = ref<Array<{ bank_id: string; bank_code: string; full_name: string }>>([])
-const bankItems = computed(() =>
-  [...banks.value]
-    .sort((a, b) => (a.full_name || a.bank_id || '').localeCompare(b.full_name || b.bank_id || ''))
-    .map(b => {
-      const name = b.full_name || b.bank_id || ''
-      const id = b.bank_id || ''
-      return name !== id ? `${name} | ${id}` : id
-    })
-)
-const selectedBankId = ref(localStorage.getItem('obp-selected-bank-id') || '')
-const banksDropdownLabel = computed(() => {
-  if (selectedBankId.value) {
-    const bank = banks.value.find(b => b.bank_id === selectedBankId.value)
-    return bank ? (bank.full_name || bank.bank_id) : 'Banks'
-  }
-  return 'Banks'
-})
-
 // Split versions into main and other
 const mainVersions = ['BGv1.3', 'BGv2', 'OBPv5.1.0', 'OBPv6.0.0', 'UKv3.1', 'dynamic-endpoints', 'dynamic-entities', 'OBPdynamic-endpoint', 'OBPdynamic-entity']
 const sortedVersions = computed(() => {
@@ -264,28 +245,7 @@ const handleMore = (command: string, source?: string) => {
   }
 }
 
-const handleBankSelect = (item: string) => {
-  // Extract bank_id from display format "full_name | bank_id" or just "bank_id"
-  const parts = item.split(' | ')
-  const bankId = parts[parts.length - 1]
-  const bank = banks.value.find(b => b.bank_id === bankId)
-  if (bank) {
-    selectedBankId.value = bank.bank_id
-    localStorage.setItem('obp-selected-bank-id', bank.bank_id)
-    window.dispatchEvent(new CustomEvent('obp-bank-selected', { detail: bank.bank_id }))
-  }
-}
-
 onMounted(async () => {
-  // Fetch banks
-  getOBPBanks().then((data) => {
-    if (data && data.banks && Array.isArray(data.banks)) {
-      banks.value = data.banks
-    }
-  }).catch((error) => {
-    console.error('Failed to fetch banks:', error)
-  })
-
   // Fetch available providers
   await fetchAvailableProviders()
 
@@ -327,8 +287,10 @@ const getCurrentPath = () => {
 </script>
 
 <template>
-  <img alt="OBP logo" class="logo" v-show="logo" :src="logo" />
-  <img alt="OBP logo" class="logo" v-show="!logo" src="@/assets/logo2x-1.png" />
+  <a :href="obpApiHybridPost">
+    <img alt="OBP logo" class="logo" v-show="logo" :src="logo" />
+    <img alt="OBP logo" class="logo" v-show="!logo" src="@/assets/logo2x-1.png" />
+  </a>
   <nav id="nav">
     <RouterView name="header">
       <a v-bind:href="obpApiHybridPost" class="router-link" id="header-nav-home">
@@ -348,15 +310,6 @@ const getCurrentPath = () => {
         :background-color="headerLinksBackgroundColor"
         @select="handleMore"
       />
-      <SvelteDropdown
-        class="menu-right"
-        id="header-nav-banks"
-        :label="banksDropdownLabel"
-        :items="bankItems"
-        :hover-color="headerLinksHoverColor"
-        :background-color="headerLinksBackgroundColor"
-        @select="handleBankSelect"
-      />
       <a v-if="showObpApiManagerButton && hasObpApiManagerHost" v-bind:href="obpApiManagerHost" class="router-link" id="header-nav-api-manager">
         {{ $t('header.api_manager') }}
       </a>
@@ -582,8 +535,7 @@ button.login-button-disabled {
 /* Custom dropdown containers */
 #header-nav-versions,
 #header-nav-message-docs,
-#header-nav-help,
-#header-nav-banks {
+#header-nav-help {
   display: inline-block;
   vertical-align: middle;
 }

src/components/Menu.vue

@@ -28,24 +28,63 @@
 <script setup lang="ts">
 import { ArrowDown } from '@element-plus/icons-vue'
 import { SEARCH_LINKS_COLOR as searchLinksColorSetting } from '../obp/style-setting'
-import { inject, ref } from 'vue'
-import { updateServerStatus, clearCacheByName } from '@/obp/common-functions';
-import { obpApiHostKey } from '@/obp/keys';
+import {
+  HEADER_LINKS_HOVER_COLOR as headerLinksHoverColorSetting,
+  HEADER_LINKS_BACKGROUND_COLOR as headerLinksBackgroundColorSetting
+} from '../obp/style-setting'
+import { inject, ref, computed, onMounted } from 'vue'
+import { getOBPBanks } from '../obp'
+import SvelteDropdown from './SvelteDropdown.vue'
 
-const APP_VERSION = ref(__APP_VERSION__)
 const i18n = inject('i18n')
-const OBP_API_HOST = inject(obpApiHostKey)
 const searchLinksColor = ref(searchLinksColorSetting)
+const headerLinksHoverColor = ref(headerLinksHoverColorSetting)
+const headerLinksBackgroundColor = ref(headerLinksBackgroundColorSetting)
+
+// Banks state
+const banks = ref<Array<{ bank_id: string; bank_code: string; full_name: string }>>([])
+const bankItems = computed(() =>
+  [...banks.value]
+    .sort((a, b) => (a.full_name || a.bank_id || '').localeCompare(b.full_name || b.bank_id || ''))
+    .map(b => {
+      const name = b.full_name || b.bank_id || ''
+      const id = b.bank_id || ''
+      return name !== id ? `${name} | ${id}` : id
+    })
+)
+const selectedBankId = ref(localStorage.getItem('obp-selected-bank-id') || '')
+const banksDropdownLabel = computed(() => {
+  if (selectedBankId.value) {
+    const bank = banks.value.find(b => b.bank_id === selectedBankId.value)
+    return bank ? (bank.full_name || bank.bank_id) : 'Banks'
+  }
+  return 'Banks'
+})
+
+const handleBankSelect = (item: string) => {
+  const parts = item.split(' | ')
+  const bankId = parts[parts.length - 1]
+  const bank = banks.value.find(b => b.bank_id === bankId)
+  if (bank) {
+    selectedBankId.value = bank.bank_id
+    localStorage.setItem('obp-selected-bank-id', bank.bank_id)
+    window.dispatchEvent(new CustomEvent('obp-bank-selected', { detail: bank.bank_id }))
+  }
+}
+
+onMounted(() => {
+  getOBPBanks().then((data) => {
+    if (data && data.banks && Array.isArray(data.banks)) {
+      banks.value = data.banks
+    }
+  }).catch((error) => {
+    console.error('Failed to fetch banks:', error)
+  })
+})
+
 const handleLocale = (command: string) => {
   i18n.global.locale.value = command
 }
-const updateStatus = (event: any) => {
-  updateServerStatus()
-}
-const clearCacheStorage = (event: any) => {
-  clearCacheByName('obp-message-docs-cache')
-  clearCacheByName('obp-resource-docs-cache')
-}
 </script>
 
 <template>
@@ -56,13 +95,15 @@ const clearCacheStorage = (event: any) => {
       <span id="selected-endpoint-tags" class="endpoint-tags"></span>
     </el-col>
     <el-col :span="14" class="menu-right">
-      <span class="host" id="cache-storage-status" @click="clearCacheStorage">App Version: {{ APP_VERSION }}</span>
-      &nbsp;&nbsp;
-      <span class="host"><span id="backend-status" @click="updateStatus">API Host: </span>
-        <a :href="OBP_API_HOST">
-          {{ OBP_API_HOST }}
-        </a>
-      </span>
+      <SvelteDropdown
+        class="menu-right bank-selector"
+        id="menu-nav-banks"
+        :label="banksDropdownLabel"
+        :items="bankItems"
+        :hover-color="headerLinksHoverColor"
+        :background-color="headerLinksBackgroundColor"
+        @select="handleBankSelect"
+      />
       &nbsp;&nbsp;
       <el-dropdown class="menu-right" @command="handleLocale">
         <span class="el-dropdown-link">
@@ -134,4 +175,10 @@ a:hover {
   color: #66b1ff;
   text-decoration: underline;
 }
+
+.bank-selector {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
 </style>

src/components/MessageDocsJsonSchemaSearchNav.vue

@@ -30,12 +30,12 @@ import { reactive, ref, onBeforeMount, inject, watch } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
 import { SEARCH_LINKS_COLOR as searchLinksColorSetting } from '../obp/style-setting'
-import { connectors } from '../obp/message-docs'
 import { obpGroupedMessageDocsJsonSchemaKey } from '@/obp/keys'
 
-let connector = connectors[0]
 const route = useRoute()
 const groupedMessageDocsJsonSchema = ref(inject(obpGroupedMessageDocsJsonSchemaKey) || {})
+const connectors = Object.keys(groupedMessageDocsJsonSchema.value)
+let connector = connectors[0]
 const docs = ref({})
 const groups = ref({})
 const sortedKeys = ref([])

src/components/MessageDocsSearchNav.vue

@@ -30,12 +30,12 @@ import { reactive, ref, onBeforeMount, inject, watch } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
 import { SEARCH_LINKS_COLOR as searchLinksColorSetting } from '../obp/style-setting'
-import { connectors } from '../obp/message-docs'
 import { obpGroupedMessageDocsKey } from '@/obp/keys'
 
-let connector = connectors[0]
 const route = useRoute()
 const groupedMessageDocs = ref(inject(obpGroupedMessageDocsKey) || {})
+const connectors = Object.keys(groupedMessageDocs.value)
+let connector = connectors[0]
 const docs = ref({})
 const groups = ref({})
 const sortedKeys = ref([])

src/language/en.json

@@ -1,6 +1,6 @@
 {
   "header": {
-    "portal_home": "Portal Home",
+    "portal_home": "Portal",
     "api_explorer": "API Explorer",
     "api_manager": "API Manager",
     "glossary": "Glossary",

src/language/es.json

@@ -1,6 +1,6 @@
 {
   "header": {
-    "portal_home": "Portal de inicio",
+    "portal_home": "Portal",
     "api_explorer": "Explorador de API",
     "api_manager": "Administrador de API",
     "glossary": "Glosario",

src/language/ro.json

@@ -1,6 +1,6 @@
 {
   "header": {
-    "portal_home": "Portal Acasă",
+    "portal_home": "Portal",
     "api_explorer": "Explorator API",
     "api_manager": "Administrator API",
     "glossary": "Glosar",

src/obp/message-docs.ts

@@ -28,13 +28,34 @@
 import { OBP_API_VERSION, get, isServerUp } from '../obp'
 import { updateLoadingInfoMessage } from './common-functions'
 
-export const connectors = [
+// Connectors to exclude from message docs display
+const excludedConnectors = ['mapped', 'star', 'proxy', 'internal', 'cardano', 'ethereum']
+
+// Fallback list in case the API endpoint is unavailable
+const fallbackConnectors = [
   'akka_vDec2018',
   'rest_vMar2019',
   'stored_procedure_vDec2019',
   'rabbitmq_vOct2024'
 ]
 
+// Fetch available connectors dynamically from the API
+export async function getConnectors(): Promise<string[]> {
+  try {
+    const data = await get('obp/v6.0.0/system/connectors')
+    if (data && data.connectors && Array.isArray(data.connectors)) {
+      const connectorNames = data.connectors
+        .map((c: any) => c.connector_name)
+        .filter((name: string) => !excludedConnectors.some(exc => name === exc || name.startsWith(exc + '_')))
+      console.log('Fetched connectors from API:', connectorNames)
+      return connectorNames
+    }
+  } catch (error) {
+    console.warn('Failed to fetch connectors from API, using fallback list:', error)
+  }
+  return fallbackConnectors
+}
+
 // Get Message Docs
 export async function getOBPMessageDocs(item: string): Promise<any> {
   const logMessage = `Loading message docs { connector: ${item} }`
@@ -131,6 +152,7 @@ export function getGroupedMessageDocsJsonSchema(docs: any): any {
 }
 
 export async function cacheDoc(cacheStorageOfMessageDocs: any): Promise<any> {
+  const connectors = await getConnectors()
   const messageDocs = await connectors.reduce(async (agroup: any, connector: any) => {
     const logMessage = `Caching message docs { connector: ${connector} }`
     console.log(logMessage)
@@ -151,6 +173,7 @@ async function getCacheDoc(cacheStorageOfMessageDocs: any): Promise<any> {
 }
 
 export async function cacheDocJsonSchema(cacheStorageOfMessageDocsJsonSchema: any): Promise<any> {
+  const connectors = await getConnectors()
   const messageDocsJsonSchema = await connectors.reduce(async (agroup: any, connector: any) => {
     const logMessage = `Caching message docs JSON schema { connector: ${connector} }`
     console.log(logMessage)

src/router/index.ts

@@ -44,6 +44,7 @@ import { isServerUp, OBP_API_DEFAULT_RESOURCE_DOC_VERSION } from '../obp'
 import MessageDocsContent from '@/components/CodeBlock.vue'
 import ProvidersStatusView from '../views/ProvidersStatusView.vue'
 import OIDCDebugView from '../views/OIDCDebugView.vue'
+import AboutView from '../views/AboutView.vue'
 
 export default async function router(): Promise<any> {
   const isServerActive = await isServerUp()
@@ -79,6 +80,11 @@ export default async function router(): Promise<any> {
         name: 'help',
         component: isServerActive ? HelpView : InternalServerErrorView
       },
+      {
+        path: '/about',
+        name: 'about',
+        component: AboutView
+      },
       {
         path: '/message-docs',
         name: 'message-docs-list',