Recording view improvements (#5497)

* Added pagination to recording tables

* Make dropdown go up for last item in list

* rspec

app/assets/stylesheets/application.bootstrap.scss

@@ -197,8 +197,6 @@ input.search-bar {
 }
 
 #footer {
-  margin-top: $footer-buffer-height;
-
   #footer-container {
     border-top: 1px solid #d0d5dd;
   }
@@ -464,7 +462,7 @@ input.search-bar {
       box-shadow: 0 0 0 0.25rem var(--brand-color-light) !important;
     }
     &::after {
-      display: none;
+      display: none !important;
     }
   }
 

app/assets/stylesheets/helpers.scss

@@ -34,14 +34,14 @@
 }
 
 .no-header-height {
-  min-height: calc(100vh - $footer-height - $footer-buffer-height);
+  min-height: calc(100vh - $footer-height);
 }
 
 .regular-height {
-  min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
+  min-height: calc(100vh - $header-height - $footer-height);
 
   .vertical-center {
-    min-height: calc(100vh - $header-height - $header-height - $footer-height - $footer-buffer-height);
+    min-height: calc(100vh - $header-height - $header-height - $footer-height);
   }
 }
 

app/assets/stylesheets/recordings.scss

@@ -13,10 +13,15 @@
 //
 // You should have received a copy of the GNU Lesser General Public License along
 // with Greenlight; if not, see <http://www.gnu.org/licenses/>.
+#user-recordings {
+  min-height: 699px;
+}
 
-#user-recordings, #room-recordings {
-  min-height: 400px;
+#room-recordings {
+  min-height: 491px;
+}
 
+#user-recordings, #room-recordings {
   table {
     border-top-right-radius: $border-radius-lg;
     border-top-left-radius: $border-radius-lg;

app/controllers/api/v1/recordings_controller.rb

@@ -37,7 +37,7 @@ module Api
       def index
         sort_config = config_sorting(allowed_columns: %w[name length visibility])
 
-        pagy, recordings = pagy(current_user.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:search]))
+        pagy, recordings = pagy(current_user.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:search]), items: 5)
         render_data data: recordings, meta: pagy_metadata(pagy), status: :ok
       end
 

app/controllers/api/v1/rooms_controller.rb

@@ -133,7 +133,7 @@ module Api
       def recordings
         sort_config = config_sorting(allowed_columns: %w[name length visibility])
 
-        pagy, room_recordings = pagy(@room.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:q]))
+        pagy, room_recordings = pagy(@room.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:q]), items: 3)
         render_data data: room_recordings, meta: pagy_metadata(pagy), status: :ok
       end
 

app/javascript/components/admin/manage_users/EditUser.jsx

@@ -39,7 +39,7 @@ export default function EditUser() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activekey="users">

app/javascript/components/admin/manage_users/ManageUsers.jsx

@@ -47,7 +47,7 @@ export default function ManageUsers() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{t('admin.admin_panel')}</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="users">

app/javascript/components/admin/roles/EditRole.jsx

@@ -44,7 +44,7 @@ export default function EditRole() {
   if (isLoading) return null;
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">

app/javascript/components/admin/roles/Roles.jsx

@@ -39,7 +39,7 @@ export default function Roles() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">

app/javascript/components/admin/room_configuration/RoomConfig.jsx

@@ -37,7 +37,7 @@ export default function RoomConfig() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="room_configuration">

app/javascript/components/admin/server_recordings/ServerRecordings.jsx

@@ -38,7 +38,7 @@ export default function ServerRecordings() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> {t('admin.admin_panel')} </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_recordings">

app/javascript/components/admin/server_rooms/ServerRooms.jsx

@@ -44,7 +44,7 @@ export default function ServerRooms() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_rooms">

app/javascript/components/admin/site_settings/SiteSettings.jsx

@@ -37,7 +37,7 @@ export default function SiteSettings() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="site_settings">

app/javascript/components/admin/tenants/Tenants.jsx

@@ -45,7 +45,7 @@ export default function Tenants() {
   const { data: tenants, isLoading } = useTenants({ search: searchInput, page });
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="tenants">

app/javascript/components/recordings/RecordingRow.jsx

@@ -35,7 +35,7 @@ import SimpleSelect from '../shared_components/utilities/SimpleSelect';
 
 // TODO: Amir - Refactor this.
 export default function RecordingRow({
-  recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI, adminTable,
+  recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI, adminTable, dropUp,
 }) {
   const { t } = useTranslation();
 
@@ -104,6 +104,7 @@ export default function RecordingRow({
       <td className="border-0">
         <SimpleSelect
           defaultValue={recording.visibility}
+          dropUp={dropUp}
         >
           <Dropdown.Item
             key="Public/Protected"
@@ -205,6 +206,7 @@ export default function RecordingRow({
 
 RecordingRow.defaultProps = {
   adminTable: false,
+  dropUp: false,
 };
 
 RecordingRow.propTypes = {
@@ -227,4 +229,5 @@ RecordingRow.propTypes = {
   visibilityMutation: PropTypes.func.isRequired,
   deleteMutation: PropTypes.func.isRequired,
   adminTable: PropTypes.bool,
+  dropUp: PropTypes.bool,
 };

app/javascript/components/recordings/RecordingsList.jsx

@@ -28,7 +28,7 @@ import SearchBar from '../shared_components/search/SearchBar';
 import ProcessingRecordingRow from './ProcessingRecordingRow';
 
 export default function RecordingsList({
-  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable,
+  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable, numPlaceholders,
 }) {
   const { t } = useTranslation();
 
@@ -65,14 +65,19 @@ export default function RecordingsList({
                 <tbody className="border-top-0">
                   {[...Array(recordingsProcessing)].map(() => <ProcessingRecordingRow />)}
                   {
-                    (isLoading && [...Array(7)].map((val, idx) => (
+                    (isLoading && [...Array(numPlaceholders)].map((val, idx) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <RecordingsListRowPlaceHolder key={idx} />
                     )))
                   }
                   {
-                    (recordings?.data?.length > 0 && recordings?.data?.map((recording) => (
-                      <RoomsRecordingRow key={recording.id} recording={recording} adminTable={adminTable} />
+                    (recordings?.data?.length > 0 && recordings?.data?.map((recording, idx) => (
+                      <RoomsRecordingRow
+                        key={recording.id}
+                        recording={recording}
+                        adminTable={adminTable}
+                        dropUp={(recordings?.meta?.page || 0) * (recordings?.meta?.items || 0) - 1 === idx}
+                      />
                     )))
                   }
                 </tbody>
@@ -99,10 +104,11 @@ export default function RecordingsList({
 }
 
 RecordingsList.defaultProps = {
-  recordings: { data: [], meta: { page: 1, pages: 1 } },
+  recordings: { data: [], meta: { page: 1, pages: 1, items: 3 } },
   recordingsProcessing: 0,
   searchInput: '',
   adminTable: false,
+  numPlaceholders: 7,
 };
 
 RecordingsList.propTypes = {
@@ -124,6 +130,7 @@ RecordingsList.propTypes = {
     meta: PropTypes.shape({
       page: PropTypes.number,
       pages: PropTypes.number,
+      items: PropTypes.number,
     }),
   }),
   isLoading: PropTypes.bool.isRequired,
@@ -132,4 +139,5 @@ RecordingsList.propTypes = {
   setSearchInput: PropTypes.func.isRequired,
   recordingsProcessing: PropTypes.number,
   adminTable: PropTypes.bool,
+  numPlaceholders: PropTypes.number,
 };

app/javascript/components/recordings/UserRecordings.jsx

@@ -31,6 +31,7 @@ export default function UserRecordings() {
         setPage={setPage}
         setSearchInput={setSearchInput}
         searchInput={searchInput}
+        numPlaceholders={5}
       />
     </div>
   );

app/javascript/components/recordings/room_recordings/RoomRecordings.jsx

@@ -36,6 +36,7 @@ export default function RoomRecordings() {
         setSearchInput={setSearchInput}
         searchInput={searchInput}
         recordingsProcessing={roomRecordingsProcessing.data}
+        numPlaceholders={3}
       />
     </div>
   );

app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx

@@ -20,19 +20,21 @@ import useUpdateRecordingVisibility from '../../../hooks/mutations/recordings/us
 import useDeleteRecording from '../../../hooks/mutations/recordings/useDeleteRecording';
 import RecordingRow from '../RecordingRow';
 
-export default function RoomsRecordingRow({ recording, adminTable }) {
+export default function RoomsRecordingRow({ recording, adminTable, dropUp }) {
   return (
     <RecordingRow
       adminTable={adminTable}
       recording={recording}
       visibilityMutation={useUpdateRecordingVisibility}
       deleteMutation={useDeleteRecording}
+      dropUp={dropUp}
     />
   );
 }
 
 RoomsRecordingRow.defaultProps = {
   adminTable: false,
+  dropUp: false,
 };
 
 RoomsRecordingRow.propTypes = {
@@ -51,4 +53,5 @@ RoomsRecordingRow.propTypes = {
     map: PropTypes.func,
   }).isRequired,
   adminTable: PropTypes.bool,
+  dropUp: PropTypes.bool,
 };

app/javascript/components/shared_components/utilities/SimpleSelect.jsx

@@ -19,12 +19,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
-export default function SimpleSelect({ defaultValue, children }) {
+export default function SimpleSelect({ defaultValue, dropUp, children }) {
   // Get the currently selected option and set the dropdown toggle to that value
   const defaultString = children?.filter((item) => item.props.value === defaultValue)[0];
 
   return (
-    <Dropdown className="simple-select">
+    <Dropdown className="simple-select" drop={dropUp ? 'up' : undefined}>
       <Dropdown.Toggle>
         { defaultString?.props?.children }
         <ChevronDownIcon className="hi-s float-end" />
@@ -38,10 +38,12 @@ export default function SimpleSelect({ defaultValue, children }) {
 
 SimpleSelect.defaultProps = {
   defaultValue: '',
+  dropUp: false,
   children: undefined,
 };
 
 SimpleSelect.propTypes = {
   defaultValue: PropTypes.string,
+  dropUp: PropTypes.bool,
   children: PropTypes.arrayOf(PropTypes.element),
 };