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;

apps/console/src/routes.tsx

@@ -51,6 +51,10 @@ import {
 import { OrganizationsPageQuery } from "./pages/iam/organizations/OrganizationsPageQuery.tsx";
 import { OrganizationLayoutQuery } from "./pages/iam/organizations/OrganizationLayoutQuery.tsx";
 
+const NewOrganizationPage = lazy(
+  () => import("./pages/iam/organizations/NewOrganizationPage"),
+);
+
 /**
  * Top level error boundary
  */
@@ -109,11 +113,7 @@ const routes = [
   },
   {
     path: "/",
-    Component: () => (
-      <RelayEnvironmentProvider environment={consoleEnvironment}>
-        <CenteredLayout />
-      </RelayEnvironmentProvider>
-    ),
+    Component: CenteredLayout,
     Fallback: CenteredLayoutSkeleton,
     ErrorBoundary: ErrorBoundary,
     children: [
@@ -125,12 +125,14 @@ const routes = [
           </RelayEnvironmentProvider>
         ),
       },
-      // {
-      //   path: "organizations/new",
-      //   Component: lazy(
-      //     () => import("./pages/organizations/NewOrganizationPage")
-      //   ),
-      // },
+      {
+        path: "organizations/new",
+        Component: () => (
+          <RelayEnvironmentProvider environment={connectEnvironment}>
+            <NewOrganizationPage />
+          </RelayEnvironmentProvider>
+        ),
+      },
       {
         path: "documents/signing-requests",
         Component: lazy(

pkg/iam/organization_service.go

@@ -101,14 +101,18 @@ func (req CreateOrganizationRequest) Validate() error {
 	v := validator.New()
 	fv := filevalidation.NewValidator(filevalidation.WithCategories(filevalidation.CategoryImage))
 
-	err := fv.Validate(req.LogoFile.Filename, req.LogoFile.ContentType, req.LogoFile.Size)
-	if err != nil {
-		return fmt.Errorf("invalid logo file: %w", err)
+	if req.LogoFile != nil {
+		err := fv.Validate(req.LogoFile.Filename, req.LogoFile.ContentType, req.LogoFile.Size)
+		if err != nil {
+			return fmt.Errorf("invalid logo file: %w", err)
+		}
 	}
 
-	err = fv.Validate(req.HorizontalLogoFile.Filename, req.HorizontalLogoFile.ContentType, req.HorizontalLogoFile.Size)
-	if err != nil {
-		return fmt.Errorf("invalid horizontal logo file: %w", err)
+	if req.HorizontalLogoFile != nil {
+		err := fv.Validate(req.HorizontalLogoFile.Filename, req.HorizontalLogoFile.ContentType, req.HorizontalLogoFile.Size)
+		if err != nil {
+			return fmt.Errorf("invalid horizontal logo file: %w", err)
+		}
 	}
 
 	v.Check(req.Name, "name", validator.Required(), validator.SafeTextNoNewLine(255))
@@ -378,7 +382,11 @@ func (s *OrganizationService) InviteMember(
 	return invitation, nil
 }
 
-func (s *OrganizationService) CreateOrganization(ctx context.Context, identityID gid.GID, req *CreateOrganizationRequest) (*coredata.Organization, error) {
+func (s *OrganizationService) CreateOrganization(
+	ctx context.Context,
+	identityID gid.GID,
+	req *CreateOrganizationRequest,
+) (*coredata.Organization, error) {
 	if err := req.Validate(); err != nil {
 		return nil, fmt.Errorf("invalid request: %w", err)
 	}