Added dynamic og titles and room titles (#5237)

* Added dynamic og titles and room titles

* eslint

* CR

* Fixes

* testsss

app/helpers/application_helper.rb

@@ -21,4 +21,12 @@ module ApplicationHelper
     asset_path = SettingGetter.new(setting_name: 'BrandingImage', provider: current_provider).call
     asset_url(asset_path)
   end
+
+  def page_title
+    match = request&.url&.match('\/rooms\/(\w{3}-\w{3}-\w{3}-\w{3})')
+    return 'BigBlueButton' if match.blank?
+
+    room_name = Room.find_by(friendly_id: match[1])&.name
+    room_name || 'BigBlueButton'
+  end
 end

app/javascript/App.jsx

@@ -23,6 +23,7 @@ import Header from './components/shared_components/Header';
 import { useAuth } from './contexts/auth/AuthProvider';
 import Footer from './components/shared_components/Footer';
 import useSiteSetting from './hooks/queries/site_settings/useSiteSetting';
+import Title from './components/shared_components/utilities/Title';
 
 export default function App() {
   const currentUser = useAuth();
@@ -49,6 +50,7 @@ export default function App() {
 
   return (
     <>
+      <Title>BigBlueButton</Title>
       {(homePage || currentUser.signed_in) && <Header /> }
       <Container className={pageHeight}>
         <Outlet />

app/javascript/components/rooms/room/Room.jsx

@@ -33,6 +33,7 @@ import useStartMeeting from '../../../hooks/mutations/rooms/useStartMeeting';
 import MeetingBadges from '../MeetingBadges';
 import SharedBadge from './SharedBadge';
 import RoomNamePlaceHolder from './RoomNamePlaceHolder';
+import Title from '../../shared_components/utilities/Title';
 
 export default function Room() {
   const { t } = useTranslation();
@@ -57,6 +58,7 @@ export default function Room() {
 
   return (
     <>
+      <Title>{room?.name}</Title>
       <div className="wide-white">
         <Row className="pt-4">
           <Col>

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -40,6 +40,7 @@ import FormControl from '../../../shared_components/forms/FormControl';
 import FormControlGeneric from '../../../shared_components/forms/FormControlGeneric';
 import RoomJoinPlaceholder from './RoomJoinPlaceholder';
 import useRoomJoinForm from '../../../../hooks/forms/rooms/useRoomJoinForm';
+import Title from '../../../shared_components/utilities/Title';
 
 export default function RoomJoin() {
   const { t } = useTranslation();
@@ -190,6 +191,7 @@ export default function RoomJoin() {
 
   return (
     <div className="vertical-center">
+      <Title>{publicRoom?.data.name}</Title>
       <div className="text-center pb-4">
         <Logo />
       </div>

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

+// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+//
+// Copyright (c) 2022 BigBlueButton Inc. and by respective authors (see below).
+//
+// This program is free software; you can redistribute it and/or modify it under the
+// terms of the GNU Lesser General Public License as published by the Free Software
+// Foundation; either version 3.0 of the License, or (at your option) any later
+// version.
+//
+// Greenlight is distributed in the hope that it will be useful, but WITHOUT ANY
+// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+// PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License along
+// with Greenlight; if not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+
+export default function Title({ children: title }) {
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta property="og:title" content={title} />
+    </Helmet>
+  );
+}
+
+Title.propTypes = {
+  children: PropTypes.node.isRequired,
+};

app/views/layouts/application.html.erb

@@ -20,8 +20,8 @@
     <title>BigBlueButton</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <!-- Open Graph Attributes -->
-    <meta property="og:title" content="BigBlueButton" />
-    <meta property="og:description" content="<% t('opengraph.description') %>" />
+    <meta property="og:title" content="<%= page_title %>" />
+    <meta property="og:description" content="<%= t('opengraph.description') %>" />
     <meta property="og:image" content="<%= branding_image %>" />
 
     <%= csrf_meta_tags %>

package-lock.json

@@ -28,6 +28,7 @@
         "react-bootstrap": "^2.2.0",
         "react-colorful": "^5.6.1",
         "react-dom": "^17.0.2",
+        "react-helmet": "^6.1.0",
         "react-hook-form": "^7.28.0",
         "react-i18next": "^11.18.5",
         "react-query": "^3.34.16",
@@ -5821,6 +5822,20 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.43.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.1.tgz",
@@ -5948,6 +5963,14 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-test-renderer": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz",
@@ -10733,6 +10756,17 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-hook-form": {
       "version": "7.43.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.1.tgz",
@@ -10803,6 +10837,12 @@
         "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "requires": {}
+    },
     "react-test-renderer": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz",

package.json

@@ -24,6 +24,7 @@
     "react-bootstrap": "^2.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.28.0",
     "react-i18next": "^11.18.5",
     "react-query": "^3.34.16",

spec/controllers/health_checks_controller_spec.rb

@@ -49,7 +49,7 @@ RSpec.describe HealthChecksController, type: :controller do
       end
 
       it 'returns failure message' do
-        allow(ActiveRecord::Base).to receive(:connected?).and_return(false)
+        allow(ActiveRecord::Base.connection).to receive(:active?).and_return(false)
         get :check
         expect(response.body).to include('Unable to connect to Database')
         expect(response).to have_http_status(:internal_server_error)