Merge pull request #4749 from Infisical/migrate-badge-component

feature(front-end): v3 Badge migration, additional stories/variants, and misc styling fixes/improvements

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -33,7 +33,6 @@ import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { CreateSecretRotationV2Modal } from "@app/components/secret-rotations-v2";
 import {
-  Badge,
   Button,
   DeleteActionModal,
   DropdownMenu,
@@ -51,6 +50,7 @@ import {
   ModalContent,
   Tooltip
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionActions,
   ProjectPermissionDynamicSecretActions,
@@ -829,7 +829,9 @@ export const ActionBar = ({
                   >
                     <div className="flex w-full justify-between">
                       <span>Tags</span>
-                      {Boolean(filteredTags) && <Badge>{filteredTags} Applied</Badge>}
+                      {Boolean(filteredTags) && (
+                        <Badge variant="info">{filteredTags} Applied</Badge>
+                      )}
                     </div>
                   </DropdownSubMenuTrigger>
                   <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -13,16 +13,12 @@ import {
 } from "react-icons/si";
 import { VscAzure } from "react-icons/vsc";
 import { faAws, faGithub, faGoogle } from "@fortawesome/free-brands-svg-icons";
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faClock,
-  faDatabase
-} from "@fortawesome/free-solid-svg-icons";
+import { faClock, faDatabase } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";
 
 import { Modal, ModalContent } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { ProjectEnv } from "@app/hooks/api/types";
 
@@ -202,23 +198,11 @@ export const CreateDynamicSecretForm = ({
     <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
       <ModalContent
         title={
-          <div className="flex items-center">
+          <div className="flex items-center gap-x-2">
             <span>{modalTitle ? `${modalTitle} Dynamic Secret` : "Dynamic Secrets"} </span>
-            <a
+            <DocumentationLinkBadge
               href={`https://infisical.com/docs/documentation/platform/dynamic-secrets/${selectedProvider ? (UniqueLinks[selectedProvider] ?? selectedProvider) : "overview"}`}
-              target="_blank"
-              className="mb-0.5 ml-1.5"
-              rel="noopener noreferrer"
-            >
-              <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-                <span>Docs</span>
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1 text-[10px]"
-                />
-              </div>
-            </a>
+            />
           </div>
         }
         subTitle="Configure dynamic secret parameters"
@@ -234,11 +218,11 @@ export const CreateDynamicSecretForm = ({
               exit={{ opacity: 0, translateX: -30 }}
             >
               <div className="mb-4 text-mineshaft-300">Select a service to connect to:</div>
-              <div className="flex flex-wrap items-center gap-4">
+              <div className="grid grid-cols-4 gap-2">
                 {DYNAMIC_SECRET_LIST.map(({ icon, provider, title }) => (
                   <div
                     key={`dynamic-secret-provider-${provider}`}
-                    className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="flex h-30 w-42 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
                     role="button"
                     tabIndex={0}
                     onClick={() => {

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/ReplicateFolderFromBoard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faArrowUpRightFromSquare, faBookOpen, faClone } from "@fortawesome/free-solid-svg-icons";
+import { faClone } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -14,6 +14,7 @@ import {
   Switch
 } from "@app/components/v2";
 import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useDebounce } from "@app/hooks";
 import { useGetAccessibleSecrets } from "@app/hooks/api/dashboard";
@@ -227,23 +228,9 @@ export const ReplicateFolderFromBoard = ({
         bodyClassName="overflow-visible"
         className="max-w-2xl"
         title={
-          <div className="flex items-center gap-1 text-mineshaft-300">
+          <div className="flex items-center gap-x-2 text-mineshaft-300">
             <span>Replicate Secrets</span>
-            <a
-              target="_blank"
-              href="https://infisical.com/docs/documentation/platform/folder#replicating-folder-contents"
-              className="mb-1 ml-1"
-              rel="noopener noreferrer"
-            >
-              <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-                <span>Docs</span>
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1 text-[10px]"
-                />
-              </div>
-            </a>
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/folder#replicating-folder-contents" />
           </div>
         }
         subTitle="Copy folder contents from other locations into this context"

frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx

@@ -1,16 +1,12 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useCallback, useState } from "react";
-import {
-  faClipboardCheck,
-  faCodeCommit,
-  faFolder,
-  faKey,
-  faSave
-} from "@fortawesome/free-solid-svg-icons";
+import { faCodeCommit, faFolder, faKey, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";
+import { ClipboardCheckIcon } from "lucide-react";
 
-import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2";
+import { Button, Input, Modal, ModalContent } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
 import { SecretVersionDiffView } from "@app/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView";
 import { HIDDEN_SECRET_VALUE_API_MASK } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem";
@@ -329,9 +325,9 @@ export const CommitForm: React.FC<CommitFormProps> = ({
                   <div className="flex-1">
                     {/* Header */}
                     <div className="flex items-center gap-2">
-                      <div className="h-2 w-2 rounded-full bg-yellow-500" />
+                      <div className="h-2 w-2 rounded-full bg-warning" />
                       <span className="font-medium text-mineshaft-100">Pending Changes</span>
-                      <Badge variant="primary" className="text-xs">
+                      <Badge variant="warning">
                         {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
                       </Badge>
                     </div>
@@ -375,9 +371,9 @@ export const CommitForm: React.FC<CommitFormProps> = ({
         <ModalContent
           title={
             <div className="flex items-center gap-2">
-              <FontAwesomeIcon icon={faClipboardCheck} className="text-mineshaft-400" />
               Review Changes
-              <Badge variant="primary" className="mt-[0.05rem]">
+              <Badge variant="warning">
+                <ClipboardCheckIcon />
                 {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
               </Badge>
             </div>

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/CompareEnvironments.tsx

@@ -9,14 +9,13 @@ import {
   faFolder,
   faKey,
   faRotate,
-  faSearch,
-  faWarning
+  faSearch
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertTriangleIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -38,6 +37,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import {
   getUserTablePreference,
@@ -396,11 +396,8 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                                 </>
                               }
                             >
-                              <Badge
-                                variant="primary"
-                                className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] leading-3 font-normal"
-                              >
-                                <FontAwesomeIcon icon={faWarning} className="-mt-[0.1rem] w-2.5" />
+                              <Badge variant="warning">
+                                <AlertTriangleIcon />
                                 {missingKeyCount}
                               </Badge>
                             </Tooltip>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx

@@ -1,15 +1,9 @@
 import { ChangeEvent, Dispatch, DragEvent, SetStateAction, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { subject } from "@casl/ability";
-import {
-  faArrowRight,
-  faAsterisk,
-  faComment,
-  faKey,
-  faPlus,
-  faUpload
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AsteriskIcon, KeyIcon, MessageSquareIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -22,7 +16,6 @@ import {
   parseYaml
 } from "@app/components/utilities/parseSecrets";
 import {
-  Badge,
   Button,
   FormLabel,
   Lottie,
@@ -31,6 +24,7 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
@@ -115,23 +109,23 @@ const MatrixImportModalTableRow = ({
       </td>
       <td className="whitespace-nowrap">
         <div className="flex h-full items-start justify-center">
-          <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
+          <Badge isFullWidth variant="neutral">
             {mapKey === "key" && (
               <>
-                <FontAwesomeIcon icon={faKey} />
-                <span>Secret Key</span>
+                <KeyIcon />
+                Secret Key
               </>
             )}
             {mapKey === "value" && (
               <>
-                <FontAwesomeIcon icon={faAsterisk} />
-                <span>Secret Value</span>
+                <AsteriskIcon />
+                Secret Value
               </>
             )}
             {mapKey === "comment" && (
               <>
-                <FontAwesomeIcon icon={faComment} />
-                <span>Comment</span>
+                <MessageSquareIcon />
+                Comment
               </>
             )}
           </Badge>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationItem.tsx

@@ -67,10 +67,10 @@ export const SecretRotationItem = ({
               </Tooltip>
             )}
           </div>
-          <SecretRotationV2StatusBadge className="mx-2" secretRotation={secretRotation} />
+          <SecretRotationV2StatusBadge secretRotation={secretRotation} />
           <div
             key="actions"
-            className="flex h-full shrink-0 self-start transition-all group-hover:gap-x-2"
+            className="ml-2 flex h-full shrink-0 self-start transition-all group-hover:gap-x-2"
           >
             <Tooltip content="View Rotation Secrets">
               <IconButton