Add access review campaigns

apps/console/src/pages/iam/organizations/_components/Sidebar.tsx

@@ -8,6 +8,7 @@ import {
   IconFire3,
   IconGroup1,
   IconInboxEmpty,
+  IconKey,
   IconListStack,
   IconLock,
   IconMagnifyingGlass,
@@ -52,6 +53,9 @@ const fragment = graphql`
         canListStatesOfApplicability: permission(
             action: "core:state-of-applicability:list"
         )
+        canListAccessReviewCampaigns: permission(
+            action: "core:access-review-campaign:list"
+        )
     }
 `;
 
@@ -186,6 +190,13 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) {
           to={`${prefix}/snapshots`}
         />
       )}
+      {organization.canListAccessReviewCampaigns && (
+        <SidebarItem
+          label={__("Access Reviews")}
+          icon={IconKey}
+          to={`${prefix}/access-reviews`}
+        />
+      )}
       {organization.canGetTrustCenter && (
         <SidebarItem
           label={__("Compliance Page")}

apps/console/src/pages/organizations/access-reviews/AccessReviewLayout.tsx

@@ -0,0 +1,86 @@
+import { usePageTitle } from "@probo/hooks";
+import { useTranslate } from "@probo/i18n";
+import {
+  IconFolder2,
+  IconKey,
+  PageHeader,
+  TabLink,
+  Tabs,
+} from "@probo/ui";
+import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
+import { Outlet } from "react-router";
+import { graphql } from "relay-runtime";
+
+import type { AccessReviewLayoutQuery } from "#/__generated__/core/AccessReviewLayoutQuery.graphql";
+import { useOrganizationId } from "#/hooks/useOrganizationId";
+
+export const accessReviewLayoutQuery = graphql`
+  query AccessReviewLayoutQuery($organizationId: ID!) {
+    organization: node(id: $organizationId) {
+      __typename
+      ... on Organization {
+        id
+        canCreateSource: permission(action: "core:access-source:create")
+        connectorProviderInfos {
+          provider
+          displayName
+          oauthConfigured
+          apiKeySupported
+          clientCredentialsSupported
+          extraSettings {
+            key
+            label
+            required
+          }
+        }
+        ...AccessReviewCampaignsTabFragment
+        ...AccessReviewSourcesTabFragment
+      }
+    }
+  }
+`;
+
+export default function AccessReviewLayout({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<AccessReviewLayoutQuery>;
+}) {
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+
+  usePageTitle(__("Access Reviews"));
+
+  const { organization } = usePreloadedQuery(accessReviewLayoutQuery, queryRef);
+  if (organization.__typename !== "Organization") {
+    throw new Error("Organization not found");
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={__("Access Reviews")}
+        description={__(
+          "Review and manage user access across your organization's systems and applications.",
+        )}
+      />
+
+      <Tabs>
+        <TabLink to={`/organizations/${organizationId}/access-reviews`} end>
+          <IconKey className="size-4" />
+          {__("Campaigns")}
+        </TabLink>
+        <TabLink to={`/organizations/${organizationId}/access-reviews/sources`}>
+          <IconFolder2 className="size-4" />
+          {__("Sources")}
+        </TabLink>
+      </Tabs>
+
+      <Outlet context={{
+        organizationRef: organization,
+        canCreateSource: organization.canCreateSource,
+        connectorProviderInfos: organization.connectorProviderInfos,
+      }}
+      />
+    </div>
+  );
+}

apps/console/src/pages/organizations/access-reviews/AccessReviewLayoutLoader.tsx

@@ -0,0 +1,27 @@
+import { Suspense, useEffect } from "react";
+import { useQueryLoader } from "react-relay";
+
+import type { AccessReviewLayoutQuery } from "#/__generated__/core/AccessReviewLayoutQuery.graphql";
+import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
+import { useOrganizationId } from "#/hooks/useOrganizationId";
+
+import AccessReviewLayout, { accessReviewLayoutQuery } from "./AccessReviewLayout";
+
+export default function AccessReviewLayoutLoader() {
+  const organizationId = useOrganizationId();
+  const [queryRef, loadQuery] = useQueryLoader<AccessReviewLayoutQuery>(accessReviewLayoutQuery);
+
+  useEffect(() => {
+    if (!queryRef) {
+      loadQuery({ organizationId });
+    }
+  }, [loadQuery, organizationId]);
+
+  if (!queryRef) return <PageSkeleton />;
+
+  return (
+    <Suspense fallback={<PageSkeleton />}>
+      <AccessReviewLayout queryRef={queryRef} />
+    </Suspense>
+  );
+}

apps/console/src/pages/organizations/access-reviews/CreateCsvAccessSourcePage.tsx

@@ -0,0 +1,170 @@
+import { formatError, type GraphQLError } from "@probo/helpers";
+import { usePageTitle } from "@probo/hooks";
+import { useTranslate } from "@probo/i18n";
+import {
+  Button,
+  Card,
+  Field,
+  PageHeader,
+  useToast,
+} from "@probo/ui";
+import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
+import { Link, useNavigate } from "react-router";
+import { ConnectionHandler, graphql } from "relay-runtime";
+import { z } from "zod";
+
+import type { CreateAccessSourceDialogMutation } from "#/__generated__/core/CreateAccessSourceDialogMutation.graphql";
+import type { CreateCsvAccessSourcePageQuery } from "#/__generated__/core/CreateCsvAccessSourcePageQuery.graphql";
+import { useFormWithSchema } from "#/hooks/useFormWithSchema";
+import { useOrganizationId } from "#/hooks/useOrganizationId";
+
+import { createAccessSourceMutation } from "./dialogs/CreateAccessSourceDialog";
+
+export const createCsvAccessSourcePageQuery = graphql`
+  query CreateCsvAccessSourcePageQuery($organizationId: ID!) {
+    organization: node(id: $organizationId) {
+      __typename
+      ... on Organization {
+        id
+        canCreateSource: permission(action: "core:access-source:create")
+      }
+    }
+  }
+`;
+
+const csvSchema = z.object({
+  name: z.string().min(1),
+  csvData: z.string().min(1),
+});
+
+export default function CreateCsvAccessSourcePage({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<CreateCsvAccessSourcePageQuery>;
+}) {
+  const { __ } = useTranslate();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const organizationId = useOrganizationId();
+  const { register, handleSubmit }
+    = useFormWithSchema(csvSchema, {
+      defaultValues: {
+        name: "",
+        csvData: "",
+      },
+    });
+
+  usePageTitle(__("Add CSV Access Source"));
+
+  const { organization } = usePreloadedQuery(createCsvAccessSourcePageQuery, queryRef);
+  if (organization.__typename !== "Organization") {
+    throw new Error("Organization not found");
+  }
+
+  const connectionId = ConnectionHandler.getConnectionID(
+    organization.id,
+    "AccessReviewSourcesTab_accessSources",
+  );
+
+  const [createAccessSource, isCreating]
+    = useMutation<CreateAccessSourceDialogMutation>(
+      createAccessSourceMutation,
+    );
+
+  if (!organization.canCreateSource) {
+    return (
+      <Card padded>
+        <p className="text-txt-secondary text-sm">
+          {__("You do not have permission to create access sources.")}
+        </p>
+      </Card>
+    );
+  }
+
+  const onSubmit = (data: z.infer<typeof csvSchema>) => {
+    createAccessSource({
+      variables: {
+        input: {
+          organizationId,
+          connectorId: null,
+          name: data.name,
+          csvData: data.csvData,
+        },
+        connections: connectionId ? [connectionId] : [],
+      },
+      onCompleted(_, errors) {
+        if (errors?.length) {
+          toast({
+            title: __("Error"),
+            description: formatError(
+              __("Failed to create access source"),
+              errors as GraphQLError[],
+            ),
+            variant: "error",
+          });
+          return;
+        }
+        toast({
+          title: __("Success"),
+          description: __("Access source created successfully."),
+          variant: "success",
+        });
+        void navigate(`/organizations/${organizationId}/access-reviews/sources`);
+      },
+      onError(error) {
+        toast({
+          title: __("Error"),
+          description: formatError(
+            __("Failed to create access source"),
+            error as GraphQLError,
+          ),
+          variant: "error",
+        });
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={__("Add CSV access source")}
+        description={__(
+          "Paste CSV content with a header row. This source will be saved and available in Access Reviews.",
+        )}
+      />
+
+      <Card padded>
+        <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
+          <Field
+            label={__("Name")}
+            {...register("name")}
+            type="text"
+            required
+          />
+
+          <Field
+            label={__("CSV Data")}
+            {...register("csvData")}
+            type="textarea"
+            placeholder="email,full_name,role,job_title,is_admin,active,external_id"
+            required
+          />
+          <p className="text-txt-secondary text-sm">
+            {__("Supported columns: email, full_name, role, job_title, is_admin, active, external_id.")}
+          </p>
+
+          <div className="flex items-center justify-end gap-2">
+            <Button variant="secondary" asChild>
+              <Link to={`/organizations/${organizationId}/access-reviews/sources`}>
+                {__("Back")}
+              </Link>
+            </Button>
+            <Button disabled={isCreating} type="submit">
+              {__("Create")}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+}

apps/console/src/pages/organizations/access-reviews/CreateCsvAccessSourcePageLoader.tsx

@@ -0,0 +1,28 @@
+import { Suspense, useEffect } from "react";
+import { useQueryLoader } from "react-relay";
+
+import type { CreateCsvAccessSourcePageQuery } from "#/__generated__/core/CreateCsvAccessSourcePageQuery.graphql";
+import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
+import { useOrganizationId } from "#/hooks/useOrganizationId";
+
+import CreateCsvAccessSourcePage, { createCsvAccessSourcePageQuery } from "./CreateCsvAccessSourcePage";
+
+export default function CreateCsvAccessSourcePageLoader() {
+  const organizationId = useOrganizationId();
+  const [queryRef, loadQuery]
+    = useQueryLoader<CreateCsvAccessSourcePageQuery>(createCsvAccessSourcePageQuery);
+
+  useEffect(() => {
+    loadQuery({ organizationId });
+  }, [loadQuery, organizationId]);
+
+  if (!queryRef) {
+    return <PageSkeleton />;
+  }
+
+  return (
+    <Suspense fallback={<PageSkeleton />}>
+      <CreateCsvAccessSourcePage queryRef={queryRef} />
+    </Suspense>
+  );
+}