From 1e218ba05a088ed3fe57b3856959f9fa8269e734 Mon Sep 17 00:00:00 2001
From: Celine Sebe <celine.sebe@filigran.io>
Date: Tue, 17 Sep 2024 10:31:15 +0200
Subject: [PATCH] [front]add breadcrumb groups, organizations, roles(#8274)

---
 .../components/settings/groups/Root.tsx       | 28 ++++++++---
 .../settings/organizations/Root.tsx           | 31 ++++++++----
 .../components/settings/roles/Root.tsx        | 48 ++++++++++++-------
 3 files changed, 75 insertions(+), 32 deletions(-)

diff --git a/opencti-platform/opencti-front/src/private/components/settings/groups/Root.tsx b/opencti-platform/opencti-front/src/private/components/settings/groups/Root.tsx
index f1ed0efc6775e..bcfb737355df0 100644
--- a/opencti-platform/opencti-front/src/private/components/settings/groups/Root.tsx
+++ b/opencti-platform/opencti-front/src/private/components/settings/groups/Root.tsx
@@ -4,6 +4,7 @@ import React, { FunctionComponent, useMemo } from 'react';
 import { Route, Routes, useParams } from 'react-router-dom';
 import { graphql, PreloadedQuery, usePreloadedQuery, useSubscription } from 'react-relay';
 import { GraphQLSubscriptionConfig } from 'relay-runtime';
+import AccessesMenu from '@components/settings/AccessesMenu';
 import ErrorNotFound from '../../../../components/ErrorNotFound';
 import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import Loader, { LoaderVariant } from '../../../../components/Loader';
@@ -12,6 +13,8 @@ import { RootGroupsSubscription } from './__generated__/RootGroupsSubscription.g
 import { RootGroupQuery } from './__generated__/RootGroupQuery.graphql';
 import Security from '../../../../utils/Security';
 import { SETTINGS_SETACCESSES } from '../../../../utils/hooks/useGranted';
+import Breadcrumbs from '../../../../components/Breadcrumbs';
+import { useFormatter } from '../../../../components/i18n';
 
 const subscription = graphql`
     subscription RootGroupsSubscription($id: ID!) {
@@ -55,18 +58,29 @@ const RootGroupComponent: FunctionComponent<RootGroupComponentProps> = ({ queryR
   useSubscription(subConfig);
   const data = usePreloadedQuery(groupQuery, queryRef);
   const { group } = data;
+  const { t_i18n } = useFormatter();
 
   return (
     <Security needs={[SETTINGS_SETACCESSES]}>
       {group ? (
-        <Routes>
-          <Route
-            path="/"
-            element={
-              <Group groupData={group} />
-            }
+        <div style={{ paddingRight: 200 }}>
+          <AccessesMenu/>
+          <Breadcrumbs variant="object" elements={[
+            { label: t_i18n('Settings') },
+            { label: t_i18n('Security') },
+            { label: t_i18n('Groups'), link: '/dashboard/settings/accesses/groups' },
+            { label: data.name || data.user_email, current: true },
+          ]}
           />
-        </Routes>
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <Group groupData={group}/>
+            }
+            />
+          </Routes>
+        </div>
       ) : (
         <ErrorNotFound />
       )}
diff --git a/opencti-platform/opencti-front/src/private/components/settings/organizations/Root.tsx b/opencti-platform/opencti-front/src/private/components/settings/organizations/Root.tsx
index ec898d7d07ed5..eefd9e307a0e2 100644
--- a/opencti-platform/opencti-front/src/private/components/settings/organizations/Root.tsx
+++ b/opencti-platform/opencti-front/src/private/components/settings/organizations/Root.tsx
@@ -5,7 +5,8 @@ import React, { FunctionComponent, useMemo } from 'react';
 import { Route, Routes, useParams } from 'react-router-dom';
 import { graphql, PreloadedQuery, usePreloadedQuery, useSubscription } from 'react-relay';
 import { GraphQLSubscriptionConfig } from 'relay-runtime';
-import { VIRTUAL_ORGANIZATION_ADMIN, SETTINGS_SETACCESSES } from '../../../../utils/hooks/useGranted';
+import AccessesMenu from '@components/settings/AccessesMenu';
+import { SETTINGS_SETACCESSES, VIRTUAL_ORGANIZATION_ADMIN } from '../../../../utils/hooks/useGranted';
 import Security from '../../../../utils/Security';
 import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import Loader, { LoaderVariant } from '../../../../components/Loader';
@@ -13,6 +14,8 @@ import { RootSettingsOrganizationQuery } from './__generated__/RootSettingsOrgan
 import ErrorNotFound from '../../../../components/ErrorNotFound';
 import SettingsOrganization from './SettingsOrganization';
 import { RootSettingsOrganizationSubscription } from './__generated__/RootSettingsOrganizationSubscription.graphql';
+import Breadcrumbs from '../../../../components/Breadcrumbs';
+import { useFormatter } from '../../../../components/i18n';
 
 const subscription = graphql`
   subscription RootSettingsOrganizationSubscription($id: ID!) {
@@ -50,17 +53,29 @@ const RootSettingsOrganizationComponent: FunctionComponent<RootSettingsOrganizat
   useSubscription(subConfig);
   const data = usePreloadedQuery(organizationQuery, queryRef);
   const { organization } = data;
+  const { t_i18n } = useFormatter();
+
   return (
     <Security needs={[SETTINGS_SETACCESSES, VIRTUAL_ORGANIZATION_ADMIN]}>
       {organization ? (
-        <Routes>
-          <Route
-            path="/"
-            element={
-              <SettingsOrganization organizationData={organization} />
-            }
+        <div style={{ paddingRight: 200 }}>
+          <AccessesMenu/>
+          <Breadcrumbs variant="object" elements={[
+            { label: t_i18n('Settings') },
+            { label: t_i18n('Security') },
+            { label: t_i18n('Organizations'), link: '/dashboard/settings/accesses/organizations' },
+            { label: data.name || data.user_email, current: true },
+          ]}
           />
-        </Routes>
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <SettingsOrganization organizationData={organization}/>
+            }
+            />
+          </Routes>
+        </div>
       ) : (
         <ErrorNotFound />
       )}
diff --git a/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx b/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx
index 228086efbdba1..56e5e535d83f4 100644
--- a/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx
+++ b/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx
@@ -3,6 +3,7 @@
 import React, { FunctionComponent } from 'react';
 import { Route, Routes, useParams } from 'react-router-dom';
 import { graphql, PreloadedQuery, usePreloadedQuery } from 'react-relay';
+import AccessesMenu from '@components/settings/AccessesMenu';
 import ErrorNotFound from '../../../../components/ErrorNotFound';
 import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import Loader, { LoaderVariant } from '../../../../components/Loader';
@@ -12,6 +13,8 @@ import { RootRoleQuery } from './__generated__/RootRoleQuery.graphql';
 import { GroupsSearchQuery } from '../__generated__/GroupsSearchQuery.graphql';
 import { SETTINGS_SETACCESSES } from '../../../../utils/hooks/useGranted';
 import Security from '../../../../utils/Security';
+import { useFormatter } from '../../../../components/i18n';
+import Breadcrumbs from '../../../../components/Breadcrumbs';
 
 const roleQuery = graphql`
     query RootRoleQuery($id: String!) {
@@ -31,6 +34,7 @@ interface RootRoleComponentProps {
 const RootRoleComponent: FunctionComponent<RootRoleComponentProps> = ({ queryRef }) => {
   const data = usePreloadedQuery(roleQuery, queryRef);
   const { role } = data;
+  const { t_i18n } = useFormatter();
   const groupsQueryRef = useQueryLoading<GroupsSearchQuery>(
     groupsSearchQuery,
     {
@@ -43,23 +47,33 @@ const RootRoleComponent: FunctionComponent<RootRoleComponentProps> = ({ queryRef
   return (
     <Security needs={[SETTINGS_SETACCESSES]}>
       {role ? (
-        <>
-          {groupsQueryRef ? (
-            <React.Suspense fallback={<Loader variant={LoaderVariant.inElement}/>}>
-              <Routes>
-                <Route
-                  path="/"
-                  element={ (
-                    <Role roleData={role} groupsQueryRef={groupsQueryRef} />
-                  )}
-                />
-              </Routes>
-            </React.Suspense>
-          ) : (
-            <Loader variant={LoaderVariant.inElement} />
-          )
-          }
-        </>
+        <div style={{ paddingRight: 200 }}>
+          <AccessesMenu/>
+          <Breadcrumbs variant="object" elements={[
+            { label: t_i18n('Settings') },
+            { label: t_i18n('Security') },
+            { label: t_i18n('Roles'), link: '/dashboard/settings/accesses/roles' },
+            { label: data.name || data.user_email, current: true },
+          ]}
+          />
+          <>
+            {groupsQueryRef ? (
+              <React.Suspense fallback={<Loader variant={LoaderVariant.inElement}/>}>
+                <Routes>
+                  <Route
+                    path="/"
+                    element={(
+                      <Role roleData={role} groupsQueryRef={groupsQueryRef}/>
+                                  )}
+                  />
+                </Routes>
+              </React.Suspense>
+            ) : (
+              <Loader variant={LoaderVariant.inElement}/>
+            )
+                  }
+          </>
+        </div>
       ) : (
         <ErrorNotFound />
       )}