Skip to content

Commit

Permalink
[front]add breadcrumb groups, organizations, roles(#8274)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CelineSebe
CelineSebe committed Sep 17, 2024
1 parent e965f3b commit 1e218ba
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 32 deletions.
28 changes: 21 additions & 7 deletions opencti-platform/opencti-front/src/private/components/settings/groups/Root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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!) {
Expand Down Expand Up @@ -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 />
)}
Expand Down
31 changes: 23 additions & 8 deletions opencti-platform/opencti-front/src/private/components/settings/organizations/Root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,17 @@ 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';
import { RootSettingsOrganizationQuery } from './__generated__/RootSettingsOrganizationQuery.graphql';
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!) {
Expand Down Expand Up @@ -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 />
)}
Expand Down
48 changes: 31 additions & 17 deletions opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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!) {
Expand All @@ -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,
{
Expand All @@ -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 />
)}
Expand Down

0 comments on commit 1e218ba

Please sign in to comment.