Merge pull request #1941 from Inist-CNRS/fix/title-tenant-name

Fix tenant name in page title to avoid crash on server side

src/api/controller/front.js

@@ -143,13 +143,13 @@ const renderFullPage = (
             </body>`,
         );
 
-const renderHtml = (store, muiTheme, url, context, history) =>
+const renderHtml = (store, muiTheme, url, context, history, tenant) =>
     StyleSheetServer.renderStatic(() =>
         renderToString(
             <StaticRouter location={url} context={context}>
                 <Provider {...{ store }}>
                     <MuiThemeProvider theme={muiTheme}>
-                        <Routes history={history} />
+                        <Routes history={history} tenant={tenant} />
                     </MuiThemeProvider>
                 </Provider>
             </StaticRouter>,
@@ -174,7 +174,14 @@ export const getRenderingData = async (
 
     const sagaPromise = store.runSaga(sagas).done;
     const context = {};
-    const { html, css } = renderHtml(store, theme, url, context, history);
+    const { html, css } = renderHtml(
+        store,
+        theme,
+        url,
+        context,
+        history,
+        ctx.configTenant.name,
+    );
     store.dispatch(END);
 
     await sagaPromise;

src/app/js/admin/App.js

@@ -25,7 +25,7 @@ const styles = {
     },
 };
 
-export const AppComponent = ({ children }) => {
+export const AppComponent = ({ children, tenant }) => {
     const [sidebarOpen, setSidebarOpen] = useState(true);
     const sidebarContextValue = useMemo(
         () => ({
@@ -38,7 +38,7 @@ export const AppComponent = ({ children }) => {
     return (
         <SidebarContext.Provider value={sidebarContextValue}>
             <Helmet>
-                <title>{getTitle()}</title>
+                <title>{getTitle(tenant)}</title>
                 <style type="text/css">{`
                 html, body { height: 100%; background: #efefef }
                 #root { height: 100%; }
@@ -72,6 +72,7 @@ export const AppComponent = ({ children }) => {
 
 AppComponent.propTypes = {
     children: PropTypes.node.isRequired,
+    tenant: PropTypes.string,
 };
 
 export default AppComponent;

src/app/js/admin/index.js

@@ -66,7 +66,7 @@ render(
             theme={createThemeMui(adminTheme, localesMUI.get(locale))}
         >
             <ConnectedRouter history={history} onUpdate={scrollToTop}>
-                <App>
+                <App tenant={window.__TENANT__}>
                     <Route
                         path="/"
                         exact

src/app/js/lib/getTitle.js

@@ -1,13 +1,31 @@
 import { getCleanHost } from '../../../common/uris';
 
-export default () => {
+const HOST_REGEX = /https?:\/\/([\w-]+)/;
+
+/**
+ * @param tenant{string|undefined}
+ * @param prefix{string|undefined}
+ * @return {string}
+ */
+export default (tenant, prefix) => {
     const host = getCleanHost();
+
     /**
-     * @type {string}
+     * @type {string[]}
      */
-    const tenant = window.__TENANT__ ?? 'default';
+    const title = [];
+
+    if (prefix) {
+        title.push(prefix);
+    }
+
+    if (tenant) {
+        title.push(tenant);
+    }
+
+    if (host) {
+        title.push(HOST_REGEX.exec(host)[1]);
+    }
 
-    return host
-        ? `${tenant} - ${/https?:\/\/([\w-]+)/.exec(host)[1]}`
-        : `${tenant} - example`;
+    return title.join(' - ');
 };

src/app/js/public/Home.js

@@ -38,6 +38,7 @@ export class HomeComponent extends Component {
         p: polyglotPropTypes.isRequired,
         title: PropTypes.string,
         description: PropTypes.string,
+        tenant: PropTypes.string,
     };
 
     UNSAFE_componentWillMount() {
@@ -54,6 +55,7 @@ export class HomeComponent extends Component {
             p: polyglot,
             title,
             description,
+            tenant,
         } = this.props;
 
         if (loading) {
@@ -72,9 +74,7 @@ export class HomeComponent extends Component {
             return (
                 <div>
                     <Helmet>
-                        <title>
-                            {title || 'LODEX'} - {getTitle()}
-                        </title>
+                        <title>{getTitle(tenant, title || 'LODEX')}</title>
                         <meta name="description" content={description || ''} />
                     </Helmet>
                     <div className="header-dataset-section">

src/app/js/public/Routes.js

@@ -30,7 +30,7 @@ const Routes = (props) => {
         props.initializeLanguage();
     }, []);
 
-    const { customRoutes, history } = props;
+    const { customRoutes, history, tenant } = props;
     if (!customRoutes) {
         return null;
     }
@@ -59,17 +59,37 @@ const Routes = (props) => {
                             />
                         )}
                     />
-                    <Route path="/" exact component={Home} />
-                    <Route path="/resource" component={Resource} />
-                    <Route path="/ark:/:naan/:rest" component={Resource} />
-                    <Route path="/uid:/:uri" component={Resource} />
+                    <Route
+                        path="/"
+                        exact
+                        render={(props) => <Home {...props} tenant={tenant} />}
+                    />
+                    <Route
+                        path="/resource"
+                        render={(props) => (
+                            <Resource {...props} tenant={tenant} />
+                        )}
+                    />
+                    <Route
+                        path="/ark:/:naan/:rest"
+                        render={(props) => (
+                            <Resource {...props} tenant={tenant} />
+                        )}
+                    />
+                    <Route
+                        path="/uid:/:uri"
+                        render={(props) => (
+                            <Resource {...props} tenant={tenant} />
+                        )}
+                    />
                     <Route path="/login" component={Login} />
                     <Route
                         path="/graph/:name"
                         render={(props) => (
                             <GraphPage
                                 {...props}
                                 onSearch={handleSearchWithDataset}
+                                tenant={tenant}
                             />
                         )}
                     />
@@ -93,6 +113,7 @@ Routes.propTypes = {
     loadDisplayConfig: PropTypes.func.isRequired,
     initializeLanguage: PropTypes.func.isRequired,
     history: PropTypes.object.isRequired,
+    tenant: PropTypes.string,
 };
 
 const mapStateToProps = (state) => ({

src/app/js/public/graph/GraphPage.js

@@ -7,10 +7,10 @@ import compose from 'recompose/compose';
 import getTitle from '../../lib/getTitle';
 import Graph from './Graph';
 
-const GraphPage = ({ name, onSearch }) => (
+const GraphPage = ({ name, onSearch, tenant }) => (
     <>
         <Helmet>
-            <title>Resources - {getTitle()}</title>
+            <title>{getTitle(tenant, 'Resources')}</title>
         </Helmet>
         <Graph className="graph-page" name={name} onSearch={onSearch} />
     </>
@@ -19,6 +19,7 @@ const GraphPage = ({ name, onSearch }) => (
 GraphPage.propTypes = {
     name: PropTypes.string.isRequired,
     onSearch: PropTypes.func.isRequired,
+    tenant: PropTypes.string,
 };
 
 GraphPage.defaultProps = {

src/app/js/public/index.js

@@ -39,7 +39,7 @@ const store = configureStore(
 hydrate(
     <Provider {...{ store }}>
         <LodexThemeProvider>
-            <Routes history={history} />
+            <Routes history={history} tenant={window.__TENANT__} />
         </LodexThemeProvider>
     </Provider>,
     document.getElementById('root'),

src/app/js/public/resource/Detail.js

@@ -121,6 +121,7 @@ export const DetailComponent = ({
     dense,
     isMultilingual,
     locale,
+    tenant,
 }) => {
     if (!resource) {
         return null;
@@ -138,9 +139,7 @@ export const DetailComponent = ({
     return (
         <span className="detail">
             <Helmet>
-                <title>
-                    {title || resource.uri} - {getTitle()}
-                </title>
+                <title>{getTitle(tenant, title || resource.uri)}</title>
                 <meta name="description" content={description} />
             </Helmet>
             <div className="header-resource-section">
@@ -209,6 +208,7 @@ DetailComponent.propTypes = {
     dense: PropTypes.bool,
     isMultilingual: PropTypes.bool,
     locale: PropTypes.string,
+    tenant: PropTypes.string,
 };
 
 const mapStateToProps = (state) => {

src/app/js/public/resource/Resource.js

@@ -106,6 +106,7 @@ export class ResourceComponent extends React.Component {
             prevResource,
             nextResource,
             match,
+            tenant,
         } = this.props;
 
         if (loading) {
@@ -176,7 +177,12 @@ export class ResourceComponent extends React.Component {
             >
                 <div className="resource">
                     {removed && <RemovedDetail />}
-                    {!removed && <Detail backToListLabel={backToListLabel} />}
+                    {!removed && (
+                        <Detail
+                            backToListLabel={backToListLabel}
+                            tenant={tenant}
+                        />
+                    )}
                     {prevResource && (
                         <div
                             className={classnames(
@@ -249,6 +255,7 @@ ResourceComponent.propTypes = {
     }).isRequired,
     prevResource: PropTypes.object,
     nextResource: PropTypes.object,
+    tenant: PropTypes.string,
 };
 
 const mapStateToProps = (state) => {