Feat/fixing inconsistencies (#240)

Co-authored-by: dc-autobot[bot] <181364585+dc-autobot[bot]@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "veritable-ui",
-  "version": "0.14.17",
+  "version": "0.14.18",
   "description": "UI for Veritable",
   "main": "src/index.ts",
   "type": "module",

public/styles/shared.css

@@ -154,7 +154,9 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-
+#connection-search-input {
+  min-width: 210px;
+}
 .search-window {
   border-color: var(--text-color-sub);
   border-radius: 5px;

src/controllers/credentials/__tests__/index.test.ts

@@ -23,7 +23,7 @@ describe('CredentialsController', () => {
       const result = await controller.listCredentials(req).then(toHTMLString)
 
       expect(result).to.equal(
-        'listCredentials_issuer-done-DIGITAL CATAPULT-Supplier credentials-holder-done-DIGITAL CATAPULT-Supplier credentials-issuer-done-CARE ONUS LTD-Supplier credentials-holder-done-CARE ONUS LTD-Supplier credentials_listCredentials'
+        'listCredentials_issuer-done-DIGITAL CATAPULT-Supplier credential-holder-done-DIGITAL CATAPULT-Supplier credential-issuer-done-CARE ONUS LTD-Supplier credential-holder-done-CARE ONUS LTD-Supplier credential_listCredentials'
       )
     })
 
@@ -103,7 +103,7 @@ describe('CredentialsController', () => {
       const res = await controller.listCredentials(req, '').then(toHTMLString)
 
       expect(res).to.equal(
-        'listCredentials_issuer-done-CARE ONUS LTD-Supplier credentials-holder-done-CARE ONUS LTD-Supplier credentials_listCredentials'
+        'listCredentials_issuer-done-CARE ONUS LTD-Supplier credential-holder-done-CARE ONUS LTD-Supplier credential_listCredentials'
       )
     })
 
@@ -114,7 +114,7 @@ describe('CredentialsController', () => {
       const res = await controller.listCredentials(req, '').then(toHTMLString)
 
       expect(res).to.equal(
-        'listCredentials_issuer-done-DIGITAL CATAPULT-Supplier credentials-holder-done-DIGITAL CATAPULT-Supplier credentials_listCredentials'
+        'listCredentials_issuer-done-DIGITAL CATAPULT-Supplier credential-holder-done-DIGITAL CATAPULT-Supplier credential_listCredentials'
       )
     })
   })

src/controllers/credentials/index.ts

@@ -56,7 +56,7 @@ export class CredentialsController extends HTMLController {
 
     const result = {
       companyName: connection.company_name,
-      type: 'Supplier credentials' as const,
+      type: 'Supplier credential' as const,
       ...credential,
     }
     req.log.debug('Credential found %s: %j', credential.id, result)

src/views/connection/connection.tsx

@@ -55,7 +55,7 @@ export default class ConnectionTemplates {
         title="Veritable - Connections"
         heading="Connections"
         activePage="connections"
-        headerLinks={[{ name: 'Connections', url: '#' }]}
+        headerLinks={[{ name: 'Connection Management', url: '#' }]}
         // htmx props
         hx-get="/connection"
         hx-trigger="every 10s"
@@ -65,7 +65,7 @@ export default class ConnectionTemplates {
         hx-include="#connection-search-input"
       >
         <div class="list-page-header">
-          <span>Connections Summary</span>
+          <span>Connection Management</span>
           <LinkButton
             disabled={false}
             text="Invite New Connection"

src/views/credentials/__tests__/fixtures.ts

@@ -6,14 +6,14 @@ export const AliceCredentials = [
     state: 'done',
     role: 'issuer',
     companyName: 'DIGITAL CATAPULT',
-    type: 'Supplier credentials',
+    type: 'Supplier credential',
   },
   {
     id: 'dabfcec3-9232-4eaa-abf2-ce64193772ed',
     state: 'done',
     role: 'holder',
     companyName: 'CARE ONUS LTD',
-    type: 'Supplier credentials',
+    type: 'Supplier credential',
   },
 ] as ExtendedCredential[]
 
@@ -23,13 +23,13 @@ export const BobCredentials = [
     state: 'done',
     role: 'issuer',
     companyName: 'CARE ONUS LTD',
-    type: 'Supplier credentials',
+    type: 'Supplier credential',
   },
   {
     id: 'f70d675a-1915-42b5-b279-ce79a3aceb60',
     state: 'done',
     role: 'holder',
     companyName: 'DIGITAL CATAPULT',
-    type: 'Supplier credentials',
+    type: 'Supplier credential',
   },
 ] as ExtendedCredential[]

src/views/credentials/index.tsx

@@ -4,7 +4,7 @@ import { credentialStatusToClass, LinkButton, Page } from '../common.js'
 
 import type { Credential } from '../../models/veritableCloudagent/internal.js'
 
-export type ExtendedCredential = Credential & { companyName: string; type: 'Supplier credentials' }
+export type ExtendedCredential = Credential & { companyName: string; type: 'Supplier credential' }
 
 @singleton()
 export default class CredentialListTemplates {
@@ -13,9 +13,9 @@ export default class CredentialListTemplates {
   private roleToDirection = (role: Credential['role']): JSX.Element => {
     switch (role) {
       case 'holder':
-        return <p>Received</p>
+        return <p>Recipient</p>
       case 'issuer':
-        return <p>Given</p>
+        return <p>Sender</p>
       default:
         return <p>unknown</p>
     }
@@ -31,6 +31,14 @@ export default class CredentialListTemplates {
   }
 
   public listPage = (credentials: ExtendedCredential[], search: string = '') => {
+    // function adjustInputWidth(input: any) {
+    //   const span = document.getElementById('width-span')
+
+    //   // span.textContent = input.value || input.placeholder
+
+    //   return '200px'
+    // }
+
     return (
       <Page
         title="Veritable - Credentials"
@@ -74,7 +82,7 @@ export default class CredentialListTemplates {
           </div>
           <table class="list-page">
             <thead>
-              {['Company Name', 'Credential Type', 'Direction', 'Crendetial status', 'Actions'].map((name: string) => (
+              {['Company Name', 'Credential Type', 'Relationship', 'Status', 'Actions'].map((name: string) => (
                 <th>
                   <span>{Html.escapeHtml(name || 'unknown')}</span>
                   <a class="list-filter-icon icon disabled" />

src/views/homepage/__tests__/homepage.test.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HomepageTemplates should render homepage 1`] = `"<!DOCTYPE html><html lang=\\"en\\"><head><script src=\\"/lib/htmx.org/htmx.min.js\\"></script><script src=\\"/lib/htmx-ext-json-enc/json-enc.js\\"></script><script src=\\"/public/scripts/auth-redirect.js\\"></script><link rel=\\"icon\\" type=\\"image/ico\\" href=\\"/public/images/favicon-dark.ico\\" media=\\"(prefers-color-scheme: dark)\\"/><link rel=\\"icon\\" type=\\"image/ico\\" href=\\"/public/images/favicon.ico\\" media=\\"(prefers-color-scheme: light), (prefers-color-scheme: no-preference)\\"/><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/public/styles/main.css\\"/><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/public/styles/homepage.css\\"/><title>Veritable - Homepage</title></head><body hx-ext=\\"json-enc\\"><nav id=\\"side-bar\\"><a id=\\"veritable-logo\\" href=\\"/about\\"></a><div class=\\"profile-icon\\" style=\\"background-color:#38b6ff;\\">A</div><a title=\\"categories\\" href=\\"/\\" data-active style=\\"--background-image:url('/public/images/category.svg');\\"></a><a title=\\"connections\\" href=\\"/connection\\" style=\\"--background-image:url('/public/images/connection.svg');\\"></a><a title=\\"queries\\" href=\\"/queries\\" style=\\"--background-image:url('/public/images/query.svg');\\"></a><a title=\\"credentials\\" href=\\"/credentials\\" style=\\"--background-image:url('/public/images/credential.svg');\\"></a><a title=\\"settings\\" href=\\"/settings\\" style=\\"--background-image:url('/public/images/setting.svg');\\"></a></nav><main><div id=\\"content-header\\"><h1>Homepage</h1><div id=\\"content-header-nav\\"><a title=\\"home\\" class=\\"nav icon\\" href=\\"/\\"></a><a title=\\"\\" href=\\"/\\"></a></div></div><div id=\\"content-main\\"><div id=\\"homepage-container\\"><a href=\\"/connection\\"><img src=\\"/public/images/connection.svg\\"/><h1>Onboard/Refer</h1><p>Easily onboard new companies or refer companies to join your network.</p></a><a href=\\"/queries\\"><img src=\\"/public/images/query.svg\\"/><h1>Queries</h1><p>Ask and answer digitally verified questions from any of your contacts.</p></a><a href=\\"/credentials\\"><img src=\\"/public/images/credential.svg\\"/><h1>Credentials</h1><p>Manage and verify digital credentials securely within your network.</p></a><a href=\\"/settings\\"><img src=\\"/public/images/setting.svg\\"/><h1>Settings</h1><p>Manage your account preferences and profile settings.</p></a></div></div></main></body></html>"`;
+exports[`HomepageTemplates should render homepage 1`] = `"<!DOCTYPE html><html lang=\\"en\\"><head><script src=\\"/lib/htmx.org/htmx.min.js\\"></script><script src=\\"/lib/htmx-ext-json-enc/json-enc.js\\"></script><script src=\\"/public/scripts/auth-redirect.js\\"></script><link rel=\\"icon\\" type=\\"image/ico\\" href=\\"/public/images/favicon-dark.ico\\" media=\\"(prefers-color-scheme: dark)\\"/><link rel=\\"icon\\" type=\\"image/ico\\" href=\\"/public/images/favicon.ico\\" media=\\"(prefers-color-scheme: light), (prefers-color-scheme: no-preference)\\"/><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/public/styles/main.css\\"/><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/public/styles/homepage.css\\"/><title>Veritable - Homepage</title></head><body hx-ext=\\"json-enc\\"><nav id=\\"side-bar\\"><a id=\\"veritable-logo\\" href=\\"/about\\"></a><div class=\\"profile-icon\\" style=\\"background-color:#38b6ff;\\">A</div><a title=\\"categories\\" href=\\"/\\" data-active style=\\"--background-image:url('/public/images/category.svg');\\"></a><a title=\\"connections\\" href=\\"/connection\\" style=\\"--background-image:url('/public/images/connection.svg');\\"></a><a title=\\"queries\\" href=\\"/queries\\" style=\\"--background-image:url('/public/images/query.svg');\\"></a><a title=\\"credentials\\" href=\\"/credentials\\" style=\\"--background-image:url('/public/images/credential.svg');\\"></a><a title=\\"settings\\" href=\\"/settings\\" style=\\"--background-image:url('/public/images/setting.svg');\\"></a></nav><main><div id=\\"content-header\\"><h1>Homepage</h1><div id=\\"content-header-nav\\"><a title=\\"home\\" class=\\"nav icon\\" href=\\"/\\"></a></div></div><div id=\\"content-main\\"><div id=\\"homepage-container\\"><a href=\\"/connection\\"><img src=\\"/public/images/connection.svg\\"/><h1>Onboard/Refer</h1><p>Easily onboard new companies or refer companies to join your network.</p></a><a href=\\"/queries\\"><img src=\\"/public/images/query.svg\\"/><h1>Queries</h1><p>Ask and answer digitally verified questions from any of your contacts.</p></a><a href=\\"/credentials\\"><img src=\\"/public/images/credential.svg\\"/><h1>Credentials</h1><p>Manage and verify digital credentials securely within your network.</p></a><a href=\\"/settings\\"><img src=\\"/public/images/setting.svg\\"/><h1>Settings</h1><p>Manage your account preferences and profile settings.</p></a></div></div></main></body></html>"`;

src/views/homepage/homepage.tsx

@@ -10,7 +10,7 @@ export default class HomepageTemplates {
         title="Veritable - Homepage"
         heading="Homepage"
         activePage="categories"
-        headerLinks={[{ name: '', url: '/' }]}
+        headerLinks={[]}
         stylesheets={['homepage.css']}
       >
         <div id="homepage-container">