fix(ui): show capitalized role in member and API key list

Author: luizhf42

ui/src/components/Team/ApiKeys/ApiKeyList.vue

@@ -17,7 +17,7 @@
             <v-icon class="mr-1" :icon="formatKey(item.expires_in) ? 'mdi-clock-alert-outline' : 'mdi-key-outline'" />
             {{ item.name }}
           </td>
-          <td :class="formatKey(item.expires_in) ? 'text-warning text-center' : 'text-center'" data-test="key-name">
+          <td :class="formatKey(item.expires_in) ? 'text-warning text-center' : 'text-center'" class="text-capitalize" data-test="key-name">
             {{ item.role }}
           </td>
           <td :class="formatKey(item.expires_in) ? 'text-warning text-center' : 'text-center'" data-test="key-name">

ui/src/components/Team/Member/MemberList.vue

@@ -34,7 +34,7 @@
             {{ member.email }}
           </td>
 
-          <td class="text-center">
+          <td class="text-center text-capitalize">
             {{ member.role }}
           </td>
 

ui/tests/components/Team/ApiKeys/__snapshots__/ApiKeyList.spec.ts.snap

@@ -18,7 +18,7 @@ exports[`Api Key List > Renders the component 1`] = `
           <tbody>
             <tr>
               <td class="text-warning text-center"><i class="mdi-clock-alert-outline mdi v-icon notranslate v-theme--light v-icon--size-default mr-1" aria-hidden="true"></i> aaaa2</td>
-              <td class="text-warning text-center" data-test="key-name">administrator</td>
+              <td class="text-warning text-center text-capitalize" data-test="key-name">administrator</td>
               <td class="text-warning text-center" data-test="key-name">Expired on Jul 7 2024.</td>
               <td class="text-center" data-test="menu-key-component"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-plain border rounded bg-v-theme-background" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                   <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-format-list-bulleted mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
@@ -31,7 +31,7 @@ exports[`Api Key List > Renders the component 1`] = `
             </tr>
             <tr>
               <td class="text-warning text-center"><i class="mdi-clock-alert-outline mdi v-icon notranslate v-theme--light v-icon--size-default mr-1" aria-hidden="true"></i> aaaa2</td>
-              <td class="text-warning text-center" data-test="key-name">administrator</td>
+              <td class="text-warning text-center text-capitalize" data-test="key-name">administrator</td>
               <td class="text-warning text-center" data-test="key-name">Expired on Jul 7 2024.</td>
               <td class="text-center" data-test="menu-key-component"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-plain border rounded bg-v-theme-background" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-6"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                   <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-format-list-bulleted mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>

ui/tests/views/__snapshots__/TeamApiKeys.spec.ts.snap

@@ -36,7 +36,7 @@ exports[`Team Api Keys > Renders the component 1`] = `
             <tbody>
               <tr>
                 <td class="text-warning text-center"><i class="mdi-clock-alert-outline mdi v-icon notranslate v-theme--light v-icon--size-default mr-1" aria-hidden="true"></i> fake-api-key</td>
-                <td class="text-warning text-center" data-test="key-name">owner</td>
+                <td class="text-warning text-center text-capitalize" data-test="key-name">owner</td>
                 <td class="text-warning text-center" data-test="key-name">Expired on Jan 1 1970.</td>
                 <td class="text-center" data-test="menu-key-component"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-plain border rounded bg-v-theme-background" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-4"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                     <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-format-list-bulleted mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>

ui/tests/views/__snapshots__/TeamMembers.spec.ts.snap

@@ -34,7 +34,7 @@ exports[`Team Members > Renders the component 1`] = `
         <tbody data-test="member-table-rows">
           <tr class="text-center">
             <td><i class="mdi-account mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i> </td>
-            <td class="text-center">owner</td>
+            <td class="text-center text-capitalize">owner</td>
             <td class="text-center" aria-describedby="v-tooltip-v-2">
               <!---->
               <!--teleport start-->