Merge pull request #867 from daninge98/improve-tag-colors-and-sorting

Improve tag colors and sorting on dashboard page

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -110,6 +110,11 @@ export const SecretInputRow = memo(
       append
     } = useFieldArray({ control, name: `secrets.${index}.tags` });
 
+    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))
+
     // 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) => (
+            {secretTags.map(({ id, _id, slug }, i) => {
-              <Tag
+              // This map lookup shouldn't ever fail, but if it does we default to the first color
-                className={cx(
+              const tagColor = tagColorByTagId.get(_id) || tagColors[0]
-                  tagColors[i % tagColors.length].bg,
+              return (
-                  tagColors[i % tagColors.length].text
+                <Tag
-                )}
+                  className={cx(
-                isDisabled={isReadOnly || isAddOnly || isRollbackMode}
+                    tagColor.bg,
-                onClose={() => remove(i)}
+                    tagColor.text
-                key={id}
+                  )}
-              >
+                  isDisabled={isReadOnly || isAddOnly || isRollbackMode}
-                {slug}
+                  onClose={() => remove(i)}
-              </Tag>
+                  key={id}
-            ))}
+                >
+                  {slug}
+                </Tag>)
+            })}
             <div className="w-0 overflow-hidden group-hover:w-6">
               <Tooltip content="Copy value">
                 <IconButton