Replug new organization page

Signed-off-by: Émile Ré <nemile.re@gmail.com>
2025-12-20 00:30:12 +01:00
parent 63349098fd
commit 38bf027dd6
4 changed files with 242 additions and 18 deletions
--- a/apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx
+++ b/apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx
@@ -0,0 +1,99 @@
+import { useTranslate } from "@probo/i18n";
+import { Button, Card, Field, PageHeader, useToast } from "@probo/ui";
+import { graphql, useMutation } from "react-relay";
+import type { FormEventHandler } from "react";
+import { useNavigate } from "react-router";
+import { formatError, type GraphQLError } from "@probo/helpers";
+import type { NewOrganizationPageMutation } from "./__generated__/NewOrganizationPageMutation.graphql";
+
+const createOrganizationMutation = graphql`
+  mutation NewOrganizationPageMutation($input: CreateOrganizationInput!) {
+    createOrganization(input: $input) {
+      organization {
+        id
+        name
+      }
+    }
+  }
+`;
+
+export default function Page() {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { __ } = useTranslate();
+
+  const [createOrganization, isCreating] =
+    useMutation<NewOrganizationPageMutation>(createOrganizationMutation);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const name = formData.get("name")?.toString();
+    if (!name) {
+      toast({
+        title: __("Error"),
+        description: __("Name is required"),
+        variant: "error",
+      });
+      return;
+    }
+
+    createOrganization({
+      variables: {
+        input: {
+          name,
+        },
+      },
+      onCompleted: (r) => {
+        const org = r.createOrganization!.organization;
+        navigate(`/organizations/${org!.id}`);
+        toast({
+          title: __("Success"),
+          description: __("Organization has been created successfully"),
+          variant: "success",
+        });
+      },
+      onError: (e: GraphQLError) => {
+        toast({
+          title: __("Error"),
+          description: formatError(__("Failed to create organization"), e),
+          variant: "error",
+        });
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={__("Create Organization")}
+        description={__(
+          "Create a new organization to manage your compliance and security needs.",
+        )}
+      />
+      <Card padded asChild>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <h2 className="text-xl font-semibold mb-1">
+            {__("Organization Details")}
+          </h2>
+          <p className="text-txt-tertiary text-sm mb-4">
+            {__("Enter the basic information about your organization.")}
+          </p>
+          <Field
+            required
+            name="name"
+            type="text"
+            placeholder={__("Organization name")}
+            label={__("Organization name")}
+            help={__(
+              "The name of your organization as it will appear throughout the platform.",
+            )}
+          />
+          <Button disabled={isCreating} type="submit" className="w-full">
+            {__("Create Organization")}
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}