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

Author: faisalsiddique4400

admin-ui/app/constants/ui.ts

@@ -25,3 +25,48 @@ 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,
+  ALERT_TITLE_MB: 8,
+  RADIO_GROUP_GAP: 25,
+  INPUT_PADDING_VERTICAL: 14,
+  INPUT_PADDING_HORIZONTAL: 21,
+  BUTTON_OFFSET_TOP: 4,
+  TOOLTIP_MAX_WIDTH: 320,
+  ICON_SIZE_MD: 24,
+} 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/context/theme/constants.ts

@@ -1,6 +1,6 @@
 export const THEME_LIGHT = 'light'
 export const THEME_DARK = 'dark'
-export const DEFAULT_THEME = THEME_LIGHT
+export const DEFAULT_THEME = THEME_DARK
 
 export const THEME_VALUES = [THEME_LIGHT, THEME_DARK] as const
 

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,13 @@
     "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",
+    "permissions_count": "{{count, plural, one {{count}} permission} 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 +1888,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,13 @@
     "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",
+    "permissions_count": "{{count, plural, one {{count}} permiso} 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 +1878,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": "Almacén de políticas de la interfaz de administración de Gluu Flex",
+      "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,13 @@
     "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",
+    "permissions_count": "{{count, plural, one {{count}} permission} 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 +1739,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",