@checkstack/catalog-frontend 0.3.11 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @checkstack/catalog-frontend
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [f676e11]
+  - @checkstack/ui@1.0.0
+  - @checkstack/common@0.6.2
+  - @checkstack/auth-frontend@0.5.9
+  - @checkstack/auth-common@0.5.5
+  - @checkstack/catalog-common@1.2.7
+  - @checkstack/frontend-api@0.3.5
+  - @checkstack/notification-common@0.2.5
+
+## 0.4.0
+
+### Minor Changes
+
+- e5079e1: Add contacts management to system editor
+
+  - **catalog-frontend**: New `ContactsEditor` component allows adding/removing platform users and external mailboxes as system contacts directly from the system editor dialog
+  - **catalog-common**: Added `instanceAccess` override to contacts RPC endpoints for correct single-resource RLAC checking
+  - **ui**: Fixed Tabs component to use `type="button"` to prevent form submission when used inside forms
+
+### Patch Changes
+
+- Updated dependencies [e5079e1]
+- Updated dependencies [9551fd7]
+  - @checkstack/catalog-common@1.2.6
+  - @checkstack/ui@0.5.3
+  - @checkstack/auth-frontend@0.5.8
+
 ## 0.3.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/catalog-frontend",
-  "version": "0.3.11",
+  "version": "0.4.1",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -9,12 +9,13 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "1.2.4",
-    "@checkstack/frontend-api": "0.3.3",
-    "@checkstack/auth-frontend": "0.5.6",
-    "@checkstack/common": "0.6.0",
-    "@checkstack/notification-common": "0.2.3",
-    "@checkstack/ui": "0.5.1",
+    "@checkstack/auth-common": "0.5.4",
+    "@checkstack/catalog-common": "1.2.6",
+    "@checkstack/frontend-api": "0.3.4",
+    "@checkstack/auth-frontend": "0.5.8",
+    "@checkstack/common": "0.6.1",
+    "@checkstack/notification-common": "0.2.4",
+    "@checkstack/ui": "0.5.3",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "lucide-react": "^0.344.0"
@@ -22,7 +23,7 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@checkstack/tsconfig": "0.0.2",
-    "@checkstack/scripts": "0.1.0"
+    "@checkstack/tsconfig": "0.0.3",
+    "@checkstack/scripts": "0.1.1"
   }
 }

package/src/components/ContactsEditor.tsx

@@ -0,0 +1,296 @@
+import React, { useState } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  useToast,
+  LoadingSpinner,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Tabs,
+  TabPanel,
+} from "@checkstack/ui";
+import {
+  usePluginClient,
+  useApi,
+  accessApiRef,
+} from "@checkstack/frontend-api";
+import { CatalogApi, type SystemContact } from "@checkstack/catalog-common";
+import { AuthApi, authAccess } from "@checkstack/auth-common";
+import { User, Mail, Trash2, Plus } from "lucide-react";
+
+interface ContactsEditorProps {
+  systemId: string;
+}
+
+interface UserDto {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export const ContactsEditor: React.FC<ContactsEditorProps> = ({ systemId }) => {
+  const catalogClient = usePluginClient(CatalogApi);
+  const authClient = usePluginClient(AuthApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+
+  // Check if user can search users
+  const { allowed: canSearchUsers, loading: accessLoading } =
+    accessApi.useAccess(authAccess.users.read);
+
+  // Form state
+  const [selectedUserId, setSelectedUserId] = useState("");
+  const [mailboxEmail, setMailboxEmail] = useState("");
+  const [label, setLabel] = useState("");
+  const [activeTab, setActiveTab] = useState("mailbox");
+
+  // Update active tab when permission loading completes
+  React.useEffect(() => {
+    if (!accessLoading && canSearchUsers) {
+      setActiveTab("user");
+    }
+  }, [accessLoading, canSearchUsers]);
+
+  // Fetch existing contacts
+  const {
+    data: contacts = [],
+    isLoading: contactsLoading,
+    refetch: refetchContacts,
+  } = catalogClient.getSystemContacts.useQuery({ systemId });
+
+  // Fetch users for selection (only if user has permission)
+  const { data: users = [] } = authClient.getUsers.useQuery(
+    {},
+    { enabled: canSearchUsers },
+  );
+
+  // Add contact mutation
+  const addContactMutation = catalogClient.addSystemContact.useMutation({
+    onSuccess: () => {
+      toast.success("Contact added successfully");
+      setSelectedUserId("");
+      setMailboxEmail("");
+      setLabel("");
+      void refetchContacts();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to add contact",
+      );
+    },
+  });
+
+  // Remove contact mutation
+  const removeContactMutation = catalogClient.removeSystemContact.useMutation({
+    onSuccess: () => {
+      toast.success("Contact removed");
+      void refetchContacts();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to remove contact",
+      );
+    },
+  });
+
+  const handleAddUserContact = () => {
+    if (!selectedUserId) {
+      toast.error("Please select a user");
+      return;
+    }
+
+    addContactMutation.mutate({
+      systemId,
+      type: "user",
+      userId: selectedUserId,
+      label: label.trim() || undefined,
+    });
+  };
+
+  const handleAddMailboxContact = () => {
+    if (!mailboxEmail.trim()) {
+      toast.error("Please enter an email address");
+      return;
+    }
+
+    // Basic email validation
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mailboxEmail.trim())) {
+      toast.error("Please enter a valid email address");
+      return;
+    }
+
+    addContactMutation.mutate({
+      systemId,
+      type: "mailbox",
+      email: mailboxEmail.trim(),
+      label: label.trim() || undefined,
+    });
+  };
+
+  const handleRemoveContact = (contactId: string) => {
+    removeContactMutation.mutate(contactId);
+  };
+
+  // Filter out users who are already contacts
+  const existingUserIds = new Set(
+    contacts
+      .filter((c): c is SystemContact & { type: "user" } => c.type === "user")
+      .map((c) => c.userId),
+  );
+  const availableUsers = (users as UserDto[]).filter(
+    (u) => !existingUserIds.has(u.id),
+  );
+
+  // Build tab items
+  const tabItems = [];
+  if (canSearchUsers) {
+    tabItems.push({ id: "user", label: "Add User" });
+  }
+  tabItems.push({ id: "mailbox", label: "Add Mailbox" });
+
+  if (contactsLoading || accessLoading) {
+    return (
+      <div className="flex justify-center py-4">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <Label>Contacts</Label>
+
+      {/* Existing Contacts List */}
+      {contacts.length > 0 && (
+        <div className="border rounded-lg divide-y">
+          {contacts.map((contact) => (
+            <div
+              key={contact.id}
+              className="flex items-center justify-between p-3"
+            >
+              <div className="flex items-center gap-2">
+                {contact.type === "user" ? (
+                  <User className="h-4 w-4 text-muted-foreground" />
+                ) : (
+                  <Mail className="h-4 w-4 text-muted-foreground" />
+                )}
+                <div>
+                  <span className="text-sm">
+                    {contact.type === "user"
+                      ? (contact.userName ?? contact.userId)
+                      : contact.email}
+                  </span>
+                  {contact.label && (
+                    <span className="text-xs text-muted-foreground ml-2">
+                      ({contact.label})
+                    </span>
+                  )}
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleRemoveContact(contact.id)}
+                disabled={removeContactMutation.isPending}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {contacts.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          No contacts assigned yet
+        </p>
+      )}
+
+      {/* Add Contact Section */}
+      <div className="border rounded-lg p-4 space-y-4">
+        <Tabs
+          items={tabItems}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        />
+
+        {canSearchUsers && (
+          <TabPanel id="user" activeTab={activeTab} className="space-y-3 pt-3">
+            <div className="space-y-2">
+              <Label htmlFor="user-select">Platform User</Label>
+              <Select value={selectedUserId} onValueChange={setSelectedUserId}>
+                <SelectTrigger id="user-select">
+                  <SelectValue placeholder="Select a user" />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableUsers.length === 0 ? (
+                    <SelectItem value="_none" disabled>
+                      No available users
+                    </SelectItem>
+                  ) : (
+                    availableUsers.map((user) => (
+                      <SelectItem key={user.id} value={user.id}>
+                        {user.name} ({user.email})
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="user-label">Label (optional)</Label>
+              <Input
+                id="user-label"
+                placeholder="e.g., Primary, On-Call"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+              />
+            </div>
+            <Button
+              onClick={handleAddUserContact}
+              disabled={!selectedUserId || addContactMutation.isPending}
+              size="sm"
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              Add User Contact
+            </Button>
+          </TabPanel>
+        )}
+
+        <TabPanel id="mailbox" activeTab={activeTab} className="space-y-3 pt-3">
+          <div className="space-y-2">
+            <Label htmlFor="mailbox-email">Email Address</Label>
+            <Input
+              id="mailbox-email"
+              type="email"
+              placeholder="team@example.com"
+              value={mailboxEmail}
+              onChange={(e) => setMailboxEmail(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="mailbox-label">Label (optional)</Label>
+            <Input
+              id="mailbox-label"
+              placeholder="e.g., Support, Escalation"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+            />
+          </div>
+          <Button
+            onClick={handleAddMailboxContact}
+            disabled={!mailboxEmail.trim() || addContactMutation.isPending}
+            size="sm"
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            Add Mailbox Contact
+          </Button>
+        </TabPanel>
+      </div>
+    </div>
+  );
+};

package/src/components/SystemDetailPage.tsx

@@ -24,7 +24,15 @@ import {
 } from "@checkstack/ui";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 
-import { Activity, Info, Users, FileJson, Calendar } from "lucide-react";
+import {
+  Activity,
+  Info,
+  Users,
+  FileJson,
+  Calendar,
+  Mail,
+  User,
+} from "lucide-react";
 
 const CATALOG_PLUGIN_ID = "catalog";
 
@@ -57,6 +65,12 @@ export const SystemDetailPage: React.FC = () => {
   const { data: groupsData, isLoading: groupsLoading } =
     catalogClient.getGroups.useQuery({});
 
+  // Fetch contacts for this system
+  const { data: contactsData } = catalogClient.getSystemContacts.useQuery(
+    { systemId: systemId ?? "" },
+    { enabled: !!systemId },
+  );
+
   // Find the system from the fetched data
   const system = systemsData?.systems.find((s) => s.id === systemId);
   const loading = systemsLoading || groupsLoading;
@@ -218,14 +232,6 @@ export const SystemDetailPage: React.FC = () => {
               {system.description || "No description provided"}
             </p>
           </div>
-          <div>
-            <label className="text-sm font-medium text-muted-foreground">
-              Owner
-            </label>
-            <p className="mt-1 text-foreground">
-              {system.owner || "Not assigned"}
-            </p>
-          </div>
           <div className="flex gap-6 text-sm">
             <div className="flex items-center gap-2 text-muted-foreground">
               <Calendar className="h-4 w-4" />
@@ -253,6 +259,51 @@ export const SystemDetailPage: React.FC = () => {
         </CardContent>
       </Card>
 
+      {/* Contacts Card */}
+      <Card className="border-border shadow-sm">
+        <CardHeader className="border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Mail className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-lg font-semibold">Contacts</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="p-6">
+          {!contactsData || contactsData.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              No contacts assigned to this system
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {contactsData.map((contact) => (
+                <div
+                  key={contact.id}
+                  className="flex items-center gap-2 text-sm"
+                >
+                  {contact.type === "user" ? (
+                    <User className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <Mail className="h-4 w-4 text-muted-foreground" />
+                  )}
+                  <a
+                    href={`mailto:${contact.type === "user" ? contact.userEmail : contact.email}`}
+                    className="text-primary hover:underline"
+                  >
+                    {contact.type === "user"
+                      ? (contact.userName ?? contact.userId)
+                      : contact.email}
+                  </a>
+                  {contact.label && (
+                    <span className="text-muted-foreground">
+                      ({contact.label})
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
       {/* Groups Card */}
       <Card className="border-border shadow-sm">
         <CardHeader className="border-b border-border bg-muted/30">

package/src/components/SystemEditor.tsx

@@ -12,6 +12,7 @@ import {
   useToast,
 } from "@checkstack/ui";
 import { TeamAccessEditor } from "@checkstack/auth-frontend";
+import { ContactsEditor } from "./ContactsEditor";
 
 interface SystemEditorProps {
   open: boolean;
@@ -28,7 +29,7 @@ export const SystemEditor: React.FC<SystemEditorProps> = ({
 }) => {
   const [name, setName] = useState(initialData?.name || "");
   const [description, setDescription] = useState(
-    initialData?.description || ""
+    initialData?.description || "",
   );
   const [loading, setLoading] = useState(false);
   const toast = useToast();
@@ -100,6 +101,9 @@ export const SystemEditor: React.FC<SystemEditorProps> = ({
               />
             </div>
 
+            {/* Contacts Editor - only shown for existing systems */}
+            {initialData?.id && <ContactsEditor systemId={initialData.id} />}
+
             {/* Team Access Editor - only shown for existing systems */}
             {initialData?.id && (
               <TeamAccessEditor
@@ -119,8 +123,8 @@ export const SystemEditor: React.FC<SystemEditorProps> = ({
               {loading
                 ? "Saving..."
                 : initialData
-                ? "Save Changes"
-                : "Create System"}
+                  ? "Save Changes"
+                  : "Create System"}
             </Button>
           </DialogFooter>
         </form>