From ad525aa347d0cca4853927f7d4b34950e3db5fde Mon Sep 17 00:00:00 2001
From: ogzhanolguncu <ogzhan11@gmail.com>
Date: Fri, 6 Dec 2024 19:20:55 +0300
Subject: [PATCH 1/3] fix: add logic

---
 apps/dashboard/components/array-input.tsx | 126 +++++++++-------------
 1 file changed, 53 insertions(+), 73 deletions(-)

diff --git a/apps/dashboard/components/array-input.tsx b/apps/dashboard/components/array-input.tsx
index 4481a853ff..50e4ffab31 100644
--- a/apps/dashboard/components/array-input.tsx
+++ b/apps/dashboard/components/array-input.tsx
@@ -1,11 +1,8 @@
-"use client";
-
-import { CornerDownLeft, X } from "lucide-react";
-import * as React from "react";
-
 import { Badge } from "@/components/ui/badge";
-import { Command } from "@/components/ui/command";
-import { Command as CommandPrimitive } from "cmdk";
+import { CornerDownLeft, X } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 
 type Props = {
   title?: string;
@@ -15,85 +12,68 @@ type Props = {
 };
 
 export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected, setSelected }) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const [inputValue, setInputValue] = React.useState("");
+  console.log(selected);
+  const [items, setItems] = useState<string[]>(selected);
+  const [inputValue, setInputValue] = useState("");
 
-  const handleUnselect = (o: string) => {
-    setSelected(selected.filter((s) => s !== o));
+  const handleUnselect = (item: string) => {
+    const newItems = items.filter((i) => i !== item);
+    setItems(newItems);
+    setSelected(newItems);
   };
 
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      const input = inputRef.current;
-      if (input) {
-        if (e.key === "Delete" || e.key === "Backspace") {
-          if (input.value === "") {
-            setSelected(selected.slice(0, -1));
-          }
-        }
-        if (e.key === "Enter" && input.value !== "") {
-          setSelected(Array.from(new Set([...selected, input.value])));
-          setInputValue("");
-        }
-        // This is not a default behaviour of the <input /> field
-        if (e.key === "Escape") {
-          input.blur();
-        }
+  const handleAdd = () => {
+    if (inputValue.trim()) {
+      const newItems = Array.from(new Set([...items, inputValue.trim()]));
+      setItems(newItems);
+      setSelected(newItems);
+      setInputValue("");
+    }
+  };
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleAdd();
       }
     },
-    [selected, setSelected],
+    [inputValue, items],
   );
 
   return (
-    <Command onKeyDown={handleKeyDown} className="overflow-visible bg-transparent">
-      <div className="flex items-center h-8 p-1 text-sm border rounded-md group focus-within:border-primary">
-        <div className="flex flex-wrap items-center w-full gap-1 px-2">
-          {title ? <span className="mr-1 text-xs font-medium">{title}:</span> : null}
-          {selected.map((o) => {
-            return (
-              <Badge key={o} variant="secondary">
-                {o}
-                <button
-                  type="button"
-                  className="ml-1 rounded-full outline-none"
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      handleUnselect(o);
-                    }
-                  }}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                  onClick={() => handleUnselect(o)}
-                >
-                  <X className="w-3 h-3 text-content-muted hover:text-content" />
-                </button>
-              </Badge>
-            );
-          })}
-          {/* Avoid having the "Search" Icon */}
-          <CommandPrimitive.Input
-            ref={inputRef}
+    <div className="bg-transparent flex flex-col relative">
+      <div>
+        {title && <span className="text-xs font-medium absolute -top-5">{title}:</span>}
+        <div className="flex gap-1 absolute left-[68px] -top-[26px]">
+          {items?.map((item) => (
+            <Badge key={item} variant="secondary">
+              {item}
+              <button
+                type="button"
+                className="ml-1 rounded-full outline-none"
+                onClick={() => handleUnselect(item)}
+              >
+                <X className="w-3 h-3 text-content-muted hover:text-content" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      </div>
+      <div className="flex items-center justify-center gap-2">
+        <div className="flex flex-wrap items-center w-full gap-1">
+          <Input
             value={inputValue}
-            onValueChange={setInputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
             placeholder={placeholder}
             className="flex-1 w-full bg-transparent outline-none placeholder:text-content-subtle"
           />
         </div>
-        <button
-          type="button"
-          className="inline-flex items-center rounded-md border px-2 py-0.5 text-xs border-border bg-secondary text-secondary-foreground hover:bg-secondary/20 font-normal"
-          onClick={() => {
-            if (inputValue !== "") {
-              setSelected(Array.from(new Set([...selected, inputValue])));
-              setInputValue("");
-            }
-          }}
-        >
-          <CornerDownLeft className="w-3 h-4" />
-        </button>
+        <Button size="icon" variant="secondary" onClick={handleAdd}>
+          <CornerDownLeft className="w-4 h-4" />
+        </Button>
       </div>
-    </Command>
+    </div>
   );
 };

From 97d45484087247e65025ef1630789631ba81ed34 Mon Sep 17 00:00:00 2001
From: Michael Silva <michael@unkey.dev>
Date: Fri, 6 Dec 2024 12:08:10 -0500
Subject: [PATCH 2/3] Style changes

---
 .../ratelimits/[namespaceId]/filters.tsx      |  6 ++---
 apps/dashboard/components/array-input.tsx     | 22 ++++++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx
index 1ffe29d7d6..1dc84658f8 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx
@@ -46,9 +46,9 @@ export const Filters: React.FC<{ identifier?: boolean; interval?: boolean }> = (
   );
 
   return (
-    <div className="flex items-center justify-between gap-2">
+    <div className="flex flex-row items-end justify-between gap-2">
       {props.identifier ? (
-        <div>
+        <div className="flex-col align-end">
           <ArrayInput
             title="Identifiers"
             selected={identifier}
@@ -60,7 +60,7 @@ export const Filters: React.FC<{ identifier?: boolean; interval?: boolean }> = (
         </div>
       ) : null}{" "}
       {props.interval ? (
-        <div>
+        <div className="flex flex-col">
           <Select
             value={interval}
             onValueChange={(i: Interval) => {
diff --git a/apps/dashboard/components/array-input.tsx b/apps/dashboard/components/array-input.tsx
index 50e4ffab31..ec19a34224 100644
--- a/apps/dashboard/components/array-input.tsx
+++ b/apps/dashboard/components/array-input.tsx
@@ -1,6 +1,6 @@
 import { Badge } from "@/components/ui/badge";
 import { CornerDownLeft, X } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 
@@ -12,8 +12,11 @@ type Props = {
 };
 
 export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected, setSelected }) => {
-  console.log(selected);
   const [items, setItems] = useState<string[]>(selected);
+
+  useEffect(() => {
+    setItems(selected);
+  }, [selected]);
   const [inputValue, setInputValue] = useState("");
 
   const handleUnselect = (item: string) => {
@@ -38,21 +41,24 @@ export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected, setS
         handleAdd();
       }
     },
-    [inputValue, items],
+    [handleAdd],
   );
 
   return (
-    <div className="bg-transparent flex flex-col relative">
-      <div>
-        {title && <span className="text-xs font-medium absolute -top-5">{title}:</span>}
-        <div className="flex gap-1 absolute left-[68px] -top-[26px]">
+    <div className="bg-transparent flex-col relative max-w-96">
+      <div className="flex flex-row gap-2">
+        <div className="flex flex-col justify-end">
+          {title && <span className="text-xs font-medium mb-2 ">{title}:</span>}
+        </div>
+        <div className="flex flex-wrap gap-1 mb-2" role="list" aria-label="Selected items">
           {items?.map((item) => (
-            <Badge key={item} variant="secondary">
+            <Badge key={item} variant="secondary" role="listitem">
               {item}
               <button
                 type="button"
                 className="ml-1 rounded-full outline-none"
                 onClick={() => handleUnselect(item)}
+                aria-label={`Remove ${item}`}
               >
                 <X className="w-3 h-3 text-content-muted hover:text-content" />
               </button>

From 658080c0294dc35fe7be420acfbfc46c7e5febf3 Mon Sep 17 00:00:00 2001
From: Michael Silva <michael@unkey.dev>
Date: Fri, 6 Dec 2024 12:16:40 -0500
Subject: [PATCH 3/3] Accessability item

---
 apps/dashboard/components/array-input.tsx | 28 ++++++++++++-----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/components/array-input.tsx b/apps/dashboard/components/array-input.tsx
index ec19a34224..6f2282fdcf 100644
--- a/apps/dashboard/components/array-input.tsx
+++ b/apps/dashboard/components/array-input.tsx
@@ -50,21 +50,23 @@ export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected, setS
         <div className="flex flex-col justify-end">
           {title && <span className="text-xs font-medium mb-2 ">{title}:</span>}
         </div>
-        <div className="flex flex-wrap gap-1 mb-2" role="list" aria-label="Selected items">
+        <ul className="flex flex-wrap gap-1 mb-2 list-none p-0" aria-label="Selected items">
           {items?.map((item) => (
-            <Badge key={item} variant="secondary" role="listitem">
-              {item}
-              <button
-                type="button"
-                className="ml-1 rounded-full outline-none"
-                onClick={() => handleUnselect(item)}
-                aria-label={`Remove ${item}`}
-              >
-                <X className="w-3 h-3 text-content-muted hover:text-content" />
-              </button>
-            </Badge>
+            <li key={item}>
+              <Badge variant="secondary">
+                {item}
+                <button
+                  type="button"
+                  className="ml-1 rounded-full outline-none"
+                  onClick={() => handleUnselect(item)}
+                  aria-label={`Remove ${item}`}
+                >
+                  <X className="w-3 h-3 text-content-muted hover:text-content" />
+                </button>
+              </Badge>
+            </li>
           ))}
-        </div>
+        </ul>
       </div>
       <div className="flex items-center justify-center gap-2">
         <div className="flex flex-wrap items-center w-full gap-1">