From 33d06af6c25c331f40eb5894432e9a846e51b996 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Tue, 21 Feb 2023 17:48:57 +0530
Subject: [PATCH] user_profile: Deduplicate code for showing custom profile
 fields.

This commit deduplicates template code for showing custom profile
fields in user info popover and full profile modal by extracting
it in a new file and then using that template file to render
the fields in user info popover and full profile modal.

This commit does not change the design or behavior and they are
same as before.
---
 static/styles/popovers.css                    |  4 +++
 .../templates/user_custom_profile_fields.hbs  | 31 +++++++++++++++++++
 .../templates/user_info_popover_content.hbs   | 24 +-------------
 static/templates/user_profile_modal.hbs       | 21 +------------
 4 files changed, 37 insertions(+), 43 deletions(-)
 create mode 100644 static/templates/user_custom_profile_fields.hbs

diff --git a/static/styles/popovers.css b/static/styles/popovers.css
index a8d73c0b49..cad2a33c1c 100644
--- a/static/styles/popovers.css
+++ b/static/styles/popovers.css
@@ -383,6 +383,10 @@ ul {
 
     #profile-tab {
         margin: 1px 5px 0;
+
+        li.custom_user_field {
+            display: block;
+        }
     }
 
     .top {
diff --git a/static/templates/user_custom_profile_fields.hbs b/static/templates/user_custom_profile_fields.hbs
new file mode 100644
index 0000000000..051351bd91
--- /dev/null
+++ b/static/templates/user_custom_profile_fields.hbs
@@ -0,0 +1,31 @@
+{{#each profile_fields}}
+    <li data-type="{{this.type}}" class="field-section custom_user_field" data-field-id="{{this.id}}">
+        {{#unless ../for_user_info_popover}}
+            <div class="name">{{this.name}}</div>
+        {{/unless}}
+        {{#if this.is_link}}
+            <a tabindex="0" href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="value custom_profile_fields_link {{#if ../for_user_info_popover}}tippy-zulip-tooltip{{/if}}" data-tippy-content="{{this.name}}">{{this.value}}</a>
+        {{else if this.is_external_account}}
+            <a tabindex="0" href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="value custom_profile_fields_link {{#if ../for_user_info_popover}}tippy-zulip-tooltip{{/if}}" data-tippy-content="{{this.name}}">
+                {{#if ../for_user_info_popover}}
+                    {{#if (eq this.subtype "github") }}
+                    <i class="fa fa-github" aria-hidden="true"></i>
+                    {{else if (eq this.subtype "twitter") }}
+                    <i class="fa fa-twitter" aria-hidden="true"></i>
+                    {{/if}}
+                {{/if}}
+                {{this.value}}
+            </a>
+        {{else if this.is_user_field}}
+            <div class="pill-container not-editable" data-field-id="{{this.id}}">
+                <div class="input" contenteditable="false" style="display: none;"></div>
+            </div>
+        {{else}}
+            {{#if this.rendered_value}}
+            <span class="value rendered_markdown {{#if ../for_user_info_popover}}tippy-zulip-tooltip{{/if}}" data-tippy-content="{{this.name}}">{{rendered_markdown this.rendered_value}}</span>
+            {{else}}
+            <span class="value {{#if ../for_user_info_popover}}tippy-zulip-tooltip"{{/if}} data-tippy-content="{{this.name}}">{{this.value}}</span>
+            {{/if}}
+        {{/if}}
+    </li>
+{{/each}}
diff --git a/static/templates/user_info_popover_content.hbs b/static/templates/user_info_popover_content.hbs
index 52b2f53368..99b4bc9ecc 100644
--- a/static/templates/user_info_popover_content.hbs
+++ b/static/templates/user_info_popover_content.hbs
@@ -50,29 +50,7 @@
         <li>{{ user_type }}</li>
     {{/if}}
     {{!-- Display selected custom profile fields in this popover. --}}
-    {{#each display_profile_fields}}
-        <li data-type="{{this.type}}" class="field-section custom_user_field" data-field-id="{{this.id}}">
-            {{#if this.is_link}}
-                <a tabindex="0" href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="value custom_profile_fields_link tippy-zulip-tooltip" data-tippy-content="{{this.name}}">{{this.value}}</a>
-            {{else if this.is_external_account}}
-                <a tabindex="0" href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="value custom_profile_fields_link tippy-zulip-tooltip" data-tippy-content="{{this.name}}">
-                    {{#if (eq this.subtype "github") }}
-                    <i class="fa fa-github" aria-hidden="true"></i>
-                    {{else if (eq this.subtype "twitter") }}
-                    <i class="fa fa-twitter" aria-hidden="true"></i>
-                    {{/if}}
-                    {{this.value}}
-                </a>
-            {{else}}
-                {{#if this.rendered_value}}
-                <span class="value rendered_markdown tippy-zulip-tooltip" data-tippy-content="{{this.name}}">{{rendered_markdown this.rendered_value}}</span>
-                {{else}}
-                <span class="value tippy-zulip-tooltip" data-tippy-content="{{this.name}}">{{this.value}}</span>
-                {{/if}}
-            {{/if}}
-        </li>
-    {{/each}}
-
+    {{> user_custom_profile_fields profile_fields=display_profile_fields for_user_info_popover=true}}
 
     <li class="only-visible-for-spectators">{{#tr}}Joined {date_joined}{{/tr}}</li>
 
diff --git a/static/templates/user_profile_modal.hbs b/static/templates/user_profile_modal.hbs
index f98b3b3432..08e27b1d51 100644
--- a/static/templates/user_profile_modal.hbs
+++ b/static/templates/user_profile_modal.hbs
@@ -81,26 +81,7 @@
                                     </div>
                                     {{/if}}
                                 {{else}}
-                                    {{#each profile_data}}
-                                        <div data-type="{{this.type}}" class="field-section custom_user_field" data-field-id="{{this.id}}">
-                                            <div class="name">{{this.name}}</div>
-                                            {{#if this.is_user_field}}
-                                                <div class="pill-container not-editable" data-field-id="{{this.id}}">
-                                                    <div class="input" contenteditable="false" style="display: none;"></div>
-                                                </div>
-                                            {{else if this.is_link}}
-                                                <a href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="value">{{this.value}}</a>
-                                            {{else if this.is_external_account}}
-                                                <a href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="value">{{this.value}}</a>
-                                            {{else}}
-                                                {{#if this.rendered_value}}
-                                                <div class="value rendered_markdown">{{rendered_markdown this.rendered_value}}</div>
-                                                {{else}}
-                                                <div class="value">{{this.value}}</div>
-                                                {{/if}}
-                                            {{/if}}
-                                        </div>
-                                    {{/each}}
+                                    {{> user_custom_profile_fields profile_fields=profile_data}}
                                 {{/if}}
                             </div>
                         </div>