Merge pull request #16802 from overleaf/ab-show-certificate-status

[web] Show group SSO certificate status in config

GitOrigin-RevId: e0ffe3fad99ef70a752bdd2ca7be1d7d9bcba73c

services/web/frontend/extracted-translations.json

@@ -369,6 +369,8 @@
   "expired": "",
   "expired_confirmation_code": "",
   "expires": "",
+  "expires_in_days": "",
+  "expires_on": "",
   "export_csv": "",
   "export_project_to_github": "",
   "failed_to_send_group_invite_to_email": "",
@@ -612,6 +614,7 @@
   "invited_to_group_have_individual_subcription": "",
   "ip_address": "",
   "is_email_affiliated": "",
+  "issued_on": "",
   "join_now": "",
   "join_project": "",
   "join_team_explanation": "",
@@ -1447,6 +1450,7 @@
   "user_id_attribute": "",
   "user_last_name_attribute": "",
   "user_sessions": "",
+  "valid": "",
   "valid_sso_configuration": "",
   "validation_issue_entry_description": "",
   "vat": "",

services/web/frontend/stylesheets/modules/group-settings.less

@@ -154,6 +154,26 @@ h3.group-settings-title {
   .sso-config-info-label {
     font-size: @font-size-small;
     font-weight: bold;
+
+    .certificate-status {
+      font-weight: normal;
+
+      .material-symbols {
+        vertical-align: top;
+      }
+
+      &.certificate-valid {
+        color: @ol-green;
+      }
+
+      &.certificate-expiring-soon {
+        color: @yellow-50;
+      }
+
+      &.certificate-expired {
+        color: @red-50;
+      }
+    }
   }
 
   .sso-config-info-label-optional {

services/web/locales/en.json

@@ -541,8 +541,11 @@
   "examples": "Examples",
   "existing_plan_active_until_term_end": "Your existing plan and its features will remain active until the end of the current billing period.",
   "expand": "Expand",
+  "expired": "Expired",
   "expired_confirmation_code": "Your confirmation code has expired. Click <0>Resend confirmation code</0> to get a new one.",
   "expires": "Expires",
+  "expires_in_days": "Expires in __days__ days",
+  "expires_on": "Expires: __date__",
   "expiry": "Expiry Date",
   "export_csv": "Export CSV",
   "export_project_to_github": "Export Project to GitHub",
@@ -889,6 +892,7 @@
   "integrations": "Integrations",
   "interested_in": "Interested in",
   "interested_in_cheaper_personal_plan": "Would you be interested in the cheaper <0>__price__</0> Personal plan?",
+  "invalid_certificate": "Invalid certificate. Please check the certificate and try again.",
   "invalid_confirmation_code": "That didn’t work. Please check the code and try again.",
   "invalid_email": "An email address is invalid",
   "invalid_file_name": "Invalid File Name",
@@ -918,6 +922,7 @@
   "is_email_affiliated": "Is your email affiliated with an institution? ",
   "is_longer_than_n_characters": "is at least __n__ characters long",
   "is_not_used_on_any_other_website": "is not used on any other website",
+  "issued_on": "Issued: __date__",
   "it": "Italian",
   "ja": "Japanese",
   "january": "January",
@@ -2089,6 +2094,7 @@
   "user_not_found": "User not found",
   "user_sessions": "User Sessions",
   "user_wants_you_to_see_project": "__username__ would like you to join __projectname__",
+  "valid": "Valid",
   "valid_sso_configuration": "Valid SSO configuration",
   "validation_issue_entry_description": "A validation issue which prevented this project from compiling",
   "vat": "VAT",

services/web/test/frontend/features/group-management/components/sso/group-settings-sso.spec.tsx

@@ -1,5 +1,6 @@
 import GroupSettingsSSORoot from '../../../../../../modules/group-settings/frontend/js/components/sso/group-settings-sso-root'
 import { SSOConfigurationProvider } from '../../../../../../modules/group-settings/frontend/js/context/sso-configuration-context'
+import { singleLineCertificates } from '../../../../../../modules/group-settings/test/data/certificates'
 
 function GroupSettingsSSOComponent() {
   return (
@@ -49,7 +50,12 @@ describe('GroupSettingsSSO', function () {
         statusCode: 200,
         body: {
           entryPoint: 'entrypoint',
-          certificates: ['cert1', 'cert2'],
+          certificates: [
+            {
+              value: singleLineCertificates[0],
+            },
+            { value: singleLineCertificates[1] },
+          ],
           userIdAttribute: 'email',
           enabled: false,
           validated: false,
@@ -71,7 +77,10 @@ describe('GroupSettingsSSO', function () {
         statusCode: 200,
         body: {
           entryPoint: 'entrypoint',
-          certificates: ['cert1', 'cert2'],
+          certificates: [
+            { value: singleLineCertificates[0] },
+            { value: singleLineCertificates[1] },
+          ],
           userIdAttribute: 'email',
           validated: true,
           enabled: false,
@@ -93,7 +102,10 @@ describe('GroupSettingsSSO', function () {
         statusCode: 200,
         body: {
           entryPoint: 'entrypoint',
-          certificates: ['cert1', 'cert2'],
+          certificates: [
+            { value: singleLineCertificates[0] },
+            { value: singleLineCertificates[1] },
+          ],
           userIdAttribute: 'email',
           validated: true,
           enabled: true,
@@ -115,7 +127,7 @@ describe('GroupSettingsSSO', function () {
         statusCode: 200,
         body: {
           entryPoint: 'entrypoint',
-          certificates: ['cert'],
+          certificates: [{ value: singleLineCertificates[0] }],
           userIdAttribute: 'email',
           validated: true,
           enabled: false,
@@ -126,7 +138,7 @@ describe('GroupSettingsSSO', function () {
         statusCode: 200,
         body: {
           entryPoint: 'entrypoint',
-          certificates: ['certi'],
+          certificates: [{ value: singleLineCertificates[1] }],
           userIdAttribute: 'email',
           validated: false,
           enabled: false,
@@ -155,7 +167,7 @@ describe('GroupSettingsSSO', function () {
           statusCode: 200,
           body: {
             entryPoint: 'entrypoint',
-            certificates: ['cert'],
+            certificates: [{ value: singleLineCertificates[0] }],
             userIdAttribute: 'email',
             enabled: false,
           },
@@ -195,7 +207,7 @@ describe('GroupSettingsSSO', function () {
           statusCode: 200,
           body: {
             entryPoint: 'entrypoint',
-            certificates: ['cert'],
+            certificates: [{ value: singleLineCertificates[0] }],
             userIdAttribute: 'email',
             validated: true,
             enabled: true,
@@ -222,7 +234,7 @@ describe('GroupSettingsSSO', function () {
           statusCode: 200,
           body: {
             entryPoint: 'entrypoint',
-            certificates: ['cert'],
+            certificates: [{ value: singleLineCertificates[0] }],
             userIdAttribute: 'email',
             validated: true,
             enabled: true,

services/web/types/subscription/sso.ts

@@ -1,6 +1,13 @@
+export type Certificate = {
+  id: string
+  value?: string
+  validFrom?: Date
+  validTo?: Date
+}
+
 export type SSOConfig = {
   entryPoint?: string
-  certificates: (string | undefined)[]
+  certificates: Certificate[]
   userIdAttribute?: string
   userFirstNameAttribute?: string
   userLastNameAttribute?: string