create-creation-form
Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity
Informações da origem
- Repositório
- OpenCTI-Platform/opencti
- Última atividade na origem
- 12 de maio de 2026 às 12:56
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 10.123
- Forks
- 1.478
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- name
- create-creation-form
- description
- Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity
# Create Creation Form (Drawer)
## Prerequisites
- **Mutation**: GraphQL mutation for creating the entity.
- **Fields**: List of fields to display.
## Procedure
### Step 0 — Find an Existing Example
Use the **Codebase Pattern Finder** agent to locate a similar existing creation form in `opencti-platform/opencti-front/src/private/components/` (look for files ending in `Creation.tsx`). Model the new form after the existing one to stay idiomatic.
### Step 1 — Define Mutation & Validation
Use `Yup` for validation schema.
```tsx
const creationMutation = graphql`
mutation MyEntityCreationMutation($input: MyEntityAddInput!) {
myEntityAdd(input: $input) {
...MyEntityLine_node
}
}
`;
const validationSchema = Yup.object().shape({
name: Yup.string().required(t('This field is required')),
});
```
### Step 2 — Create Component Structure
Return a `Drawer` containing a `Formik` form.
```tsx
export const MyEntityCreation: React.FC<Props> = ({ paginationOptions }) => {
const [commit] = useApiMutation(creationMutation);
const onSubmit = (values, { setSubmitting, resetForm }) => {
commit({
variables: {
input: values,
},
updater: (store) => {
// Use utils/store helper
insertNode(store, 'Pagination_myEntities', paginationOptions, 'myEntityAdd');
},
onCompleted: () => {
setSubmitting(false);
resetForm();
},
});
};
return (
<Drawer title={t_i18n('Create entity')}>
<Formik initialValues={{ name: '' }} validationSchema={validationSchema} onSubmit={onSubmit}>
<Form>
<Field component={TextField} name="name" label={t_i18n('Name')} />
<Button type="submit">{t_i18n('Create')}</Button>
</Form>
</Formik>
</Drawer>
);
};
```
Ver no GitHub