From a77401f199af84abf892abc219c8334e2b0dbb00 Mon Sep 17 00:00:00 2001
From: khushiagl <khushiagar06@gmail.com>
Date: Sun, 23 Jul 2023 19:50:27 -0400
Subject: [PATCH] Addressed
 https://github.com/MarkUsProject/Markus/pull/6642/files/c5280c8e7f7e7f7ae03c9ba77a9f0a7e8edf425c#r1268804360

---
 .../Components/Modals/filter_modal.jsx          | 17 ++++++++++++++---
 .../DropDownMenu/MultiSelectDropDown.js         | 10 +++++-----
 app/controllers/results_controller.rb           |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/Components/Modals/filter_modal.jsx b/app/assets/javascripts/Components/Modals/filter_modal.jsx
index bf1ed21a4e..761db2ed13 100644
--- a/app/assets/javascripts/Components/Modals/filter_modal.jsx
+++ b/app/assets/javascripts/Components/Modals/filter_modal.jsx
@@ -57,12 +57,15 @@ export class FilterModal extends React.Component {
 
   renderTasDropdown = () => {
     if (this.props.role !== "Ta") {
+      let tas = this.props.tas.map(option => {
+        return {key: option[0], display: option[0] + " - " + option[1]};
+      });
       return (
         <div className={"filter"}>
           <p>{I18n.t("activerecord.models.ta.other")}</p>
           <MultiSelectDropdown
             id={"Tas"}
-            options={this.props.tas}
+            options={tas}
             selected={this.props.filterData.tas}
             onToggleOption={this.onToggleOptionTas}
             onClearSelection={this.onClearSelectionTAs}
@@ -75,10 +78,18 @@ export class FilterModal extends React.Component {
   renderTagsDropdown = () => {
     let options = [];
     if (this.props.available_tags.length !== 0) {
-      options = options.concat(this.props.available_tags.map(item => item.name));
+      options = options.concat(
+        this.props.available_tags.map(item => {
+          return {key: item.name, display: item.name};
+        })
+      );
     }
     if (this.props.current_tags.length !== 0) {
-      options = options.concat(this.props.current_tags.map(item => item.name));
+      options = options.concat(
+        this.props.current_tags.map(item => {
+          return {key: item.name, display: item.name};
+        })
+      );
     }
     return (
       <MultiSelectDropdown
diff --git a/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js b/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js
index 577e671c34..68b94a9599 100644
--- a/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js
+++ b/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js
@@ -43,17 +43,17 @@ export class MultiSelectDropdown extends React.Component {
         return (
           <ul>
             {options.map(option => {
-              isSelected = selected.includes(option);
+              isSelected = selected.includes(option.key);
               return (
-                <li key={option} onClick={e => this.onSelect(e, option)}>
+                <li key={option.key} onClick={e => this.onSelect(e, option.key)}>
                   <input
                     type="checkbox"
-                    id={option}
+                    id={option.key}
                     checked={isSelected}
                     onChange={() => null}
                   ></input>
-                  <label htmlFor={option} onClick={event => event.preventDefault()}>
-                    {option}
+                  <label htmlFor={option.display} onClick={event => event.preventDefault()}>
+                    {option.display}
                   </label>
                 </li>
               );
diff --git a/app/controllers/results_controller.rb b/app/controllers/results_controller.rb
index cc692dcdfe..6055759614 100644
--- a/app/controllers/results_controller.rb
+++ b/app/controllers/results_controller.rb
@@ -139,7 +139,7 @@ def show
         end
 
         if current_role.instructor?
-          data[:tas] = course.tas.joins(:user).pluck('users.user_name')
+          data[:tas] = course.tas.joins(:user).pluck('users.user_name', 'users.display_name')
         end
 
         # Marks