Fix Recording Dropdown overflow (#4651)

* Fix Recording row dropdown overflow

* Add copied urls locale

* Remove unwanted changes

app/assets/locales/en.json

@@ -162,6 +162,7 @@
     "protected": "Protected",
     "length_in_minutes": "{{recording.length}} min.",
     "processing_recording": "Processing recording...",
+    "copied_urls": "Copied Recording Url(s)",
     "copy_recording_urls": "Copy Recording Url(s)",
     "no_recordings_found": "No Recordings found",
     "recordings_list_empty": "You don't have any recordings yet!",

app/assets/stylesheets/recordings.scss

@@ -20,10 +20,6 @@
     }
   }
 
-  .dropdown {
-    position: static;
-  }
-
   .dropdown-item {
     color: $muted;
     &:hover {
@@ -97,3 +93,13 @@
 .recordings-count-badge {
   background-color: whitesmoke !important;
 }
+
+.recordings-icons:first-child {
+  .dropdown-item:hover, .dropdown-item:focus {
+    background-color: transparent !important;
+  }
+
+  svg:hover {
+    color: var(--brand-color) !important;
+  }
+}
\ No newline at end of file

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

-import React from 'react';
-import PropTypes from 'prop-types';
-import RecordingRow from '../../recordings/RecordingRow';
-import useUpdateRecordingVisibility from '../../../hooks/mutations/recordings/useUpdateRecordingVisibility';
-import useUpdateRecording from '../../../hooks/mutations/recordings/useUpdateRecording';
-import useDeleteRecording from '../../../hooks/mutations/recordings/useDeleteRecording';
-
-export default function ServerRecordingRow({ recording }) {
-  // TODO: Change all mutations when their APIs becomes ready.
-  return (
-    <RecordingRow
-      recording={recording}
-      visibilityMutation={useUpdateRecordingVisibility}
-      updateMutation={useUpdateRecording}
-      deleteMutation={useDeleteRecording}
-    />
-  );
-}
-
-ServerRecordingRow.propTypes = {
-  recording: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    record_id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    length: PropTypes.number.isRequired,
-    participants: PropTypes.number.isRequired,
-    formats: PropTypes.arrayOf(PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      recording_type: PropTypes.string.isRequired,
-    })),
-    visibility: PropTypes.string.isRequired,
-    created_at: PropTypes.string.isRequired,
-    map: PropTypes.func,
-  }).isRequired,
-};

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

@@ -40,6 +40,7 @@ export default function ServerRecordings() {
                   </div>
                   <div id="server-recordings" className="p-4">
                     <RecordingsList
+                      adminTable
                       recordings={serverRecordings}
                       isLoading={isLoading}
                       setPage={setPage}

app/javascript/components/recordings/RecordingRow.jsx

 import {
-  VideoCameraIcon, Square2StackIcon,
-  EllipsisVerticalIcon,
-  TrashIcon, PencilSquareIcon,
+  VideoCameraIcon, TrashIcon, PencilSquareIcon, ClipboardDocumentIcon, EllipsisVerticalIcon,
 } from '@heroicons/react/24/outline';
 import Form from 'react-bootstrap/Form';
 import React, { useState } from 'react';
@@ -18,14 +16,14 @@ import Modal from '../shared_components/modals/Modal';
 
 // TODO: Amir - Refactor this.
 export default function RecordingRow({
-  recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI,
+  recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI, adminTable,
 }) {
   const { t } = useTranslation();
 
   function copyUrls() {
     const formatUrls = recording.formats.map((format) => format.url);
     navigator.clipboard.writeText(formatUrls);
-    toast.success('Copied');
+    toast.success(t('recording.copied_urls'));
   }
 
   const visibilityAPI = useVisibilityAPI();
@@ -102,11 +100,13 @@ export default function RecordingRow({
         ))}
       </td>
       <td className="border-start-0">
+        {adminTable
+          ? (
             <Dropdown className="float-end cursor-pointer">
               <Dropdown.Toggle className="hi-s" as={EllipsisVerticalIcon} />
               <Dropdown.Menu>
                 <Dropdown.Item onClick={() => copyUrls()}>
-              <Square2StackIcon className="hi-s me-2" />
+                  <ClipboardDocumentIcon className="hi-s me-2" />
                   { t('recording.copy_recording_urls') }
                 </Dropdown.Item>
                 <Modal
@@ -121,11 +121,37 @@ export default function RecordingRow({
                 />
               </Dropdown.Menu>
             </Dropdown>
+          )
+          : (
+            <Stack direction="horizontal" className="float-end recordings-icons">
+              <Button
+                variant="icon"
+                className="mt-1 me-3"
+                onClick={() => copyUrls()}
+              >
+                <ClipboardDocumentIcon className="hi-s text-muted" />
+              </Button>
+              <Modal
+                modalButton={<Dropdown.Item className="btn btn-icon"><TrashIcon className="hi-s me-2" /></Dropdown.Item>}
+                title={t('are_you_sure')}
+                body={(
+                  <DeleteRecordingForm
+                    mutation={useDeleteAPI}
+                    recordId={recording.record_id}
+                  />
+                )}
+              />
+            </Stack>
+          )}
       </td>
     </tr>
   );
 }
 
+RecordingRow.defaultProps = {
+  adminTable: false,
+};
+
 RecordingRow.propTypes = {
   recording: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -144,4 +170,5 @@ RecordingRow.propTypes = {
   }).isRequired,
   visibilityMutation: PropTypes.func.isRequired,
   deleteMutation: PropTypes.func.isRequired,
+  adminTable: PropTypes.bool,
 };

app/javascript/components/recordings/RecordingsList.jsx

@@ -12,11 +12,11 @@ import SearchBar from '../shared_components/search/SearchBar';
 import ProcessingRecordingRow from './ProcessingRecordingRow';
 
 export default function RecordingsList({
-  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing,
+  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable,
 }) {
   const { t } = useTranslation();
 
-  if (!isLoading && recordings?.data?.length === 0 && !searchInput) {
+  if (!isLoading && recordings?.data?.length === 0 && !searchInput && recordingsProcessing === 0) {
     return <EmptyRecordingsList />;
   }
 
@@ -55,8 +55,8 @@ export default function RecordingsList({
                     )))
                   }
                   {
-                    (recordings?.data?.length && recordings?.data?.map((recording) => (
-                      <RoomsRecordingRow key={recording.id} recording={recording} />
+                    (recordings?.data?.length > 0 && recordings?.data?.map((recording) => (
+                      <RoomsRecordingRow key={recording.id} recording={recording} adminTable={adminTable} />
                     )))
                   }
                 </tbody>
@@ -80,6 +80,7 @@ RecordingsList.defaultProps = {
   recordings: { data: [], meta: { page: 1, pages: 1 } },
   recordingsProcessing: 0,
   searchInput: '',
+  adminTable: false,
 };
 
 RecordingsList.propTypes = {
@@ -105,4 +106,5 @@ RecordingsList.propTypes = {
   searchInput: PropTypes.string,
   setSearchInput: PropTypes.func.isRequired,
   recordingsProcessing: PropTypes.number,
+  adminTable: PropTypes.bool,
 };

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

@@ -4,9 +4,10 @@ import useUpdateRecordingVisibility from '../../../hooks/mutations/recordings/us
 import useDeleteRecording from '../../../hooks/mutations/recordings/useDeleteRecording';
 import RecordingRow from '../RecordingRow';
 
-export default function RoomsRecordingRow({ recording }) {
+export default function RoomsRecordingRow({ recording, adminTable }) {
   return (
     <RecordingRow
+      adminTable={adminTable}
       recording={recording}
       visibilityMutation={useUpdateRecordingVisibility}
       deleteMutation={useDeleteRecording}
@@ -14,6 +15,10 @@ export default function RoomsRecordingRow({ recording }) {
   );
 }
 
+RoomsRecordingRow.defaultProps = {
+  adminTable: false,
+};
+
 RoomsRecordingRow.propTypes = {
   recording: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -29,4 +34,5 @@ RoomsRecordingRow.propTypes = {
     created_at: PropTypes.string.isRequired,
     map: PropTypes.func,
   }).isRequired,
+  adminTable: PropTypes.bool,
 };