From 6bc4040ea4fabebce03f93ec419bd0837e18f572 Mon Sep 17 00:00:00 2001
From: Justin Brooks <jsbroks@gmail.com>
Date: Sun, 22 Sep 2024 16:49:05 -0400
Subject: [PATCH] clean up metadata group mutation dialogs

---
 .../CreateMetadataGroupDialog.tsx             | 75 +++++++------------
 .../EditMetadataGroupDialog.tsx               | 75 +++++++------------
 .../NullCombinationsExample.tsx               | 28 -------
 3 files changed, 58 insertions(+), 120 deletions(-)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/NullCombinationsExample.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
index 89afbf0f..fccdb797 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
@@ -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 {
@@ -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),
@@ -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}
@@ -151,30 +144,30 @@ 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>
 
@@ -182,21 +175,11 @@ export const CreateMetadataGroupDialog: React.FC<{
               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>
               )}
             />
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
index ff6c94a7..35c69985 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
@@ -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 {
@@ -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),
@@ -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}
@@ -156,30 +149,30 @@ 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>
 
@@ -187,21 +180,11 @@ export const EditMetadataGroupDialog: React.FC<{
               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>
               )}
             />
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/NullCombinationsExample.tsx b/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/NullCombinationsExample.tsx
deleted file mode 100644
index 54fcc74c..00000000
--- a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/NullCombinationsExample.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export const NullCombinationsExample = () => (
-  <div className="mt-2 flex flex-col rounded-md bg-neutral-950 px-2 py-1">
-    <span className="inline-flex">
-      {"{"}&nbsp;
-      <p className="text-red-400">"env":&nbsp;</p>
-      <p className="text-neutral-500">null,&nbsp;</p>
-      <p className="text-red-400">"tier":&nbsp;</p>
-      <p className="text-green-400">"3"&nbsp;</p>
-      {"}"}
-    </span>
-    <span className="inline-flex">
-      {"{"}&nbsp;
-      <p className="text-red-400">"env":&nbsp;</p>
-      <p className="text-green-400">"dev",&nbsp;</p>
-      <p className="text-red-400">"tier":&nbsp;</p>
-      <p className="text-neutral-500">null&nbsp;</p>
-      {"}"}
-    </span>
-    <span className="inline-flex">
-      {"{"}&nbsp;
-      <p className="text-red-400">"env":&nbsp;</p>
-      <p className="text-neutral-500">null,&nbsp;</p>
-      <p className="text-red-400">"tier":&nbsp;</p>
-      <p className="text-neutral-500">null&nbsp;</p>
-      {"}"}
-    </span>
-  </div>
-);