Create Creation Form (Drawer)

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.

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.

export const MyEntityCreation: React.FC<Props> = ({ paginationOptions }) => {
  const [commit] = useApiMutation(creationMutation);
  
  const onSubmit = (values, { setSubmitting, resetForm }) => {
    commit({
      variables: {
        input: values,
      },