Merge pull request #889 from EBEN4REAL/custom-tag-colors

Custom tag colors
2026-10-16 21:37:59 +00:00 · 2023-08-23 21:03:46 -07:00
parent 21f1648998 9fa28f5b5e
commit 8ee6710e9b
18 changed files with 443 additions and 137 deletions
@@ -297,6 +297,7 @@ export const DashboardPage = () => {
    resolver: yupResolver(schema)
  });

+
  const {
    register,
    control,
@@ -513,11 +514,12 @@ export const DashboardPage = () => {
  }, []);

  const onCreateWsTag = useCallback(
-    async (tagName: string) => {
+    async (tagName: string, tagColor: string) => {
      try {
        await createWsTag({
          workspaceID: workspaceId,
          tagName,
+          tagColor,
          tagSlug: tagName.replace(" ", "_")
        });
        handlePopUpClose("addTag");
@@ -58,7 +58,8 @@ const secretSchema = yup.object({
    yup.object({
      _id: yup.string().required(),
      name: yup.string().required(),
-      slug: yup.string().required()
+      slug: yup.string().required(),
+      tagColor: yup.string().nullable(),
    })
  ),
  overrideAction: yup.string().notRequired().oneOf(Object.values(SecretActionType)),
@@ -1,11 +1,21 @@
+import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import {
+  faCheck
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

-import { Button, FormControl, Input, ModalClose } from "@app/components/v2";
+import { Button, FormControl, Input, ModalClose, Tooltip } from "@app/components/v2";
+
+import { isValidHexColor } from "../../../../components/utilities/isValidHexColor";
+import { secretTagsColors } from "../../../../const"
+import { TagColor } from "../../../../hooks/api/tags/types";
+

 type Props = {
-  onCreateTag: (tagName: string) => Promise<void>;
+  onCreateTag: (tagName: string, tagColor: string) => Promise<void>;
 };

 const createTagSchema = yup.object({
@@ -23,11 +33,62 @@ export const CreateTagModal = ({ onCreateTag }: Props): JSX.Element => {
    resolver: yupResolver(createTagSchema)
  });

+  const [tagsColors] = useState<TagColor[]>(secretTagsColors)
+  const [selectedTagColor, setSelectedTagColor] = useState<TagColor>(tagsColors[0])
+  const [showHexInput, setShowHexInput] = useState<boolean>(false)
+  const [tagColor, setTagColor] = useState<string>("")
+
+
  const onFormSubmit = async ({ name }: FormData) => {
-    await onCreateTag(name);
+    await onCreateTag(name, tagColor);
    reset();
  };

+  useEffect(() => {
+    const clonedTagColors = [...tagsColors]
+    const selectedTagBgColor = clonedTagColors.find($tagColor => $tagColor.selected);
+
+    if (selectedTagBgColor) {
+      setSelectedTagColor(selectedTagBgColor);
+      setTagColor(selectedTagBgColor.hex);
+    }
+  }, [])
+
+  useEffect(() => {
+    const tagsList = document.querySelector(".secret-tags-wrapper")
+    const tagsHexWrapper = document.querySelector(".tags-hex-wrapper")
+
+    if (showHexInput) {
+      tagsList?.classList.add("hide-tags")
+      tagsList?.classList.remove("show-tags")
+      tagsHexWrapper?.classList.add("show-hex-input")
+      tagsHexWrapper?.classList.remove("hide-hex-input")
+    } else {
+      tagsList?.classList.remove("hide-tags")
+      tagsList?.classList.add("show-tags")
+      tagsHexWrapper?.classList.remove("show-hex-input")
+      tagsHexWrapper?.classList.add("hide-hex-input")
+    }
+  }, [showHexInput])
+
+
+  const handleColorChange = (clickedTagColor: TagColor) => {
+    const updatedTagColors = [...tagsColors];
+    const clickedTagColorIndex = updatedTagColors.findIndex(($tagColor) => $tagColor.id === clickedTagColor.id);
+    const updatedClickedTagColor = updatedTagColors[clickedTagColorIndex];
+
+    updatedTagColors.forEach((tgColor) => {
+      // eslint-disable-next-line no-param-reassign
+      tgColor.selected = false;
+    });
+
+    if (selectedTagColor.id !== clickedTagColor.id) {
+      updatedClickedTagColor.selected = !updatedClickedTagColor.selected;
+      setSelectedTagColor(updatedClickedTagColor);
+      setTagColor(updatedClickedTagColor.hex);
+    }
+  };
+
  return (
    <form onSubmit={handleSubmit(onFormSubmit)}>
      <Controller
@@ -40,6 +101,81 @@ export const CreateTagModal = ({ onCreateTag }: Props): JSX.Element => {
          </FormControl>
        )}
      />
+
+      <div className="mt-2">
+        <div className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400">Tag Color</div>
+        <div className="flex gap-2 h-[50px]">
+          <div className="w-[12%]   h-[2.813rem]	 inline-flex font-inter items-center justify-center border relative rounded-md border-mineshaft-500  bg-mineshaft-900 hover:bg-mineshaft-800">
+            <div className="w-[26px]  h-[26px] rounded-full" style={{ background: `${tagColor}` }} />
+          </div>
+
+          <div className="w-[88%] h-[2.813rem] flex-wrap inline-flex gap-3 items-center border  rounded-md border-mineshaft-500 bg-mineshaft-900 hover:bg-mineshaft-800 relative">
+            <div className="flex-wrap	 inline-flex gap-3 items-center secret-tags-wrapper pl-3">
+              {
+                tagsColors.map(($tagColor: TagColor) => {
+                  return (
+                    <div key={`tag-color-${$tagColor.id}`}>
+                      <Tooltip content={`${$tagColor.name}`}>
+                        <div className=" flex items-center justify-center w-[26px] h-[26px] hover:ring-offset-2 hover:ring-2 bg-[#bec2c8] border-2 p-2 hover:shadow-lg border-transparent hover:border-black rounded-full"
+                          key={`tag-${$tagColor.id}`}
+                          style={{ backgroundColor: `${$tagColor.hex}` }}
+
+                          onClick={() => handleColorChange($tagColor)}
+                          tabIndex={0} role="button"
+                          onKeyDown={() => { }}
+                        >
+                          {
+                            $tagColor.selected && <FontAwesomeIcon icon={faCheck} style={{ color: "#00000070" }} />
+                          }
+                        </div>
+                      </Tooltip>
+                    </div>
+                  )
+                })
+              }
+            </div>
+
+            <div className="flex items-center gap-2 px-2 tags-hex-wrapper" >
+              <div className="w-1/6	  flex items-center  relative rounded-md hover:bg-mineshaft-800">
+                {
+                  isValidHexColor(tagColor) && (
+                    <div className="w-[26px]  h-[26px] rounded-full flex items-center justify-center" style={{ background: `${tagColor}` }}>
+                      <FontAwesomeIcon icon={faCheck} style={{ color: "#00000070" }} />
+                    </div>
+                  )
+                }
+
+                {
+                  !isValidHexColor(tagColor) && (
+                    <div className="border-dashed border bg-blue rounded-full w-[26px] h-[26px] border-mineshaft-500" />
+                  )
+                }
+              </div>
+              <div className="w-10/12">
+                <Input
+                  variant="plain"
+                  className="w-full focus:text-bunker-100 focus:ring-transparent bg-transparent"
+                  autoCapitalization={false}
+                  value={tagColor}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTagColor(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="w-[26px] h-[26px]  flex items-center justify-center absolute top-[10px] right-[-4px] translate-x-[-50%]">
+              <div className="border-mineshaft-500  border h-[2.1rem] mr-4 absolute right-5" />
+              <div className={`flex items-center justify-center w-[26px] h-[26px] bg-transparent cursor-pointer hover:ring-offset-1 hover:ring-2 border-mineshaft-500 border bg-mineshaft-900 rounded-[3px]  p-2 ${showHexInput ? "tags-conic-bg rounded-full" : ""}`} onClick={() => setShowHexInput((prev) => !prev)} style={{ border: "1px solid rgba(220, 216, 254, 0.376)" }}
+                tabIndex={0} role="button"
+                onKeyDown={() => { }}>
+                {
+                  !showHexInput && <span>#</span>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
      <div className="mt-8 flex items-center">
        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
          Create
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect,useRef, useState } from "react";
 import {
  Control,
  Controller,
@@ -15,7 +15,6 @@ import {
  faCopy,
  faEllipsis,
  faInfoCircle,
-  faPlus,
  faTags,
  faXmark
 } from "@fortawesome/free-solid-svg-icons";
@@ -24,38 +23,22 @@ import { cx } from "cva";
 import { twMerge } from "tailwind-merge";

 import {
-  Button,
-  Checkbox,
-  FormControl,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
  IconButton,
  Input,
  Popover,
-  PopoverContent,
  PopoverTrigger,
  SecretInput,
  Tag,
-  TextArea,
-  Tooltip
-} from "@app/components/v2";
+  Tooltip} from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 import { WsTag } from "@app/hooks/api/types";

+import AddTagPopoverContent from "../../../../components/AddTagPopoverContent/AddTagPopoverContent";
 import { FormData, SecretActionType } from "../../DashboardPage.utils";

-const tagColors = [
-  { bg: "bg-[#f1c40f]/40", text: "text-[#fcf0c3]/70" },
-  { bg: "bg-[#cb1c8d]/40", text: "text-[#f2c6e3]/70" },
-  { bg: "bg-[#badc58]/40", text: "text-[#eef6d5]/70" },
-  { bg: "bg-[#ff5400]/40", text: "text-[#ffddcc]/70" },
-  { bg: "bg-[#3AB0FF]/40", text: "text-[#f0fffd]/70" },
-  { bg: "bg-[#6F1AB6]/40", text: "text-[#FFE5F1]/70" },
-  { bg: "bg-[#C40B13]/40", text: "text-[#FFDEDE]/70" },
-  { bg: "bg-[#332FD0]/40", text: "text-[#DFF6FF]/70" }
-];
-
 type Props = {
  index: number;
  // backend generated unique id
@@ -95,12 +78,12 @@ export const SecretInputRow = memo(
    onSecretDelete,
    searchTerm,
    control,
-    register,
+    // register,
    setValue,
    isKeyError,
    keyError,
    secUniqId,
-    autoCapitalization
+    autoCapitalization,
  }: Props): JSX.Element => {
    const isKeySubDisabled = useRef<boolean>(false);
    // comment management in a row
@@ -110,10 +93,8 @@ 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))
+    secretTags.sort((a, b) => a?.name?.localeCompare(b?.name))

    // to get details on a secret
    const overrideAction = useWatch({
@@ -145,11 +126,24 @@ export const SecretInputRow = memo(
    // when secret is override by personal values
    const isOverridden =
      overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
+
+
    const [editorRef, setEditorRef] = useState(isOverridden ? secValueOverride : secValue);
+    const [hoveredTag, setHoveredTag] = useState<WsTag | null>(null);
+
+    const handleTagOnMouseEnter = (wsTag: WsTag) => {
+      setHoveredTag(wsTag);
+    }
+
+    const handleTagOnMouseLeave = () => {
+      setHoveredTag(null);
+    }
+
+    const checkIfTagIsVisible = (wsTag: WsTag) =>  wsTag._id === hoveredTag?._id;

    const secId = useWatch({ control, name: `secrets.${index}._id`, exact: true });
-    const tags =
-      useWatch({ control, name: `secrets.${index}.tags`, exact: true, defaultValue: [] }) || [];
+    const tags = useWatch({ control, name: `secrets.${index}.tags`, exact: true, defaultValue: [] }) || [];
+
    const selectedTagIds = tags.reduce<Record<string, boolean>>(
      (prev, curr) => ({ ...prev, [curr.slug]: true }),
      {}
@@ -157,6 +151,7 @@ export const SecretInputRow = memo(

    const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);

+
    useEffect(() => {
      let timer: NodeJS.Timeout;
      if (isInviteLinkCopied) {
@@ -165,6 +160,7 @@ export const SecretInputRow = memo(
      return () => clearTimeout(timer);
    }, [isInviteLinkCopied]);

+
    useEffect(() => {
      setEditorRef(isOverridden ? secValueOverride : secValue);
    }, [isOverridden]);
@@ -195,13 +191,13 @@ export const SecretInputRow = memo(
    const onSelectTag = (selectedTag: WsTag) => {
      const shouldAppend = !selectedTagIds[selectedTag.slug];
      if (shouldAppend) {
-        append(selectedTag);
+        const {_id: id, name, slug, tagColor} = selectedTag
+        append({_id: id, name, slug, tagColor});
      } else {
-        const pos = tags.findIndex(({ slug }) => selectedTag.slug === slug);
+        const pos = tags.findIndex(({ slug }: { slug: string }) => selectedTag.slug === slug);
        remove(pos);
      }
    };
-
    const isCreatedSecret = !secId;
    const shouldBeBlockedInAddOnly = !isCreatedSecret && isAddOnly;

@@ -228,6 +224,7 @@ export const SecretInputRow = memo(
        <td className="flex h-10 w-10 items-center justify-center border-none px-4">
          <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
        </td>
+
        <Controller
          control={control}
          defaultValue=""
@@ -326,21 +323,38 @@ export const SecretInputRow = memo(
        </td>
        <td className="min-w-sm flex">
          <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 = tagColorByTagId.get(_id) || tagColors[0]
+            {secretTags.map(({ id, slug, tagColor}) => {
              return (
-                <Tag
-                  className={cx(
-                    tagColor.bg,
-                    tagColor.text
-                  )}
-                  isDisabled={isReadOnly || isAddOnly || isRollbackMode}
-                  onClose={() => remove(i)}
-                  key={id}
-                >
-                  {slug}
-                </Tag>)
+               <>
+                 <Popover>
+                  <PopoverTrigger asChild>
+                    <div>
+                      <Tag
+                        // isDisabled={isReadOnly || isAddOnly || isRollbackMode}
+                        // onClose={() => remove(i)}
+                        key={id}
+                        className="cursor-pointer"
+                      >
+                        <div className="rounded-full border-mineshaft-500 bg-transparent flex items-center  gap-1.5 justify-around">
+                          <div className="w-[10px] h-[10px] rounded-full" style={{ background: tagColor || "#bec2c8" }} />
+                          {slug}
+                        </div>
+                      </Tag>
+                    </div>
+                  </PopoverTrigger>
+                  <AddTagPopoverContent
+                    wsTags={wsTags}
+                    secKey={secKey || "this secret"}
+                    selectedTagIds={selectedTagIds}
+                    handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
+                    handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
+                    handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
+                    checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
+                    handleOnCreateTagOpen={() => onCreateTagOpen()}
+                  />
+                </Popover>
+               </>
+              )
            })}
            <div className="w-0 overflow-hidden group-hover:w-6">
              <Tooltip content="Copy value">
@@ -372,51 +386,16 @@ export const SecretInputRow = memo(
                      </Tooltip>
                    </div>
                  </PopoverTrigger>
-                  <PopoverContent
-                    side="left"
-                    className="max-h-96 w-auto min-w-[200px] overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 p-2 text-bunker-200"
-                    hideCloseBtn
-                  >
-                    <div className="mb-2 px-2 text-center text-sm font-medium text-bunker-200">
-                      Add tags to {secKey || "this secret"}
-                    </div>
-                    <div className="flex flex-col space-y-1">
-                      {wsTags?.map((wsTag) => (
-                        <Button
-                          variant="plain"
-                          size="sm"
-                          className={twMerge(
-                            "justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500",
-                            selectedTagIds?.[wsTag.slug] && "text-primary"
-                          )}
-                          onClick={() => onSelectTag(wsTag)}
-                          leftIcon={
-                            <Checkbox
-                              className="mr-0 data-[state=checked]:bg-primary"
-                              id="autoCapitalization"
-                              isChecked={selectedTagIds?.[wsTag.slug]}
-                              onCheckedChange={() => {}}
-                            >
-                              {}
-                            </Checkbox>
-                          }
-                          key={wsTag._id}
-                        >
-                          {wsTag.slug}
-                        </Button>
-                      ))}
-                      <Button
-                        variant="star"
-                        color="primary"
-                        size="sm"
-                        className="mt-4 h-7 justify-start bg-mineshaft-600 px-1"
-                        onClick={onCreateTagOpen}
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      >
-                        Add new tag
-                      </Button>
-                    </div>
-                  </PopoverContent>
+                  <AddTagPopoverContent
+                    wsTags={wsTags}
+                    secKey={secKey || "this secret"}
+                    selectedTagIds={selectedTagIds}
+                    handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
+                    handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
+                    handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
+                    checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
+                    handleOnCreateTagOpen={() => onCreateTagOpen()}
+                  />
                </Popover>
              </div>
            )}
@@ -460,20 +439,16 @@ export const SecretInputRow = memo(
                      <FontAwesomeIcon icon={faComment} />
                    </IconButton>
                  </PopoverTrigger>
-                  <PopoverContent
-                    className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
-                    sticky="always"
-                  >
-                    <FormControl label="Comment" className="mb-0">
-                      <TextArea
-                        isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
-                        className="border border-mineshaft-600 text-sm"
-                        {...register(`secrets.${index}.comment`)}
-                        rows={8}
-                        cols={30}
-                      />
-                    </FormControl>
-                  </PopoverContent>
+                  <AddTagPopoverContent
+                    wsTags={wsTags}
+                    secKey={secKey || "this secret"}
+                    selectedTagIds={selectedTagIds}
+                    handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
+                    handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
+                    handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
+                    checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
+                    handleOnCreateTagOpen={() => onCreateTagOpen()}
+                  />
                </Popover>
              </div>
            </Tooltip>
@@ -53,7 +53,8 @@ export const AddSecretTagModal = ({
            await createWsTag.mutateAsync({
                workspaceID: currentWorkspace?._id,
                tagName: name,
-                tagSlug: name.replace(" ", "_")
+                tagSlug: name.replace(/\s+/g, " ").replace(" ", "_"),
+                tagColor: ""
            });

            handlePopUpClose("CreateSecretTag");
@@ -62,6 +63,7 @@ export const AddSecretTagModal = ({
                text: "Successfully created a tag",
                type: "success"
            });
+            reset()
        } catch (err) {
            console.error(err);
            createNotification({