[frontend] Add page titles to Settings pages

Revert WIP conversion of Sectors test commit Fix paginationOptions issue for Groups, KillChainPhases, Roles Fix MarkingDefinitions, update KillChainPhases to reflect master Remove changes established in PR OpenCTI-Platform#7753 Add Malwares.tsx to removed changes Post-rebase cleanup Remove changes from PR 7753 Remove outdated changes to KillChainPhases Fix translations Align GroupLine design with master Fix typing on GroupLines;
fbicyber · Sep 24, 2024 · e74f86b · e74f86b
1 parent 91f5e94
commit e74f86b
Show file tree

Hide file tree

Showing 15 changed files with 553 additions and 595 deletions.
diff --git a/opencti-platform/opencti-front/lang/front/de.json b/opencti-platform/opencti-front/lang/front/de.json
@@ -2326,6 +2326,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",

diff --git a/opencti-platform/opencti-front/lang/front/en.json b/opencti-platform/opencti-front/lang/front/en.json
@@ -2326,6 +2326,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",

diff --git a/opencti-platform/opencti-front/lang/front/es.json b/opencti-platform/opencti-front/lang/front/es.json
@@ -2326,6 +2326,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",

diff --git a/opencti-platform/opencti-front/lang/front/fr.json b/opencti-platform/opencti-front/lang/front/fr.json
@@ -2326,6 +2326,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",

diff --git a/opencti-platform/opencti-front/lang/front/ja.json b/opencti-platform/opencti-front/lang/front/ja.json
@@ -2326,6 +2326,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": "選択する",

diff --git a/opencti-platform/opencti-front/lang/front/ko.json b/opencti-platform/opencti-front/lang/front/ko.json
@@ -2326,6 +2326,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": "선택",

diff --git a/opencti-platform/opencti-front/lang/front/zh.json b/opencti-platform/opencti-front/lang/front/zh.json
@@ -2326,6 +2326,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": "选择",

diff --git a/...rc/private/components/settings/Groups.jsx → ...rc/private/components/settings/Groups.tsx b/...rc/private/components/settings/Groups.jsx → ...rc/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;