add export variables / user groups

frontend/src/components/export.tsx

@@ -16,10 +16,12 @@ export const ExportButton = ({
   targets,
   user_groups,
   tags,
+  include_variables,
 }: {
   targets?: Types.ResourceTarget[];
   user_groups?: string[];
   tags?: string[];
+  include_variables?: boolean;
 }) => {
   const [open, setOpen] = useState(false);
   return (
@@ -34,8 +36,12 @@ export const ExportButton = ({
         <DialogHeader>
           <DialogTitle>Export to Toml</DialogTitle>
         </DialogHeader>
-        {targets || user_groups ? (
-          <ExportTargetsLoader targets={targets} user_groups={user_groups} />
+        {targets || user_groups || include_variables ? (
+          <ExportTargetsLoader
+            targets={targets}
+            user_groups={user_groups}
+            include_variables={include_variables}
+          />
         ) : (
           <ExportAllLoader tags={tags} />
         )}
@@ -45,21 +51,33 @@ export const ExportButton = ({
 };
 
 const ExportTargetsLoader = ({
-  user_groups,
   targets,
+  user_groups,
+  include_variables,
 }: {
-  user_groups?: string[];
   targets?: Types.ResourceTarget[];
+  user_groups?: string[];
+  include_variables?: boolean;
 }) => {
   const { data, isPending } = useRead("ExportResourcesToToml", {
     targets: targets ? targets : [],
     user_groups: user_groups ? user_groups : [],
+    include_variables,
   });
   return <ExportPre loading={isPending} content={data?.toml} />;
 };
 
-const ExportAllLoader = ({ tags }: { tags?: string[] }) => {
-  const { data, isPending } = useRead("ExportAllResourcesToToml", { tags });
+const ExportAllLoader = ({
+  tags,
+  include_variables,
+}: {
+  tags?: string[];
+  include_variables?: boolean;
+}) => {
+  const { data, isPending } = useRead("ExportAllResourcesToToml", {
+    tags,
+    include_variables,
+  });
   return <ExportPre loading={isPending} content={data?.toml} />;
 };
 

frontend/src/pages/settings/users.tsx

@@ -1,3 +1,4 @@
+import { ExportButton } from "@components/export";
 import { Section } from "@components/layouts";
 import { NewServiceUser, NewUserGroup } from "@components/users/new";
 import { UserTable } from "@components/users/table";
@@ -18,7 +19,18 @@ export const UsersPage = ({ search }: { search: string }) => {
       <Section
         title="User Groups"
         icon={<Users className="w-4 h-4" />}
-        actions={<NewUserGroup />}
+        actions={
+          <div className="flex items-center gap-4">
+            {groups && groups.length ? (
+              <ExportButton
+                user_groups={groups
+                  ?.map((group) => group._id?.$oid!)
+                  .filter((id) => id)}
+              />
+            ) : undefined}
+            <NewUserGroup />
+          </div>
+        }
       >
         <DataTable
           tableKey="user-groups"

frontend/src/pages/settings/variables.tsx

@@ -1,3 +1,4 @@
+import { ExportButton } from "@components/export";
 import { ConfirmButton, TextUpdateMenu } from "@components/util";
 import {
   useInvalidate,
@@ -61,12 +62,15 @@ export const Variables = () => {
   });
   return (
     <div className="flex flex-col gap-4">
-      <Input
-        placeholder="search..."
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        className="w-[200px] lg:w-[300px]"
-      />
+      <div className="flex items-center gap-4">
+        <Input
+          placeholder="search..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-[200px] lg:w-[300px]"
+        />
+        <ExportButton include_variables />
+      </div>
 
       {updateMenuData && (
         <TextUpdateMenu