Add other connection row advanced details

Signed-off-by: Lucas ONeil <lucasoneil@gmail.com>

services/tenant-ui/frontend/src/assets/primevueOverrides/datatable.scss

@@ -79,3 +79,10 @@
     margin-right: 15px;
   }
 }
+
+// A specific divider used in expanded table rows
+.expand-divider {
+  border: 1px dashed grey;
+  width: 40px;
+  margin-inline-start: 0;
+}

services/tenant-ui/frontend/src/components/common/RowExpandData.vue

@@ -2,16 +2,35 @@
   <div v-if="loading" class="flex justify-content-center">
     <ProgressSpinner />
   </div>
+
   <div v-if="item">
     <div>
       <slot name="details" v-bind="item"></slot>
     </div>
     <Accordion>
-      <AccordionTab header="View Raw Content">
+      <AccordionTab :header="label">
         <vue-json-pretty :data="item" />
       </AccordionTab>
     </Accordion>
   </div>
+
+  <div v-if="error">
+    <Accordion>
+      <AccordionTab>
+        <template #header>
+          <i class="pi pi-exclamation-circle mr-2 error-text"></i>
+          <span class="error-text">
+            {{
+              $t('common.errorGettingUrl', {
+                url: url,
+              })
+            }}
+          </span>
+        </template>
+        <p>{{ error }}</p>
+      </AccordionTab>
+    </Accordion>
+  </div>
 </template>
 
 <script async setup lang="ts">
@@ -22,13 +41,13 @@ import VueJsonPretty from 'vue-json-pretty';
 import useGetItem from '@/composables/useGetItem';
 
 const props = defineProps({
-  url: {
+  id: {
     type: String,
-    required: true,
+    default: undefined,
   },
-  id: {
+  label: {
     type: String,
-    required: true,
+    default: 'View Raw Content',
   },
   params: {
     type: Object,
@@ -37,10 +56,20 @@ const props = defineProps({
       return {};
     },
   },
+  url: {
+    type: String,
+    required: true,
+  },
 });
 
-const { loading, item, fetchItem } = useGetItem(props.url);
+const { error, loading, item, fetchItem } = useGetItem(props.url);
 
 // ok, let's load up the row with acapy data...
 fetchItem(props.id, props.params);
 </script>
+
+<style>
+.error-text {
+  color: red;
+}
+</style>

services/tenant-ui/frontend/src/components/connections/Connections.vue

@@ -130,6 +130,16 @@
       </Column>
       <template #expansion="{ data }">
         <RowExpandData :id="data.connection_id" :url="API_PATH.CONNECTIONS" />
+        <hr class="expand-divider" />
+        <RowExpandData
+          :url="API_PATH.CONNECTIONS_ENDPOINTS(data.connection_id)"
+          label="View Connection Endpoints"
+        />
+        <hr class="expand-divider" />
+        <RowExpandData
+          :url="API_PATH.CONNECTIONS_METADATA(data.connection_id)"
+          label="View Connection Metadata"
+        />
       </template>
     </DataTable>
   </MainCardContent>

services/tenant-ui/frontend/src/components/holder/CredentialsTable.vue

@@ -257,10 +257,4 @@ onMounted(async () => {
 button.accepted {
   color: green !important;
 }
-
-.expand-divider {
-  border: 1px dashed grey;
-  width: 40px;
-  margin-inline-start: 0;
-}
 </style>

services/tenant-ui/frontend/src/composables/useGetItem.ts

@@ -7,15 +7,16 @@ export default function useGetItem(url: string): GetItem {
 
   const item = ref();
   const loading: any = ref(false);
+  const error = ref('');
 
-  async function fetchItem(id: string, params: any = {}) {
-    const error: any = ref(null);
+  async function fetchItem(id?: string, params: any = {}) {
     try {
       // call store
       loading.value = true;
       item.value = await utilFetchItem(data.value, id, error, loading, params);
-    } catch (error) {
+    } catch (err: any) {
       item.value = null;
+      error.value = err.message;
     } finally {
       loading.value = false;
     }
@@ -24,6 +25,7 @@ export default function useGetItem(url: string): GetItem {
   return {
     item,
     loading,
+    error,
     fetchItem,
   };
 }

services/tenant-ui/frontend/src/helpers/constants.ts

@@ -27,6 +27,8 @@ export const API_PATH = {
   CONNECTIONS_CREATE_INVITATION: '/connections/create-invitation',
   CONNECTIONS_RECEIVE_INVITATION: '/connections/receive-invitation',
   CONNECTIONS_INVITATION: (id: string) => `/connections/${id}/invitation`,
+  CONNECTIONS_ENDPOINTS: (id: string) => `/connections/${id}/endpoints`,
+  CONNECTIONS_METADATA: (id: string) => `/connections/${id}/metadata`,
 
   CREDENTIAL_MIME_TYPES: (id: string) => `/credential/mime-types/${id}`,
   CREDENTIAL_REVOKED: (id: string) => `/credential/revoked/${id}`,

services/tenant-ui/frontend/src/plugins/i18n/locales/en.json

@@ -57,6 +57,7 @@
     "emailAddress": "Email Address",
     "encodedJwt": "Encoded JWT",
     "endorser": "Endorser",
+    "errorGettingUrl": "Error fetching {url}",
     "genericError": "An error occurred",
     "invitationUrl": "Invitation URL",
     "json": "JSON",

services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json

@@ -57,6 +57,7 @@
     "emailAddress": "Email Address <FR>",
     "encodedJwt": "Encoded JWT <FR>",
     "endorser": "Endorser <FR>",
+    "errorGettingUrl": "Error fetching {url} <FR>",
     "genericError": "An error occurred <FR>",
     "invitationUrl": "Invitation URL <FR>",
     "json": "JSON <FR>",

services/tenant-ui/frontend/src/plugins/i18n/locales/ja.json

@@ -57,6 +57,7 @@
     "emailAddress": "Email Address <JA>",
     "encodedJwt": "Encoded JWT <JA>",
     "endorser": "Endorser <JA>",
+    "errorGettingUrl": "Error fetching {url} <JA>",
     "genericError": "An error occurred <JA>",
     "invitationUrl": "Invitation URL <JA>",
     "json": "JSON <JA>",

services/tenant-ui/frontend/src/store/utils/fetchItem.ts

@@ -4,7 +4,7 @@ import { Ref } from 'vue';
 
 export async function fetchItem(
   url: string,
-  id: string,
+  id: string | undefined,
   error: Ref<any>,
   loading: Ref<boolean>,
   params: object = {}

services/tenant-ui/frontend/src/types/index.ts

@@ -4,8 +4,11 @@
 //   credentialExchange: V10CredentialExchange;
 // }
 
+import { Ref } from 'vue';
+
 export interface GetItem {
   item?: any;
+  error?: Ref<String>;
   loading: boolean;
-  fetchItem: (id: string, params?: any) => Promise<void>;
+  fetchItem: (id?: string, params?: any) => Promise<void>;
 }