Merge pull request #1034 from bcgov/chore/tenantUiUpdates

Tenant UI library updates
bcgov · Mar 2, 2024 · 958ece2 · 958ece2
2 parents 0464d93 + 043f58d
commit 958ece2
Show file tree

Hide file tree

Showing 20 changed files with 891 additions and 958 deletions.
diff --git a/services/tenant-ui/frontend/package-lock.json b/services/tenant-ui/frontend/package-lock.json
diff --git a/services/tenant-ui/frontend/package.json b/services/tenant-ui/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tenant-ui-frontend",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,19 +23,19 @@
     "@vuelidate/validators": "^2.0.4",
     "axios": "^1.6.7",
     "date-fns": "^3.3.1",
-    "dompurify": "^3.0.8",
+    "dompurify": "^3.0.9",
     "json-editor-vue": "^0.12.0",
-    "marked": "^11.2.0",
-    "oidc-client-ts": "^3.0.0",
+    "marked": "^12.0.0",
+    "oidc-client-ts": "^3.0.1",
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "^3.47.2",
+    "primevue": "^3.49.1",
     "qrcode.vue": "^3.4.1",
-    "vue": "^3.4.15",
-    "vue-i18n": "^9.9.1",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.10.1",
     "vue-json-pretty": "^2.3.0",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.3.0",
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
@@ -44,22 +44,22 @@
     "@types/dompurify": "^3.0.5",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-v8": "^0.34.6",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.4",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vue": "^9.22.0",
     "flat": "^6.0.1",
     "glob": "^10.3.10",
     "jsdom": "^24.0.0",
-    "msw": "^2.0.14",
-    "prettier": "^3.2.4",
-    "sass": "^1.70.0",
+    "msw": "^2.2.2",
+    "prettier": "^3.2.5",
+    "sass": "^1.71.1",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.1.4",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.27",
     "whatwg-fetch": "^3.6.20"

diff --git a/services/tenant-ui/frontend/src/assets/primevueOverrides/formFields.scss b/services/tenant-ui/frontend/src/assets/primevueOverrides/formFields.scss
@@ -5,6 +5,7 @@
 
 // The generatl field wrapper
 .field {
+  line-height: 24px;
   > label {
     margin-bottom: 2px !important;
     display: block !important;

diff --git a/services/tenant-ui/frontend/src/assets/style.scss b/services/tenant-ui/frontend/src/assets/style.scss
@@ -16,7 +16,6 @@ body,
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-size: 14px;
-  line-height: 24px;
   font-weight: 400;
 
   font-synthesis: none;

diff --git a/services/tenant-ui/frontend/src/components/about/Traction.vue b/services/tenant-ui/frontend/src/components/about/Traction.vue
@@ -3,10 +3,10 @@
     <div class="col-12 md:col-6">
       <strong>{{ $t('about.traction.info') }}</strong>
       <p class="my-0">
-        {{ $t('about.traction.tractionVersion', { version: '0.4.0' }) }}
+        {{ $t('about.traction.tractionVersion', { version: '0.4.1' }) }}
       </p>
       <p class="mt-0">
-        {{ $t('about.traction.uiVersion', { version: '0.4.0' }) }}
+        {{ $t('about.traction.uiVersion', { version: '0.4.1' }) }}
       </p>
     </div>
 

diff --git a/services/tenant-ui/frontend/src/components/authentications/ApiKeys.vue b/services/tenant-ui/frontend/src/components/authentications/ApiKeys.vue
@@ -20,13 +20,13 @@
             <CreateApiKey @success="loadTable" />
           </div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search ml-0" />
+            <IconField icon-position="left">
+              <InputIcon><i class="pi pi-search" /></InputIcon>
               <InputText
                 v-model="filter.global.value"
                 :placeholder="$t('apiKey.search')"
               />
-            </span>
+            </IconField>
           </div>
         </div>
       </template>
@@ -92,6 +92,8 @@ import { onMounted, ref, computed } from 'vue';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { FilterMatchMode } from 'primevue/api';
 import { useToast } from 'vue-toastification';
 // State

diff --git a/services/tenant-ui/frontend/src/components/connections/Connections.vue b/services/tenant-ui/frontend/src/components/connections/Connections.vue
@@ -25,13 +25,13 @@
             <DidExchange class="ml-4" />
           </div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search" />
+            <IconField icon-position="left">
+              <InputIcon><i class="pi pi-search" /></InputIcon>
               <InputText
                 v-model="filter.alias.value"
                 :placeholder="$t('connect.connections.search')"
               />
-            </span>
+            </IconField>
           </div>
         </div>
       </template>
@@ -154,6 +154,8 @@ import Button from 'primevue/button';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'vue-toastification';
 // State

diff --git a/services/tenant-ui/frontend/src/components/connections/Invitations.vue b/services/tenant-ui/frontend/src/components/connections/Invitations.vue
@@ -24,13 +24,13 @@
             <CreateConnection />
           </div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search ml-0" />
+            <IconField icon-position="left">
+              <InputIcon><i class="pi pi-search" /></InputIcon>
               <InputText
                 v-model="filter.alias.value"
                 :placeholder="$t('connect.invitations.search')"
               />
-            </span>
+            </IconField>
           </div>
         </div>
       </template>
@@ -128,6 +128,9 @@ import { onMounted, ref, computed } from 'vue';
 import Column from 'primevue/column';
 import InputText from 'primevue/inputtext';
 import DataTable from 'primevue/datatable';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
+
 import { useToast } from 'vue-toastification';
 import { FilterMatchMode } from 'primevue/api';
 // State

diff --git a/services/tenant-ui/frontend/src/components/holder/CredentialsTable.vue b/services/tenant-ui/frontend/src/components/holder/CredentialsTable.vue
@@ -18,13 +18,13 @@
       <div class="flex justify-content-between">
         <div class="flex justify-content-start"></div>
         <div class="flex justify-content-end">
-          <span class="p-input-icon-left">
-            <i class="pi pi-search" />
+          <IconField icon-position="left">
+            <InputIcon><i class="pi pi-search" /></InputIcon>
             <InputText
               v-model="filter.cred_def_id.value"
               placeholder="Search Credentials"
             />
-          </span>
+          </IconField>
         </div>
       </div>
     </template>
@@ -160,6 +160,8 @@ import Button from 'primevue/button';
 import Column from 'primevue/column';
 import DataTable, { DataTableFilterMetaData } from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { useToast } from 'vue-toastification';
 // State
 import { useConnectionStore, useHolderStore } from '@/store';

diff --git a/services/tenant-ui/frontend/src/components/innkeeper/reservation/Reservations.vue b/services/tenant-ui/frontend/src/components/innkeeper/reservation/Reservations.vue
@@ -19,13 +19,13 @@
     >
       <template #header>
         <div class="flex justify-content-end">
-          <span class="p-input-icon-left mr-3">
-            <i class="pi pi-search ml-0" />
+          <IconField icon-position="left">
+            <InputIcon><i class="pi pi-search" /></InputIcon>
             <InputText
               v-model="filter.global.value"
               placeholder="Search Reservations"
             />
-          </span>
+          </IconField>
         </div>
       </template>
       <template #empty>{{ $t('common.noRecordsFound') }}</template>
@@ -134,6 +134,8 @@ import Column from 'primevue/column';
 import DataTable, { DataTableFilterMetaData } from 'primevue/datatable';
 import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { FilterMatchMode } from 'primevue/api';
 import { useToast } from 'vue-toastification';
 import Accordion from 'primevue/accordion';

diff --git a/services/tenant-ui/frontend/src/components/innkeeper/reservation/ReservationsHistory.vue b/services/tenant-ui/frontend/src/components/innkeeper/reservation/ReservationsHistory.vue
@@ -19,13 +19,13 @@
     >
       <template #header>
         <div class="flex justify-content-end">
-          <span class="p-input-icon-left mr-3">
-            <i class="pi pi-search ml-0" />
+          <IconField icon-position="left">
+            <InputIcon><i class="pi pi-search" /></InputIcon>
             <InputText
               v-model="filter.global.value"
               placeholder="Search History"
             />
-          </span>
+          </IconField>
         </div>
       </template>
       <template #empty>{{ $t('common.noRecordsFound') }}</template>
@@ -162,11 +162,12 @@ import { onMounted, ref, computed } from 'vue';
 // PrimeVue
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import Button from 'primevue/button';
 import Column from 'primevue/column';
 import DataTable, { DataTableFilterMetaData } from 'primevue/datatable';
 import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { FilterMatchMode } from 'primevue/api';
 
 // external

diff --git a/services/tenant-ui/frontend/src/components/innkeeper/tenants/Tenants.vue b/services/tenant-ui/frontend/src/components/innkeeper/tenants/Tenants.vue
@@ -27,13 +27,13 @@
                 style="width: 10rem"
                 @change="loadTable"
               />
-              <span class="p-input-icon-left container-item">
-                <i class="pi pi-search ml-0" />
+              <IconField class="container-item" icon-position="left">
+                <InputIcon><i class="pi pi-search" /></InputIcon>
                 <InputText
                   v-model="filter.global.value"
                   :placeholder="$t('tenants.search')"
                 />
-              </span>
+              </IconField>
             </div>
           </div>
         </div>
@@ -166,6 +166,8 @@ import { FilterMatchMode } from 'primevue/api';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import ToggleButton from 'primevue/togglebutton';
 import { computed, onMounted, ref } from 'vue';
 import { useToast } from 'vue-toastification';

diff --git a/...enant-ui/frontend/src/components/issuance/credentialDefinitions/CredentialDefinitions.vue b/...enant-ui/frontend/src/components/issuance/credentialDefinitions/CredentialDefinitions.vue
@@ -31,13 +31,13 @@
             </div>
           </div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search" />
+            <IconField icon-position="left">
+              <InputIcon><i class="pi pi-search" /></InputIcon>
               <InputText
                 v-model="filter.global.value"
                 :placeholder="t('configuration.search.credDefs')"
               />
-            </span>
+            </IconField>
           </div>
         </div>
       </template>
@@ -161,6 +161,8 @@ import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { useConfirm } from 'primevue/useconfirm';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

diff --git a/services/tenant-ui/frontend/src/components/issuance/credentials/IssuedCredentials.vue b/services/tenant-ui/frontend/src/components/issuance/credentials/IssuedCredentials.vue
@@ -28,13 +28,13 @@
             />
           </div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search" />
+            <IconField icon-position="left">
+              <InputIcon><i class="pi pi-search" /></InputIcon>
               <InputText
                 v-model="filter.global.value"
                 placeholder="Search Credentials"
               />
-            </span>
+            </IconField>
           </div>
         </div>
       </template>
@@ -154,6 +154,8 @@ import { FilterMatchMode } from 'primevue/api';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { useToast } from 'vue-toastification';
 // Other Components
 import { formatDateLong, stringOrBooleanTruthy } from '@/helpers';

diff --git a/services/tenant-ui/frontend/src/components/issuance/schemas/Schemas.vue b/services/tenant-ui/frontend/src/components/issuance/schemas/Schemas.vue
@@ -29,13 +29,13 @@
             <AddSchemaFromLedger />
           </div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search" />
+            <IconField icon-position="left">
+              <InputIcon><i class="pi pi-search" /></InputIcon>
               <InputText
                 v-model="filter.schema_id.value"
                 :placeholder="t('configuration.search.schemas')"
               />
-            </span>
+            </IconField>
           </div>
         </div>
       </template>
@@ -169,6 +169,8 @@ import Button from 'primevue/button';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { useConfirm } from 'primevue/useconfirm';
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

diff --git a/services/tenant-ui/frontend/src/components/messages/Messages.vue b/services/tenant-ui/frontend/src/components/messages/Messages.vue
@@ -32,13 +32,13 @@
             />
           </div>
           <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-              <i class="pi pi-search" />
+            <IconField icon-position="left">
+              <InputIcon><i class="pi pi-search" /></InputIcon>
               <InputText
                 v-model="filter.content.value"
                 placeholder="Search Messages"
               />
-            </span>
+            </IconField>
           </div>
         </div>
       </template>
@@ -130,6 +130,8 @@ import { FilterMatchMode } from 'primevue/api';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import InputText from 'primevue/inputtext';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
 import { useToast } from 'vue-toastification';
 // State
 import { useConnectionStore, useMessageStore } from '@/store';