user_info_popover: Show relevant info for spectators and hide buttons.

We add the date joined info to the popover and hide all the buttons
since none are relevant for a spectator.

frontend_tests/node_tests/popovers.js

@@ -52,6 +52,7 @@ const alice = {
     is_guest: false,
     is_admin: false,
     role: 400,
+    date_joined: "2021-11-01T16:32:16.458735+00:00",
 };
 
 const me = {
@@ -111,6 +112,7 @@ function test_ui(label, f) {
 }
 
 test_ui("sender_hover", ({override, mock_template}) => {
+    page_params.is_spectator = false;
     override($.fn, "popover", noop);
     override(emoji, "get_emoji_details_by_name", noop);
 
@@ -196,6 +198,8 @@ test_ui("sender_hover", ({override, mock_template}) => {
             status_text: "on the beach",
             status_emoji_info,
             user_mention_syntax: "@**Alice Smith**",
+            date_joined: undefined,
+            spectator_view: false,
         });
         return "content-html";
     });

static/js/popovers.js

@@ -1,5 +1,5 @@
 import ClipboardJS from "clipboard";
-import {add, formatISO, set} from "date-fns";
+import {add, formatISO, parseISO, set} from "date-fns";
 import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
 import $ from "jquery";
 import tippy, {hideAll} from "tippy.js";
@@ -208,6 +208,13 @@ function render_user_info_popover(
     const status_text = user_status.get_status_text(user.user_id);
     const status_emoji_info = user_status.get_status_emoji(user.user_id);
 
+    const spectator_view = page_params.is_spectator;
+    let date_joined;
+    if (spectator_view) {
+        const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
+        date_joined = dateFormat.format(parseISO(user.date_joined));
+    }
+
     const args = {
         can_revoke_away,
         can_set_away,
@@ -234,6 +241,8 @@ function render_user_info_popover(
         status_text,
         status_emoji_info,
         user_mention_syntax: people.get_mention_syntax(user.full_name, user.user_id),
+        date_joined,
+        spectator_view,
     };
 
     if (user.is_bot) {

static/templates/user_info_popover_content.hbs

@@ -7,7 +7,7 @@
                 {{#if is_bot}}
                 <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                 {{else}}
-                <span class="{{user_circle_class}} user_circle popover_user_presence tippy-zulip-tooltip" data-tippy-content="{{user_last_seen_time_status}}"></span>
+                <span class="{{user_circle_class}} user_circle popover_user_presence tippy-zulip-tooltip hidden-for-spectators" data-tippy-content="{{user_last_seen_time_status}}"></span>
                 {{/if}}
             {{/if}}
         </li>
@@ -49,6 +49,7 @@
         {{else}}
             <li>{{ user_type }}</li>
         {{/if}}
+        <li class="only-visible-for-spectators">Joined {{date_joined}}</li>
     </div>
 
     {{#if is_me}}
@@ -100,6 +101,9 @@
         </li>
     {{/if}}
 
+    {{#if spectator_view}}
+    {{else}}
+
         <hr />
         {{#if show_user_profile}}
         <li>
@@ -178,4 +182,5 @@
             </a>
         </li>
         {{/if}}
+    {{/if}}
 </ul>