Skip to content

Commit f0990ee

Browse files
quentinovegaquentinovega
committed
manage expertMode in globalContext
1 parent cd137e9 commit f0990ee

File tree

16 files changed

+98
-100
lines changed

16 files changed

+98
-100
lines changed

‎daikoku/javascript/src/components/adminbackoffice/tenants/TenantAdminList.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import React, { useState, useEffect, useContext } from 'react';
2-
import Select from 'react-select';
3-
import { toast } from 'sonner';
4-
import values from 'lodash/values';
51
import sortBy from 'lodash/sortBy';
2+
import values from 'lodash/values';
3+
import { useContext, useEffect, useState } from 'react';
64
import { useParams } from 'react-router-dom';
5+
import Select from 'react-select';
6+
import { toast } from 'sonner';
77

8+
import { I18nContext, ModalContext, useDaikokuBackOffice, useTenantBackOffice } from '../../../contexts';
9+
import { GlobalContext } from '../../../contexts/globalContext';
810
import * as Services from '../../../services';
11+
import { ITeamSimple, ITenantFull, IUser, isError } from '../../../types';
912
import {
10-
Can,
11-
manage,
12-
tenant as TENANT,
13-
PaginatedComponent,
1413
AvatarWithAction,
14+
Can,
1515
Option,
16+
PaginatedComponent,
17+
tenant as TENANT,
18+
manage,
1619
} from '../../utils';
17-
import { I18nContext } from '../../../contexts';
18-
import { ModalContext, useDaikokuBackOffice, useTenantBackOffice } from '../../../contexts';
19-
import { isError, IState, IStateContext, ITeamSimple, ITenantFull, IUser, IUserSimple } from '../../../types';
20-
import { GlobalContext } from '../../../contexts/globalContext';
2120

2221
const AdminList = () => {
2322
const context = useContext(GlobalContext);

‎daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
2222
import {
2323
I18nContext
2424
} from '../../../contexts';
25-
import { IState, IStateContext, ITeamSimple } from '../../../types';
26-
import { IApi, IUsagePlan, isError } from '../../../types/api';
2725
import { GlobalContext } from '../../../contexts/globalContext';
26+
import { ITeamSimple } from '../../../types';
27+
import { IApi, IUsagePlan, isError } from '../../../types/api';
2828
import { TeamBackOfficeProps } from '../TeamBackOffice';
2929

3030
const reservedCharacters = [';', '/', '?', ':', '@', '&', '=', '+', '$', ','];
@@ -96,7 +96,7 @@ export const TeamApi = (props: TeamBackOfficeProps<{ creation: boolean }>) => {
9696
const navigate = useNavigate();
9797
const match = useMatch('/:teamId/settings/apis/:apiId/:version/stats/plan/:planId');
9898

99-
const { tenant } = useContext(GlobalContext);
99+
const { tenant, expertMode, toggleExpertMode } = useContext(GlobalContext);
100100
const { translate } = useContext(I18nContext);
101101
const { openApiDocumentationSelectModal } = useContext(ModalContext);
102102

@@ -293,7 +293,7 @@ export const TeamApi = (props: TeamBackOfficeProps<{ creation: boolean }>) => {
293293
{props.creation ? (<h2>{api.name}</h2>) : (<div className="d-flex align-items-center justify-content-between" style={{ flex: 1 }}>
294294
<h2 className="me-2">{api.name} {additionalHeader ? ` - ${additionalHeader}` : ''}</h2>
295295
</div>)}
296-
<button onClick={() => dispatch(toggleExpertMode())} className="btn btn-sm btn-outline-primary">
296+
<button onClick={() => toggleExpertMode()} className="btn btn-sm btn-outline-primary">
297297
{expertMode && translate('Standard mode')}
298298
{!expertMode && translate('Expert mode')}
299299
</button>
@@ -323,6 +323,7 @@ export const TeamApi = (props: TeamBackOfficeProps<{ creation: boolean }>) => {
323323
importAuthorized={!!versionsRequest.data && !!versionsRequest.data.length} />)}
324324
{tab === 'plans' && (
325325
<TeamApiPricings
326+
{...props}
326327
api={api}
327328
reload={() => queryClient.invalidateQueries({ queryKey: ['api'] })}
328329
setDefaultPlan={plan => setDefaultPlan(api, plan)}

‎daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const TeamApiGroup = (props: TeamBackOfficeProps) => {
2828
const navigate = useNavigate();
2929
const match = useMatch('/:teamId/settings/apigroups/:apiGroupId/stats/plan/:planId');
3030

31-
const { tenant } = useContext(GlobalContext);
31+
const { tenant, expertMode, toggleExpertMode } = useContext(GlobalContext);
3232

3333
const state: LocationState = location.state as LocationState
3434
const creation = state?.newApiGroup;
@@ -253,7 +253,7 @@ export const TeamApiGroup = (props: TeamBackOfficeProps) => {
253253
{creation ? (<h2>{apiGroup.name}</h2>) : (<div className="d-flex align-items-center justify-content-between" style={{ flex: 1 }}>
254254
<h2 className="me-2">{apiGroup.name}{additionalHeader ? ` - ${additionalHeader}` : ''}</h2>
255255
</div>)}
256-
<button onClick={() => dispatch(toggleExpertMode())} className="btn btn-sm btn-outline-primary">
256+
<button onClick={() => toggleExpertMode()} className="btn btn-sm btn-outline-primary">
257257
{expertMode && translate('Standard mode')}
258258
{!expertMode && translate('Expert mode')}
259259
</button>

‎daikoku/javascript/src/components/backoffice/apis/TeamApiPricings.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ import { toast } from 'sonner';
1919

2020
import React from 'react';
2121
import { I18nContext, ModalContext } from '../../../contexts';
22+
import { GlobalContext } from '../../../contexts/globalContext';
2223
import * as Services from '../../../services';
2324
import { currencies } from '../../../services/currencies';
24-
import { IState, IStateContext, ITeamSimple } from '../../../types';
25+
import { ITeamSimple } from '../../../types';
2526
import { IApi, IDocumentation, isError, isValidationStepEmail, isValidationStepHttpRequest, isValidationStepPayment, isValidationStepTeamAdmin, IUsagePlan, IValidationStep, IValidationStepEmail, IValidationStepHttpRequest, IValidationStepTeamAdmin, IValidationStepType, UsagePlanVisibility } from '../../../types/api';
2627
import { IOtoroshiSettings, ITenant, ITenantFull, IThirdPartyPaymentSettings } from '../../../types/tenant';
2728
import {
@@ -33,11 +34,10 @@ import {
3334
import { addArrayIf, insertArrayIndex } from '../../utils/array';
3435
import { FixedItem, SortableItem, SortableList } from '../../utils/dnd/SortableList';
3536
import { Help } from '../apikeys';
37+
import { TeamBackOfficeProps } from '../TeamBackOffice';
3638
import { TeamApiDocumentation } from './TeamApiDocumentation';
3739
import { TeamApiSwagger } from './TeamApiSwagger';
3840
import { TeamApiTesting } from './TeamApiTesting';
39-
import { GlobalContext } from '../../../contexts/globalContext';
40-
import { TeamBackOfficeProps } from '../TeamBackOffice';
4141

4242
const SUBSCRIPTION_PLAN_TYPES = {
4343
FreeWithoutQuotas: {

‎daikoku/javascript/src/components/backoffice/assets/AssetsList.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
/* eslint-disable react/display-name */
2-
import React, { useState, useEffect, useContext, useRef } from 'react';
3-
import { toast } from 'sonner';
42
import { constraints, format, type } from '@maif/react-forms';
3+
import { useContext, useEffect, useRef, useState } from 'react';
4+
import { toast } from 'sonner';
55

6-
import * as Services from '../../../services';
7-
import { Table, TableRef } from '../../inputs';
8-
import { Can, manage, asset, tenant as TENANT } from '../../utils';
9-
import { I18nContext } from '../../../contexts';
10-
import { ModalContext } from '../../../contexts';
116
import { createColumnHelper } from '@tanstack/react-table';
12-
import { IAsset, IState, IStateContext, ITeamSimple } from '../../../types';
7+
import { I18nContext, ModalContext } from '../../../contexts';
138
import { GlobalContext } from '../../../contexts/globalContext';
9+
import * as Services from '../../../services';
10+
import { IAsset, ITeamSimple } from '../../../types';
11+
import { Table, TableRef } from '../../inputs';
12+
import { Can, tenant as TENANT, asset, manage } from '../../utils';
1413

1514

1615
const mimeTypes = [

‎daikoku/javascript/src/components/frontend/api/ApiGroupHome.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { getApolloContext } from '@apollo/client';
22
import { useContext, useEffect, useState } from 'react';
3-
import { toast } from 'sonner';
43
import { useMatch, useNavigate, useParams } from 'react-router-dom';
4+
import { toast } from 'sonner';
55

6-
import { useApiGroupFrontOffice } from '../../../contexts';
7-
import { I18nContext } from '../../../contexts';
6+
import classNames from 'classnames';
7+
import { I18nContext, useApiGroupFrontOffice } from '../../../contexts';
8+
import { GlobalContext } from '../../../contexts/globalContext';
89
import * as Services from '../../../services';
9-
import { IState, IStateContext, ISubscription, ISubscriptionDemand, ITeamSimple, IUsagePlan, IUserSimple, isError } from '../../../types';
10+
import { ISubscription, ISubscriptionDemand, ITeamSimple, IUsagePlan, isError } from '../../../types';
1011
import { formatPlanType } from '../../utils/formatters';
1112
import {
1213
ApiDescription,
@@ -18,8 +19,6 @@ import {
1819
ApiPost,
1920
ApiPricing,
2021
} from './';
21-
import classNames from 'classnames';
22-
import { GlobalContext } from '../../../contexts/globalContext';
2322

2423
export const ApiGroupHome = () => {
2524
const [apiGroup, setApiGroup] = useState<any>();

‎daikoku/javascript/src/components/frontend/api/ApiHome.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
import { getApolloContext } from '@apollo/client';
22
import hljs from 'highlight.js';
33
import { useContext, useEffect, useState } from 'react';
4-
import { toast } from 'sonner';
4+
import Navigation from 'react-feather/dist/icons/navigation';
55
import { useMatch, useNavigate, useParams } from 'react-router-dom';
66
import Select from 'react-select';
7-
import Navigation from 'react-feather/dist/icons/navigation';
7+
import { toast } from 'sonner';
88

99
import { ApiDocumentation, ApiIssue, ApiPost, ApiPricing, ApiRedoc, ApiSwagger } from '.';
10-
import { ModalContext, useApiFrontOffice } from '../../../contexts';
11-
import { I18nContext } from '../../../contexts';
10+
import { I18nContext, ModalContext, useApiFrontOffice } from '../../../contexts';
1211
import * as Services from '../../../services';
1312
import { converter } from '../../../services/showdown';
14-
import { IApi, IState, IStateContext, ISubscription, ISubscriptionDemand, ITeamSimple, IUsagePlan, TeamPermission, TeamType, isError } from '../../../types';
13+
import { IApi, ISubscription, ISubscriptionDemand, ITeamSimple, IUsagePlan, isError } from '../../../types';
1514
import { ActionWithTeamSelector, Can, CanIDoAction, Option, apikey, manage } from '../../utils';
1615
import { formatPlanType } from '../../utils/formatters';
1716
import StarsButton from './StarsButton';
1817

19-
import 'highlight.js/styles/monokai.css';
2018
import classNames from 'classnames';
19+
import 'highlight.js/styles/monokai.css';
2120
import { GlobalContext } from '../../../contexts/globalContext';
2221

2322
(window as any).hljs = hljs;

‎daikoku/javascript/src/components/frontend/api/ApiPricing.tsx

+14-7
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,31 @@ import React, { useContext, useEffect } from 'react';
77
import { Link, useMatch, useNavigate } from 'react-router-dom';
88

99
import { I18nContext, ModalContext } from '../../../contexts';
10+
import { GlobalContext } from '../../../contexts/globalContext';
1011
import * as Services from '../../../services';
1112
import { currencies } from '../../../services/currencies';
1213
import {
13-
IApi, IBaseUsagePlan, isError,
14-
isMiniFreeWithQuotas, IState, IStateContext, ISubscription,
15-
ISubscriptionDemand, ISubscriptionWithApiInfo, isValidationStepTeamAdmin,
16-
ITeamSimple, IUsagePlan
14+
IApi, IBaseUsagePlan,
15+
ISubscription,
16+
ISubscriptionDemand, ISubscriptionWithApiInfo,
17+
ITeamSimple, IUsagePlan,
18+
isError,
19+
isMiniFreeWithQuotas,
20+
isValidationStepTeamAdmin
1721
} from '../../../types';
1822
import {
23+
Can,
24+
Option,
25+
Spinner,
1926
access,
20-
apikey, Can, isPublish, isSubscriptionProcessIsAutomatic,
21-
Option, queryClient, renderPlanInfo, renderPricing, Spinner
27+
apikey,
28+
isPublish, isSubscriptionProcessIsAutomatic,
29+
queryClient, renderPlanInfo, renderPricing
2230
} from '../../utils';
2331
import { formatPlanType } from '../../utils/formatters';
2432
import { ApiDocumentation } from './ApiDocumentation';
2533
import { ApiRedoc } from './ApiRedoc';
2634
import { ApiSwagger } from './ApiSwagger';
27-
import { GlobalContext } from '../../../contexts/globalContext';
2835

2936
export const currency = (plan?: IBaseUsagePlan) => {
3037
if (!plan) {

‎daikoku/javascript/src/components/frontend/api/ApiRedoc.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { useContext } from 'react';
22
import { RedocStandalone, SideNavStyleEnum } from 'redoc';
33

4-
import { ModalContext } from '../../../contexts';
5-
import { I18nContext } from '../../../contexts';
6-
import { IState, IStateContext, ISwagger } from '../../../types';
7-
import { Option } from '../../utils/Option';
4+
import { I18nContext, ModalContext } from '../../../contexts';
85
import { GlobalContext } from '../../../contexts/globalContext';
6+
import { ISwagger } from '../../../types';
7+
import { Option } from '../../utils/Option';
98

109
type ApiRedocProps = {
1110
swaggerUrl: string,

‎daikoku/javascript/src/components/frontend/api/ApiSwagger.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import { useContext, useEffect, useState } from 'react';
22
import { useParams } from 'react-router-dom';
33
import { SwaggerUIBundle } from 'swagger-ui-dist';
44

5-
import { ModalContext } from '../../../contexts';
6-
import { I18nContext } from '../../../contexts';
7-
import { IState, IStateContext, ISwagger, ITesting } from '../../../types';
5+
import { I18nContext, ModalContext } from '../../../contexts';
6+
import { GlobalContext } from '../../../contexts/globalContext';
7+
import { ISwagger, ITesting } from '../../../types';
88

99
import 'swagger-ui-dist/swagger-ui.css';
10-
import { GlobalContext } from '../../../contexts/globalContext';
1110

1211

1312
type ApiSwaggerProps = {

‎daikoku/javascript/src/components/utils/permissions/Can.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import { ReactNode, useContext } from 'react';
22

3+
import { toast } from 'sonner';
34
import { Option } from '..';
5+
import { I18nContext } from '../../../contexts';
6+
import { GlobalContext } from '../../../contexts/globalContext';
47
import {
5-
IState,
6-
IStateContext,
78
ITeamSimple,
89
ITenant,
910
IUserSimple,
1011
TeamPermission,
1112
TeamUser
1213
} from '../../../types';
1314
import { doNothing } from './actions';
14-
import { permissions, TPermission, TPermissions } from './permissions';
15+
import { TPermission, TPermissions, permissions } from './permissions';
1516
import { tenant } from './subjects';
16-
import { GlobalContext } from '../../../contexts/globalContext';
17-
import { toast } from 'sonner';
18-
import { I18nContext } from '../../../contexts';
1917

2018
export const CanIDoAction = (
2119
user: IUserSimple,

‎daikoku/javascript/src/components/utils/sidebar/SideBar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const SideBar = () => {
2525
const [panelState, setPanelState] = useState(state.closed);
2626
const [panelContent, setPanelContent] = useState<JSX.Element>();
2727

28-
const { tenant, connectedUser, impersonator, unreadNotificationsCount, isTenantAdmin } = useContext(GlobalContext);
28+
const { tenant, connectedUser, impersonator, isTenantAdmin } = useContext(GlobalContext);
2929
const location = useLocation();
3030

3131
const { totalUnread } = useContext(MessagesContext);

‎daikoku/javascript/src/contexts/globalContext.tsx

+19-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
11
import { useQuery } from "@tanstack/react-query"
2-
import React, { PropsWithChildren } from "react"
2+
import React, { PropsWithChildren, useState } from "react"
33

44
import { queryClient } from "../components"
55
import { Spinner } from "../components/utils/Spinner"
66
import * as Services from '../services/index'
7-
import { AuthProvider, DaikokuMode, Display, ITenant, IUserSimple, TenanMode, isError } from "../types"
7+
import { AuthProvider, DaikokuMode, Display, IStateContext, TenanMode, isError } from "../types"
88

99

10-
export interface IStateContext {
11-
impersonator?: IUserSimple;
12-
connectedUser: IUserSimple;
13-
tenant: ITenant;
14-
isTenantAdmin: boolean;
15-
apiCreationPermitted: boolean;
16-
}
17-
export type TContext = IStateContext & { reloadContext: () => Promise<void> }
18-
19-
const initContext: TContext = {
10+
type TGlobalContext = IStateContext & { reloadContext: () => void, toggleExpertMode: () => void }
11+
const initContext: TGlobalContext = {
2012
connectedUser: {
2113
_id: "",
2214
_humanReadableId: "",
@@ -46,17 +38,23 @@ const initContext: TContext = {
4638
},
4739
isTenantAdmin: false,
4840
apiCreationPermitted: false,
49-
reloadContext: () => Promise.resolve()
41+
reloadContext: () => Promise.resolve(),
42+
expertMode: JSON.parse(localStorage.getItem('expertMode') || 'false'),
43+
toggleExpertMode: () => { }
5044

5145
}
5246

53-
export const GlobalContext = React.createContext<TContext>(initContext)
47+
export const GlobalContext = React.createContext<TGlobalContext>(initContext)
5448
export const useCurrentUserContext = () => {
5549
return React.useContext(GlobalContext)
5650
}
5751

5852

5953
export const CurrentUserContextProvider = (props: PropsWithChildren) => {
54+
const getExpertMode = (): boolean => JSON.parse(localStorage.getItem('expertMode') || 'false')
55+
56+
const [expertMode, setExpertMode] = useState<boolean>(getExpertMode())
57+
6058
const currentUserQuery = useQuery({
6159
queryKey: ['context'],
6260
queryFn: () => Services.getUserContext(),
@@ -73,8 +71,14 @@ export const CurrentUserContextProvider = (props: PropsWithChildren) => {
7371

7472
const reloadContext = () => queryClient.invalidateQueries({ queryKey: ["context"] })
7573

74+
const toggleExpertMode = () => {
75+
localStorage.setItem('expertMode', (!expertMode).toLocaleString())
76+
setExpertMode(!expertMode)
77+
};
78+
79+
7680
return (
77-
<GlobalContext.Provider value={{ ...currentUserQuery.data, reloadContext }}>
81+
<GlobalContext.Provider value={{ ...currentUserQuery.data, reloadContext, expertMode, toggleExpertMode }}>
7882
{props.children}
7983
</GlobalContext.Provider>
8084
)

‎daikoku/javascript/src/contexts/navContext.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1+
import { useQuery } from '@tanstack/react-query';
12
import merge from 'lodash/merge';
23
import React, { useContext, useEffect, useState } from 'react';
34
import { Link, useMatch, useNavigate, useParams } from 'react-router-dom';
4-
import { useQuery } from '@tanstack/react-query';
55

66
import { api as API, Can, manage, queryClient } from '../components/utils';
77
import { I18nContext } from '../contexts';
8-
import { IApi, IState, IStateContext, IStoreState, ITeamSimple, ITenant, IUserSimple, isError } from '../types';
9-
import { ModalContext } from './modalContext';
108
import * as Services from '../services/index';
9+
import { IApi, ITeamSimple, ITenant, isError } from '../types';
1110
import { GlobalContext } from './globalContext';
11+
import { ModalContext } from './modalContext';
1212

1313

1414
export enum navMode {

0 commit comments

Comments
 (0)