export individual resources

frontend/src/components/export.tsx

@@ -12,7 +12,10 @@ import { FileDown, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { CopyButton } from "./util";
 
-export const ExportButton = ({}: {
+export const ExportButton = ({
+  target,
+  user_group,
+}: {
   target?: Types.ResourceTarget;
   user_group?: string;
 }) => {
@@ -21,21 +24,39 @@ export const ExportButton = ({}: {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" className="flex gap-2 items-center">
-          Export
+          Toml
           <FileDown className="w-4 h-4" />
         </Button>
       </DialogTrigger>
       <DialogContent className="min-w-[600px]">
         <DialogHeader>
-          <DialogTitle>Export to toml</DialogTitle>
+          <DialogTitle>Export to Toml</DialogTitle>
         </DialogHeader>
-        <ExportLoader />
+        {target || user_group ? (
+          <ExportTargetLoader target={target} user_group={user_group} />
+        ) : (
+          <ExportAllLoader />
+        )}
       </DialogContent>
     </Dialog>
   );
 };
 
-const ExportLoader = () => {
+const ExportTargetLoader = ({
+  user_group,
+  target,
+}: {
+  user_group?: string;
+  target?: Types.ResourceTarget;
+}) => {
+  const { data, isPending } = useRead("ExportResourcesToToml", {
+    targets: target ? [target] : [],
+    user_groups: user_group ? [user_group] : [],
+  });
+  return <ExportPre loading={isPending} content={data?.toml} />;
+};
+
+const ExportAllLoader = () => {
   const { data, isPending } = useRead("ExportAllResourcesToToml", {});
   return <ExportPre loading={isPending} content={data?.toml} />;
 };

frontend/src/pages/resource.tsx

@@ -1,3 +1,4 @@
+import { ExportButton } from "@components/export";
 import { Page, Section } from "@components/layouts";
 import { ResourceComponents } from "@components/resources";
 import {
@@ -55,6 +56,7 @@ export const Resource = () => {
                 | <Info key={i} id={id} />
               </Fragment>
             ))}
+            | <ExportButton target={{ type, id }} />
           </div>
           <ResourceDescription type={type} id={id} />
         </div>

frontend/src/pages/user-group.tsx

@@ -1,3 +1,4 @@
+import { ExportButton } from "@components/export";
 import { Page, Section } from "@components/layouts";
 import { PermissionsTable } from "@components/users/permissions-table";
 import { UserTable } from "@components/users/table";
@@ -15,7 +16,7 @@ import { Input } from "@ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@ui/popover";
 import { useToast } from "@ui/use-toast";
 import { PlusCircle, Save, SearchX, UserCircle2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 
 export const UserGroupPage = () => {
@@ -26,10 +27,7 @@ export const UserGroupPage = () => {
     (group) => group._id?.$oid === group_id
   );
   const users = useRead("ListUsers", {}).data;
-  const [name, setName] = useState<string>();
-  useEffect(() => {
-    if (group) setName(group.name);
-  }, [group?.name]);
+  const [name, setName] = useState("");
   const renameMutate = useWrite("RenameUserGroup", {
     onSuccess: () => {
       inv(["ListUserGroups"]);
@@ -52,25 +50,7 @@ export const UserGroupPage = () => {
   }).mutate;
   if (!group) return null;
   return (
-    <Page
-      title={
-        <div className="flex gap-4 items-center">
-          <Input
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") rename();
-            }}
-            className="text-3xl h-fit p-2"
-          />
-          {name !== group.name && (
-            <Button size="icon" onClick={rename}>
-              <Save className="w-4 h-4" />
-            </Button>
-          )}
-        </div>
-      }
-    >
+    <Page title={group.name} actions={<ExportButton user_group={group_id} />}>
       <Section
         title="Users"
         icon={<UserCircle2 className="w-4 h-4" />}
@@ -88,6 +68,23 @@ export const UserGroupPage = () => {
         />
       </Section>
       <PermissionsTable user_target={{ type: "UserGroup", id: group_id }} />
+      <div className="flex justify-end w-full">
+        <div className="flex items-center gap-2">
+          <h2 className="text-muted-foreground">Rename</h2>
+          <Input
+            placeholder="Enter new name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") rename();
+            }}
+            className="w-[300px]"
+          />
+          <Button variant="secondary" onClick={rename}>
+            <Save className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
     </Page>
   );
 };