[frontend] Add page titles to Settings pages and convert to functional components

opencti-platform/opencti-front/lang/front/de.json

@@ -2385,6 +2385,10 @@
   "Sectors": "Sektoren",
   "Sectors and organizations": "Sektoren und Organisationen",
   "Security": "Sicherheit",
+  "Security: Groups | Settings": "Sicherheit: Gruppen | Einstellungen",
+  "Security: Marking Definitions | Settings": "Sicherheit: Markierungsdefinitionen | Einstellungen",
+  "Security: Roles | Settings": "Sicherheit: Rollen | Einstellungen",
+  "Security: Sessions | Settings": "Sicherheit: Sitzungen | Einstellungen",
   "See all entities created by user": "Alle vom Benutzer erstellten Entitäten anzeigen",
   "See all relationships created by user": "Alle vom Benutzer erstellten Beziehungen anzeigen",
   "Select": "Wählen Sie",

opencti-platform/opencti-front/lang/front/en.json

@@ -2385,6 +2385,10 @@
   "Sectors": "Sectors",
   "Sectors and organizations": "Sectors and organizations",
   "Security": "Security",
+  "Security: Groups | Settings": "Security: Groups | Settings",
+  "Security: Marking Definitions | Settings": "Security: Marking Definitions | Settings",
+  "Security: Roles | Settings": "Security: Roles | Settings",
+  "Security: Sessions | Settings": "Security: Sessions | Settings",
   "See all entities created by user": "See all entities created by user",
   "See all relationships created by user": "See all relationships created by user",
   "Select": "Select",

opencti-platform/opencti-front/lang/front/es.json

@@ -2385,6 +2385,10 @@
   "Sectors": "Sectores",
   "Sectors and organizations": "Sectores y organizaciones",
   "Security": "Seguridad",
+  "Security: Groups | Settings": "Seguridad: Grupos | Configuración",
+  "Security: Marking Definitions | Settings": "Seguridad: Definiciones de marcado | Configuración",
+  "Security: Roles | Settings": "Seguridad: Roles | Configuración",
+  "Security: Sessions | Settings": "Seguridad: Sesiones | Configuración",
   "See all entities created by user": "Ver todas las entidades creadas por el usuario",
   "See all relationships created by user": "Ver todas las relaciones creadas por el usuario",
   "Select": "Seleccione",

opencti-platform/opencti-front/lang/front/fr.json

@@ -2385,6 +2385,10 @@
   "Sectors": "Secteurs",
   "Sectors and organizations": "Secteurs et organisations",
   "Security": "Sécurité",
+  "Security: Groups | Settings": "Sécurité : Groupes | Paramètres",
+  "Security: Marking Definitions | Settings": "Sécurité : définitions de marquage | Paramètres",
+  "Security: Roles | Settings": "Sécurité : Rôles | Paramètres",
+  "Security: Sessions | Settings": "Sécurité : Sessions | Paramètres",
   "See all entities created by user": "Voir toutes les entités crées par l'utilisateur",
   "See all relationships created by user": "Voir toutes les relations crées par l'utilisateur",
   "Select": "Sélectionnez",

opencti-platform/opencti-front/lang/front/ja.json

@@ -2385,6 +2385,10 @@
   "Sectors": "セクター",
   "Sectors and organizations": "セクターと組織",
   "Security": "安全",
+  "Security: Groups | Settings": "セキュリティ:グループ|設定",
+  "Security: Marking Definitions | Settings": "セキュリティ:マーキング定義|設定",
+  "Security: Roles | Settings": "セキュリティ:ロール|設定",
+  "Security: Sessions | Settings": "セキュリティ:セッション|設定",
   "See all entities created by user": "ユーザーが作成したすべてのエンティティを見る",
   "See all relationships created by user": "ユーザーが作成したすべての関係を見る",
   "Select": "選択する",

opencti-platform/opencti-front/lang/front/ko.json

@@ -2385,6 +2385,10 @@
   "Sectors": "부문",
   "Sectors and organizations": "부문 및 조직",
   "Security": "보안",
+  "Security: Groups | Settings": "보안: 그룹 | 설정",
+  "Security: Marking Definitions | Settings": "보안: 정의 표시 | 설정",
+  "Security: Roles | Settings": "보안: 역할 | 설정",
+  "Security: Sessions | Settings": "보안: 세션 | 설정",
   "See all entities created by user": "사용자가 만든 모든 엔터티 보기",
   "See all relationships created by user": "사용자가 만든 모든 관계 보기",
   "Select": "선택",

opencti-platform/opencti-front/lang/front/zh.json

@@ -2385,6 +2385,10 @@
   "Sectors": "部门",
   "Sectors and organizations": "部门和组织",
   "Security": "安全",
+  "Security: Groups | Settings": "安全：组|设置",
+  "Security: Marking Definitions | Settings": "安全性：标记定义|设置",
+  "Security: Roles | Settings": "安全：角色|设置",
+  "Security: Sessions | Settings": "安全：会话|设置",
   "See all entities created by user": "查看用户创建的所有实体",
   "See all relationships created by user": "查看用户创建的所有关系",
   "Select": "选择",

opencti-platform/opencti-front/src/components/AppThemeProvider.tsx

@@ -5,8 +5,10 @@ import { ThemeOptions } from '@mui/material/styles/createTheme';
 import { UserContext, UserContextType } from '../utils/hooks/useAuth';
 import themeDark from './ThemeDark';
 import themeLight from './ThemeLight';
-import { useDocumentFaviconModifier, useDocumentTitleModifier, useDocumentThemeModifier } from '../utils/hooks/useDocumentModifier';
+import { useDocumentFaviconModifier, useDocumentThemeModifier } from '../utils/hooks/useDocumentModifier';
 import { AppThemeProvider_settings$data } from './__generated__/AppThemeProvider_settings.graphql';
+import useConnectedDocumentModifier from '../utils/hooks/useConnectedDocumentModifier';
+import { pascalize } from '../utils/String';
 
 interface AppThemeProviderProps {
   children: React.ReactNode;
@@ -62,8 +64,8 @@ const AppThemeProvider: FunctionComponent<AppThemeProviderProps> = ({
   settings,
 }) => {
   const { me } = useContext<UserContextType>(UserContext);
-  const platformTitle = settings?.platform_title ?? 'OpenCTI - Cyber Threat Intelligence Platform';
-  useDocumentTitleModifier(platformTitle);
+  const { setTitle } = useConnectedDocumentModifier();
+  setTitle(pascalize(window.location.pathname.split('/').at(-1)));
   useDocumentFaviconModifier(settings?.platform_favicon);
   // region theming
   const defaultTheme = settings?.platform_theme ?? null;

opencti-platform/opencti-front/src/private/components/settings/Groups.jsx → opencti-platform/opencti-front/src/private/components/settings/Groups.tsx

@@ -1,17 +1,26 @@
-import React, { Component } from 'react';
-import * as PropTypes from 'prop-types';
-import { compose, propOr } from 'ramda';
-import withStyles from '@mui/styles/withStyles';
+import React, { useState, useEffect } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import { graphql } from 'react-relay';
-import { QueryRenderer } from '../../../relay/environment';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { buildViewParamsFromUrlAndStorage, saveViewParameters } from '../../../utils/ListParameters';
-import inject18n from '../../../components/i18n';
+import type { Theme } from '../../../components/Theme';
+import { useFormatter } from '../../../components/i18n';
 import ListLines from '../../../components/list_lines/ListLines';
 import GroupsLines, { groupsLinesQuery } from './groups/GroupsLines';
 import GroupCreation from './groups/GroupCreation';
-import AccessesMenu from './AccessesMenu';
+import { OrderMode, PaginationOptions } from '../../../components/list_lines';
 import Breadcrumbs from '../../../components/Breadcrumbs';
-import withRouter from '../../../utils/compat_router/withRouter';
+import useConnectedDocumentModifier from '../../../utils/hooks/useConnectedDocumentModifier';
+import { GroupsLinesPaginationQuery$data } from './groups/__generated__/GroupsLinesPaginationQuery.graphql';
+import AccessesMenu from './AccessesMenu';
+import { QueryRenderer } from '../../../relay/environment';
+
+const useStyles = makeStyles<Theme>(() => ({
+  container: {
+    margin: 0,
+    padding: '0 200px 50px 0',
+  },
+}));
 
 export const groupsSearchQuery = graphql`
   query GroupsSearchQuery($search: String) {
@@ -40,49 +49,51 @@ export const groupsSearchQuery = graphql`
   }
 `;
 
-const styles = () => ({
-  container: {
-    margin: 0,
-    padding: '0 200px 50px 0',
-  },
-});
-
 const LOCAL_STORAGE_KEY = 'groups';
-class Groups extends Component {
-  constructor(props) {
-    super(props);
-    const params = buildViewParamsFromUrlAndStorage(
-      props.navigate,
-      props.location,
-      LOCAL_STORAGE_KEY,
-    );
-    this.state = {
-      sortBy: propOr('name', 'sortBy', params),
-      orderAsc: propOr(true, 'orderAsc', params),
-      searchTerm: propOr('', 'searchTerm', params),
-      view: propOr('lines', 'view', params),
-    };
-  }
 
-  saveView() {
+const Groups = () => {
+  const classes = useStyles();
+  const { t_i18n } = useFormatter();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { setTitle } = useConnectedDocumentModifier();
+  setTitle(t_i18n('Security: Groups | Settings'));
+  const params = buildViewParamsFromUrlAndStorage(
+    navigate,
+    location,
+    LOCAL_STORAGE_KEY,
+  );
+
+  const [groupState, setGroupState] = useState<{ orderAsc: boolean, searchTerm: string, view: string, sortBy: string }>({
+    sortBy: params.sortBy ?? 'name',
+    orderAsc: params.orderAsc !== false,
+    searchTerm: params.searchTerm ?? '',
+    view: params.view ?? 'lines',
+  });
+
+  function saveView() {
     saveViewParameters(
-      this.props.navigate,
-      this.props.location,
+      navigate,
+      location,
       LOCAL_STORAGE_KEY,
-      this.state,
+      groupState,
     );
   }
 
-  handleSearch(value) {
-    this.setState({ searchTerm: value }, () => this.saveView());
+  function handleSearch(value: string) {
+    setGroupState({ ...groupState, searchTerm: value });
   }
 
-  handleSort(field, orderAsc) {
-    this.setState({ sortBy: field, orderAsc }, () => this.saveView());
+  function handleSort(field: string, orderAsc: boolean) {
+    setGroupState({ ...groupState, sortBy: field, orderAsc });
   }
 
-  renderLines(paginationOptions) {
-    const { sortBy, orderAsc, searchTerm } = this.state;
+  useEffect(() => {
+    saveView();
+  }, [groupState]);
+
+  function renderLines(paginationOptions: PaginationOptions) {
+    const { sortBy, orderAsc, searchTerm } = groupState;
     const dataColumns = {
       name: {
         label: 'Name',
@@ -125,16 +136,16 @@ class Groups extends Component {
         sortBy={sortBy}
         orderAsc={orderAsc}
         dataColumns={dataColumns}
-        handleSort={this.handleSort.bind(this)}
-        handleSearch={this.handleSearch.bind(this)}
+        handleSort={handleSort}
+        handleSearch={handleSearch}
         displayImport={false}
         secondaryAction={false}
         keyword={searchTerm}
       >
         <QueryRenderer
           query={groupsLinesQuery}
           variables={{ count: 25, ...paginationOptions }}
-          render={({ props }) => (
+          render={({ props }: { props: GroupsLinesPaginationQuery$data }) => (
             <GroupsLines
               data={props}
               paginationOptions={paginationOptions}
@@ -147,30 +158,20 @@ class Groups extends Component {
     );
   }
 
-  render() {
-    const { view, sortBy, orderAsc, searchTerm } = this.state;
-    const { t, classes } = this.props;
-    const paginationOptions = {
-      search: searchTerm,
-      orderBy: sortBy,
-      orderMode: orderAsc ? 'asc' : 'desc',
-    };
-    return (
-      <div className={classes.container} data-testid="groups-settings-page">
-        <Breadcrumbs elements={[{ label: t('Settings') }, { label: t('Security') }, { label: t('Groups'), current: true }]} />
-        <AccessesMenu />
-        {view === 'lines' ? this.renderLines(paginationOptions) : ''}
-        <GroupCreation paginationOptions={paginationOptions} />
-      </div>
-    );
-  }
-}
+  const paginationOptions: PaginationOptions = {
+    search: groupState.searchTerm,
+    orderBy: groupState.sortBy ? groupState.sortBy : null,
+    orderMode: groupState.orderAsc ? OrderMode.asc : OrderMode.desc,
+  };
 
-Groups.propTypes = {
-  t: PropTypes.func,
-  classes: PropTypes.object,
-  navigate: PropTypes.func,
-  location: PropTypes.object,
+  return (
+    <div className={classes.container} data-testid="groups-settings-page">
+      <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Security') }, { label: t_i18n('Groups'), current: true }]} />
+      <AccessesMenu />
+      {groupState.view === 'lines' ? renderLines(paginationOptions) : ''}
+      <GroupCreation paginationOptions={paginationOptions} />
+    </div>
+  );
 };
 
-export default compose(inject18n, withRouter, withStyles(styles))(Groups);
+export default Groups;