move SectionTitleContainer into its own Components

src/components/dashboard/users/SectionTitleContainer.tsx

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react';
+import SectionTitleLinkElement from './SectionTitleLinkElement';
+
+type IProps = {
+    title: string;
+}
+
+const SectionTitleContainer: FunctionComponent<IProps> = ({title}: IProps) => {
+    return (
+        <div className='verticalSection'>
+            <div className='sectionTitleContainer flex align-items-center'>
+                <h2 className='sectionTitle'>
+                    {title}
+                </h2>
+                <SectionTitleLinkElement
+                    className='raised button-alt headerHelpButton'
+                    title='Help'
+                    url='https://docs.jellyfin.org/general/server/users/'
+                />
+            </div>
+        </div>
+    );
+};
+
+export default SectionTitleContainer;

src/components/pages/NewUserPage.tsx

@@ -4,8 +4,7 @@ import Dashboard from '../../utils/dashboard';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
-
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import InputElement from '../dashboard/users/InputElement';
 import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
@@ -178,18 +177,7 @@ const NewUserPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle'>
-                            {globalize.translate('ButtonAddUser')}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={globalize.translate('ButtonAddUser')}/>
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
                         <InputElement

src/components/pages/UserEditPage.tsx

@@ -8,7 +8,7 @@ import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import InputElement from '../dashboard/users/InputElement';
 import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import SelectElement from '../dashboard/users/SelectElement';
 import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
@@ -278,18 +278,7 @@ const UserEditPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='useredit'/>
                 <div
                     className='lnkEditUserPreferencesContainer'

src/components/pages/UserLibraryAccessPage.tsx

@@ -5,12 +5,12 @@ import loading from '../loading/loading';
 import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
 import toast from '../toast/toast';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import ButtonElement from '../dashboard/users/ButtonElement';
 import { getParameterByName } from '../../utils/url';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 
 type ItemsArr = {
     Name?: string;
@@ -109,7 +109,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
             itemsArr.push({
                 Id: device.Id,
                 Name: device.Name,
-                AppName : device.AppName,
+                AppName: device.AppName,
                 checkedAttribute: checkedAttribute
             });
         }
@@ -228,18 +228,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='userlibraryaccess'/>
                 <form className='userLibraryAccessForm'>
                     <div className='folderAccessContainer'>

src/components/pages/UserParentalControl.tsx

@@ -7,7 +7,7 @@ import BlockedTagList from '../dashboard/users/BlockedTagList';
 import ButtonElement from '../dashboard/users/ButtonElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import loading from '../loading/loading';
@@ -319,18 +319,7 @@ const UserParentalControl: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='userparentalcontrol'/>
                 <form className='userParentalControlForm'>
                     <div className='selectContainer'>

src/components/pages/UserPasswordPage.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import UserPasswordForm from '../dashboard/users/UserPasswordForm';
 import { getParameterByName } from '../../utils/url';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 
 const UserPasswordPage: FunctionComponent = () => {
     const userId = getParameterByName('userId');
@@ -23,18 +23,7 @@ const UserPasswordPage: FunctionComponent = () => {
     return (
         <div>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer title={userName}/>
                 <SectionTabs activeTab='userpassword'/>
                 <div className='readOnlyContent'>
                     <UserPasswordForm