Replug new organization page

Signed-off-by: Émile Ré <nemile.re@gmail.com>

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>
+  );
+}

apps/console/src/pages/iam/organizations/__generated__/NewOrganizationPageMutation.graphql.ts

@@ -0,0 +1,115 @@
+/**
+ * @generated SignedSource<<3c4bf3ac3f3eff32d0c86fe61190576e>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type CreateOrganizationInput = {
+  horizontalLogoFile?: any | null | undefined;
+  logoFile?: any | null | undefined;
+  name: string;
+};
+export type NewOrganizationPageMutation$variables = {
+  input: CreateOrganizationInput;
+};
+export type NewOrganizationPageMutation$data = {
+  readonly createOrganization: {
+    readonly organization: {
+      readonly id: string;
+      readonly name: string;
+    } | null | undefined;
+  } | null | undefined;
+};
+export type NewOrganizationPageMutation = {
+  response: NewOrganizationPageMutation$data;
+  variables: NewOrganizationPageMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "CreateOrganizationPayload",
+    "kind": "LinkedField",
+    "name": "createOrganization",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Organization",
+        "kind": "LinkedField",
+        "name": "organization",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "NewOrganizationPageMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "NewOrganizationPageMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "e4d07eba4c1791eeb6e5e1e627c79593",
+    "id": null,
+    "metadata": {},
+    "name": "NewOrganizationPageMutation",
+    "operationKind": "mutation",
+    "text": "mutation NewOrganizationPageMutation(\n  $input: CreateOrganizationInput!\n) {\n  createOrganization(input: $input) {\n    organization {\n      id\n      name\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "68737a40f2993357fb169e9aac6a4262";
+
+export default node;