Add organization deletion

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/pages/OrganizationsPage.tsx

@@ -4,13 +4,24 @@ import { graphql } from "relay-runtime";
 import type { OrganizationsPageQuery as OrganizationsPageQueryType } from "./__generated__/OrganizationsPageQuery.graphql";
 import { useEffect } from "react";
 import { Link, useNavigate } from "react-router";
-import { Avatar, Button, Card, IconPlusLarge } from "@probo/ui";
+import {
+  Avatar,
+  Button,
+  Card,
+  IconPlusLarge,
+  ActionDropdown,
+  DropdownItem,
+  IconTrashCan,
+} from "@probo/ui";
 import { usePageTitle } from "@probo/hooks";
+import { useDeleteOrganizationMutation } from "../hooks/graph/OrganizationGraph";
+import { DeleteOrganizationDialog } from "../components/organizations/DeleteOrganizationDialog";
 
 const OrganizationsPageQuery = graphql`
   query OrganizationsPageQuery {
     viewer {
-      organizations(first: 25) {
+      organizations(first: 25) @connection(key: "OrganizationsPage_organizations") {
+        __id
         edges {
           node {
             id
@@ -37,10 +48,11 @@ export default function OrganizationsPage() {
 
   usePageTitle(__("Select an organization"));
 
-  // Redirect to the first organization if only one exists
   useEffect(() => {
     if (organizations.length === 1) {
       navigate(`/organizations/${organizations[0].id}`);
+    } else if (organizations.length === 0) {
+      navigate("/organizations/new");
     }
   }, [organizations]);
 
@@ -52,27 +64,11 @@ export default function OrganizationsPage() {
         </h1>
         <div className="space-y-4 w-full">
           {organizations.map((organization) => (
-            <Card
-              asChild
-              padded
+            <OrganizationCard
               key={organization.id}
-              className="w-full hover:bg-tertiary-hover cursor-pointer"
-            >
-              <Link
-                to={`/organizations/${organization.id}`}
-                className="flex items-center justify-between"
-              >
-                <div className="flex items-center gap-4">
-                  <Avatar
-                    src={organization.logoUrl}
-                    name={organization.name}
-                    size="l"
-                  />
-                  <h2 className="font-semibold text-xl">{organization.name}</h2>
-                </div>
-                <Button>{__("Select")}</Button>
-              </Link>
-            </Card>
+              organization={organization}
+              connectionId={data.viewer.organizations.__id}
+            />
           ))}
           <Card padded>
             <h2 className="text-xl font-semibold mb-1">
@@ -95,3 +91,68 @@ export default function OrganizationsPage() {
     </>
   );
 }
+
+type OrganizationCardProps = {
+  organization: {
+    id: string;
+    name: string;
+    logoUrl: string | null | undefined;
+  };
+  connectionId: string;
+};
+
+function OrganizationCard({ organization, connectionId }: OrganizationCardProps) {
+  const { __ } = useTranslate();
+  const [deleteOrganization, isDeleting] = useDeleteOrganizationMutation();
+
+  const handleDelete = () => {
+    return deleteOrganization({
+      variables: {
+        input: {
+          organizationId: organization.id,
+        },
+        connections: [connectionId],
+      },
+    });
+  };
+
+  return (
+    <Card padded className="w-full">
+      <div className="flex items-center justify-between">
+        <Link
+          to={`/organizations/${organization.id}`}
+          className="flex items-center gap-4 hover:text-primary flex-1"
+        >
+          <Avatar
+            src={organization.logoUrl}
+            name={organization.name}
+            size="l"
+          />
+          <h2 className="font-semibold text-xl">{organization.name}</h2>
+        </Link>
+        <div className="flex items-center gap-3">
+          <Button asChild>
+            <Link to={`/organizations/${organization.id}`}>
+              {__("Select")}
+            </Link>
+          </Button>
+          <DeleteOrganizationDialog
+            organizationName={organization.name}
+            onConfirm={handleDelete}
+            isDeleting={isDeleting}
+          >
+            <ActionDropdown>
+              <DropdownItem
+                variant="danger"
+                icon={IconTrashCan}
+                disabled={isDeleting}
+              >
+                {__("Delete organization")}
+              </DropdownItem>
+            </ActionDropdown>
+          </DeleteOrganizationDialog>
+        </div>
+      </div>
+    </Card>
+  );
+}

apps/console/src/pages/__generated__/OrganizationsPageQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<91cc89e5e07572ab16c7bc9b8443fcd6>>
+ * @generated SignedSource<<70d28036f17c3b03dcfecce6abd5b476>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -13,6 +13,7 @@ export type OrganizationsPageQuery$variables = Record<PropertyKey, never>;
 export type OrganizationsPageQuery$data = {
   readonly viewer: {
     readonly organizations: {
+      readonly __id: string;
       readonly edges: ReadonlyArray<{
         readonly node: {
           readonly id: string;
@@ -36,60 +37,103 @@ var v0 = {
   "name": "id",
   "storageKey": null
 },
-v1 = {
-  "alias": null,
-  "args": [
-    {
-      "kind": "Literal",
-      "name": "first",
-      "value": 25
-    }
-  ],
-  "concreteType": "OrganizationConnection",
-  "kind": "LinkedField",
-  "name": "organizations",
-  "plural": false,
-  "selections": [
-    {
-      "alias": null,
-      "args": null,
-      "concreteType": "OrganizationEdge",
-      "kind": "LinkedField",
-      "name": "edges",
-      "plural": true,
-      "selections": [
-        {
-          "alias": null,
-          "args": null,
-          "concreteType": "Organization",
-          "kind": "LinkedField",
-          "name": "node",
-          "plural": false,
-          "selections": [
-            (v0/*: any*/),
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "name",
-              "storageKey": null
-            },
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "logoUrl",
-              "storageKey": null
-            }
-          ],
-          "storageKey": null
-        }
-      ],
-      "storageKey": null
-    }
-  ],
-  "storageKey": "organizations(first:25)"
-};
+v1 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "OrganizationEdge",
+    "kind": "LinkedField",
+    "name": "edges",
+    "plural": true,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Organization",
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v0/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "logoUrl",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cursor",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  },
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "PageInfo",
+    "kind": "LinkedField",
+    "name": "pageInfo",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "endCursor",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "hasNextPage",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  },
+  {
+    "kind": "ClientExtension",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "__id",
+        "storageKey": null
+      }
+    ]
+  }
+],
+v2 = [
+  {
+    "kind": "Literal",
+    "name": "first",
+    "value": 25
+  }
+];
 return {
   "fragment": {
     "argumentDefinitions": [],
@@ -105,7 +149,16 @@ return {
         "name": "viewer",
         "plural": false,
         "selections": [
-          (v1/*: any*/)
+          {
+            "alias": "organizations",
+            "args": null,
+            "concreteType": "OrganizationConnection",
+            "kind": "LinkedField",
+            "name": "__OrganizationsPage_organizations_connection",
+            "plural": false,
+            "selections": (v1/*: any*/),
+            "storageKey": null
+          }
         ],
         "storageKey": null
       }
@@ -127,7 +180,25 @@ return {
         "name": "viewer",
         "plural": false,
         "selections": [
-          (v1/*: any*/),
+          {
+            "alias": null,
+            "args": (v2/*: any*/),
+            "concreteType": "OrganizationConnection",
+            "kind": "LinkedField",
+            "name": "organizations",
+            "plural": false,
+            "selections": (v1/*: any*/),
+            "storageKey": "organizations(first:25)"
+          },
+          {
+            "alias": null,
+            "args": (v2/*: any*/),
+            "filters": null,
+            "handle": "connection",
+            "key": "OrganizationsPage_organizations",
+            "kind": "LinkedHandle",
+            "name": "organizations"
+          },
           (v0/*: any*/)
         ],
         "storageKey": null
@@ -135,16 +206,28 @@ return {
     ]
   },
   "params": {
-    "cacheID": "e771f8e44e9f9224d9cbe0f271b096ed",
+    "cacheID": "ddaafef96749a932a0cee5286a3c2bbd",
     "id": null,
-    "metadata": {},
+    "metadata": {
+      "connection": [
+        {
+          "count": null,
+          "cursor": null,
+          "direction": "forward",
+          "path": [
+            "viewer",
+            "organizations"
+          ]
+        }
+      ]
+    },
     "name": "OrganizationsPageQuery",
     "operationKind": "query",
-    "text": "query OrganizationsPageQuery {\n  viewer {\n    organizations(first: 25) {\n      edges {\n        node {\n          id\n          name\n          logoUrl\n        }\n      }\n    }\n    id\n  }\n}\n"
+    "text": "query OrganizationsPageQuery {\n  viewer {\n    organizations(first: 25) {\n      edges {\n        node {\n          id\n          name\n          logoUrl\n          __typename\n        }\n        cursor\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n      }\n    }\n    id\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "457b1b8b28355830d77458bab7af23f2";
+(node as any).hash = "122ab4331082ffe892fa7fe48692d961";
 
 export default node;

apps/console/src/pages/organizations/SettingsPage.tsx

@@ -32,6 +32,9 @@ import clsx from "clsx";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import { InviteUserDialog } from "/components/organizations/InviteUserDialog";
+import { useDeleteOrganizationMutation } from "/hooks/graph/OrganizationGraph";
+import { useNavigate } from "react-router";
+import { DeleteOrganizationDialog } from "/components/organizations/DeleteOrganizationDialog";
 
 type Props = {
   queryRef: PreloadedQuery<OrganizationGraph_ViewQuery>;
@@ -79,6 +82,7 @@ const updateOrganizationMutation = graphql`
 
 export default function SettingsPage({ queryRef }: Props) {
   const { __ } = useTranslate();
+  const navigate = useNavigate();
   const organizationKey = usePreloadedQuery(
     organizationViewQuery,
     queryRef
@@ -91,6 +95,7 @@ export default function SettingsPage({ queryRef }: Props) {
   const [updateOrganization, isUpdating] = useMutation(
     updateOrganizationMutation
   );
+  const [deleteOrganization, isDeleting] = useDeleteOrganizationMutation();
   const users = organization.users.edges.map((edge) => edge.node);
 
   const updateOrganizationName = useDebounceCallback((name: string) => {
@@ -132,6 +137,20 @@ export default function SettingsPage({ queryRef }: Props) {
     });
   };
 
+  const handleDeleteOrganization = () => {
+    return deleteOrganization({
+      variables: {
+        input: {
+          organizationId: organization.id,
+        },
+        connections: [],
+      },
+      onSuccess: () => {
+        navigate("/", { replace: true });
+      },
+    });
+  };
+
   return (
     <div className="space-y-6">
       <PageHeader title={__("Settings")} />
@@ -200,6 +219,36 @@ export default function SettingsPage({ queryRef }: Props) {
           />
         </Card>
       </div>
+
+      <div className="space-y-4">
+        <h2 className="text-base font-medium text-red-600">{__("Danger Zone")}</h2>
+        <Card padded className="border-red-200 flex items-center gap-3">
+          <div className="mr-auto">
+            <h3 className="text-base font-semibold text-red-700">
+              {__("Delete Organization")}
+            </h3>
+            <p className="text-sm text-txt-tertiary">
+              {__("Permanently delete this organization and all its data.")}{" "}
+              <span className="text-red-600 font-medium">
+                {__("This action cannot be undone.")}
+              </span>
+            </p>
+          </div>
+          <DeleteOrganizationDialog
+            organizationName={organization.name}
+            onConfirm={handleDeleteOrganization}
+            isDeleting={isDeleting}
+          >
+            <Button
+              variant="danger"
+              icon={IconTrashCan}
+              disabled={isDeleting}
+            >
+              {isDeleting ? __("Deleting...") : __("Delete Organization")}
+            </Button>
+          </DeleteOrganizationDialog>
+        </Card>
+      </div>
     </div>
   );
 }

apps/console/src/pages/organizations/documents/__generated__/DocumentDetailPageUpdateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<78eb861601ac1babc8f02dc877d9e1cf>>
+ * @generated SignedSource<<e02cdda6c1c24ac700a79ed236c6dfdc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -25,6 +25,7 @@ export type DocumentDetailPageUpdateMutation$variables = {
 export type DocumentDetailPageUpdateMutation$data = {
   readonly updateDocument: {
     readonly document: {
+      readonly documentType: DocumentType;
       readonly id: string;
       readonly owner: {
         readonly fullName: string;
@@ -85,6 +86,13 @@ v2 = [
             "name": "title",
             "storageKey": null
           },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "documentType",
+            "storageKey": null
+          },
           {
             "alias": null,
             "args": null,
@@ -129,16 +137,16 @@ return {
     "selections": (v2/*: any*/)
   },
   "params": {
-    "cacheID": "bb375479bf3446cccb49753a27fb6bcb",
+    "cacheID": "23268b13b11a1a56164dcc4cb96e24b3",
     "id": null,
     "metadata": {},
     "name": "DocumentDetailPageUpdateMutation",
     "operationKind": "mutation",
-    "text": "mutation DocumentDetailPageUpdateMutation(\n  $input: UpdateDocumentInput!\n) {\n  updateDocument(input: $input) {\n    document {\n      id\n      title\n      owner {\n        id\n        fullName\n      }\n    }\n  }\n}\n"
+    "text": "mutation DocumentDetailPageUpdateMutation(\n  $input: UpdateDocumentInput!\n) {\n  updateDocument(input: $input) {\n    document {\n      id\n      title\n      documentType\n      owner {\n        id\n        fullName\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "9d204fe6a01448bd05d68699c06d18f9";
+(node as any).hash = "507a2bd40b923d2064fdd864f16f29aa";
 
 export default node;

apps/console/src/pages/organizations/documents/dialogs/__generated__/UpdateDocumentDialogMutation.graphql.ts

@@ -1,144 +0,0 @@
-/**
- * @generated SignedSource<<5b79ea2de8e0c11b167b479ef72558c6>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-import { ConcreteRequest } from 'relay-runtime';
-export type DocumentType = "ISMS" | "OTHER" | "POLICY";
-export type UpdateDocumentInput = {
-  content?: string | null | undefined;
-  createdBy?: string | null | undefined;
-  documentType?: DocumentType | null | undefined;
-  id: string;
-  ownerId?: string | null | undefined;
-  showOnTrustCenter?: boolean | null | undefined;
-  title?: string | null | undefined;
-};
-export type UpdateDocumentDialogMutation$variables = {
-  input: UpdateDocumentInput;
-};
-export type UpdateDocumentDialogMutation$data = {
-  readonly updateDocument: {
-    readonly document: {
-      readonly id: string;
-      readonly owner: {
-        readonly fullName: string;
-        readonly id: string;
-      };
-      readonly title: string;
-    };
-  };
-};
-export type UpdateDocumentDialogMutation = {
-  response: UpdateDocumentDialogMutation$data;
-  variables: UpdateDocumentDialogMutation$variables;
-};
-
-const node: ConcreteRequest = (function(){
-var v0 = [
-  {
-    "defaultValue": null,
-    "kind": "LocalArgument",
-    "name": "input"
-  }
-],
-v1 = {
-  "alias": null,
-  "args": null,
-  "kind": "ScalarField",
-  "name": "id",
-  "storageKey": null
-},
-v2 = [
-  {
-    "alias": null,
-    "args": [
-      {
-        "kind": "Variable",
-        "name": "input",
-        "variableName": "input"
-      }
-    ],
-    "concreteType": "UpdateDocumentPayload",
-    "kind": "LinkedField",
-    "name": "updateDocument",
-    "plural": false,
-    "selections": [
-      {
-        "alias": null,
-        "args": null,
-        "concreteType": "Document",
-        "kind": "LinkedField",
-        "name": "document",
-        "plural": false,
-        "selections": [
-          (v1/*: any*/),
-          {
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "title",
-            "storageKey": null
-          },
-          {
-            "alias": null,
-            "args": null,
-            "concreteType": "People",
-            "kind": "LinkedField",
-            "name": "owner",
-            "plural": false,
-            "selections": [
-              (v1/*: any*/),
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "fullName",
-                "storageKey": null
-              }
-            ],
-            "storageKey": null
-          }
-        ],
-        "storageKey": null
-      }
-    ],
-    "storageKey": null
-  }
-];
-return {
-  "fragment": {
-    "argumentDefinitions": (v0/*: any*/),
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "UpdateDocumentDialogMutation",
-    "selections": (v2/*: any*/),
-    "type": "Mutation",
-    "abstractKey": null
-  },
-  "kind": "Request",
-  "operation": {
-    "argumentDefinitions": (v0/*: any*/),
-    "kind": "Operation",
-    "name": "UpdateDocumentDialogMutation",
-    "selections": (v2/*: any*/)
-  },
-  "params": {
-    "cacheID": "27831214e4f4c0a988553abccf99d547",
-    "id": null,
-    "metadata": {},
-    "name": "UpdateDocumentDialogMutation",
-    "operationKind": "mutation",
-    "text": "mutation UpdateDocumentDialogMutation(\n  $input: UpdateDocumentInput!\n) {\n  updateDocument(input: $input) {\n    document {\n      id\n      title\n      owner {\n        id\n        fullName\n      }\n    }\n  }\n}\n"
-  }
-};
-})();
-
-(node as any).hash = "ea3902438d59438b49c5d34edadbe5e4";
-
-export default node;