feat(admin-ui): revamp Cedarling Policy, Role & Mapping as per Figma

admin-ui/app/constants/ui.ts

@@ -25,3 +25,41 @@ export const GRADIENT_POSITION = {
 } as const
 
 export const ELLIPSE_SIZE = '200% 160%'
+
+export const CEDARLING_CONFIG_SPACING = {
+  ALERT_TO_INPUT: 30,
+  LABEL_MB: 7,
+  INPUT_HEIGHT: 52,
+  INPUT_TO_RADIO: 44,
+  RADIO_LABEL_MB: 8,
+  HELPER_MT: 10,
+  BUTTONS_MT: 50,
+  ALERT_PADDING_TOP: 22,
+  ALERT_PADDING_BOTTOM: 20,
+  ALERT_PADDING_LEFT: 56,
+  ALERT_PADDING_RIGHT: 24,
+  ALERT_ICON_LEFT: 25,
+  ALERT_ICON_TOP: 22,
+} as const
+
+export const MAPPING_SPACING = {
+  PAGE_PADDING_TOP: 53,
+  ALERT_TO_CARD: 24,
+  CARD_PADDING: 33,
+  CARD_HEADER_HEIGHT: 73,
+  CARD_BORDER_RADIUS: 16,
+  CARD_MARGIN_BOTTOM: 16,
+  PERMISSION_ROW_GAP: 20,
+  PERMISSION_ITEM_GAP: 30,
+  CHECKBOX_SIZE: 22,
+  CHECKBOX_LABEL_GAP: 9,
+  CHECKBOX_BORDER_RADIUS: 5,
+  CHECKBOX_BORDER_WIDTH: 2,
+  CHECK_ICON_SIZE: 14,
+  INFO_ALERT_PADDING_VERTICAL: 16,
+  INFO_ALERT_PADDING_HORIZONTAL: 24,
+  INFO_ALERT_GAP: 16,
+  INFO_ALERT_BORDER_RADIUS: 6,
+  INFO_ICON_SIZE: 24,
+  CONTENT_PADDING_TOP: 27,
+} as const

admin-ui/app/context/theme/config.ts

@@ -10,6 +10,7 @@ const createLightTheme = () => {
     background,
     lightBackground: customColors.whiteSmoke,
     fontColor: text,
+    textMuted: customColors.textSecondary,
     borderColor: border,
     inputBackground: customColors.lightInputBg,
     menu: {
@@ -25,6 +26,19 @@ const createLightTheme = () => {
     dashboard: {
       supportCard: customColors.white,
     },
+    card: {
+      background: customColors.white,
+      border: customColors.lightBorder,
+    },
+    infoAlert: {
+      background: customColors.cedarInfoBgLight,
+      border: customColors.cedarInfoBorderLight,
+      text: customColors.cedarInfoTextLight,
+      icon: customColors.cedarInfoTextLight,
+    },
+    checkbox: {
+      uncheckedBorder: customColors.sidebarHoverBg,
+    },
   }
 }
 
@@ -37,6 +51,7 @@ const createDarkTheme = () => {
     background,
     lightBackground: customColors.primaryDark,
     fontColor: text,
+    textMuted: customColors.textMutedDark,
     borderColor: border,
     inputBackground: customColors.darkInputBg,
     menu: {
@@ -52,6 +67,19 @@ const createDarkTheme = () => {
     dashboard: {
       supportCard: customColors.darkCardBg,
     },
+    card: {
+      background: customColors.cedarCardBgDark,
+      border: customColors.cedarCardBorderDark,
+    },
+    infoAlert: {
+      background: customColors.cedarCardBgDark,
+      border: customColors.cedarCardBorderDark,
+      text: customColors.cedarTextSecondaryDark,
+      icon: customColors.cedarTextTertiaryDark,
+    },
+    checkbox: {
+      uncheckedBorder: customColors.cedarCardBorderDark,
+    },
   }
 }
 

admin-ui/app/customColors.ts

@@ -40,6 +40,14 @@ export const customColors = {
   buttonLightBg: '#f4f6f8',
   darkBorderGradientBase: '#00d5e6',
   ribbonShadowColor: '#1a237e',
+  // Cedarling configuration specific (synced with Figma light & dark themes)
+  cedarCardBgDark: '#10375e',
+  cedarCardBorderDark: '#224f7c',
+  cedarTextSecondaryDark: '#c9dbec',
+  cedarTextTertiaryDark: '#72a1d1',
+  cedarInfoBgLight: '#e5f6fd',
+  cedarInfoBorderLight: '#a6d3e6',
+  cedarInfoTextLight: '#4f8196',
 } as const
 
 /**

admin-ui/app/locales/en/translation.json

@@ -817,6 +817,7 @@
     "no_configuration_loaded": "No configuration loaded",
     "insufficient_permissions_to_modify": "You do not have permission to modify this configuration",
     "action_commit_question": "Audit log: Want to apply changes made on this page?",
+    "action_commit_question_title": "Confirm Changes",
     "licenseAuditLog": "Do you really want to reset the existing license?",
     "action_deletion_question": "Do you really want to delete this item?",
     "action_deletion_for": "Deletion confirmation for",
@@ -856,6 +857,8 @@
     "partial_update_failure": "Some configurations failed to update. Please review and try again.",
     "min_characters": "Minimum {{count}} characters",
     "field_required": "This field is required",
+    "remote": "Remote",
+    "default": "Default",
     "default_policy_store_is_used": "Admin UI is already using default policy-store for access control.",
     "insufficient_token_read_permission": "Access to token data is not granted.",
     "try_again_later": "Please try again later",
@@ -883,9 +886,12 @@
     "mapping_added_successfully": "Mapping added successfully",
     "error_adding_mapping": "Failed to add mapping",
     "error_loading_mapping": "Failed to load role-permission mappings",
+    "no_role_mappings_found": "No role mappings found",
     "permissions_count_one": "{{count}} permission",
     "permissions_count_other": "{{count}} permissions",
     "no_permissions_assigned": "No permissions assigned",
+    "out_of": "out of",
+    "permission_label": "Permission",
     "see_configurations": "See Configuration",
     "manage_configurations": "Manage Configurations",
     "fetching_project_details": "Fetching project details...",
@@ -1881,9 +1887,16 @@
       "point3": "3. Make the required modifications in the policies for Admin UI access control and save the changes.",
       "point4": "4. Make sure the hostname of the OpenID Configuration Endpoint matches with the hostname of your OpenId Provider.",
       "point5": "5. Copy the Policy Store URL.",
-      "point6": "6. Open Cedarling Policy Store configuration screen on Admin UI and add the copied Policy Store URL in Admin UI Remote Policy Store field. Set Policy Retrieval Point field to Remote to use the remote Policy Store URL for the GUI access control.",
+      "point6": "6. Open Cedarling Policy Store configuration screen on Admin UI and add the copied Policy Store URL in Admin UI Remote Policy Store field. Set Policy Retrieval Point field to Remote to use the remote Policy Store URL for the Admin UI access control.",
       "useRemotePolicyStore": "It is recommended to set it to Default for production. If set to Default, it will use the Admin-UI storage for Cedarling authorization. Enable Default mode and use the refresh button to store or update GitHub policies on the Admin-UI Server.",
-      "updateRemotePolicyStoreOnServer": "Click here to update the default policy-store JSON with the version available from the configured remote URL."
+      "updateRemotePolicyStoreOnServer": "Click here to update the default policy-store JSON with the version available from the configured remote URL.",
+      "policyUrlDisabledWhenDefault": "Policy URL is disabled when Default is selected.",
+      "policyStoreUrlInvalidError": "Policy Store URL must be a valid HTTP or HTTPS URL.",
+      "agamaLabPolicyDesigner": "Agama Lab's Policy Designer",
+      "gluuFlexAdminUiPolicyStoreDisplay": "Gluu Flex Admin UI Policy Store",
+      "auditPolicyStoreUrlUpdated": "Policy Store URL configuration updated",
+      "auditSyncRoleToScopesMappings": "Sync role to scopes mappings",
+      "auditSetPolicyStoreAsDefault": "Set policy store as default"
     },
     "mappings": {
       "note_prefix": "Configure",

admin-ui/app/locales/es/translation.json

@@ -819,6 +819,7 @@
     "insufficient_permissions_to_modify": "No tiene permiso para modificar esta configuración",
     "insufficient_token_read_permission": "El acceso a los datos del token no está concedido.",
     "action_commit_question": "Registro de auditoría: ¿Desea aplicar los cambios realizados en esta página?",
+    "action_commit_question_title": "Confirmar cambios",
     "licenseAuditLog": "¿Realmente desea restablecer la licencia existente?",
     "action_deletion_question": "¿Realmente desea eliminar este elemento?",
     "action_deletion_for": "Confirmación de eliminación para",
@@ -858,6 +859,8 @@
     "partial_update_failure": "Algunas configuraciones no se pudieron actualizar. Por favor, revise e intente de nuevo.",
     "min_characters": "Mínimo {{count}} caracteres",
     "field_required": "Este campo es obligatorio",
+    "remote": "Remoto",
+    "default": "Predeterminado",
     "try_again_later": "Por favor intente de nuevo más tarde",
     "loading_attributes": "Cargando atributos",
     "error_processiong_request": "Error al procesar la solicitud.",
@@ -881,9 +884,12 @@
     "mapping_added_successfully": "Mapeo agregado correctamente",
     "error_adding_mapping": "Error al agregar el mapeo",
     "error_loading_mapping": "Error al cargar los mapeos de roles y permisos",
+    "no_role_mappings_found": "No se encontraron mapeos de roles",
     "permissions_count_one": "{{count}} permiso",
     "permissions_count_other": "{{count}} permisos",
     "no_permissions_assigned": "No hay permisos asignados",
+    "out_of": "de",
+    "permission_label": "Permiso",
     "see_configurations": "Ver Configuración",
     "manage_configurations": "Gestionar Configuraciones",
     "fetching_project_details": "Obteniendo detalles del proyecto...",
@@ -1871,9 +1877,16 @@
       "point3": "3. Realizar las modificaciones necesarias en las políticas para el control de acceso de la Admin UI y guardar los cambios.",
       "point4": "4. Asegúrese de que el nombre de host del Endpoint de Configuración de OpenID coincida con el nombre de host de su Proveedor OpenID.",
       "point5": "5. Copiar la URL del Almacén de Políticas.",
-      "point6": "6. Abra la pantalla de configuración del Almacén de Políticas de Cedarling en la Admin UI y agregue la URL del Almacén de Políticas copiada en el campo Almacén de Políticas Remoto de la Admin UI. Configure el campo Punto de Recuperación de Políticas como Remoto para usar la URL del Almacén de Políticas remoto para el control de acceso de la interfaz gráfica.",
+      "point6": "6. Abra la pantalla de configuración del Almacén de Políticas de Cedarling en la Admin UI y agregue la URL del Almacén de Políticas copiada en el campo Almacén de Políticas Remoto de la Admin UI. Configure el campo Punto de Recuperación de Políticas como Remoto para usar la URL del Almacén de Políticas remoto para el control de acceso de la Admin UI.",
       "useRemotePolicyStore": "Se recomienda establecerlo en Predeterminado para producción. Si se establece en Predeterminado, utilizará el almacenamiento de la interfaz de administración para la autorización de Cedarling. Active el modo Predeterminado y utilice el botón de actualización para guardar o actualizar las políticas de GitHub en el servidor de la interfaz de administración.",
-      "updateRemotePolicyStoreOnServer": "Haga clic aquí para actualizar el JSON del almacén de políticas predeterminado con la versión disponible en la URL remota configurada."
+      "updateRemotePolicyStoreOnServer": "Haga clic aquí para actualizar el JSON del almacén de políticas predeterminado con la versión disponible en la URL remota configurada.",
+      "policyUrlDisabledWhenDefault": "La URL de la política está deshabilitada cuando se selecciona Predeterminado.",
+      "policyStoreUrlInvalidError": "La URL del almacén de políticas debe ser una URL HTTP o HTTPS válida.",
+      "agamaLabPolicyDesigner": "Diseñador de políticas de Agama Lab",
+      "gluuFlexAdminUiPolicyStoreDisplay": "Gluu Flex Admin UI Policy Store",
+      "auditPolicyStoreUrlUpdated": "Configuración de la URL del almacén de políticas actualizada",
+      "auditSyncRoleToScopesMappings": "Sincronizar rol con asignaciones de ámbitos",
+      "auditSetPolicyStoreAsDefault": "Establecer almacén de políticas predeterminado"
     },
     "mappings": {
       "note_prefix": "Configurar",

admin-ui/app/locales/fr/translation.json

@@ -707,6 +707,8 @@
     "partial_update_failure": "Certaines configurations n'ont pas pu être mises à jour. Veuillez vérifier et réessayer.",
     "min_characters": "Minimum {{count}} caractères",
     "field_required": "Ce champ est obligatoire",
+    "remote": "Distant",
+    "default": "Par défaut",
     "credentials": "Credentials",
     "view_configuration": "Afficher la configuration",
     "new_role": "Nouveau rôle",
@@ -766,6 +768,7 @@
     "invalid_json_error": "Valeur JSON invalide.",
     "invalid_url_error": "URL invalide ou URL non autorisée.",
     "action_commit_question": "Journal d'audit : vous souhaitez appliquer les modifications apportées sur cette page ?",
+    "action_commit_question_title": "Confirmer les modifications",
     "licenseAuditLog": "Voulez-vous vraiment réinitialiser la licence existante ?",
     "action_deletion_question": "Voulez-vous vraiment supprimer cet élément ?",
     "action_deletion_for": "Confirmation de suppression pour",
@@ -815,9 +818,12 @@
     "mapping_added_successfully": "Mappage ajouté avec succès",
     "error_adding_mapping": "Échec de l'ajout du mappage",
     "error_loading_mapping": "Échec du chargement des mappages rôle-permission",
+    "no_role_mappings_found": "Aucun mappage de rôles trouvé",
     "permissions_count_one": "{{count}} permission",
     "permissions_count_other": "{{count}} permissions",
     "no_permissions_assigned": "Aucune permission attribuée",
+    "out_of": "sur",
+    "permission_label": "Permission",
     "see_configurations": "Voir configuration",
     "manage_configurations": "Gérer les configurations",
     "fetching_project_details": "Récupération des détails du projet...",
@@ -1732,9 +1738,16 @@
       "point3": "3. Effectuer les modifications nécessaires dans les politiques pour le contrôle d’accès de l’Admin UI et enregistrer les changements.",
       "point4": "4. Assurez-vous que le nom d’hôte du point de terminaison de configuration OpenID correspond au nom d’hôte de votre fournisseur OpenID.",
       "point5": "5. Copier l’URL du magasin de politiques.",
-      "point6": "6. Ouvrez l’écran de configuration du magasin de politiques Cedarling dans l’Admin UI et ajoutez l’URL du magasin de politiques copiée dans le champ Magasin de politiques distant de l’Admin UI. Définissez le champ Point de récupération des politiques sur Distant afin d’utiliser l’URL du magasin de politiques distant pour le contrôle d’accès de l’interface graphique.",
+      "point6": "6. Ouvrez l’écran de configuration du magasin de politiques Cedarling dans l’Admin UI et ajoutez l’URL du magasin de politiques copiée dans le champ Magasin de politiques distant de l’Admin UI. Définissez le champ Point de récupération des politiques sur Distant afin d’utiliser l’URL du magasin de politiques distant pour le contrôle d’accès de l’Admin UI.",
       "useRemotePolicyStore": "Il est recommandé de définir cette option sur « Par défaut » en production. Si cette option est définie, le stockage de l’interface d’administration sera utilisé pour l’autorisation Cedarling. Activez le mode « Par défaut » et utilisez le bouton d’actualisation pour enregistrer ou mettre à jour les politiques GitHub sur le serveur de l’interface d’administration.",
-      "updateRemotePolicyStoreOnServer": "Cliquez ici pour mettre à jour le fichier JSON du magasin de politiques par défaut avec la version disponible à partir de l'URL distante configurée."
+      "updateRemotePolicyStoreOnServer": "Cliquez ici pour mettre à jour le fichier JSON du magasin de politiques par défaut avec la version disponible à partir de l'URL distante configurée.",
+      "policyUrlDisabledWhenDefault": "L'URL de la stratégie est désactivée lorsque Par défaut est sélectionné.",
+      "policyStoreUrlInvalidError": "L'URL du magasin de politiques doit être une URL HTTP ou HTTPS valide.",
+      "agamaLabPolicyDesigner": "Concepteur de stratégies Agama Lab",
+      "gluuFlexAdminUiPolicyStoreDisplay": "Gluu Flex Admin UI Policy Store",
+      "auditPolicyStoreUrlUpdated": "Configuration de l'URL du magasin de politiques mise à jour",
+      "auditSyncRoleToScopesMappings": "Synchroniser les rôles avec les mappages de portées",
+      "auditSetPolicyStoreAsDefault": "Définir le magasin de politiques par défaut"
     },
     "mappings": {
       "note_prefix": "Configure",

admin-ui/app/locales/pt/translation.json

@@ -702,6 +702,8 @@
     "partial_update_failure": "Algumas configurações não puderam ser atualizadas. Por favor, revise e tente novamente.",
     "min_characters": "Mínimo {{count}} caracteres",
     "field_required": "Este campo é obrigatório",
+    "remote": "Remoto",
+    "default": "Padrão",
     "credentials": "Credenciais",
     "view_configuration": "Ver Configuração",
     "add_idp": "Adicionar IDP SAML",
@@ -761,6 +763,7 @@
     "insufficient_permissions_to_modify": "Você não tem permissão para modificar esta configuração",
     "insufficient_token_read_permission": "O acesso aos dados do token não foi concedido.",
     "action_commit_question": "Registro de auditoria: deseja aplicar as alterações feitas nesta página?",
+    "action_commit_question_title": "Confirmar alterações",
     "licenseAuditLog": "Você realmente deseja redefinir a licença existente?",
     "action_deletion_question": "Tem certeza que quer deletar este item?",
     "action_deletion_for": "Confirmação de exclusão para",
@@ -810,9 +813,12 @@
     "mapping_added_successfully": "Mapeamento adicionado com sucesso",
     "error_adding_mapping": "Falha ao adicionar o mapeamento",
     "error_loading_mapping": "Falha ao carregar os mapeamentos de função e permissão",
+    "no_role_mappings_found": "Nenhum mapeamento de funções encontrado",
     "permissions_count_one": "{{count}} permissão",
     "permissions_count_other": "{{count}} permissões",
     "no_permissions_assigned": "Nenhuma permissão atribuída",
+    "out_of": "de",
+    "permission_label": "Permissão",
     "see_configurations": "Voir configuration",
     "manage_configurations": "Gerenciar configurações",
     "fetching_project_details": "Buscando detalhes do projeto...",
@@ -1725,9 +1731,16 @@
       "point3": "3. Fazer as modificações necessárias nas políticas para o controle de acesso da Admin UI e salvar as alterações.",
       "point4": "4. Certifique-se de que o nome do host do Endpoint de Configuração do OpenID corresponda ao nome do host do seu Provedor OpenID.",
       "point5": "5. Copiar a URL do Repositório de Políticas.",
-      "point6": "6. Abra a tela de configuração do Repositório de Políticas Cedarling na Admin UI e adicione a URL do Repositório de Políticas copiada no campo Repositório de Políticas Remoto da Admin UI. Defina o campo Ponto de Recuperação de Políticas como Remoto para usar a URL do Repositório de Políticas remoto para o controle de acesso da interface gráfica.",
+      "point6": "6. Abra a tela de configuração do Repositório de Políticas Cedarling na Admin UI e adicione a URL do Repositório de Políticas copiada no campo Repositório de Políticas Remoto da Admin UI. Defina o campo Ponto de Recuperação de Políticas como Remoto para usar a URL do Repositório de Políticas remoto para o controle de acesso da Admin UI.",
       "useRemotePolicyStore": "Recomenda-se definir como Padrão para a produção. Se definido como Padrão, será utilizado o armazenamento da interface administrativa para a autorização do Cedarling. Ative o modo Padrão e utilize o botão de atualização para armazenar ou atualizar as políticas do GitHub no servidor da interface administrativa.",
-      "updateRemotePolicyStoreOnServer": "Clique aqui para atualizar o JSON do repositório de políticas padrão com a versão disponível no URL remoto configurado."
+      "updateRemotePolicyStoreOnServer": "Clique aqui para atualizar o JSON do repositório de políticas padrão com a versão disponível no URL remoto configurado.",
+      "policyUrlDisabledWhenDefault": "O URL da política está desativado quando Padrão está selecionado.",
+      "policyStoreUrlInvalidError": "O URL do repositório de políticas deve ser um URL HTTP ou HTTPS válido.",
+      "agamaLabPolicyDesigner": "Agama Lab's Policy Designer",
+      "gluuFlexAdminUiPolicyStoreDisplay": "Gluu Flex Admin UI Policy Store",
+      "auditPolicyStoreUrlUpdated": "Configuração do URL do repositório de políticas atualizada",
+      "auditSyncRoleToScopesMappings": "Sincronizar função com mapeamentos de escopos",
+      "auditSetPolicyStoreAsDefault": "Definir repositório de políticas padrão"
     },
     "mappings": {
       "note_prefix": "Configurar",