From 38a9ac41f7465a4b72172046a0ec7cb490045c13 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Wed, 30 Mar 2022 16:59:39 +0100
Subject: [PATCH] Admin member index: initial small screen skeleton layout
 (#17046)

* initial skeleton

* tweaks

* tweaks to header

* Update cypress spec for small screens

* nudge Travis
---
 app/assets/stylesheets/admin.scss             |  4 ++
 app/views/admin/users/_member_index.html.erb  | 45 ++++++++++++++++++-
 .../adminFlows/users/userIndexView.spec.js    | 11 +++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 7ea6acbd6..cc7305528 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -35,6 +35,10 @@ label {
   }
 }
 
+.member-data-heading {
+  box-shadow: 0 2px 4px var(--header-shadow);
+}
+
 // Member index view search and filter indicators
 .indicator-btn {
   .search-indicator {
diff --git a/app/views/admin/users/_member_index.html.erb b/app/views/admin/users/_member_index.html.erb
index c47a9a8f6..b0fb1cb8d 100644
--- a/app/views/admin/users/_member_index.html.erb
+++ b/app/views/admin/users/_member_index.html.erb
@@ -1,10 +1,50 @@
 <div class="crayons-card p-3 s:p-4 m:p-7">
   <header class="flex flex-col l:flex-row justify-content-between l:items-center ">
-    <h1 class="crayons-title ml-3 l:ml-0">Members</h1>
+    <h1 class="crayons-title">Members</h1>
     <%= render "admin/users/index/tabs" %>
   </header>
     <%= render "admin/users/index/controls" %>
-    <table class="crayons-table" width="100%">
+
+    <!-- Small screen data view start -->
+    <div class="block m:hidden fs-s">
+      <h2 class="member-data-heading fs-s py-2 -mx-3 px-3 color-base-60">Members</h2>
+      <ul class="list-none">
+        <% @users.each do |user| %>
+          <li class="py-4">
+            <article>
+              <header class="flex">
+                <img class="radius-full mr-2" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="" />
+                <div class="flex flex-col">
+                  <h3 class="fs-base"><%= link_to user.name, admin_user_path(user) %></h3>
+                  <span class="color-base-60">@<%= user.username %></span>
+                </div>
+              </header>
+              <div class="flex justify-between py-2">
+                <div>standing info</div>
+                <div>role info</div>
+              </div>
+              <div class="flex justify-between items-end">
+                <dl class="flex gap-2">
+                  <div>
+                    <dt class="color-base-60 fw-normal">Last activity</dt>
+                    <dd>placeholder</dd>
+                  </div>
+                  <div>
+                    <dt class="color-base-60 fw-normal">Joined on</dt>
+                    <dd><%= user.registered_at.strftime("%d %b, %Y") %></dd>
+                  </div>
+                </dl>
+                <div>Orgs info</div>
+              </div>
+            </article>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+    <!-- Small screen data view end -->
+
+    <!-- Large screen data view start -->
+    <table class="crayons-table hidden m:block" width="100%">
       <thead>
         <tr>
           <th scope="col">Member</th>
@@ -21,6 +61,7 @@
         <% end %>
       </tbody>
     </table>
+    <!-- Large screen data view end -->
 
     <div class="flex justify-end">
       <%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
diff --git a/cypress/integration/seededFlows/adminFlows/users/userIndexView.spec.js b/cypress/integration/seededFlows/adminFlows/users/userIndexView.spec.js
index 24925a7dc..726a580c6 100644
--- a/cypress/integration/seededFlows/adminFlows/users/userIndexView.spec.js
+++ b/cypress/integration/seededFlows/adminFlows/users/userIndexView.spec.js
@@ -28,8 +28,8 @@ describe('User index view', () => {
 
         cy.findByRole('button', { name: 'Search' }).click();
 
-        // The table headers consistitute a row, plus one result
-        cy.findAllByRole('row').should('have.length', 2);
+        // Coreect search result should appear
+        cy.findByRole('heading', { name: 'Admin McAdmin' }).should('exist');
       });
 
       it('Filters for a user', () => {
@@ -41,8 +41,11 @@ describe('User index view', () => {
         cy.findByRole('combobox', { name: 'User role' }).select('super_admin');
         cy.findByRole('button', { name: 'Filter' }).click();
 
-        // Table header, 'normal' admin and apple auth admin
-        cy.findAllByRole('row').should('have.length', 3);
+        // Search results should include these two results
+        cy.findByRole('heading', { name: 'Admin McAdmin' }).should('exist');
+        cy.findByRole('heading', { name: 'Apple Auth Admin User' }).should(
+          'exist',
+        );
       });
 
       it('Prevents both search and filter widgets being visible at the same time', () => {