From b000a78f74e1e24c18497e0c5a587fb864d9adc7 Mon Sep 17 00:00:00 2001
From: Daniel Inge <daninge98@gmail.com>
Date: Tue, 15 Aug 2023 18:39:15 -0400
Subject: [PATCH 1/2] Change tag color assignments and sorting

---
 .../SecretInputRow/SecretInputRow.tsx         | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
index a7ccec3b4..37b9edabb 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -110,6 +110,11 @@ export const SecretInputRow = memo(
       append
     } = useFieldArray({ control, name: `secrets.${index}.tags` });
 
+    const colorByTagId = new Map((wsTags || []).map((wsTag, i) => [wsTag._id, tagColors[i % tagColors.length]]))
+
+    // display the tags in alphabetical order
+    secretTags.sort((a, b) => a.name.localeCompare(b.name))
+
     // to get details on a secret
     const overrideAction = useWatch({
       control,
@@ -321,19 +326,22 @@ export const SecretInputRow = memo(
         </td>
         <td className="min-w-sm flex">
           <div className="flex h-8 items-center pl-2">
-            {secretTags.map(({ id, slug }, i) => (
-              <Tag
-                className={cx(
-                  tagColors[i % tagColors.length].bg,
-                  tagColors[i % tagColors.length].text
-                )}
-                isDisabled={isReadOnly || isAddOnly || isRollbackMode}
-                onClose={() => remove(i)}
-                key={id}
-              >
-                {slug}
-              </Tag>
-            ))}
+            {secretTags.map(({ id, _id, slug }, i) => {
+              // This map lookup shouldn't ever fail, but if it does we default to the first color
+              const tagColor = colorByTagId.get(_id) || tagColors[0]
+              return (
+                <Tag
+                  className={cx(
+                    tagColor.bg,
+                    tagColor.text
+                  )}
+                  isDisabled={isReadOnly || isAddOnly || isRollbackMode}
+                  onClose={() => remove(i)}
+                  key={id}
+                >
+                  {slug}
+                </Tag>)
+            })}
             <div className="w-0 overflow-hidden group-hover:w-6">
               <Tooltip content="Copy value">
                 <IconButton
@@ -387,9 +395,9 @@ export const SecretInputRow = memo(
                               className="mr-0 data-[state=checked]:bg-primary"
                               id="autoCapitalization"
                               isChecked={selectedTagIds?.[wsTag.slug]}
-                              onCheckedChange={() => {}}
+                              onCheckedChange={() => { }}
                             >
-                              {}
+                              { }
                             </Checkbox>
                           }
                           key={wsTag._id}

From 3436e6be0ebe37708b3e0e8baabf55834ce4e468 Mon Sep 17 00:00:00 2001
From: Daniel Inge <daninge98@gmail.com>
Date: Tue, 15 Aug 2023 18:46:17 -0400
Subject: [PATCH 2/2] Small formatting changes

---
 .../components/SecretInputRow/SecretInputRow.tsx          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
index 37b9edabb..65e5436b7 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -110,7 +110,7 @@ export const SecretInputRow = memo(
       append
     } = useFieldArray({ control, name: `secrets.${index}.tags` });
 
-    const colorByTagId = new Map((wsTags || []).map((wsTag, i) => [wsTag._id, tagColors[i % tagColors.length]]))
+    const tagColorByTagId = new Map((wsTags || []).map((wsTag, i) => [wsTag._id, tagColors[i % tagColors.length]]))
 
     // display the tags in alphabetical order
     secretTags.sort((a, b) => a.name.localeCompare(b.name))
@@ -328,7 +328,7 @@ export const SecretInputRow = memo(
           <div className="flex h-8 items-center pl-2">
             {secretTags.map(({ id, _id, slug }, i) => {
               // This map lookup shouldn't ever fail, but if it does we default to the first color
-              const tagColor = colorByTagId.get(_id) || tagColors[0]
+              const tagColor = tagColorByTagId.get(_id) || tagColors[0]
               return (
                 <Tag
                   className={cx(
@@ -395,9 +395,9 @@ export const SecretInputRow = memo(
                               className="mr-0 data-[state=checked]:bg-primary"
                               id="autoCapitalization"
                               isChecked={selectedTagIds?.[wsTag.slug]}
-                              onCheckedChange={() => { }}
+                              onCheckedChange={() => {}}
                             >
-                              { }
+                              {}
                             </Checkbox>
                           }
                           key={wsTag._id}