Added custom page title to all pages

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [Unreleased]
 
 ### Added
+- Added custom page title to all pages [#1623](https://github.com/greenbone/gsa/pull/1623/files)
 - Allow to disable reload timers [#1619](https://github.com/greenbone/gsa/pull/1619)
 - Added missing withRouter to withEntitiesContainer [#1614](https://github.com/greenbone/gsa/pull/1614)
 - Added parseTrend() function to ScanConfig model [#1583](https://github.com/greenbone/gsa/pull/1583)

gsa/src/web/components/layout/__tests__/__snapshots__/pagetitle.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageTitle tests should render 1`] = `null`;

gsa/src/web/components/layout/__tests__/pagetitle.js

@@ -0,0 +1,59 @@
+/* Copyright (C) 2017-2019 Greenbone Networks GmbH
+ *
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import React from 'react';
+
+import PageTitle from 'web/components/layout/pagetitle';
+
+import {render} from 'web/utils/testing';
+
+describe('PageTitle tests', () => {
+  test('should render', () => {
+    const {element} = render(<PageTitle />);
+    expect(element).toMatchSnapshot();
+  });
+
+  test('Should render default title', () => {
+    const defaultTitle = 'Greenbone Security Assistant';
+    render(<PageTitle />);
+
+    expect(global.window.document.title).toBe(defaultTitle);
+  });
+
+  test('Should render custom title', () => {
+    const title = 'foo';
+    const defaultTitle = 'Greenbone Security Assistant';
+    render(<PageTitle title={title} />);
+
+    expect(global.window.document.title).toBe(defaultTitle + ' - ' + title);
+  });
+
+  test('should update value', () => {
+    const title1 = 'foo';
+    const title2 = 'bar';
+    const defaultTitle = 'Greenbone Security Assistant';
+    const {rerender} = render(<PageTitle title={title1} />);
+
+    expect(global.window.document.title).toBe(defaultTitle + ' - ' + title1);
+
+    rerender(<PageTitle title={title2} />);
+
+    expect(global.window.document.title).toBe(defaultTitle + ' - ' + title2);
+  });
+});

gsa/src/web/components/layout/pagetitle.js

@@ -0,0 +1,44 @@
+/* Copyright (C) 2017-2019 Greenbone Networks GmbH
+ *
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+import {useEffect} from 'react';
+import {isDefined} from 'gmp/utils/identity';
+import PropTypes from 'web/utils/proptypes';
+
+const defaultTitle = 'Greenbone Security Assistant';
+
+const PageTitle = ({title}) => {
+  useEffect(() => {
+    if (isDefined(title)) {
+      document.title = defaultTitle + ' - ' + title;
+    } else {
+      document.title = defaultTitle;
+    }
+
+    return () => {
+      document.title = defaultTitle;
+    };
+  }, [title]);
+  return null;
+};
+
+PageTitle.propTypes = {
+  title: PropTypes.string,
+};
+
+export default PageTitle;

gsa/src/web/pages/agents/detailspage.js

@@ -29,6 +29,7 @@ import VerifyIcon from 'web/components/icon/verifyicon';
 import Divider from 'web/components/layout/divider';
 import IconDivider from 'web/components/layout/icondivider';
 import Layout from 'web/components/layout/layout';
+import PageTitle from 'web/components/layout/pagetitle';
 
 import Tab from 'web/components/tab/tab';
 import TabLayout from 'web/components/tab/tablayout';
@@ -173,49 +174,52 @@ const Page = ({
         onInteraction={onInteraction}
       >
         {({activeTab = 0, onActivateTab}) => (
-          <Layout grow="1" flex="column">
-            <TabLayout grow="1" align={['start', 'end']}>
-              <TabList
-                active={activeTab}
-                align={['start', 'stretch']}
-                onActivateTab={onActivateTab}
-              >
-                <Tab>{_('Information')}</Tab>
-                <EntitiesTab entities={entity.userTags}>
-                  {_('User Tags')}
-                </EntitiesTab>
-                <EntitiesTab entities={permissions}>
-                  {_('Permissions')}
-                </EntitiesTab>
-              </TabList>
-            </TabLayout>
+          <React.Fragment>
+            <PageTitle title={_('Agent: {{name}}', {name: entity.name})} />
+            <Layout grow="1" flex="column">
+              <TabLayout grow="1" align={['start', 'end']}>
+                <TabList
+                  active={activeTab}
+                  align={['start', 'stretch']}
+                  onActivateTab={onActivateTab}
+                >
+                  <Tab>{_('Information')}</Tab>
+                  <EntitiesTab entities={entity.userTags}>
+                    {_('User Tags')}
+                  </EntitiesTab>
+                  <EntitiesTab entities={permissions}>
+                    {_('Permissions')}
+                  </EntitiesTab>
+                </TabList>
+              </TabLayout>
 
-            <Tabs active={activeTab}>
-              <TabPanels>
-                <TabPanel>
-                  <AgentDetails entity={entity} />
-                </TabPanel>
-                <TabPanel>
-                  <EntityTags
-                    entity={entity}
-                    onChanged={onChanged}
-                    onError={onError}
-                    onInteraction={onInteraction}
-                  />
-                </TabPanel>
-                <TabPanel>
-                  <EntityPermissions
-                    entity={entity}
-                    permissions={permissions}
-                    onChanged={onChanged}
-                    onDownloaded={onDownloaded}
-                    onError={onError}
-                    onInteraction={onInteraction}
-                  />
-                </TabPanel>
-              </TabPanels>
-            </Tabs>
-          </Layout>
+              <Tabs active={activeTab}>
+                <TabPanels>
+                  <TabPanel>
+                    <AgentDetails entity={entity} />
+                  </TabPanel>
+                  <TabPanel>
+                    <EntityTags
+                      entity={entity}
+                      onChanged={onChanged}
+                      onError={onError}
+                      onInteraction={onInteraction}
+                    />
+                  </TabPanel>
+                  <TabPanel>
+                    <EntityPermissions
+                      entity={entity}
+                      permissions={permissions}
+                      onChanged={onChanged}
+                      onDownloaded={onDownloaded}
+                      onError={onError}
+                      onInteraction={onInteraction}
+                    />
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </Layout>
+          </React.Fragment>
         )}
       </EntityPage>
     )}

gsa/src/web/pages/agents/listpage.js

@@ -32,6 +32,7 @@ import ManualIcon from 'web/components/icon/manualicon';
 import NewIcon from 'web/components/icon/newicon';
 
 import IconDivider from 'web/components/layout/icondivider';
+import PageTitle from 'web/components/layout/pagetitle';
 
 import AgentIcon from 'web/components/icon/agenticon';
 
@@ -94,27 +95,31 @@ const AgentsPage = ({
       save,
       verify,
     }) => (
-      <EntitiesPage
-        {...props}
-        filterEditDialog={AgentsFilterDialog}
-        filtersFilter={AGENTS_FILTER_FILTER}
-        sectionIcon={<AgentIcon size="large" />}
-        table={AgentsTable}
-        title={_('Agents')}
-        toolBarIcons={ToolBarIcons}
-        onChanged={onChanged}
-        onDownloaded={onDownloaded}
-        onError={onError}
-        onAgentCloneClick={clone}
-        onAgentCreateClick={create}
-        onAgentDeleteClick={delete_func}
-        onAgentDownloadClick={download}
-        onAgentEditClick={edit}
-        onAgentInstallerDownloadClick={downloadinstaller}
-        onAgentSaveClick={save}
-        onAgentVerifyClick={verify}
-        onInteraction={onInteraction}
-      />
+      <React.Fragment>
+        <PageTitle title={_('Agents')} />
+
+        <EntitiesPage
+          {...props}
+          filterEditDialog={AgentsFilterDialog}
+          filtersFilter={AGENTS_FILTER_FILTER}
+          sectionIcon={<AgentIcon size="large" />}
+          table={AgentsTable}
+          title={_('Agents')}
+          toolBarIcons={ToolBarIcons}
+          onChanged={onChanged}
+          onDownloaded={onDownloaded}
+          onError={onError}
+          onAgentCloneClick={clone}
+          onAgentCreateClick={create}
+          onAgentDeleteClick={delete_func}
+          onAgentDownloadClick={download}
+          onAgentEditClick={edit}
+          onAgentInstallerDownloadClick={downloadinstaller}
+          onAgentSaveClick={save}
+          onAgentVerifyClick={verify}
+          onInteraction={onInteraction}
+        />
+      </React.Fragment>
     )}
   </AgentComponent>
 );

gsa/src/web/pages/alerts/detailspage.js

@@ -26,6 +26,7 @@ import ListIcon from 'web/components/icon/listicon';
 import Divider from 'web/components/layout/divider';
 import IconDivider from 'web/components/layout/icondivider';
 import Layout from 'web/components/layout/layout';
+import PageTitle from 'web/components/layout/pagetitle';
 
 import Tab from 'web/components/tab/tab';
 import TabLayout from 'web/components/tab/tablayout';
@@ -145,51 +146,54 @@ const Page = ({
       >
         {({activeTab = 0, onActivateTab}) => {
           return (
-            <Layout grow="1" flex="column">
-              <TabLayout grow="1" align={['start', 'end']}>
-                <TabList
-                  active={activeTab}
-                  align={['start', 'stretch']}
-                  onActivateTab={onActivateTab}
-                >
-                  <Tab>{_('Information')}</Tab>
-                  <EntitiesTab entities={entity.userTags}>
-                    {_('User Tags')}
-                  </EntitiesTab>
-                  <EntitiesTab entities={permissions}>
-                    {_('Permissions')}
-                  </EntitiesTab>
-                </TabList>
-              </TabLayout>
-              <Tabs active={activeTab}>
-                <TabPanels>
-                  <TabPanel>
-                    <AlertDetails
-                      entity={entity}
-                      reportFormats={reportFormats}
-                    />
-                  </TabPanel>
-                  <TabPanel>
-                    <EntityTags
-                      entity={entity}
-                      onChanged={onChanged}
-                      onError={onError}
-                      onInteraction={onInteraction}
-                    />
-                  </TabPanel>
-                  <TabPanel>
-                    <EntityPermissions
-                      entity={entity}
-                      permissions={permissions}
-                      onChanged={onChanged}
-                      onDownloaded={onDownloaded}
-                      onError={onError}
-                      onInteraction={onInteraction}
-                    />
-                  </TabPanel>
-                </TabPanels>
-              </Tabs>
-            </Layout>
+            <React.Fragment>
+              <PageTitle title={_('Alert: {{name}}', {name: entity.name})} />
+              <Layout grow="1" flex="column">
+                <TabLayout grow="1" align={['start', 'end']}>
+                  <TabList
+                    active={activeTab}
+                    align={['start', 'stretch']}
+                    onActivateTab={onActivateTab}
+                  >
+                    <Tab>{_('Information')}</Tab>
+                    <EntitiesTab entities={entity.userTags}>
+                      {_('User Tags')}
+                    </EntitiesTab>
+                    <EntitiesTab entities={permissions}>
+                      {_('Permissions')}
+                    </EntitiesTab>
+                  </TabList>
+                </TabLayout>
+                <Tabs active={activeTab}>
+                  <TabPanels>
+                    <TabPanel>
+                      <AlertDetails
+                        entity={entity}
+                        reportFormats={reportFormats}
+                      />
+                    </TabPanel>
+                    <TabPanel>
+                      <EntityTags
+                        entity={entity}
+                        onChanged={onChanged}
+                        onError={onError}
+                        onInteraction={onInteraction}
+                      />
+                    </TabPanel>
+                    <TabPanel>
+                      <EntityPermissions
+                        entity={entity}
+                        permissions={permissions}
+                        onChanged={onChanged}
+                        onDownloaded={onDownloaded}
+                        onError={onError}
+                        onInteraction={onInteraction}
+                      />
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </Layout>
+            </React.Fragment>
           );
         }}
       </EntityPage>