Skip to content

Commit

Permalink
clean up metadata group mutation dialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsbroks
jsbroks committed Sep 22, 2024
1 parent bc77b21 commit 6bc4040
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 120 deletions.
75 changes: 29 additions & 46 deletions ...ce/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@

import { useState } from "react";
import { useRouter } from "next/navigation";
import { TbBulb, TbX } from "react-icons/tb";
import { TbX } from "react-icons/tb";
import { z } from "zod";

import { Alert, AlertDescription, AlertTitle } from "@ctrlplane/ui/alert";
import { Badge } from "@ctrlplane/ui/badge";
import { Button } from "@ctrlplane/ui/button";
import {
Expand All @@ -32,7 +31,6 @@ import { Textarea } from "@ctrlplane/ui/textarea";

import { api } from "~/trpc/react";
import { MetadataFilterInput } from "./MetadataFilterInput";
import { NullCombinationsExample } from "./NullCombinationsExample";

const metadataGroupFormSchema = z.object({
name: z.string().min(1),
Expand Down Expand Up @@ -125,13 +123,8 @@ export const CreateMetadataGroupDialog: React.FC<{

<div>
<Label>Keys</Label>
{fields.length === 0 && (
<p className="h-[30px] text-xs text-muted-foreground">
No keys added
</p>
)}
{fields.length > 0 && (
<div className="flex flex-wrap gap-1">
<div className="mb-1 flex flex-wrap gap-1">
{fields.map((field, index) => (
<Badge
key={field.id}
Expand All @@ -151,52 +144,42 @@ export const CreateMetadataGroupDialog: React.FC<{
))}
</div>
)}
</div>

<div className="flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
<div className="mt-1 flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
</div>
</div>
</div>

<FormField
control={form.control}
name="includeNullCombinations"
render={({ field: { value, onChange } }) => (
<FormItem className="flex flex-col gap-2">
<FormLabel>Include Null Combinations?</FormLabel>
<Alert variant="secondary">
<TbBulb className="h-5 w-5" />
<AlertTitle>Null Combinations</AlertTitle>
<AlertDescription>
If enabled, combinations with null values will be
included. For example, if the keys "env" and "tier" are
selected, the following combinations will be tracked in
this metadata group: <NullCombinationsExample />
</AlertDescription>
</Alert>
<FormControl>
<FormItem className="flex items-center gap-2">
<FormControl className="mt-2">
<Switch checked={value} onCheckedChange={onChange} />
</FormControl>
</FormControl>{" "}
<FormLabel>Include Null Combinations?</FormLabel>
</FormItem>
)}
/>
Expand Down
75 changes: 29 additions & 46 deletions ...vice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
import type { TargetMetadataGroup } from "@ctrlplane/db/schema";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { TbBulb, TbX } from "react-icons/tb";
import { TbX } from "react-icons/tb";
import { z } from "zod";

import { Alert, AlertDescription, AlertTitle } from "@ctrlplane/ui/alert";
import { Badge } from "@ctrlplane/ui/badge";
import { Button } from "@ctrlplane/ui/button";
import {
Expand All @@ -33,7 +32,6 @@ import { Textarea } from "@ctrlplane/ui/textarea";

import { api } from "~/trpc/react";
import { MetadataFilterInput } from "./MetadataFilterInput";
import { NullCombinationsExample } from "./NullCombinationsExample";

const metadataGroupFormSchema = z.object({
name: z.string().min(1),
Expand Down Expand Up @@ -130,13 +128,8 @@ export const EditMetadataGroupDialog: React.FC<{

<div>
<Label>Keys</Label>
{fields.length === 0 && (
<p className="h-[30px] text-xs text-muted-foreground">
No keys added
</p>
)}
{fields.length > 0 && (
<div className="flex flex-wrap gap-1">
<div className="mb-1 flex flex-wrap gap-1">
{fields.map((field, index) => (
<Badge
key={field.id}
Expand All @@ -156,52 +149,42 @@ export const EditMetadataGroupDialog: React.FC<{
))}
</div>
)}
</div>

<div className="flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
<div className="mt-1 flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
</div>
</div>
</div>

<FormField
control={form.control}
name="includeNullCombinations"
render={({ field: { value, onChange } }) => (
<FormItem className="flex flex-col gap-2">
<FormLabel>Include Null Combinations?</FormLabel>
<Alert variant="secondary">
<TbBulb className="h-5 w-5" />
<AlertTitle>Null Combinations</AlertTitle>
<AlertDescription>
If enabled, combinations with null values will be
included. For example, if the keys "env" and "tier" are
selected, the following combinations will be tracked in
this metadata group: <NullCombinationsExample />
</AlertDescription>
</Alert>
<FormControl>
<FormItem className="flex items-center gap-2">
<FormControl className="mt-2">
<Switch checked={value} onCheckedChange={onChange} />
</FormControl>
</FormControl>{" "}
<FormLabel>Include Null Combinations?</FormLabel>
</FormItem>
)}
/>
Expand Down
28 changes: 0 additions & 28 deletions ...vice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/NullCombinationsExample.tsx
View file

This file was deleted.

0 comments on commit 6bc4040

Please sign in to comment.