Add NoRoomsFound feedback (#4627)

* Add NoRoomsFound layout

* esf

* Fix logic so that Placeholders appear on loading instead of NoRooms card

* Fix logic so that NoRoomsFound appears instead of NoRooms after unsuccessful search

app/assets/locales/en.json

@@ -23,6 +23,7 @@
   "are_you_sure": "Are you sure?",
   "return_home": "Return Home",
   "created_at": "Created at",
+  "no_result_search_input": "Could not find any results for for \"{{ searchInput }}\"",
   "homepage": {
     "welcome_bbb": "Welcome to BigBlueButton.",
     "bigbluebutton_description": "BigBlueButton is an open source web conferencing system for online classes. The platform maximizes time for applied learning by enabling students to collaborate and receive feedback in real-time.",
@@ -102,7 +103,7 @@
     "shared_by": "shared by ",
     "last_session": "Last Session: {{ room.last_session }}",
     "no_last_session": "No previous session created",
-    "no_rooms_found": "No rooms found",
+    "no_rooms_found": "No Rooms found",
     "rooms_list_is_empty": "You don't have any rooms yet!",
     "rooms_list_empty_create_room": "Create your first room by clicking on the button below and entering a room name.",
     "meeting": {

app/javascript/components/rooms/NoRoomsFound.jsx

+import React from 'react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { Stack } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+
+export default function NoRoomsFound({ searchInput }) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack direction="vertical" className="d-block mx-auto text-center">
+      <div className="icon-circle rounded-circle d-block mx-auto mb-3 bg-white">
+        <MagnifyingGlassIcon className="hi-l text-brand d-block mx-auto pt-4" />
+      </div>
+      <h2>{t('room.no_rooms_found')}</h2>
+      <p>{t('no_result_search_input', { searchInput })}</p>
+    </Stack>
+  );
+}
+
+NoRoomsFound.propTypes = {
+  searchInput: PropTypes.string.isRequired,
+};

app/javascript/components/rooms/RoomsList.jsx

@@ -12,6 +12,7 @@ import CreateRoomForm from './room/forms/CreateRoomForm';
 import { useAuth } from '../../contexts/auth/AuthProvider';
 import SearchBar from '../shared_components/search/SearchBar';
 import EmptyRoomsList from './EmptyRoomsList';
+import NoRoomsFound from './NoRoomsFound';
 
 export default function RoomsList() {
   const { t } = useTranslation();
@@ -20,7 +21,9 @@ export default function RoomsList() {
   const currentUser = useAuth();
   const mutationWrapper = (args) => useCreateRoom({ userId: currentUser.id, ...args });
 
-  if (rooms?.length === 0) return <EmptyRoomsList />;
+  if (!isLoading && !rooms?.length && !searchInput) {
+    return <EmptyRoomsList />;
+  }
 
   return (
     <>
@@ -29,20 +32,33 @@ export default function RoomsList() {
           <SearchBar searchInput={searchInput} id="rooms-search" setSearchInput={setSearchInput} />
         </div>
         <Modal
-          modalButton={<Button variant="brand" className="ms-auto me-xxl-1">{ t('room.add_new_room') }</Button>}
+          modalButton={(
+            <Button
+              variant="brand"
+              className="ms-auto me-xxl-1"
+            >{t('room.add_new_room')}
+            </Button>
+            )}
           title={t('room.create_new_room')}
           body={<CreateRoomForm mutation={mutationWrapper} userId={currentUser.id} />}
         />
       </Stack>
       <Row className="g-4 mt-4">
         {
+          (isLoading && [...Array(8)].map((val, idx) => (
+            <Col
               // eslint-disable-next-line react/no-array-index-key
-          (isLoading && [...Array(8)].map((val, idx) => <Col key={idx} className="col-md-auto mt-0 mb-4"><RoomCardPlaceHolder /></Col>))
-          || rooms?.map((room) => (
+              key={idx}
+              className="col-md-auto mt-0 mb-4"
+            ><RoomCardPlaceHolder />
+            </Col>
+          )))
+          || (rooms?.length && rooms?.map((room) => (
             <Col key={room.friendly_id} className="col-md-auto col-xs-12 mt-0 mb-4">
               {(room.optimistic && <RoomCardPlaceHolder />) || <RoomCard room={room} />}
             </Col>
-          ))
+          )))
+          || <NoRoomsFound searchInput={searchInput} />
           }
       </Row>
     </>