Skip to content

Commit

Permalink
frontend - chantier
Browse files Browse the repository at this point in the history
  • Loading branch information
@lndrtrbn
lndrtrbn committed Jan 10, 2025
1 parent 5a591e9 commit 4a3f04f
Show file tree
Hide file tree
Showing 10 changed files with 341 additions and 327 deletions.
201 changes: 24 additions & 177 deletions opencti-platform/opencti-front/src/private/components/widgets/WidgetConfig.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import React, { FunctionComponent, useEffect, useState } from 'react';
import React, { FunctionComponent } from 'react';
import { v4 as uuid } from 'uuid';
import WidgetCreationTypes from '@components/widgets/WidgetCreationTypes';
import WidgetCreationPerspective from '@components/widgets/WidgetCreationPerspective';
import WidgetCreationDataSelection from '@components/widgets/WidgetCreationDataSelection';
import WidgetCreationParameters from '@components/widgets/WidgetCreationParameters';
import WidgetUpsert from '@components/widgets/WidgetUpsert';
import { emptyFilterGroup } from '../../../utils/filters/filtersUtils';
import { useFormatter } from '../../../components/i18n';
import type { Widget, WidgetContext, WidgetPerspective } from '../../../utils/widget/widget';
import WidgetUpsert from './WidgetUpsert';
import { WidgetConfigProvider, WidgetConfigType } from './WidgetConfigContext';
import type { Widget, WidgetContext } from '../../../utils/widget/widget';

interface WidgetConfigProps {
onComplete: (value: Widget, variableName?: string) => void,
Expand All @@ -26,183 +21,35 @@ const WidgetConfig: FunctionComponent<WidgetConfigProps> = ({
context,
initialVariableName,
}) => {
let initialStep = 0;
if (widget?.type === 'text' || widget?.type === 'attribute') {
initialStep = 3;
} else if (widget?.dataSelection) {
initialStep = 2;
}
const { t_i18n } = useFormatter();
const [stepIndex, setStepIndex] = useState(initialStep);
const [type, setType] = useState<string | null>(widget?.type ?? null);
const [perspective, setPerspective] = useState(widget?.perspective ?? null);
const [variableName, setVariableName] = useState(initialVariableName);

const initialSelection = {
label: '',
attribute: 'entity_type',
date_attribute: 'created_at',
perspective: null,
isTo: true,
filters: emptyFilterGroup,
dynamicFrom: emptyFilterGroup,
dynamicTo: emptyFilterGroup,
instance_id: type === 'attribute' ? 'SELF_ID' : undefined,
};

const initialDataSelection = widget?.dataSelection ?? [initialSelection];
const [dataSelection, setDataSelection] = useState(initialDataSelection);
const [parameters, setParameters] = useState(widget?.parameters ?? {});

useEffect(() => {
setStepIndex(initialStep);
}, [initialStep]);
useEffect(() => {
setType(widget?.type ?? null);
}, [widget]);
useEffect(() => {
setVariableName(initialVariableName);
}, [initialVariableName]);

const handleCloseAfterCancel = () => {
if (!widget) {
setStepIndex(0);
setType(null);
setPerspective(null);
setDataSelection([initialSelection]);
setParameters({});
} else if (widget.type === 'text') {
setStepIndex(3);
} else {
setStepIndex(2);
}
const close = () => {
setOpen(false);
setDataSelection(widget?.dataSelection ?? [initialSelection]);
};

const handleCloseAfterUpdate = () => {
if (!widget) {
setStepIndex(0);
setType(null);
setPerspective(null);
setDataSelection([initialSelection]);
setParameters({});
} else if (widget.type === 'text') {
setStepIndex(3);
} else {
setStepIndex(2);
}
setOpen(false);
};

const completeSetup = () => {
if (type) {
onComplete({
const onSubmit = (newConfig: WidgetConfigType) => {
onComplete(
{
...(widget ?? {}),
id: widget?.id ?? uuid(),
type,
perspective,
dataSelection,
parameters,
}, variableName);
}
handleCloseAfterUpdate();
};

const handleSelectType = (selectedType: string) => {
setType(selectedType);
if (selectedType === 'text' || selectedType === 'attribute') {
setStepIndex(3);
} else {
setStepIndex(1);
}
};

const handleSelectPerspective = (selectedPerspective: WidgetPerspective) => {
const newDataSelection = dataSelection.map((n) => ({
...n,
perspective: selectedPerspective,
filters: selectedPerspective === n.perspective ? n.filters : emptyFilterGroup,
dynamicFrom: selectedPerspective === n.perspective ? n.dynamicFrom : emptyFilterGroup,
dynamicTo: selectedPerspective === n.perspective ? n.dynamicTo : emptyFilterGroup,
}));
setDataSelection(newDataSelection);
setPerspective(selectedPerspective);
setStepIndex(2);
};

const handleChangeVariableName = (name: string) => {
setVariableName(name);
};

const isDataSelectionAttributesValid = () => {
for (const n of dataSelection) {
if (n.attribute?.length === 0) {
return false;
}
}
return true;
};

const getStepContent = () => {
switch (stepIndex) {
case 0:
return (
<WidgetCreationTypes
context={context}
handleSelectType={handleSelectType}
/>
);
case 1:
return (
<WidgetCreationPerspective
handleSelectPerspective={handleSelectPerspective}
type={type ?? ''}
/>
);
case 2:
return (
<WidgetCreationDataSelection
dataSelection={dataSelection}
setDataSelection={setDataSelection}
perspective={perspective as WidgetPerspective}
type={type as string}
setStepIndex={setStepIndex}
/>
);
case 3:
return (
<WidgetCreationParameters
dataSelection={dataSelection}
setDataSelection={setDataSelection}
parameters={parameters}
setParameters={setParameters}
type={type as string}
context={context}
variableName={variableName}
handleChangeVariableName={handleChangeVariableName}
/>
);
default:
return <div>${t_i18n('This step is not implemented')}</div>;
}
...newConfig.widget,
},
newConfig.fintelVariableName ?? undefined,
);
close();
};

return (
<WidgetUpsert
open={open}
variableName={variableName}
<WidgetConfigProvider
initialWidget={widget}
initialVariableName={initialVariableName}
context={context}
handleCloseAfterCancel={handleCloseAfterCancel}
stepIndex={stepIndex}
setStepIndex={setStepIndex}
getStepContent={getStepContent}
completeSetup={completeSetup}
isDataSelectionAttributesValid={isDataSelectionAttributesValid}
widget={widget}
type={type}
parameters={parameters}
/>
open={open}
>
<WidgetUpsert
open={open}
onCancel={close}
onSubmit={onSubmit}
/>
</WidgetConfigProvider>
);
};

Expand Down
125 changes: 125 additions & 0 deletions opencti-platform/opencti-front/src/private/components/widgets/WidgetConfigContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import React, { createContext, Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
import type { Widget, WidgetContext, WidgetDataSelection, WidgetParameters, WidgetPerspective } from '../../../utils/widget/widget';
import { emptyFilterGroup } from '../../../utils/filters/filtersUtils';

export interface WidgetConfigType {
fintelVariableName: string | null;
widget: {
type: string;
perspective: WidgetPerspective | null;
dataSelection: WidgetDataSelection[];
parameters: WidgetParameters;
};
}

interface WidgetConfigContextProps {
context: WidgetContext;
step: number;
setStep: Dispatch<React.SetStateAction<number>>;
config: WidgetConfigType;
setConfigWidget: (widget: WidgetConfigType['widget']) => void;
setConfigVariableName: (variableName: WidgetConfigType['fintelVariableName']) => void;
}

const WidgetConfigContext = createContext<WidgetConfigContextProps | undefined>(undefined);

interface WidgetConfigProviderProps {
children: ReactNode
context: WidgetContext
initialWidget: Widget | undefined;
initialVariableName: string | undefined;
open: boolean;
}

const buildConfig = (w?: Widget, varName?: string): WidgetConfigType => {
return {
fintelVariableName: varName ?? null,
widget: {
type: w?.type ?? '',
perspective: w?.perspective ?? null,
parameters: w?.parameters ?? {},
dataSelection: w?.dataSelection ?? [{
label: '',
attribute: 'entity_type',
date_attribute: 'created_at',
perspective: null,
isTo: true,
filters: emptyFilterGroup,
dynamicFrom: emptyFilterGroup,
dynamicTo: emptyFilterGroup,
instance_id: w?.type === 'attribute' ? 'SELF_ID' : undefined,
}],
},
};
};

export const WidgetConfigProvider = ({
children,
context,
initialWidget,
initialVariableName,
open,
}: WidgetConfigProviderProps) => {
const [conf, setConfig] = useState(buildConfig(undefined, undefined));
const [step, setStep] = useState(0);

const reset = () => {
setConfig(buildConfig(undefined, undefined));
setStep(0);
};

const init = () => {
setConfig(buildConfig(initialWidget, initialVariableName));
if (initialWidget) {
let initialStep = 0;
if (initialWidget?.type === 'text' || initialWidget?.type === 'attribute') {
initialStep = 3;
} else if (initialWidget?.dataSelection) {
initialStep = 2;
}
setStep(initialStep);
}
};

useEffect(() => {
if (open) init();
else reset();
}, [open]);

const setConfigWidget = (widget: WidgetConfigType['widget']) => {
setConfig((oldConf) => ({
...oldConf,
widget: {
...oldConf.widget,
...widget,
},
}));
};

const setConfigVariableName = (variableName: WidgetConfigType['fintelVariableName']) => {
setConfig((oldConf) => ({
...oldConf,
fintelVariableName: variableName,
}));
};

return (
<WidgetConfigContext.Provider value={{
context,
config: conf,
setConfigWidget,
setConfigVariableName,
step,
setStep,
}}
>
{children}
</WidgetConfigContext.Provider>
);
};

export const useWidgetConfigContext = () => {
const context = useContext(WidgetConfigContext);
if (!context) throw Error('Hook used outside of WidgetConfigProvider');
return context;
};
Loading

0 comments on commit 4a3f04f

Please sign in to comment.