custom_profile_fields: Toggle new "display_in_profile_summary" field.

Custom profile fields table `CSS` changed to fit the new "Display"
column of checkboxes, checkboxes are for select/deselect custom
profile field to display in profile popover.

New option "Display in profile summary" added in create and edit
custom profile fields form, with the help of this the user can
pick max of 2 custom profile fields except for `LONG_TEXT` and
`USER` fields to display in his user profile popover.

Checkboxes will go in a disabled state, with an explanatory tooltip,
if we've already passed the limit of 2 fields with this setting
enabled.

Fixes #21215.

static/js/tippyjs.js

@@ -367,4 +367,26 @@ export function initialize() {
         // Avoid inheriting `position: relative` CSS on the stream sorter widget.
         appendTo: () => document.body,
     });
+
+    delegate("body", {
+        // This tooltip appears on the "Summary" checkboxes in
+        // settings > custom profile fields, when at the limit of 2
+        // fields with display_in_profile_summary enabled.
+        target: [
+            "#profile-field-settings .display_in_profile_summary_tooltip",
+            "#edit-custom-profile-field-form-modal .display_in_profile_summary_tooltip",
+            "#add-new-custom-profile-field-form .display_in_profile_summary_tooltip",
+        ],
+        content: $t({
+            defaultMessage: "Only 2 custom profile fields can be displayed in the profile summary.",
+        }),
+        appendTo: () => document.body,
+        onTrigger(instance) {
+            // Sometimes just removing class is not enough to destroy/remove tooltip, especially in
+            // "Add a new custom profile field" form, so here we are manually calling `destroy()`.
+            if (!instance.reference.classList.contains("display_in_profile_summary_tooltip")) {
+                instance.destroy();
+            }
+        },
+    });
 }