From ad2647a20d60034ef8100ca0ac2e33aa31bac310 Mon Sep 17 00:00:00 2001
From: John Tordoff <>
Date: Fri, 13 Sep 2024 14:04:34 -0400
Subject: [PATCH 1/6] match dropdown select colors and details

---
 .../-components/institutional-users-list/styles.scss       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
index 12f32a725f..8a3d252cf0 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/styles.scss
+++ b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -119,7 +119,7 @@
 
 .filter-container {
     display: flex;
-    justify-content: flex-end;
+    justify-content: flex-start;
     align-items: center;
     width: 100%;
 }
@@ -142,6 +142,11 @@
     margin-bottom: 10px;
 }
 
+.dropdown-trigger {
+    padding: 9px;
+    color: #337ab7;
+}
+
 .dropdown-content label {
     display: flex;
     align-items: center;

From ae93ff26446e9bb6363f96fb980feb845f19cd48 Mon Sep 17 00:00:00 2001
From: John Tordoff <>
Date: Fri, 13 Sep 2024 14:04:57 -0400
Subject: [PATCH 2/6] add total user label to user list

---
 .../institutional-users-list/component.ts      |  2 ++
 .../institutional-users-list/styles.scss       | 18 ++++++++++++++++++
 .../institutional-users-list/template.hbs      |  6 ++++++
 app/institutions/dashboard/users/template.hbs  |  1 +
 translations/en-us.yml                         |  1 +
 5 files changed, 28 insertions(+)

diff --git a/app/institutions/dashboard/-components/institutional-users-list/component.ts b/app/institutions/dashboard/-components/institutional-users-list/component.ts
index 1ee14b7a97..26b02326b8 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/component.ts
+++ b/app/institutions/dashboard/-components/institutional-users-list/component.ts
@@ -20,6 +20,7 @@ interface Column {
 interface InstitutionalUsersListArgs {
     institution: InstitutionModel;
     departmentMetrics: InstitutionDepartmentsModel[];
+    totalUsers: number;
 }
 
 export default class InstitutionalUsersList extends Component<InstitutionalUsersListArgs> {
@@ -29,6 +30,7 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
     institution?: InstitutionModel;
 
     departmentMetrics?: InstitutionDepartmentsModel[];
+    totalUsers?: number;
 
     // Properties
     @tracked department = this.defaultDepartment;
diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
index 8a3d252cf0..8d4db4e347 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/styles.scss
+++ b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -252,3 +252,21 @@ input:checked + .slider::before {
 .slider.round::before {
     border-radius: 50%;
 }
+
+.total-users {
+    margin-right: auto; /* Aligns text to the left */
+    display: flex; /* Allows for consistent alignment with other elements */
+    align-items: center;
+}
+
+.total-users label {
+    font-size: 18px;
+    margin-bottom: 0;
+    font-weight: normal;
+}
+
+.total-users-count {
+    font-size: 24px;
+    margin-right: 5px;
+    font-weight: bold;
+}
diff --git a/app/institutions/dashboard/-components/institutional-users-list/template.hbs b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
index 0326e90f74..0ea33d59bc 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/template.hbs
+++ b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
@@ -2,6 +2,12 @@
     <LoadingIndicator data-test-loading-indicator @dark={{true}} />
 {{else}}
     <div local-class='filter-container'>
+        <div local-class='total-users'>
+            <span local-class='total-users-count'>
+                {{@totalUsers}}
+            </span>
+            <label>{{t 'institutions.dashboard.users_list.total_users'}}</label>
+        </div>
         <div local-class='orcid-switch'>
             <label for='switches-container' local-class='orcid-toggle-label'>{{t 'institutions.dashboard.users_list.has_orcid'}}</label>
             <label local-class='switch'>
diff --git a/app/institutions/dashboard/users/template.hbs b/app/institutions/dashboard/users/template.hbs
index 810b5ba3b9..9bcdf36be8 100644
--- a/app/institutions/dashboard/users/template.hbs
+++ b/app/institutions/dashboard/users/template.hbs
@@ -4,6 +4,7 @@
             <Institutions::Dashboard::-Components::InstitutionalUsersList
                 @institution={{this.model.institution}}
                 @departmentMetrics={{this.model.departmentMetrics}}
+                @totalUsers={{this.model.totalUsers}}
             />
         </div>
     </wrapper.main>
diff --git a/translations/en-us.yml b/translations/en-us.yml
index 641a8d12e2..ab8c3370aa 100644
--- a/translations/en-us.yml
+++ b/translations/en-us.yml
@@ -821,6 +821,7 @@ institutions:
             month_last_active: 'Last Action'
             has_orcid: 'Has ORCID'
             select_columns: 'Customize'
+            total_users: 'total users'
         users_connected_panel: 'SSO Users Connected'
         projects_panel: 'Total Projects'
         departments_panel: Departments

From 9de661ea11df2156336e774313fe677ccd529aaa Mon Sep 17 00:00:00 2001
From: John Tordoff <>
Date: Tue, 17 Sep 2024 11:43:20 -0400
Subject: [PATCH 3/6] clean-up for CR

---
 .../dashboard/-components/institutional-users-list/styles.scss  | 2 +-
 .../dashboard/-components/institutional-users-list/template.hbs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
index 8d4db4e347..c330aece44 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/styles.scss
+++ b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -144,7 +144,7 @@
 
 .dropdown-trigger {
     padding: 9px;
-    color: #337ab7;
+    color: $color-select;
 }
 
 .dropdown-content label {
diff --git a/app/institutions/dashboard/-components/institutional-users-list/template.hbs b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
index 0ea33d59bc..543de8f498 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/template.hbs
+++ b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
@@ -6,7 +6,7 @@
             <span local-class='total-users-count'>
                 {{@totalUsers}}
             </span>
-            <label>{{t 'institutions.dashboard.users_list.total_users'}}</label>
+            {{t 'institutions.dashboard.users_list.total_users'}}
         </div>
         <div local-class='orcid-switch'>
             <label for='switches-container' local-class='orcid-toggle-label'>{{t 'institutions.dashboard.users_list.has_orcid'}}</label>

From e3e1c762a4eaa125d00e36814b2725e95ddbe7ad Mon Sep 17 00:00:00 2001
From: John Tordoff <>
Date: Thu, 19 Sep 2024 10:15:04 -0400
Subject: [PATCH 4/6] make clicking apply close dropdown and make table
 scrollable for mobile

---
 .../institutional-users-list/styles.scss      |  17 +++
 .../institutional-users-list/template.hbs     | 122 +++++++++---------
 config/environment.js                         |   2 +-
 translations/en-us.yml                        |  10 +-
 4 files changed, 85 insertions(+), 66 deletions(-)

diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
index c330aece44..8d8e0c5dc3 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/styles.scss
+++ b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -270,3 +270,20 @@ input:checked + .slider::before {
     margin-right: 5px;
     font-weight: bold;
 }
+
+/* Add media query for mobile devices */
+@media (max-width: 1000px) {
+    .table-wrapper {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
+    }
+
+    .table table {
+        min-width: 1000px; /* Set the table's width to be wider than the viewport */
+    }
+
+    .table th,
+    .table td {
+        white-space: nowrap; /* Prevent text from wrapping */
+    }
+}
diff --git a/app/institutions/dashboard/-components/institutional-users-list/template.hbs b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
index 543de8f498..a5d8c87ab0 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/template.hbs
+++ b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
@@ -57,7 +57,7 @@
                         <Button @type='secondary' {{on 'click' dd.actions.close}}>
                             {{t 'general.cancel'}}
                         </Button>
-                        <Button @type='primary' {{on 'click' this.applyColumnSelection}}>
+                        <Button @type='primary' {{on 'click' this.applyColumnSelection}} {{on 'click' dd.actions.close}}>
                             {{t 'general.apply'}}
                         </Button>
                     </div>
@@ -65,63 +65,65 @@
             {{/if}}
         </BasicDropdown>
     </div>
-    <PaginatedList::HasMany
-        local-class='table'
-        @isTable={{true}}
-        @model={{@institution}}
-        @usePlaceholders={{false}}
-        @relationshipName='userMetrics'
-        @bindReload={{this.reloadUserList}}
-        @query={{this.queryUsers}}
-        as |list|
-    >
-        <list.header local-class='header'>
-            {{#let (component 'sort-arrow'
-                class=(local-class 'sort-arrow')
-                sortAction=this.sortInstitutionalUsers
-                sort=this.sort
-                ) as |SortArrow|}}
-                <tr>
-                    {{#each this.columns as |column|}}
-                        {{#if (includes column.key this.selectedColumns)}}
-                            <th data-test-header='{{column.key}}'>
-                                <div local-class='header-content'>
-                                    <span local-class='header-text'>{{column.label}}</span>
-                                    {{#if column.sort_key}}
-                                        <span local-class='sort-arrow-container'>
-                                            <SortArrow @sortBy='{{column.sort_key}}' />
-                                        </span>
-                                    {{/if}}
-                                </div>
-                            </th>
-                        {{/if}}
-                    {{/each}}
-                </tr>
-            {{/let}}
-        </list.header>
-        <list.item local-class='item' as |institutionalUser|>
-            {{#each this.columns as |column|}}
-                {{#if (includes column.key this.selectedColumns)}}
-                    <td data-test-item={{column.key}}>
-                        {{#if (eq column.type 'user_name')}}
-                            <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
-                                {{institutionalUser.userName}}
-                            </OsfLink>
-                        {{else if (eq column.type 'osf_link')}}
-                            <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
-                                {{institutionalUser.userGuid}}
-                            </OsfLink>
-                        {{else if (eq column.type 'date_by_month')}}
-                            {{moment-format (get institutionalUser column.key) 'MM/YYYY'}}
-                        {{else}}
-                            {{get institutionalUser column.key}}
-                        {{/if}}
-                    </td>
-                {{/if}}
-            {{/each}}
-        </list.item>
-        <list.empty local-class='empty'>
-            {{t 'institutions.dashboard.users_list.empty'}}
-        </list.empty>
-    </PaginatedList::HasMany>
+    <div local-class='table-wrapper'>
+        <PaginatedList::HasMany
+            local-class='table'
+            @isTable={{true}}
+            @model={{@institution}}
+            @usePlaceholders={{false}}
+            @relationshipName='userMetrics'
+            @bindReload={{this.reloadUserList}}
+            @query={{this.queryUsers}}
+            as |list|
+        >
+            <list.header local-class='header'>
+                {{#let (component 'sort-arrow'
+                    class=(local-class 'sort-arrow')
+                    sortAction=this.sortInstitutionalUsers
+                    sort=this.sort
+                    ) as |SortArrow|}}
+                    <tr>
+                        {{#each this.columns as |column|}}
+                            {{#if (includes column.key this.selectedColumns)}}
+                                <th data-test-header='{{column.key}}'>
+                                    <div local-class='header-content'>
+                                        <span local-class='header-text'>{{column.label}}</span>
+                                        {{#if column.sort_key}}
+                                            <span local-class='sort-arrow-container'>
+                                                <SortArrow @sortBy='{{column.sort_key}}' />
+                                            </span>
+                                        {{/if}}
+                                    </div>
+                                </th>
+                            {{/if}}
+                        {{/each}}
+                    </tr>
+                {{/let}}
+            </list.header>
+            <list.item local-class='item' as |institutionalUser|>
+                {{#each this.columns as |column|}}
+                    {{#if (includes column.key this.selectedColumns)}}
+                        <td data-test-item={{column.key}}>
+                            {{#if (eq column.type 'user_name')}}
+                                <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
+                                    {{institutionalUser.userName}}
+                                </OsfLink>
+                            {{else if (eq column.type 'osf_link')}}
+                                <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
+                                    {{institutionalUser.userGuid}}
+                                </OsfLink>
+                            {{else if (eq column.type 'date_by_month')}}
+                                {{moment-format (get institutionalUser column.key) 'MM/YYYY'}}
+                            {{else}}
+                                {{get institutionalUser column.key}}
+                            {{/if}}
+                        </td>
+                    {{/if}}
+                {{/each}}
+            </list.item>
+            <list.empty local-class='empty'>
+                {{t 'institutions.dashboard.users_list.empty'}}
+            </list.empty>
+        </PaginatedList::HasMany>
+    </div>
 {{/if}}
diff --git a/config/environment.js b/config/environment.js
index 864e31cea9..56f12bae31 100644
--- a/config/environment.js
+++ b/config/environment.js
@@ -60,7 +60,7 @@ const {
     KEEN_CONFIG: keenConfig,
     LINT_ON_BUILD: lintOnBuild = false,
     WATER_BUTLER_ENABLED = true,
-    MIRAGE_ENABLED = true,
+    MIRAGE_ENABLED = false,
     MIRAGE_SCENARIOS = [
         'cedar',
         'collections',
diff --git a/translations/en-us.yml b/translations/en-us.yml
index 32b0c18212..bb0247359f 100644
--- a/translations/en-us.yml
+++ b/translations/en-us.yml
@@ -822,11 +822,11 @@ institutions:
             has_orcid: 'Has ORCID'
             select_columns: 'Customize'
             total_users: 'total users'
-          panel:
-              users: 'Total Users'
-              projects: 'OSF Projects'
-              registrations: 'OSF Registrations'
-              preprints: 'OSF Preprints'
+        panel:
+            users: 'Total Users'
+            projects: 'OSF Public and Private Projects'
+            registrations: 'OSF Registrations'
+            preprints: 'OSF Preprints'
         projects_panel: 'Total Projects'
         departments_panel: Departments
         public: Public

From 7921928a4aa8ae6c8b28a1cb8d4fed08ddb8e416 Mon Sep 17 00:00:00 2001
From: John Tordoff <>
Date: Thu, 19 Sep 2024 11:01:56 -0400
Subject: [PATCH 5/6] tweak slider animation

---
 .../dashboard/-components/institutional-users-list/styles.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
index 8d8e0c5dc3..5f2f8e6e1a 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/styles.scss
+++ b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -242,7 +242,7 @@ input:checked + .slider:hover::before {
 }
 
 input:checked + .slider::before {
-    transform: translateX(26px);
+    transform: translateX(30px);
 }
 
 .slider.round {

From 84859d0077c7cdbc3a8608a29fb684e73616e587 Mon Sep 17 00:00:00 2001
From: John Tordoff <>
Date: Fri, 20 Sep 2024 14:56:58 -0400
Subject: [PATCH 6/6] make user table always scrollable

---
 .../institutional-users-list/styles.scss      | 26 +++++--------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
index 5f2f8e6e1a..22fe74ea30 100644
--- a/app/institutions/dashboard/-components/institutional-users-list/styles.scss
+++ b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -6,13 +6,18 @@
     color: $color-select;
 }
 
+.table-wrapper {
+    overflow-x: auto;
+    display: block;
+}
+
 .table {
     margin-bottom: 45px;
 
     table {
         width: 100%;
         margin-bottom: 15px;
-        table-layout: fixed;
+        table-layout: auto;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         border-collapse: collapse;
     }
@@ -21,6 +26,7 @@
     td {
         padding: 10px;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     :global(.text-center) {
@@ -33,7 +39,6 @@
 }
 
 .header {
-    width: 100%;
     background: #365063;
     color: #fff;
 }
@@ -270,20 +275,3 @@ input:checked + .slider::before {
     margin-right: 5px;
     font-weight: bold;
 }
-
-/* Add media query for mobile devices */
-@media (max-width: 1000px) {
-    .table-wrapper {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
-    }
-
-    .table table {
-        min-width: 1000px; /* Set the table's width to be wider than the viewport */
-    }
-
-    .table th,
-    .table td {
-        white-space: nowrap; /* Prevent text from wrapping */
-    }
-}