feat: migrate user credential list to react component (#2758)

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->
### This PR resolves [#2937](#2937) Issue

The keypair info/modify/create modal will be working on a separate stack.

**Chages:**
- migrate keypair list to react component

**How to test:**
- Verify that keypair list is �working correctly.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/ac88e43d-605b-4a77-a430-70cc2217af05.png)

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/UserNodeList.tsx

@@ -283,7 +283,9 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
                   <Button
                     type="text"
                     icon={
-                      <InfoCircleOutlined style={{ color: token.colorSuccess }} />
+                      <InfoCircleOutlined
+                        style={{ color: token.colorSuccess }}
+                      />
                     }
                     onClick={() => {
                       startInfoModalOpenTransition(() => {
@@ -293,7 +295,9 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
                   />
                   <Button
                     type="text"
-                    icon={<SettingOutlined style={{ color: token.colorInfo }} />}
+                    icon={
+                      <SettingOutlined style={{ color: token.colorInfo }} />
+                    }
                     onClick={() => {
                       startSettingModalOpenTransition(() => {
                         setEmailForSettingModal(record?.email || null);
@@ -303,19 +307,23 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
                   <Tooltip
                     title={
                       isActive
-                        ? t('credential.Inactive')
-                        : t('credential.Active')
+                        ? t('credential.Deactivate')
+                        : t('credential.Activate')
                     }
                   >
                     <Popconfirm
                       title={
                         isActive
-                          ? t('credential.ConfirmUpdateStatusToInActive')
-                          : t('credential.ConfirmUpdateStatusToActive')
+                          ? t('credential.DeactivateUser')
+                          : t('credential.ActivateUser')
                       }
                       placement="left"
                       okType={isActive ? 'danger' : 'primary'}
-                      okText={isActive ? t('credential.Inactive') : undefined}
+                      okText={
+                        isActive
+                          ? t('credential.Deactivate')
+                          : t('credential.Activate')
+                      }
                       description={record?.email}
                       onConfirm={() => {
                         setPendingUserId(record?.id || '');

react/src/pages/UserCredentialsPage.tsx

@@ -1,6 +1,7 @@
 import BAICard from '../BAICard';
 import Flex from '../components/Flex';
 import FlexActivityIndicator from '../components/FlexActivityIndicator';
+import UserCredentialList from '../components/UserCredentialList';
 import UserNodeList from '../components/UserNodeList';
 import { createStyles } from 'antd-style';
 import { CardTabListType } from 'antd/es/card';
@@ -54,8 +55,9 @@ const UserCredentialsPage: React.FC = () => {
           </Flex>
         )}
         {curTabKey === 'credentials' && (
-          // @ts-expect-error
-          <backend-ai-credential-view active />
+          <Flex direction="column" align="stretch">
+            <UserCredentialList />
+          </Flex>
         )}
       </Suspense>
     </BAICard>

resources/i18n/de.json

@@ -552,8 +552,6 @@
     "exportCSV": "CSV-Datei exportieren",
     "CreateUser": "Benutzer erstellen",
     "AddCredential": "Anmeldedaten hinzufügen",
-    "Active": "Aktiv",
-    "Inactive": "Inaktiv",
     "PolicyGroup": "Richtliniengruppe",
     "CreatePolicy": "Richtlinie erstellen",
     "CreateResourcePolicy": "Ressourcenrichtlinie erstellen",
@@ -599,7 +597,6 @@
     "ModifyUserDetail": "Benutzerdetails ändern",
     "UserStatus": "Benutzer-Status",
     "AdminCanOnlyRemoveTotp": "Es ist nur möglich, 2FA für andere Benutzer zu deaktivieren.",
-    "KeySeccessfullyDeleted": "KeyPair wird erfolgreich gelöscht.",
     "RateLimitInputRequired": "Eingabe erforderlich.",
     "InvalidRateLimitValue": "Geben Sie einen gültigen Ratengrenzwert ein.",
     "WarningLessRateLimit": "Wenn der Wert für das Ratenlimit klein ist, können API-Vorgänge wie die Anmeldung blockiert werden.",
@@ -612,9 +609,21 @@
     "InactivateTheFollowingUsers": "Deaktivieren Sie die folgenden Benutzer.",
     "CreatedAt": "Erstellt am",
     "SignoutSuccessfullyFinished": "Die Abmeldung ist erfolgreich abgeschlossen",
+    "AccessKey": "Zugriffsschlüssel",
     "StatusUpdatedSuccessfully": "Der Benutzerstatus hat sich geändert.",
-    "ConfirmUpdateStatusToInActive": "Sind Sie sicher, dass Sie es deaktivieren wollen?",
-    "ConfirmUpdateStatusToActive": "Sind Sie sich sicher, dass Sie sie aktivieren wollen?"
+    "Queries": "Abfragen",
+    "ReqPer15Min": "Erforderlich pro 15 Min",
+    "Sessions": "Sitzungen",
+    "KeypairStatusUpdatedSuccessfully": "Der Schlüsselpaarstatus hat sich geändert.",
+    "KeypairSuccessfullyDeleted": "KeyPair wurde erfolgreich gelöscht.",
+    "ActivateUser": "Benutzer aktivieren",
+    "DeactivateUser": "Benutzer deaktivieren",
+    "Deactivate": "Deaktivieren",
+    "Activate": "Aktivieren",
+    "DeactivateCredential": "Anmeldeinformationen deaktivieren",
+    "YouAreAboutToDeleteCredential": "Sie sind dabei, die Anmeldeinformationen dieses Benutzers zu löschen:",
+    "DeleteCredential": "Anmeldedaten löschen",
+    "ActivateCredential": "Anmeldeinformationen aktivieren"
   },
   "data": {
     "Folders": "Ordner",

resources/i18n/el.json

@@ -552,8 +552,6 @@
     "exportCSV": "εξαγωγή CSV",
     "CreateUser": "Δημιουργία χρήστη",
     "AddCredential": "Προσθήκη διαπιστευτηρίου",
-    "Active": "Ενεργός",
-    "Inactive": "Αδρανής",
     "PolicyGroup": "Ομάδα πολιτικής",
     "CreatePolicy": "Δημιουργία πολιτικής",
     "CreateResourcePolicy": "Δημιουργία πολιτικής πόρων",
@@ -599,7 +597,6 @@
     "ModifyUserDetail": "Τροποποίηση λεπτομερειών χρήστη",
     "UserStatus": "Κατάσταση χρήστη",
     "AdminCanOnlyRemoveTotp": "Είναι δυνατή μόνο η απενεργοποίηση της 2FA άλλων χρηστών.",
-    "KeySeccessfullyDeleted": "Το KeyPair διαγράφεται επιτυχώς.",
     "RateLimitInputRequired": "Απαιτείται είσοδος.",
     "InvalidRateLimitValue": "Εισάγετε μια έγκυρη τιμή ορίου ρυθμού.",
     "WarningLessRateLimit": "Εάν η τιμή Όριο ρυθμού είναι μικρή, ενδέχεται να μπλοκαριστούν λειτουργίες API, όπως η σύνδεση.",
@@ -612,9 +609,21 @@
     "InactivateTheFollowingUsers": "Απενεργοποιήστε τους παρακάτω χρήστες.",
     "CreatedAt": "Δημιουργήθηκε στο",
     "SignoutSuccessfullyFinished": "Η αποσύνδεση ολοκληρώθηκε επιτυχώς",
+    "AccessKey": "Κλειδί πρόσβασης",
     "StatusUpdatedSuccessfully": "Η κατάσταση του χρήστη έχει αλλάξει.",
-    "ConfirmUpdateStatusToInActive": "Είσαι σίγουρος ότι θέλεις να το αδρανοποιήσεις;",
-    "ConfirmUpdateStatusToActive": "Είστε σίγουρος ότι θέλετε να το ενεργοποιήσετε;"
+    "Queries": "Ερωτήματα",
+    "ReqPer15Min": "Απαίτηση ανά 15 λεπτά",
+    "Sessions": "Συνεδρίες",
+    "KeypairStatusUpdatedSuccessfully": "Η κατάσταση του ζεύγους κλειδιών έχει αλλάξει.",
+    "KeypairSuccessfullyDeleted": "Το KeyPair διαγράφηκε με επιτυχία.",
+    "ActivateUser": "Ενεργοποίηση χρήστη",
+    "DeactivateUser": "Απενεργοποίηση χρήστη",
+    "Deactivate": "Απενεργοποίηση",
+    "Activate": "Δραστηριοποιώ",
+    "DeactivateCredential": "Απενεργοποίηση διαπιστευτηρίων",
+    "YouAreAboutToDeleteCredential": "Πρόκειται να διαγράψετε τα διαπιστευτήρια αυτού του χρήστη:",
+    "DeleteCredential": "Διαγραφή διαπιστευτηρίων",
+    "ActivateCredential": "Ενεργοποίηση διαπιστευτηρίων"
   },
   "data": {
     "Folders": "Φάκελοι",

resources/i18n/en.json

@@ -682,8 +682,6 @@
     "exportCSV": "export CSV",
     "CreateUser": "Create User",
     "AddCredential": "Add Credential",
-    "Active": "Active",
-    "Inactive": "Inactive",
     "PolicyGroup": "Policy Group",
     "CreatePolicy": "Create Policy",
     "CreateResourcePolicy": "Create Resource Policy",
@@ -733,15 +731,26 @@
     "UserIDRequired": "User ID is required.",
     "KeypairDetail": "Keypair Detail",
     "AdminCanOnlyRemoveTotp": "Only disabling 2FA of other users is possible.",
-    "KeySeccessfullyDeleted": "KeyPair is seccessfully deleted.",
     "EnableSudoSession": "Enable sudo session",
     "MainAccessKey": "Main Access Key",
     "InactivateTheFollowingUsers": "Inactivate the following users.",
     "CreatedAt": "Created At",
     "SignoutSuccessfullyFinished": "Signout is seccessfully finished",
+    "AccessKey": "Access Key",
     "StatusUpdatedSuccessfully": "The user status has changed.",
-    "ConfirmUpdateStatusToInActive": "Are you sure you want to inactive it?",
-    "ConfirmUpdateStatusToActive": "Are you sure you want to active it?"
+    "Queries": "Queries",
+    "ReqPer15Min": "Req per 15 min",
+    "Sessions": "Sessions",
+    "KeypairStatusUpdatedSuccessfully": "The keypair status has changed.",
+    "KeypairSuccessfullyDeleted": "KeyPair is successfully deleted.",
+    "ActivateUser": "Activate user",
+    "DeactivateUser": "Deactivate user",
+    "Deactivate": "Deactivate",
+    "Activate": "Activate",
+    "DeactivateCredential": "Deactivate credential",
+    "YouAreAboutToDeleteCredential": "You are about to delete this user's credential:",
+    "DeleteCredential": "Delete credential",
+    "ActivateCredential": "Activate credential"
   },
   "data": {
     "Folders": "Folders",

resources/i18n/es.json

@@ -153,7 +153,6 @@
   },
   "credential": {
     "AccessKeyOptional": "Clave de acceso (opcional)",
-    "Active": "Activo",
     "AddCredential": "Añadir credencial",
     "AdminCanOnlyRemoveTotp": "Sólo es posible desactivar 2FA de otros usuarios.",
     "Allocation": "Asignación",
@@ -173,11 +172,9 @@
     "ExportCSVFile": "Exportar archivo CSV",
     "FileName": "Nombre del fichero",
     "FullName": "Nombre y apellidos",
-    "Inactive": "Inactivo",
     "Information": "Información",
     "InvalidRateLimitValue": "Introduzca un valor válido de Límite de Tasa.",
     "KeyAge": "Edad clave",
-    "KeySeccessfullyDeleted": "El llavero se elimina por completo.",
     "KeypairCreated": "Par de claves creado con éxito.",
     "KeypairDetail": "Detalle del par de claves",
     "Lastused": "Último utilizado",
@@ -231,9 +228,21 @@
     "InactivateTheFollowingUsers": "Desactivar los siguientes usuarios.",
     "CreatedAt": "Creado en",
     "SignoutSuccessfullyFinished": "El proceso de registro ha finalizado",
+    "AccessKey": "Clave de acceso",
     "StatusUpdatedSuccessfully": "El estado del usuario ha cambiado.",
-    "ConfirmUpdateStatusToInActive": "¿Seguro que quieres desactivarlo?",
-    "ConfirmUpdateStatusToActive": "¿Seguro que quieres activarlo?"
+    "Queries": "Consultas",
+    "ReqPer15Min": "Requerido por 15 min",
+    "Sessions": "Sesiones",
+    "KeypairStatusUpdatedSuccessfully": "El estado del par de claves ha cambiado.",
+    "KeypairSuccessfullyDeleted": "KeyPair se eliminó correctamente.",
+    "ActivateUser": "Activar usuario",
+    "DeactivateUser": "Desactivar usuario",
+    "Deactivate": "Desactivar",
+    "Activate": "Activar",
+    "DeactivateCredential": "Desactivar credencial",
+    "YouAreAboutToDeleteCredential": "Estás a punto de eliminar la credencial de este usuario:",
+    "DeleteCredential": "Eliminar credencial",
+    "ActivateCredential": "Activar credencial"
   },
   "data": {
     "Allowslettersnumbersand-_": "Permite letras, números y -_",

resources/i18n/fi.json

@@ -153,7 +153,6 @@
   },
   "credential": {
     "AccessKeyOptional": "Pääsyavain (valinnainen)",
-    "Active": "Aktiivinen",
     "AddCredential": "Lisää valtakirja",
     "AdminCanOnlyRemoveTotp": "Vain muiden käyttäjien 2FA:n poistaminen käytöstä on mahdollista.",
     "Allocation": "Jakaminen",
@@ -173,11 +172,9 @@
     "ExportCSVFile": "Vie CSV-tiedosto",
     "FileName": "Tiedoston nimi",
     "FullName": "Koko nimi",
-    "Inactive": "Inaktiivinen",
     "Information": "Tiedot",
     "InvalidRateLimitValue": "Syötä kelvollinen Rate Limit -arvo.",
     "KeyAge": "Avain Ikä",
-    "KeySeccessfullyDeleted": "KeyPair on poistettu lopullisesti.",
     "KeypairCreated": "Avainparin luominen onnistui.",
     "KeypairDetail": "Avainparin tiedot",
     "Lastused": "Viimeksi käytetty",
@@ -231,9 +228,21 @@
     "InactivateTheFollowingUsers": "Poista seuraavat käyttäjät käytöstä.",
     "CreatedAt": "Luotu klo",
     "SignoutSuccessfullyFinished": "Uloskirjautuminen on päättynyt hetkessä",
+    "AccessKey": "Pääsyavain",
     "StatusUpdatedSuccessfully": "Käyttäjän tila on muuttunut.",
-    "ConfirmUpdateStatusToInActive": "Oletko varma, että haluat jättää sen käyttämättä?",
-    "ConfirmUpdateStatusToActive": "Oletko varma, että haluat aktivoida sen?"
+    "Queries": "Kyselyt",
+    "ReqPer15Min": "Req per 15 min",
+    "Sessions": "Istunnot",
+    "KeypairStatusUpdatedSuccessfully": "Näppäinparin tila on muuttunut.",
+    "KeypairSuccessfullyDeleted": "Avainparin poistaminen onnistui.",
+    "ActivateUser": "Aktivoi käyttäjä",
+    "DeactivateUser": "Poista käyttäjä käytöstä",
+    "Deactivate": "Poista käytöstä",
+    "Activate": "Aktivoida",
+    "DeactivateCredential": "Poista kirjautumistiedot käytöstä",
+    "YouAreAboutToDeleteCredential": "Olet poistamassa tämän käyttäjän kirjautumistiedot:",
+    "DeleteCredential": "Poista kirjautumistiedot",
+    "ActivateCredential": "Aktivoi tunnistetiedot"
   },
   "data": {
     "Allowslettersnumbersand-_": "Sallii kirjaimet, numerot ja -_",

resources/i18n/fr.json

@@ -552,8 +552,6 @@
     "exportCSV": "exporter CSV",
     "CreateUser": "Créer un utilisateur",
     "AddCredential": "Ajouter des informations d'identification",
-    "Active": "actif",
-    "Inactive": "Inactif",
     "PolicyGroup": "Groupe de politiques",
     "CreatePolicy": "Créer une stratégie",
     "CreateResourcePolicy": "Créer une stratégie de ressources",
@@ -605,16 +603,27 @@
     "WarningLessRateLimit": "Si la valeur de la limite de débit est faible, les opérations API telles que la connexion peuvent être bloquées.",
     "KeypairDetail": "Détail de la paire de clés",
     "AdminCanOnlyRemoveTotp": "Seule la désactivation du 2FA des autres utilisateurs est possible.",
-    "KeySeccessfullyDeleted": "La paire de clés est supprimée successivement.",
     "ModifyUserDetail": "Modifier les détails de l'utilisateur",
     "EnableSudoSession": "Activer la session sudo",
     "MainAccessKey": "Clé d'accès principale",
     "InactivateTheFollowingUsers": "Désactivez les utilisateurs suivants.",
     "CreatedAt": "Créé à",
     "SignoutSuccessfullyFinished": "La signature est terminée en toute sécurité",
+    "AccessKey": "Clé d'accès",
     "StatusUpdatedSuccessfully": "Le statut de l'utilisateur a changé.",
-    "ConfirmUpdateStatusToInActive": "Êtes-vous sûr de vouloir l'inactiver ?",
-    "ConfirmUpdateStatusToActive": "Êtes-vous sûr de vouloir l'activer ?"
+    "Queries": "Requêtes",
+    "ReqPer15Min": "Demande par 15 min",
+    "Sessions": "Séances",
+    "KeypairStatusUpdatedSuccessfully": "L'état de la paire de clés a changé.",
+    "KeypairSuccessfullyDeleted": "KeyPair est supprimé avec succès.",
+    "ActivateUser": "Activer l'utilisateur",
+    "DeactivateUser": "Désactiver l'utilisateur",
+    "Deactivate": "Désactiver",
+    "Activate": "Activer",
+    "DeactivateCredential": "Désactiver l'identifiant",
+    "YouAreAboutToDeleteCredential": "Vous êtes sur le point de supprimer les identifiants de cet utilisateur :",
+    "DeleteCredential": "Supprimer l'identifiant",
+    "ActivateCredential": "Activer l'identifiant"
   },
   "data": {
     "Folders": "Dossiers",

resources/i18n/id.json

@@ -553,8 +553,6 @@
     "exportCSV": "ekspor CSV",
     "CreateUser": "Buat pengguna",
     "AddCredential": "Tambahkan Kredensial",
-    "Active": "Aktif",
-    "Inactive": "Tidak aktif",
     "PolicyGroup": "Grup Kebijakan",
     "CreatePolicy": "Buat Kebijakan",
     "CreateResourcePolicy": "Buat Kebijakan Sumber Daya",
@@ -606,16 +604,27 @@
     "WarningLessRateLimit": "Jika nilai Rate Limit kecil, operasi API seperti login dapat diblokir.",
     "KeypairDetail": "Detail Pasangan Kunci",
     "AdminCanOnlyRemoveTotp": "Hanya menonaktifkan 2FA pengguna lain yang dapat dilakukan.",
-    "KeySeccessfullyDeleted": "KeyPair dihapus dengan aman.",
     "ModifyUserDetail": "Ubah Detail Pengguna",
     "EnableSudoSession": "Aktifkan sesi sudo",
     "MainAccessKey": "Kunci Akses Utama",
     "InactivateTheFollowingUsers": "Nonaktifkan pengguna berikut.",
     "CreatedAt": "Dibuat Pada",
     "SignoutSuccessfullyFinished": "Keluar dengan aman selesai",
+    "AccessKey": "Kunci Akses",
     "StatusUpdatedSuccessfully": "Status pengguna telah berubah.",
-    "ConfirmUpdateStatusToInActive": "Apakah Anda yakin ingin menonaktifkannya?",
-    "ConfirmUpdateStatusToActive": "Apakah Anda yakin ingin mengaktifkannya?"
+    "Queries": "Pertanyaan",
+    "ReqPer15Min": "Persyaratan per 15 menit",
+    "Sessions": "Sesi",
+    "KeypairStatusUpdatedSuccessfully": "Status pasangan kunci telah berubah.",
+    "KeypairSuccessfullyDeleted": "KeyPair berhasil dihapus.",
+    "ActivateUser": "Aktifkan pengguna",
+    "DeactivateUser": "Nonaktifkan pengguna",
+    "Deactivate": "Menonaktifkan",
+    "Activate": "Mengaktifkan",
+    "DeactivateCredential": "Nonaktifkan kredensial",
+    "YouAreAboutToDeleteCredential": "Anda akan menghapus kredensial pengguna ini:",
+    "DeleteCredential": "Hapus kredensial",
+    "ActivateCredential": "Aktifkan kredensial"
   },
   "data": {
     "Folders": "Folder",