Repository: Infisical/infisical
File: frontend/src/layouts/OrganizationLayout/components/NavBar/NewSubOrganizationForm.tsx (TypeScript)

Code before:
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import slugify from "@sindresorhus/slugify";
import { z } from "zod";

import { createNotification } from "@app/components/notifications";
import SecurityClient from "@app/components/utilities/SecurityClient";
import { Button, FormControl, Input } from "@app/components/v2";
import { useOrganization } from "@app/context";
import { useCreateSubOrganization } from "@app/hooks/api";
import { selectOrganization } from "@app/hooks/api/auth/queries";
import { GenericResourceNameSchema, slugSchema } from "@app/lib/schemas";

type ContentProps = {
  onClose: () => void;
  handleOrgSelection: (params: { organizationId: string }) => void;
};

const AddOrgSchema = z.object({
  name: GenericResourceNameSchema,
  // Optional: server auto-generates slug from name when not provided (backward compatibility)
  slug: z.union([slugSchema(), z.literal("")]).optional()
});

type FormData = z.infer<typeof AddOrgSchema>;

export const NewSubOrganizationForm = ({ onClose, handleOrgSelection }: ContentProps) => {
  const { currentOrg, isSubOrganization } = useOrganization();
  const createSubOrg = useCreateSubOrganization();

  const {
    handleSubmit,
    control,
    setValue,
    formState: { isSubmitting }
  } = useForm({
    defaultValues: {
      name: "",
      slug: ""
    },
    resolver: zodResolver(AddOrgSchema)
  });

  const onSubmit = async ({ name, slug }: FormData) => {
    if (isSubOrganization && currentOrg.rootOrgId) {
      const { token } = await selectOrganization({

Review comment (suggestion):
nit: comment

```suggestion
  // Optional: server auto-generates slug from name when not provided
```

Code after:
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import slugify from "@sindresorhus/slugify";
import { z } from "zod";

import { createNotification } from "@app/components/notifications";
import SecurityClient from "@app/components/utilities/SecurityClient";
import { Button, FormControl, Input } from "@app/components/v2";
import { useOrganization } from "@app/context";
import { useCreateSubOrganization } from "@app/hooks/api";
import { selectOrganization } from "@app/hooks/api/auth/queries";
import { GenericResourceNameSchema, slugSchema } from "@app/lib/schemas";

type ContentProps = {
  onClose: () => void;
  handleOrgSelection: (params: { organizationId: string }) => void;
};

const AddOrgSchema = z.object({
  name: GenericResourceNameSchema,
  // Optional: server auto-generates slug from name when not provided
  slug: z.union([slugSchema(), z.literal("")]).optional()
});

type FormData = z.infer<typeof AddOrgSchema>;

export const NewSubOrganizationForm = ({ onClose, handleOrgSelection }: ContentProps) => {
  const { currentOrg, isSubOrganization } = useOrganization();
  const createSubOrg = useCreateSubOrganization();

  const {
    handleSubmit,
    control,
    setValue,
    formState: { isSubmitting }
  } = useForm({
    defaultValues: {
      name: "",
      slug: ""
    },
    resolver: zodResolver(AddOrgSchema)
  });

  const onSubmit = async ({ name, slug }: FormData) => {
    if (isSubOrganization && currentOrg.rootOrgId) {
      const { token } = await selectOrganization({