Merge pull request #24028 from overleaf/ii-bs5-group-settings

[web] BS5 group settings

GitOrigin-RevId: d4f0a16c653548bee66a65a5a5db056c8cc09666

services/web/frontend/js/features/ui/components/ol/ol-form-control.tsx

@@ -62,6 +62,7 @@ const OLFormControl: BsPrefixRefForwardingComponent<
     onFocus: rest.onFocus as BS3FormControlProps['onFocus'],
     onBlur: rest.onBlur as BS3FormControlProps['onBlur'],
     onInvalid: rest.onInvalid as BS3FormControlProps['onInvalid'],
+    onPaste: rest.onPaste as BS3FormControlProps['onPaste'],
     prepend: rest.prepend,
     size: rest.htmlSize,
     'main-field': rest['main-field'],

services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss

@@ -30,3 +30,287 @@
     color: var(--yellow-50);
   }
 }
+
+.managed-users-enabled {
+  color: var(--content-positive);
+
+  .icon {
+    vertical-align: text-bottom;
+  }
+}
+
+h3.group-settings-title {
+  margin-bottom: var(--spacing-03);
+
+  @include heading-sm;
+}
+
+h4.group-settings-title {
+  margin-bottom: 0;
+  font-size: var(--font-size-03);
+  line-height: var(--line-height-04);
+}
+
+h3.group-settings-title,
+h4.group-settings-title {
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 0;
+}
+
+.group-settings-sso {
+  .group-settings-sso-row {
+    margin-top: var(--spacing-07);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .group-settings-sso-action-col {
+      margin-left: var(--spacing-06);
+    }
+  }
+}
+
+.below-settings-section {
+  border-top: 1px solid var(--border-disabled);
+  padding-top: var(--spacing-08);
+  margin-top: var(--spacing-08);
+}
+
+.sso-config-info {
+  padding: var(--spacing-05) 0;
+  border-radius: var(--border-radius-base);
+
+  .sso-config-info-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-03);
+    padding: 0 var(--spacing-06) var(--spacing-06) var(--spacing-06);
+    border-bottom: 1px solid var(--border-disabled);
+    margin-bottom: var(--spacing-06);
+    flex-wrap: wrap;
+  }
+
+  .sso-config-options-buttons {
+    display: flex;
+    gap: var(--spacing-04);
+  }
+
+  .sso-config-info-section {
+    margin-bottom: var(--spacing-07);
+    padding: 0 var(--spacing-06);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .sso-config-info-label {
+    font-size: var(--font-size-02);
+    font-weight: bold;
+
+    .certificate-status {
+      font-weight: normal;
+
+      .material-symbols {
+        vertical-align: top;
+      }
+
+      &.certificate-valid {
+        color: var(--content-positive);
+      }
+
+      &.certificate-expiring-soon {
+        color: var(--content-warning);
+      }
+
+      &.certificate-expired {
+        color: var(--content-danger);
+      }
+    }
+  }
+
+  .sso-config-info-label-optional {
+    font-weight: normal;
+  }
+
+  .sso-config-info-content {
+    color: var(--content-primary);
+    word-break: break-word;
+  }
+
+  .sso-config-info-content-empty {
+    color: var(--neutral-60);
+  }
+
+  p {
+    margin-bottom: var(--spacing-03);
+  }
+}
+
+.sso-config-modal-content {
+  .sso-config-interstitial-title {
+    font-size: var(--font-size-05);
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .sso-config-modal-icon-wrapper {
+    text-align: center;
+    margin-top: var(--spacing-04);
+
+    .sso-config-interstitial-icon,
+    .sso-config-test-result-icon,
+    .sso-config-test-error-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 80px;
+      height: 80px;
+      font-size: var(--font-size-08);
+      border-radius: 50%;
+      gap: var(--spacing-04);
+    }
+
+    .sso-config-interstitial-icon {
+      background-color: var(--bg-light-secondary);
+    }
+
+    .sso-config-test-result-icon {
+      background-color: var(--bg-accent-03);
+      color: var(--content-positive);
+    }
+
+    .sso-config-test-error-icon {
+      background-color: var(--bg-danger-03);
+      color: var(--content-danger);
+    }
+  }
+
+  .payload-content {
+    padding: var(
+      --spacing-06
+    ); // vertical padding added by elements within notification
+
+    width: 100%;
+    border-radius: $border-radius-base;
+    color: var(--content-primary);
+    border: 1px solid var(--border-disabled);
+
+    .saml-response-xml-wrapper {
+      margin-top: var(--spacing-06);
+      overflow: hidden;
+      background-color: var(--bg-light-secondary);
+      border-radius: var(--border-radius-base);
+
+      .saml-response-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: var(--font-size-03);
+        line-height: 56px;
+        font-weight: bold;
+        padding: 0 var(--spacing-06);
+        border-bottom: 1px solid var(--border-disabled);
+      }
+
+      .saml-response-footer {
+        text-align: center;
+        line-height: 56px;
+        position: sticky;
+        bottom: 0;
+        background: linear-gradient(
+          360deg,
+          $neutral-10 0%,
+          rgb(244 245 246 / 0%) 835.48%
+        );
+      }
+
+      .saml-response-xml {
+        @include font-mono;
+
+        white-space: pre-wrap;
+        font-size: var(--font-size-02);
+        word-break: break-word;
+        padding: var(--spacing-06) var(--spacing-06) 0 var(--spacing-06);
+        height: 100px;
+        min-height: 100px;
+
+        &.view-more {
+          height: auto;
+        }
+      }
+
+      .expand-viewer {
+        .material-symbols {
+          font-size: 24px;
+        }
+      }
+    }
+
+    .payload-content-user-info-item {
+      margin-bottom: var(--spacing-03);
+      display: inline-block;
+      width: 100%;
+      overflow-wrap: break-word;
+    }
+  }
+}
+
+.certificate-wrapper {
+  .certificate-delete {
+    vertical-align: middle;
+  }
+
+  .view-more {
+    vertical-align: middle;
+    padding: 0;
+  }
+}
+
+.certificate-truncated {
+  display: flex;
+  align-items: center;
+
+  .view-more {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-left: var(--spacing-06);
+  }
+
+  .certificate {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    flex-grow: 4;
+  }
+}
+
+.certificate {
+  font-family: Courier, monospace;
+}
+
+.certificate-delete {
+  text-decoration: none;
+}
+
+.certificate-full .certificate {
+  word-break: break-all;
+  display: block;
+}
+
+.certificate-form-row {
+  display: flex;
+
+  .certificate-input {
+    flex-grow: 11;
+  }
+
+  .certificate-delete {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+}

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

@@ -1,15 +1,15 @@
-h2.group-settings-title {
+h3.group-settings-title {
   margin-bottom: 5px;
   font-size: @font-size-large;
 }
 
-h3.group-settings-title {
+h4.group-settings-title {
   margin-bottom: 0;
   font-size: @font-size-base;
 }
 
-h2.group-settings-title,
-h3.group-settings-title {
+h3.group-settings-title,
+h4.group-settings-title {
   font-family: Lato, sans-serif;
   line-height: 28px;
   font-weight: bold;
@@ -124,6 +124,7 @@ h3.group-settings-title {
   .sso-config-info-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     gap: @margin-xs;
     padding: 0 @padding-base-horizontal 15px @padding-base-horizontal;
     border-bottom: 1px solid @neutral-20;
@@ -134,7 +135,6 @@ h3.group-settings-title {
       font-size: @font-size-small;
       border-radius: 4px;
       padding: 2px 4px;
-      margin-top: 4px;
       flex-shrink: 0;
 
       &.status-label-valid {
@@ -150,9 +150,8 @@ h3.group-settings-title {
   }
 
   .sso-config-options-buttons {
-    button:not(:last-child) {
-      margin-right: 8px;
-    }
+    display: flex;
+    gap: 8px;
   }
 
   .sso-config-info-section {
@@ -208,8 +207,8 @@ h3.group-settings-title {
 }
 
 .sso-config-modal-content {
-  .sso-config-interstitial-title,
-  .sso-config-test-result-title {
+  .sso-config-interstitial-title {
+    margin-top: 25px;
     font-family: Lato, sans-serif;
     font-size: 20px;
     font-weight: bold;
@@ -246,13 +245,6 @@ h3.group-settings-title {
     }
   }
 
-  .sso-config-test-result-title {
-    font-family: Lato, sans-serif;
-    font-size: 20px;
-    font-weight: bold;
-    text-align: center;
-  }
-
   .has-feedback {
     .form-control {
       padding-right: 0;
@@ -389,7 +381,3 @@ h3.group-settings-title {
     flex-shrink: 0;
   }
 }
-
-.btn-import-metadata {
-  margin-left: 8px;
-}