From 01d6f5d35ece5e4fb33c6923942ad50675eca71d Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Fri, 24 Oct 2025 19:27:28 -0700 Subject: [PATCH] feature: migrate to v3 badge, additional badge stories, re-useable documentation link badge and misc styling fixes/improvements --- .../decorators/DocumentDecorator.tsx | 2 +- .../app-connections/AppConnectionOption.tsx | 27 ++++-- .../pki-syncs/PkiSyncImportStatusBadge.tsx | 42 +++------ .../pki-syncs/PkiSyncModalHeader.tsx | 24 +---- .../pki-syncs/PkiSyncRemoveStatusBadge.tsx | 42 +++------ .../pki-syncs/PkiSyncStatusBadge.tsx | 42 ++++----- .../src/components/pki-syncs/PkiSyncTable.tsx | 8 +- .../pki-syncs/forms/PkiSyncReviewFields.tsx | 3 +- .../CreateSecretRotationV2Modal.tsx | 21 +---- .../SecretRotationV2ModalHeader.tsx | 22 +---- .../SecretRotationV2StatusBadge.tsx | 51 ++++------- .../shared/SecretsMappingTable.tsx | 13 ++- .../CreateSecretScanningDataSourceModal.tsx | 21 +---- .../SecretScanningDataSourceModalHeader.tsx | 22 +---- .../SecretScanningScanStatus.tsx | 39 +++----- .../SecretSyncImportStatusBadge.tsx | 42 +++------ .../secret-syncs/SecretSyncModalHeader.tsx | 22 +---- .../SecretSyncRemoveStatusBadge.tsx | 42 +++------ .../secret-syncs/SecretSyncStatusBadge.tsx | 42 ++++----- .../GcpSyncFields.tsx | 15 +-- .../shared/AwsRegionSelect.tsx | 5 +- .../AwsParameterStoreSyncReviewFields.tsx | 14 ++- .../AwsSecretsManagerSyncReviewFields.tsx | 16 ++-- .../RenderSyncReviewFields.tsx | 2 +- .../SecretSyncReviewFields.tsx | 6 +- frontend/src/components/v2/Badge/Badge.tsx | 47 ---------- frontend/src/components/v2/Badge/index.tsx | 1 - .../components/v2/PageHeader/PageHeader.tsx | 43 +++++---- frontend/src/components/v2/Select/Select.tsx | 4 + frontend/src/components/v2/index.tsx | 1 - .../v3/generic/Badge/Badge.stories.tsx | 91 ++++++++++++++++--- .../src/components/v3/generic/Badge/Badge.tsx | 49 +++++++--- frontend/src/components/v3/index.ts | 2 + .../DocumentationLinkBadge.stories.tsx | 24 +++++ .../DocumentationLinkBadge.tsx | 18 ++++ .../platform/DocumentationLinkBadge/index.ts | 1 + .../src/components/v3/platform/ScopeIcons.tsx | 8 ++ frontend/src/components/v3/platform/index.ts | 2 + frontend/src/helpers/policies.ts | 14 +-- frontend/src/helpers/secretScanningV2.ts | 36 +++++--- frontend/src/hooks/api/ca/constants.tsx | 2 +- frontend/src/hooks/api/pam/types/index.ts | 4 +- .../src/hooks/api/pkiSubscriber/constants.tsx | 2 +- .../components/NavBar/Navbar.tsx | 75 ++++++++------- .../ProjectSelect/ProjectSelect.tsx | 11 +-- .../SecretManagerLayout.tsx | 5 +- .../SecretScanningLayout.tsx | 5 +- .../components/ServerAdminsTable.tsx | 19 ++-- .../components/CachingPageForm.tsx | 13 +-- .../components/EncryptionPageForm.tsx | 16 ++-- .../components/EnvironmentPageForm.tsx | 20 +--- .../components/MachineIdentitiesTable.tsx | 6 +- .../components/OrganizationsTable.tsx | 24 ++--- .../components/UserIdentitiesTable.tsx | 22 ++--- .../CaCertificatesTable.tsx | 4 +- .../components/CaTable.tsx | 2 +- .../components/ExternalCaTable.tsx | 2 +- .../components/CertificatesTable.tsx | 2 +- .../components/CertificatesTable.utils.ts | 4 +- .../PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx | 19 ++-- .../components/PkiSyncsTab/PkiSyncsTab.tsx | 22 ++--- .../PkiSubscriberCertificatesTable.tsx | 4 +- .../components/PkiSubscribersTable.tsx | 2 +- .../components/PkiSyncActionTriggers.tsx | 23 ++--- .../PkiSyncOptionsSection.tsx | 3 +- .../components/PkiSyncSourceSection.tsx | 19 ++-- .../CertificateProfilesTab/ProfileRow.tsx | 32 ++----- .../kms/OverviewPage/components/CmekTable.tsx | 5 +- .../components/CmekVerifyModal.tsx | 34 +++---- .../OrgGroupsSection/OrgGroupsSection.tsx | 6 +- .../IdentityAuthMethodModalContent.tsx | 5 +- .../IdentitySection/IdentitySection.tsx | 42 ++------- .../OrgMembersSection/OrgMembersSection.tsx | 23 +++-- .../OrgMembersSection/OrgMembersTable.tsx | 18 ++-- .../OrgRoleTabSection/OrgRoleTable.tsx | 36 +++++--- .../components/AppConnectionHeader.tsx | 20 +--- .../components/AppConnectionRow.tsx | 10 +- .../components/AppConnectionsTable.tsx | 20 +--- .../AuditLogsPage/components/LogsFilter.tsx | 6 +- .../AuditLogsPage/components/LogsSection.tsx | 20 +--- .../ViewIdentityJwtAuthContent.tsx | 37 ++++---- .../ViewIdentityKubernetesAuthContent.tsx | 27 +++--- .../ViewIdentityLdapAuthContent.tsx | 27 +++--- .../ViewIdentityOidcAuthContent.tsx | 37 ++++---- .../ViewIdentityTlsCertAuthContent.tsx | 17 ++-- .../components/GatewayTab/GatewayTab.tsx | 20 +--- .../components/RelayTab/RelayTab.tsx | 20 +--- .../components/AllProjectView.tsx | 10 +- .../RequestSecret/RequestedSecretsRow.tsx | 31 +++---- .../ShareSecret/ShareSecretsRow.tsx | 2 +- .../components/AuditLogStreamHeader.tsx | 17 +--- .../OrgEncryptionTab/AwsKmsForm.tsx | 5 +- .../OrgEncryptionTab/GcpKmsForm.tsx | 5 +- .../components/OrgSsoTab/SSOModalHeader.tsx | 21 +---- .../OrgWorkflowIntegrationTab.tsx | 4 +- .../components/ProjectTemplatesSection.tsx | 20 +--- .../PamAccountForm/MySQLAccountForm.tsx | 4 +- .../PamAccountForm/PostgresAccountForm.tsx | 6 +- .../components/PamAccountRow.tsx | 18 ++-- .../components/PamResourceOption.tsx | 4 +- .../components/PamResourceRow.tsx | 4 +- .../components/PamSessionDetailsSection.tsx | 10 +- .../components/PamSessionStatusBadge.tsx | 59 +++++------- .../GroupsSection/GroupsSection.tsx | 6 +- .../components/IdentityTab/IdentityTab.tsx | 20 +--- .../IdentityTab/components/IdentityModal.tsx | 9 +- .../MembersTab/components/MembersSection.tsx | 6 +- .../ProjectRoleList/ProjectRoleList.tsx | 22 ++++- .../ServiceTokenSection.tsx | 20 +--- .../NativeIntegrationsTab/IntegrationRow.tsx | 5 +- .../SecretSyncTable/SecretSyncRow.tsx | 19 ++-- .../SecretSyncsTab/SecretSyncsTab.tsx | 20 +--- .../SecretOverviewSecretRotationRow.tsx | 17 ++-- .../components/QuickSearchSecretItem.tsx | 17 ++-- .../SecretApprovalsPage.tsx | 10 +- .../AccessApprovalRequest.tsx | 69 +++++--------- .../components/ReviewAccessModal.tsx | 56 ++++-------- .../ApprovalPolicyList/ApprovalPolicyList.tsx | 20 +--- .../components/ApprovalPolicyRow.tsx | 21 ++--- .../components/PolicyMemberOption.tsx | 8 +- .../SecretApprovalRequest.tsx | 44 ++++----- .../components/ActionBar/ActionBar.tsx | 8 +- .../CreateDynamicSecretForm.tsx | 30 ++---- .../ReplicateFolderFromBoard.tsx | 21 +---- .../components/CommitForm/CommitForm.tsx | 20 ++-- .../CompareEnvironments.tsx | 13 +-- .../SecretDropzone/SecretDropzone.tsx | 26 ++---- .../SecretRotationItem.tsx | 4 +- .../components/SecretSyncActionTriggers.tsx | 23 ++--- ...wsParameterStoreSyncDestinationSection.tsx | 6 +- ...wsSecretsManagerSyncDestinationSection.tsx | 6 +- .../AwsParameterStoreSyncOptionsSection.tsx | 14 ++- .../AwsSecretsManagerSyncOptionsSection.tsx | 11 ++- .../RenderSyncOptionsSection.tsx | 2 +- .../SecretSyncOptionsSection.tsx | 5 +- .../components/SecretSyncSourceSection.tsx | 15 ++- .../components/MicrosoftTeamsConfigRow.tsx | 21 +++-- .../components/SlackConfigRow.tsx | 21 +++-- .../AwsParamterStoreConfigurePage.tsx | 4 +- .../AwsSecretManagerConfigurePage.tsx | 4 +- .../SecretScanningDataSourceSection.tsx | 30 +++--- .../components/SecretScanningResourceRow.tsx | 69 ++++++-------- .../components/SecretScanningScanRow.tsx | 48 +++++----- .../SecretScanningDataSourceRow.tsx | 71 ++++++--------- .../SecretScanningDataSourcesSection.tsx | 20 +--- .../components/SecretScanningFindingRow.tsx | 39 +++----- .../SecretScanningFindingsSection.tsx | 21 +---- .../SecretScanningFindingsTable.tsx | 64 +++++++------ .../SecretScanningUpdateFindingModal.tsx | 6 +- .../SecretScanningConfigForm.tsx | 19 +--- .../SshCertificateTemplatesTable.tsx | 2 +- .../ssh/SshCasPage/components/SshCaTable.tsx | 2 +- .../components/SshCertificatesTable.tsx | 2 +- .../components/SshHostGroupsTable.tsx | 4 +- .../SshHostsPage/components/SshHostsTable.tsx | 29 +++--- 155 files changed, 1267 insertions(+), 1740 deletions(-) delete mode 100644 frontend/src/components/v2/Badge/Badge.tsx delete mode 100644 frontend/src/components/v2/Badge/index.tsx create mode 100644 frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.stories.tsx create mode 100644 frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.tsx create mode 100644 frontend/src/components/v3/platform/DocumentationLinkBadge/index.ts create mode 100644 frontend/src/components/v3/platform/ScopeIcons.tsx create mode 100644 frontend/src/components/v3/platform/index.ts diff --git a/frontend/.storybook/decorators/DocumentDecorator.tsx b/frontend/.storybook/decorators/DocumentDecorator.tsx index 13f4dc8c7..b0d817c6e 100644 --- a/frontend/.storybook/decorators/DocumentDecorator.tsx +++ b/frontend/.storybook/decorators/DocumentDecorator.tsx @@ -3,7 +3,7 @@ import type { Decorator } from "@storybook/react-vite"; export const DocumentDecorator: Decorator = (Story) => { useEffect(() => { - const root = document.getElementsByTagName("html")[0]; + const root = document.documentElement; root.setAttribute("class", "overflow-visible"); }, []); diff --git a/frontend/src/components/app-connections/AppConnectionOption.tsx b/frontend/src/components/app-connections/AppConnectionOption.tsx index 30a37425c..793f9d821 100644 --- a/frontend/src/components/app-connections/AppConnectionOption.tsx +++ b/frontend/src/components/app-connections/AppConnectionOption.tsx @@ -1,9 +1,11 @@ import { components, OptionProps } from "react-select"; import { faCheckCircle } from "@fortawesome/free-regular-svg-icons"; -import { faBuilding, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Badge, Tooltip } from "@app/components/v2"; +import { Tooltip } from "@app/components/v2"; +import { Badge, OrgIcon, SubOrgIcon } from "@app/components/v3"; +import { useOrganization } from "@app/context"; import { TAvailableAppConnection } from "@app/hooks/api/appConnections"; export const AppConnectionOption = ({ @@ -13,6 +15,8 @@ export const AppConnectionOption = ({ }: OptionProps) => { const isCreateOption = props.data.id === "_create"; + const { isSubOrganization } = useOrganization(); + return (
@@ -23,15 +27,22 @@ export const AppConnectionOption = ({
) : ( <> -

{children}

+

{children}

{!props.data.projectId && ( - -
- - + + {isSubOrganization ? ( + + + Sub-Organization + + ) : ( + + Organization -
+ )} )} {isSelected && ( diff --git a/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx b/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx index d5b3119d0..2cea3c55b 100644 --- a/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx +++ b/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx @@ -1,27 +1,20 @@ import { ReactNode, useEffect, useMemo, useState } from "react"; -import { - faCheck, - faDownload, - faTriangleExclamation, - faXmark, - IconDefinition -} from "@fortawesome/free-solid-svg-icons"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { differenceInSeconds } from "date-fns"; -import { twMerge } from "tailwind-merge"; +import { CheckIcon, DownloadIcon, LucideIcon, TriangleAlertIcon } from "lucide-react"; -import { Badge, Tooltip } from "@app/components/v2"; -import { BadgeProps } from "@app/components/v2/Badge/Badge"; +import { Tooltip } from "@app/components/v2"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs"; import { PkiSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs"; type Props = { pkiSync: TPkiSync; - className?: string; mini?: boolean; }; -export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) => { +export const PkiSyncImportStatusBadge = ({ pkiSync, mini }: Props) => { const { importStatus, lastImportMessage, lastImportedAt, destination } = pkiSync; const [hide, setHide] = useState(importStatus === PkiSyncStatus.Succeeded); const destinationName = PKI_SYNC_MAP[destination].name; @@ -50,24 +43,24 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) => if (!importStatus || hide) return null; - let variant: BadgeProps["variant"]; + let variant: TBadgeProps["variant"]; let label: string; - let icon: IconDefinition; + let Icon: LucideIcon; let tooltipContent: ReactNode; switch (importStatus) { case PkiSyncStatus.Pending: case PkiSyncStatus.Running: - variant = "primary"; + variant = "warning"; label = "Importing Certificates..."; tooltipContent = `Importing certificates from ${destinationName}. This may take a moment.`; - icon = faDownload; + Icon = DownloadIcon; break; case PkiSyncStatus.Failed: variant = "danger"; label = "Failed to Import Certificates"; - icon = faTriangleExclamation; + Icon = TriangleAlertIcon; tooltipContent = (
{failureMessage && ( @@ -93,20 +86,15 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) => tooltipContent = "Successfully imported certificates."; variant = "success"; label = "Certificates Imported"; - icon = faCheck; + Icon = CheckIcon; } return ( -
- - - {!mini && {label}} - -
+ + + {!mini && label} + ); }; diff --git a/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx b/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx index 0e18959dc..32f84c247 100644 --- a/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx +++ b/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx @@ -1,6 +1,4 @@ -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - +import { DocumentationLinkBadge } from "@app/components/v3"; import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs"; import { PkiSync } from "@app/hooks/api/pkiSyncs"; @@ -20,23 +18,11 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => { className="h-12 w-12 rounded-md bg-bunker-500 p-2" />
-
+
{destinationDetails.name} Certificate Sync - -
- - Docs - -
- +

{isConfigured diff --git a/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx b/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx index 3e898ba42..968431b84 100644 --- a/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx +++ b/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx @@ -1,27 +1,20 @@ import { ReactNode, useEffect, useMemo, useState } from "react"; -import { - faCheck, - faEraser, - faTriangleExclamation, - faXmark, - IconDefinition -} from "@fortawesome/free-solid-svg-icons"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { differenceInSeconds } from "date-fns"; -import { twMerge } from "tailwind-merge"; +import { AlertTriangleIcon, CheckIcon, EraserIcon, LucideIcon } from "lucide-react"; -import { Badge, Tooltip } from "@app/components/v2"; -import { BadgeProps } from "@app/components/v2/Badge/Badge"; +import { Tooltip } from "@app/components/v2"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs"; import { PkiSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs"; type Props = { pkiSync: TPkiSync; - className?: string; mini?: boolean; }; -export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) => { +export const PkiSyncRemoveStatusBadge = ({ pkiSync, mini }: Props) => { const { removeStatus, lastRemoveMessage, lastRemovedAt, destination } = pkiSync; const [hide, setHide] = useState(removeStatus === PkiSyncStatus.Succeeded); const destinationName = PKI_SYNC_MAP[destination].name; @@ -50,24 +43,24 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) => if (!removeStatus || hide) return null; - let variant: BadgeProps["variant"]; + let variant: TBadgeProps["variant"]; let label: string; - let icon: IconDefinition; + let Icon: LucideIcon; let tooltipContent: ReactNode; switch (removeStatus) { case PkiSyncStatus.Pending: case PkiSyncStatus.Running: - variant = "primary"; + variant = "warning"; label = "Removing Certificates..."; tooltipContent = `Removing certificates from ${destinationName}. This may take a moment.`; - icon = faEraser; + Icon = EraserIcon; break; case PkiSyncStatus.Failed: variant = "danger"; label = "Failed to Remove Certificates"; - icon = faTriangleExclamation; + Icon = AlertTriangleIcon; tooltipContent = (

{failureMessage && ( @@ -93,20 +86,15 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) => tooltipContent = "Successfully removed certificates."; variant = "success"; label = "Certificates Removed"; - icon = faCheck; + Icon = CheckIcon; } return ( -
- - - {!mini && {label}} - -
+ + + {!mini && label} + ); }; diff --git a/frontend/src/components/pki-syncs/PkiSyncStatusBadge.tsx b/frontend/src/components/pki-syncs/PkiSyncStatusBadge.tsx index 1fa207202..1c1294280 100644 --- a/frontend/src/components/pki-syncs/PkiSyncStatusBadge.tsx +++ b/frontend/src/components/pki-syncs/PkiSyncStatusBadge.tsx @@ -1,55 +1,51 @@ import { - faCheck, - faExclamationTriangle, - faHourglass, - faRotate, - IconDefinition -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + AlertTriangleIcon, + CheckIcon, + HourglassIcon, + LucideIcon, + RefreshCwIcon +} from "lucide-react"; -import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { PkiSyncStatus } from "@app/hooks/api/pkiSyncs"; type Props = { status: PkiSyncStatus; -} & Omit; +} & Omit; export const PkiSyncStatusBadge = ({ status }: Props) => { - let variant: BadgeProps["variant"]; + let variant: TBadgeProps["variant"]; let text: string; - let icon: IconDefinition; + let Icon: LucideIcon; switch (status) { case PkiSyncStatus.Failed: variant = "danger"; text = "Failed to Sync"; - icon = faExclamationTriangle; + Icon = AlertTriangleIcon; break; case PkiSyncStatus.Succeeded: variant = "success"; text = "Synced"; - icon = faCheck; + Icon = CheckIcon; break; case PkiSyncStatus.Pending: - variant = "primary"; + variant = "info"; text = "Queued"; - icon = faHourglass; + Icon = HourglassIcon; break; case PkiSyncStatus.Running: default: - variant = "primary"; + variant = "info"; text = "Syncing"; - icon = faRotate; + Icon = RefreshCwIcon; break; } return ( - - - {text} + + + {text} ); }; diff --git a/frontend/src/components/pki-syncs/PkiSyncTable.tsx b/frontend/src/components/pki-syncs/PkiSyncTable.tsx index 983e4687c..4fbc7a16d 100644 --- a/frontend/src/components/pki-syncs/PkiSyncTable.tsx +++ b/frontend/src/components/pki-syncs/PkiSyncTable.tsx @@ -2,7 +2,6 @@ import { faPlug, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { - Badge, EmptyState, IconButton, Table, @@ -13,6 +12,7 @@ import { THead, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { TPkiSync } from "@app/hooks/api/pkiSyncs"; type Props = { @@ -29,10 +29,10 @@ const getSyncStatusBadge = (status?: string) => { case "FAILED": return Failed; case "RUNNING": - return Running; + return Running; case "PENDING": default: - return Pending; + return Pending; } }; @@ -71,7 +71,7 @@ export const PkiSyncTable = ({ pkiSyncs, onEdit, onDelete, onTrigger }: Props) = {pkiSync.name}
- {pkiSync.destination} + {pkiSync.destination}
{pkiSync.appConnectionName || "Unknown"} diff --git a/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx b/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx index be6b91948..43ee38e52 100644 --- a/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx +++ b/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx @@ -1,6 +1,7 @@ import { useFormContext } from "react-hook-form"; -import { Badge, GenericFieldLabel } from "@app/components/v2"; +import { GenericFieldLabel } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useProject } from "@app/context"; import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs"; import { useListWorkspacePkiSubscribers } from "@app/hooks/api"; diff --git a/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx b/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx index ad02e1706..ceafc951a 100644 --- a/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx +++ b/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx @@ -1,6 +1,4 @@ import { useEffect, useState } from "react"; -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate, useRouterState } from "@tanstack/react-router"; import { SecretRotationV2Form } from "@app/components/secret-rotations-v2/forms"; @@ -8,6 +6,7 @@ import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader"; import { SecretRotationV2Select } from "@app/components/secret-rotations-v2/SecretRotationV2Select"; import { Modal, ModalContent } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { ProjectEnv } from "@app/hooks/api/projects/types"; import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2"; @@ -115,23 +114,9 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }: selectedRotation ? ( ) : ( -
+
Add Secret Rotation - -
- - Docs - -
- +
) } diff --git a/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx b/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx index d44d08046..a834d78dc 100644 --- a/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx +++ b/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx @@ -1,6 +1,4 @@ -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - +import { DocumentationLinkBadge } from "@app/components/v3"; import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2"; import { SecretRotation } from "@app/hooks/api/secretRotationsV2"; @@ -20,23 +18,11 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => { className="h-12 w-12 rounded-md bg-bunker-500 p-2" />
-
+
{destinationDetails.name} Rotation - -
- - Docs - -
- + />

{isConfigured diff --git a/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx b/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx index c3b38f7a7..edb7cac1b 100644 --- a/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx +++ b/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx @@ -1,18 +1,17 @@ -import { faBan, faRotate, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { format, formatDistanceToNow } from "date-fns"; -import { twMerge } from "tailwind-merge"; +import { BanIcon, RefreshCwIcon, XIcon } from "lucide-react"; import { Tooltip } from "@app/components/v2"; -import { Badge } from "@app/components/v2/Badge/Badge"; +import { Badge } from "@app/components/v3"; import { SecretRotationStatus, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2"; type Props = { secretRotation: TSecretRotationV2; - className?: string; }; -export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props) => { +export const SecretRotationV2StatusBadge = ({ secretRotation }: Props) => { const { isAutoRotationEnabled, rotationStatus, nextRotationAt, lastRotationMessage } = secretRotation; @@ -50,28 +49,18 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props

} > -
- - - Rotation Failed - -
+ + + Rotation Failed + ); } if (!isAutoRotationEnabled) { return ( - - + + Auto-Rotation Disabled ); @@ -92,20 +81,12 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props } > -
- = 7 ? "success" : "primary"} - className={twMerge( - "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize", - className - )} - > - - {daysToRotation < 0 - ? "Rotating" - : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`} - -
+ = 7 ? "info" : "warning"} className="capitalize"> + + {daysToRotation < 0 + ? "Rotating" + : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`} + ); }; diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx index a012cb392..b5fafe11b 100644 --- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx +++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx @@ -1,8 +1,10 @@ import { ReactNode } from "react"; -import { faArrowRight, faKey } from "@fortawesome/free-solid-svg-icons"; +import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { KeyIcon } from "lucide-react"; -import { Badge, FormLabel } from "@app/components/v2"; +import { FormLabel } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; type Props = { items: { name: string; input: ReactNode }[]; @@ -32,9 +34,10 @@ export const SecretsMappingTable = ({ items }: Props) => {
- - - {name} + {/* TODO(scott): probably shouldn't be a badge */} + + + {name}
diff --git a/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx b/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx index e4390024b..ac8c9dc24 100644 --- a/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx +++ b/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx @@ -1,10 +1,9 @@ import { useEffect, useState } from "react"; -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate, useRouterState } from "@tanstack/react-router"; import { TSecretScanningDataSourceForm } from "@app/components/secret-scanning/forms/schemas"; import { Modal, ModalContent } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { SecretScanningDataSource, TSecretScanningDataSource @@ -108,23 +107,9 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p selectedDataSource ? ( ) : ( -
+
Add Data Source - -
- - Docs - -
- +
) } diff --git a/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx b/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx index da964d6b6..6ae644fa5 100644 --- a/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx +++ b/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx @@ -1,6 +1,4 @@ -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - +import { DocumentationLinkBadge } from "@app/components/v3"; import { SECRET_SCANNING_DATA_SOURCE_MAP } from "@app/helpers/secretScanningV2"; import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2"; @@ -20,23 +18,11 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop className="h-12 rounded-md bg-bunker-500 p-2" />
-
+
{dataSourceDetails.name} Data Source - -
- - Docs - -
- + />

{isConfigured ? "Edit" : "Connect a"} {dataSourceDetails.name} Data Source diff --git a/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx b/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx index a02e050f0..35913414f 100644 --- a/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx +++ b/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx @@ -1,22 +1,23 @@ -import { faArrowRotateForward, faCheck, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { formatDistance } from "date-fns"; -import { twMerge } from "tailwind-merge"; +import { CheckIcon, RotateCwIcon, XIcon } from "lucide-react"; -import { Badge, Tooltip } from "@app/components/v2"; +import { Tooltip } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { SecretScanningScanStatus } from "@app/hooks/api/secretScanningV2"; type Props = { status: SecretScanningScanStatus; statusMessage?: string | null; - className?: string; + scannedAt?: string | null; }; export const SecretScanningScanStatusBadge = ({ status, statusMessage, - className, + scannedAt }: Props) => { if (status === SecretScanningScanStatus.Failed) { @@ -53,11 +54,8 @@ export const SecretScanningScanStatusBadge = ({ } >

- - + + Scan Error
@@ -67,26 +65,17 @@ export const SecretScanningScanStatusBadge = ({ if (status === SecretScanningScanStatus.Queued || status === SecretScanningScanStatus.Scanning) { return ( - - - Scanning + + + Scanning ); } return ( - - - Complete + + + Complete ); }; diff --git a/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx b/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx index 54cfcd588..494528d00 100644 --- a/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx +++ b/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx @@ -1,27 +1,20 @@ import { ReactNode, useEffect, useMemo, useState } from "react"; -import { - faCheck, - faDownload, - faTriangleExclamation, - faXmark, - IconDefinition -} from "@fortawesome/free-solid-svg-icons"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { differenceInSeconds } from "date-fns"; -import { twMerge } from "tailwind-merge"; +import { AlertTriangleIcon, CheckIcon, DownloadIcon, LucideIcon } from "lucide-react"; -import { Badge, Tooltip } from "@app/components/v2"; -import { BadgeProps } from "@app/components/v2/Badge/Badge"; +import { Tooltip } from "@app/components/v2"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs"; import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs"; type Props = { secretSync: TSecretSync; - className?: string; mini?: boolean; }; -export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Props) => { +export const SecretSyncImportStatusBadge = ({ secretSync, mini }: Props) => { const { importStatus, lastImportMessage, lastImportedAt, destination } = secretSync; const [hide, setHide] = useState(importStatus === SecretSyncStatus.Succeeded); const destinationName = SECRET_SYNC_MAP[destination].name; @@ -50,24 +43,24 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro if (!importStatus || hide) return null; - let variant: BadgeProps["variant"]; + let variant: TBadgeProps["variant"]; let label: string; - let icon: IconDefinition; + let Icon: LucideIcon; let tooltipContent: ReactNode; switch (importStatus) { case SecretSyncStatus.Pending: case SecretSyncStatus.Running: - variant = "primary"; + variant = "warning"; label = "Importing Secrets..."; tooltipContent = `Importing secrets from ${destinationName}. This may take a moment.`; - icon = faDownload; + Icon = DownloadIcon; break; case SecretSyncStatus.Failed: variant = "danger"; label = "Failed to Import Secrets"; - icon = faTriangleExclamation; + Icon = AlertTriangleIcon; tooltipContent = (
{failureMessage && ( @@ -93,20 +86,15 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro tooltipContent = "Successfully imported secrets."; variant = "success"; label = "Secrets Imported"; - icon = faCheck; + Icon = CheckIcon; } return ( -
- - - {!mini && {label}} - -
+ + + {!mini && label} + ); }; diff --git a/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx b/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx index ebbe34d75..41cbbcf58 100644 --- a/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx +++ b/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx @@ -1,6 +1,4 @@ -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - +import { DocumentationLinkBadge } from "@app/components/v3"; import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs"; import { SecretSync } from "@app/hooks/api/secretSyncs"; @@ -20,23 +18,11 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => { className="h-12 w-12 rounded-md bg-bunker-500 object-contain p-2" />
-
+
{destinationDetails.name} Sync - -
- - Docs - -
- + />

{isConfigured diff --git a/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx b/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx index abbd78838..917386818 100644 --- a/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx +++ b/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx @@ -1,27 +1,20 @@ import { ReactNode, useEffect, useMemo, useState } from "react"; -import { - faCheck, - faEraser, - faTriangleExclamation, - faXmark, - IconDefinition -} from "@fortawesome/free-solid-svg-icons"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { differenceInSeconds } from "date-fns"; -import { twMerge } from "tailwind-merge"; +import { AlertTriangleIcon, CheckIcon, EraserIcon, LucideIcon } from "lucide-react"; -import { Badge, Tooltip } from "@app/components/v2"; -import { BadgeProps } from "@app/components/v2/Badge/Badge"; +import { Tooltip } from "@app/components/v2"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs"; import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs"; type Props = { secretSync: TSecretSync; - className?: string; mini?: boolean; }; -export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Props) => { +export const SecretSyncRemoveStatusBadge = ({ secretSync, mini }: Props) => { const { removeStatus, lastRemoveMessage, lastRemovedAt, destination } = secretSync; const [hide, setHide] = useState(removeStatus === SecretSyncStatus.Succeeded); const destinationName = SECRET_SYNC_MAP[destination].name; @@ -50,24 +43,24 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro if (!removeStatus || hide) return null; - let variant: BadgeProps["variant"]; + let variant: TBadgeProps["variant"]; let label: string; - let icon: IconDefinition; + let Icon: LucideIcon; let tooltipContent: ReactNode; switch (removeStatus) { case SecretSyncStatus.Pending: case SecretSyncStatus.Running: - variant = "primary"; + variant = "warning"; label = "Removing Secrets..."; tooltipContent = `Removing secrets from ${destinationName}. This may take a moment.`; - icon = faEraser; + Icon = EraserIcon; break; case SecretSyncStatus.Failed: variant = "danger"; label = "Failed to Remove Secrets"; - icon = faTriangleExclamation; + Icon = AlertTriangleIcon; tooltipContent = (

{failureMessage && ( @@ -93,20 +86,15 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro tooltipContent = "Successfully removed secrets."; variant = "success"; label = "Secrets Removed"; - icon = faCheck; + Icon = CheckIcon; } return ( -
- - - {!mini && {label}} - -
+ + + {!mini && label} + ); }; diff --git a/frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx b/frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx index e0d541138..26ba74d2a 100644 --- a/frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx +++ b/frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx @@ -1,55 +1,51 @@ import { - faCheck, - faExclamationTriangle, - faHourglass, - faRotate, - IconDefinition -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + AlertTriangleIcon, + CheckIcon, + HourglassIcon, + LucideIcon, + RefreshCwIcon +} from "lucide-react"; -import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { SecretSyncStatus } from "@app/hooks/api/secretSyncs"; type Props = { status: SecretSyncStatus; -} & Omit; +} & Omit; export const SecretSyncStatusBadge = ({ status }: Props) => { - let variant: BadgeProps["variant"]; + let variant: TBadgeProps["variant"]; let text: string; - let icon: IconDefinition; + let Icon: LucideIcon; switch (status) { case SecretSyncStatus.Failed: variant = "danger"; text = "Failed to Sync"; - icon = faExclamationTriangle; + Icon = AlertTriangleIcon; break; case SecretSyncStatus.Succeeded: variant = "success"; text = "Synced"; - icon = faCheck; + Icon = CheckIcon; break; case SecretSyncStatus.Pending: - variant = "primary"; + variant = "info"; text = "Queued"; - icon = faHourglass; + Icon = HourglassIcon; break; case SecretSyncStatus.Running: default: - variant = "primary"; + variant = "info"; text = "Syncing"; - icon = faRotate; + Icon = RefreshCwIcon; break; } return ( - - - {text} + + + {text} ); }; diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx index e7d988f46..08414c14e 100644 --- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx +++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx @@ -5,14 +5,8 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField"; -import { - Badge, - FilterableSelect, - FormControl, - Select, - SelectItem, - Tooltip -} from "@app/components/v2"; +import { FilterableSelect, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { GCP_SYNC_SCOPES } from "@app/helpers/secretSyncs"; import { useGcpConnectionListProjectLocations, @@ -26,10 +20,7 @@ import { TSecretSyncForm } from "../schemas"; const formatOptionLabel = ({ displayName, locationId }: TGcpLocation) => (
- {displayName}{" "} - - {locationId} - + {displayName} {locationId}
); diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx index 6b1894626..829d7c44f 100644 --- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx +++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx @@ -2,7 +2,8 @@ import { components, OptionProps, SingleValue } from "react-select"; import { faCheckCircle } from "@fortawesome/free-regular-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Badge, FilterableSelect } from "@app/components/v2"; +import { FilterableSelect } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { AWS_REGIONS } from "@app/helpers/appConnections"; const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGIONS)[number]>) => { @@ -10,7 +11,7 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI

{children}

- + {props.data.slug} {isSelected && ( diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx index 073cb4175..a70752703 100644 --- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx +++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx @@ -1,10 +1,10 @@ import { useFormContext } from "react-hook-form"; -import { faEye } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { EyeIcon } from "lucide-react"; import { GenericFieldLabel } from "@app/components/secret-syncs"; import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas"; -import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2"; +import { Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { AWS_REGIONS } from "@app/helpers/appConnections"; import { SecretSync } from "@app/hooks/api/secretSyncs"; @@ -41,11 +41,9 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => { } >
- - - - {tags.length} Tag{tags.length > 1 ? "s" : ""} - + + + {tags.length} Tag{tags.length > 1 ? "s" : ""}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx index 90d7d5023..d37cae3f1 100644 --- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx +++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx @@ -1,10 +1,10 @@ import { useFormContext } from "react-hook-form"; -import { faEye } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { EyeIcon } from "lucide-react"; import { GenericFieldLabel } from "@app/components/secret-syncs"; import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas"; -import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2"; +import { Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { AWS_REGIONS } from "@app/helpers/appConnections"; import { SecretSync } from "@app/hooks/api/secretSyncs"; import { AwsSecretsManagerSyncMappingBehavior } from "@app/hooks/api/secretSyncs/types/aws-secrets-manager-sync"; @@ -26,7 +26,7 @@ export const AwsSecretsManagerSyncReviewFields = () => { <> {awsRegion?.name} - + {awsRegion?.slug}{" "} @@ -73,11 +73,9 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => { } >
- - - - {tags.length} Tag{tags.length > 1 ? "s" : ""} - + + + {tags.length} Tag{tags.length > 1 ? "s" : ""}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/RenderSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/RenderSyncReviewFields.tsx index f195f0e72..313d7eb3d 100644 --- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/RenderSyncReviewFields.tsx +++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/RenderSyncReviewFields.tsx @@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form"; import { GenericFieldLabel } from "@app/components/secret-syncs"; import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas"; -import { Badge } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { SecretSync } from "@app/hooks/api/secretSyncs"; import { RenderSyncScope } from "@app/hooks/api/secretSyncs/types/render-sync"; diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx index 44d35cd2c..e5539c71f 100644 --- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx +++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx @@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { GenericFieldLabel } from "@app/components/secret-syncs"; import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas"; -import { Badge } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useProject } from "@app/context"; import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs"; import { SecretSync, useDuplicateDestinationCheck } from "@app/hooks/api/secretSyncs"; @@ -224,7 +224,7 @@ export const SecretSyncReviewFields = () => {
- + {isAutoSyncEnabled ? "Enabled" : "Disabled"} @@ -235,7 +235,7 @@ export const SecretSyncReviewFields = () => { {AdditionalSyncOptionsFieldsComponent} {disableSecretDeletion && ( - Disabled + Disabled )}
diff --git a/frontend/src/components/v2/Badge/Badge.tsx b/frontend/src/components/v2/Badge/Badge.tsx deleted file mode 100644 index 36541a781..000000000 --- a/frontend/src/components/v2/Badge/Badge.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { forwardRef } from "react"; -import { cva, VariantProps } from "cva"; -import { twMerge } from "tailwind-merge"; - -interface IProps { - children: React.ReactNode; - className?: string; - onClick?: (e: React.MouseEvent) => void; -} - -const badgeVariants = cva( - [ - "inline-block cursor-default rounded-md bg-yellow/20 px-1.5 py-0.5 text-xs text-yellow opacity-80 hover:opacity-100" - ], - { - variants: { - variant: { - primary: "bg-yellow/20 text-yellow", - danger: "bg-red/20 text-red", - success: "bg-green/20 text-green", - org: "bg-org-v1/20 text-org-v1 [&_svg]:text-org-v1 flex items-center opacity-100 hover:bg-org-v1/10 [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap", - namespace: - "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1.5 w-min whitespace-nowrap", - project: - "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 w-min gap-x-1.5 whitespace-nowrap", - instance: - "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1.5 w-min whitespace-nowrap" - } - } - } -); - -export type BadgeProps = VariantProps & IProps; - -export const Badge = forwardRef( - ({ children, className, variant, ...props }, ref) => { - return ( -
- {children} -
- ); - } -); diff --git a/frontend/src/components/v2/Badge/index.tsx b/frontend/src/components/v2/Badge/index.tsx deleted file mode 100644 index 5c7042709..000000000 --- a/frontend/src/components/v2/Badge/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { Badge } from "./Badge"; diff --git a/frontend/src/components/v2/PageHeader/PageHeader.tsx b/frontend/src/components/v2/PageHeader/PageHeader.tsx index e3f72f61b..f84edfcd2 100644 --- a/frontend/src/components/v2/PageHeader/PageHeader.tsx +++ b/frontend/src/components/v2/PageHeader/PageHeader.tsx @@ -1,11 +1,16 @@ -import { IconDefinition } from "@fortawesome/free-brands-svg-icons"; -import { faCube, faCubes, faGlobe, faServer } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { createElement } from "react"; import { ReactNode } from "@tanstack/react-router"; +import { LucideIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; -import { Badge } from "@app/components/v2"; -import { BadgeProps } from "@app/components/v2/Badge/Badge"; +import { + Badge, + InstanceIcon, + OrgIcon, + ProjectIcon, + SubOrgIcon, + TBadgeProps +} from "@app/components/v3"; import { ProjectType } from "@app/hooks/api/projects/types"; type Props = { @@ -16,19 +21,19 @@ type Props = { scope: "org" | "namespace" | "instance" | ProjectType | null; }; -const SCOPE_NAME: Record, { label: string; icon: IconDefinition }> = { - org: { label: "Organization", icon: faGlobe }, - [ProjectType.SecretManager]: { label: "Project", icon: faCube }, - [ProjectType.CertificateManager]: { label: "Project", icon: faCube }, - [ProjectType.SSH]: { label: "Project", icon: faCube }, - [ProjectType.KMS]: { label: "Project", icon: faCube }, - [ProjectType.PAM]: { label: "Project", icon: faCube }, - [ProjectType.SecretScanning]: { label: "Project", icon: faCube }, - namespace: { label: "Sub-Organization", icon: faCubes }, - instance: { label: "Server", icon: faServer } +const SCOPE_NAME: Record, { label: string; icon: LucideIcon }> = { + org: { label: "Organization", icon: OrgIcon }, + [ProjectType.SecretManager]: { label: "Project", icon: ProjectIcon }, + [ProjectType.CertificateManager]: { label: "Project", icon: ProjectIcon }, + [ProjectType.SSH]: { label: "Project", icon: ProjectIcon }, + [ProjectType.KMS]: { label: "Project", icon: ProjectIcon }, + [ProjectType.PAM]: { label: "Project", icon: ProjectIcon }, + [ProjectType.SecretScanning]: { label: "Project", icon: ProjectIcon }, + namespace: { label: "Sub-Organization", icon: SubOrgIcon }, + instance: { label: "Server", icon: InstanceIcon } }; -const SCOPE_VARIANT: Record, BadgeProps["variant"]> = { +const SCOPE_VARIANT: Record, TBadgeProps["variant"]> = { org: "org", [ProjectType.SecretManager]: "project", [ProjectType.CertificateManager]: "project", @@ -36,8 +41,8 @@ const SCOPE_VARIANT: Record, BadgeProps["variant"]> [ProjectType.KMS]: "project", [ProjectType.PAM]: "project", [ProjectType.SecretScanning]: "project", - namespace: "namespace", - instance: "instance" + namespace: "sub-org", + instance: "neutral" }; export const PageHeader = ({ title, description, children, className, scope }: Props) => ( @@ -47,7 +52,7 @@ export const PageHeader = ({ title, description, children, className, scope }: P

{title}

{scope && ( - + {createElement(SCOPE_NAME[scope].icon)} {SCOPE_NAME[scope].label} )} diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx index 3954b8b20..99e83823e 100644 --- a/frontend/src/components/v2/Select/Select.tsx +++ b/frontend/src/components/v2/Select/Select.tsx @@ -3,6 +3,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core"; import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as SelectPrimitive from "@radix-ui/react-select"; +import { LucideIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { Spinner } from "../Spinner"; @@ -19,6 +20,7 @@ type Props = { icon?: IconProp; isMulti?: boolean; iconClassName?: string; + LucideIcon?: LucideIcon; dropdownContainerStyle?: React.CSSProperties; side?: SelectPrimitive.SelectContentProps["side"]; }; @@ -39,6 +41,7 @@ export const Select = forwardRef( iconClassName, dropdownContainerStyle, side, + LucideIcon: Lucide, ...props }, ref @@ -65,6 +68,7 @@ export const Select = forwardRef( >
{props.icon && } + {Lucide && }
diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx index 8019c3589..cb4430aa4 100644 --- a/frontend/src/components/v2/index.tsx +++ b/frontend/src/components/v2/index.tsx @@ -2,7 +2,6 @@ export * from "./AccessRestrictedBanner"; export * from "./Accordion"; export * from "./Alert"; -export * from "./Badge"; export * from "./Breadcrumb"; export * from "./Button"; export * from "./Card"; diff --git a/frontend/src/components/v3/generic/Badge/Badge.stories.tsx b/frontend/src/components/v3/generic/Badge/Badge.stories.tsx index da0743a66..4cbf955f9 100644 --- a/frontend/src/components/v3/generic/Badge/Badge.stories.tsx +++ b/frontend/src/components/v3/generic/Badge/Badge.stories.tsx @@ -1,9 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { Link } from "@tanstack/react-router"; import { + AlertTriangleIcon, + AsteriskIcon, BanIcon, - BoxesIcon, - BoxIcon, CheckIcon, ChevronsUpDownIcon, CircleXIcon, @@ -11,9 +11,11 @@ import { GlobeIcon, InfoIcon, RadarIcon, - TriangleAlertIcon + TriangleAlertIcon, + UserIcon } from "lucide-react"; +import { OrgIcon, ProjectIcon, SubOrgIcon } from "../../platform"; import { Badge } from "./Badge"; /** @@ -69,7 +71,29 @@ export const Neutral: Story = { parameters: { docs: { description: { - story: "Use this variant when indicating neutral or disabled states." + story: + "Use this variant when indicating neutral or disabled states or when linking to external documents." + } + } + } +}; + +export const Ghost: Story = { + name: "Variant: Ghost", + args: { + variant: "ghost", + children: ( + <> + + User + + ) + }, + parameters: { + docs: { + description: { + story: + "Use this variant when indicating a configuration or property value. Avoid using this variant as an interactive element as it is not intuitive to interact with." } } } @@ -109,8 +133,7 @@ export const Info: Story = { parameters: { docs: { description: { - story: - "Use this variant when indicating informational states or linking to external references." + story: "Use this variant when indicating informational states." } } } @@ -162,7 +185,7 @@ export const Organization: Story = { variant: "org", children: ( <> - + Organization ) @@ -182,7 +205,7 @@ export const SubOrganization: Story = { variant: "sub-org", children: ( <> - + Sub-Organization ) @@ -202,7 +225,7 @@ export const Project: Story = { variant: "project", children: ( <> - + Project ) @@ -283,10 +306,11 @@ export const AsButton: Story = { export const IsTruncatable: Story = { name: "Example: isTruncatable", args: { + variant: "org", isTruncatable: true, children: ( <> - + Infisical Infrastructure ) @@ -295,7 +319,7 @@ export const IsTruncatable: Story = { docs: { description: { story: - "Use the `isTruncatable` prop with a `span` tag wrapping the text content to support truncation." + "Use the `isTruncatable` prop with a `span` tag wrapping the text content to support truncation. Parent `div` should have a fixed width and `flex` class." } } }, @@ -305,3 +329,48 @@ export const IsTruncatable: Story = {
) }; + +export const IsSquare: Story = { + name: "Example: isSquare", + args: { + variant: "danger", + isSquare: true, + children: + }, + parameters: { + docs: { + description: { + story: + "Use the `isSquare` prop when displaying a squared badge with 1-2 character text or only an icon." + } + } + } +}; + +export const IsFullWidth: Story = { + name: "Example: isFullWidth", + args: { + variant: "neutral", + isFullWidth: true, + + children: ( + <> + + Secret Value + + ) + }, + parameters: { + docs: { + description: { + story: + "Use the `isFullWidth` prop to expand the badges width to fill it's parent container." + } + } + }, + decorators: (Story) => ( +
+ +
+ ) +}; diff --git a/frontend/src/components/v3/generic/Badge/Badge.tsx b/frontend/src/components/v3/generic/Badge/Badge.tsx index cc66806bc..f94bff5f2 100644 --- a/frontend/src/components/v3/generic/Badge/Badge.tsx +++ b/frontend/src/components/v3/generic/Badge/Badge.tsx @@ -6,30 +6,37 @@ import { cn } from "@app/components/v3/utils"; const badgeVariants = cva( [ - "select-none items-center rounded-sm px-1.5 py-0.5 text-xs", - "gap-x-1 [a&,button&]:cursor-pointer inline-flex", - "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&>svg]:size-3", + "select-none items-center align-middle rounded-sm h-4.5 px-1.5 text-xs", + "gap-x-1 [a&,button&]:cursor-pointer inline-flex font-normal", + "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&_svg:not([class*='size-'])]:size-3", "transition duration-200 ease-in-out" ], { variants: { isTruncatable: { true: "[&>span,&>p]:truncate min-w-0", - false: "w-fit shrink-0 whitespace-nowrap overflow-hidden" + false: "w-fit shrink-0 min-w-fit whitespace-nowrap overflow-hidden" + }, + isFullWidth: { + true: "w-full justify-center" + }, + isSquare: { + true: "w-4.5 justify-center px-0.5" }, variant: { - neutral: "bg-neutral/30 text-neutral [a&,button&]:hover:bg-neutral/40", - success: "bg-success/30 text-success [a&,button&]:hover:bg-success/40", - info: "bg-info/30 text-info [a&,button&]:hover:bg-info/40", - warning: "bg-warning/30 text-warning [a&,button&]:hover:bg-warning/40", - danger: "bg-danger/30 text-danger [a&,button&]:hover:bg-danger/40", - project: "bg-project/30 text-project [a&,button&]:hover:bg-project/40", - org: "bg-org/30 text-org [a&,button&]:hover:bg-org/40", - "sub-org": "bg-sub-org/30 text-sub-org [a&,button&]:hover:bg-sub-org/40" + ghost: "text-mineshaft-200 gap-x-2", + neutral: "bg-neutral/25 text-neutral [a&,button&]:hover:bg-neutral/35", + success: "bg-success/25 text-success [a&,button&]:hover:bg-success/35", + info: "bg-info/25 text-info [a&,button&]:hover:bg-info/35", + warning: "bg-warning/25 text-warning [a&,button&]:hover:bg-warning/35", + danger: "bg-danger/25 text-danger [a&,button&]:hover:bg-danger/35", + project: "bg-project/25 text-project [a&,button&]:hover:bg-project/35", + org: "bg-org/25 text-org [a&,button&]:hover:bg-org/35", + "sub-org": "bg-sub-org/25 text-sub-org [a&,button&]:hover:bg-sub-org/35" } }, defaultVariants: { - variant: "success" + variant: "neutral" } } ); @@ -37,16 +44,28 @@ const badgeVariants = cva( type TBadgeProps = VariantProps & React.ComponentProps<"span"> & { asChild?: boolean; + variant: NonNullable["variant"]>; // TODO: REMOVE }; const Badge = forwardRef( - ({ className, variant, asChild = false, isTruncatable = false, ...props }, ref): JSX.Element => { + ( + { + className, + variant, + asChild = false, + isTruncatable = false, + isFullWidth = false, + isSquare = false, + ...props + }, + ref + ): JSX.Element => { const Comp = asChild ? Slot : "span"; return ( ); diff --git a/frontend/src/components/v3/index.ts b/frontend/src/components/v3/index.ts index e69de29bb..1b74c0e26 100644 --- a/frontend/src/components/v3/index.ts +++ b/frontend/src/components/v3/index.ts @@ -0,0 +1,2 @@ +export * from "./generic"; +export * from "./platform"; diff --git a/frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.stories.tsx b/frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.stories.tsx new file mode 100644 index 000000000..bd746532e --- /dev/null +++ b/frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; + +import { DocumentationLinkBadge } from "./DocumentationLinkBadge"; + +/** + * The documentation link badge is a re-usable component to link to Infisical documentation references. + */ +const meta = { + title: "Platform/Documentation Link Badge", + component: DocumentationLinkBadge, + parameters: { + layout: "centered" + }, + tags: ["autodocs"], + argTypes: {}, + args: { href: "https://infisical.com/docs/documentation/getting-started/introduction" } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + name: "Example: Default" +}; diff --git a/frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.tsx b/frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.tsx new file mode 100644 index 000000000..b847f93ae --- /dev/null +++ b/frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.tsx @@ -0,0 +1,18 @@ +import { BookOpenIcon } from "lucide-react"; + +import { Badge } from "@app/components/v3"; + +type TDocumentationLinkBadgeProps = { + href: string; +}; + +export function DocumentationLinkBadge({ href }: TDocumentationLinkBadgeProps) { + return ( + + + + Documentation + + + ); +} diff --git a/frontend/src/components/v3/platform/DocumentationLinkBadge/index.ts b/frontend/src/components/v3/platform/DocumentationLinkBadge/index.ts new file mode 100644 index 000000000..aed3c2244 --- /dev/null +++ b/frontend/src/components/v3/platform/DocumentationLinkBadge/index.ts @@ -0,0 +1 @@ +export * from "./DocumentationLinkBadge"; diff --git a/frontend/src/components/v3/platform/ScopeIcons.tsx b/frontend/src/components/v3/platform/ScopeIcons.tsx new file mode 100644 index 000000000..8f8712319 --- /dev/null +++ b/frontend/src/components/v3/platform/ScopeIcons.tsx @@ -0,0 +1,8 @@ +import { BoxesIcon, BoxIcon, Building2Icon, ServerIcon } from "lucide-react"; + +const InstanceIcon = ServerIcon; +const OrgIcon = Building2Icon; +const SubOrgIcon = BoxesIcon; +const ProjectIcon = BoxIcon; + +export { InstanceIcon, OrgIcon, ProjectIcon, SubOrgIcon }; diff --git a/frontend/src/components/v3/platform/index.ts b/frontend/src/components/v3/platform/index.ts new file mode 100644 index 000000000..ab5839618 --- /dev/null +++ b/frontend/src/components/v3/platform/index.ts @@ -0,0 +1,2 @@ +export * from "./DocumentationLinkBadge"; +export * from "./ScopeIcons"; diff --git a/frontend/src/helpers/policies.ts b/frontend/src/helpers/policies.ts index d798d3c10..58feaf703 100644 --- a/frontend/src/helpers/policies.ts +++ b/frontend/src/helpers/policies.ts @@ -1,20 +1,20 @@ -import { IconDefinition } from "@fortawesome/free-brands-svg-icons"; -import { faArrowRightToBracket, faEdit } from "@fortawesome/free-solid-svg-icons"; +import { LucideIcon, UserCheckIcon, UserPenIcon } from "lucide-react"; +import { TBadgeProps } from "@app/components/v3"; import { PolicyType } from "@app/hooks/api/policies/enums"; export const policyDetails: Record< PolicyType, - { name: string; className: string; icon: IconDefinition } + { name: string; variant: TBadgeProps["variant"]; Icon: LucideIcon } > = { [PolicyType.AccessPolicy]: { - className: "bg-green/20 text-green", + variant: "ghost", name: "Access Policy", - icon: faArrowRightToBracket + Icon: UserCheckIcon }, [PolicyType.ChangePolicy]: { - className: "bg-yellow/20 text-yellow", + variant: "ghost", name: "Change Policy", - icon: faEdit + Icon: UserPenIcon } }; diff --git a/frontend/src/helpers/secretScanningV2.ts b/frontend/src/helpers/secretScanningV2.ts index 4e88b8482..ee5226611 100644 --- a/frontend/src/helpers/secretScanningV2.ts +++ b/frontend/src/helpers/secretScanningV2.ts @@ -1,10 +1,6 @@ -import { - faBan, - faCheck, - faMagnifyingGlassMinus, - faWarning -} from "@fortawesome/free-solid-svg-icons"; +import { AlertTriangleIcon, BanIcon, CheckIcon, LucideIcon, SearchSlashIcon } from "lucide-react"; +import { TBadgeProps } from "@app/components/v3"; import { AppConnection } from "@app/hooks/api/appConnections/enums"; import { SecretScanningDataSource, @@ -74,12 +70,28 @@ export const RESOURCE_DESCRIPTION_HELPER: Record< } }; -export const SECRET_SCANNING_FINDING_STATUS_ICON_MAP = { - [SecretScanningFindingStatus.Resolved]: { icon: faCheck, className: "text-green" }, - [SecretScanningFindingStatus.Unresolved]: { icon: faWarning, className: "text-yellow" }, - [SecretScanningFindingStatus.Ignore]: { icon: faBan, className: "text-mineshaft-400" }, +export const SECRET_SCANNING_FINDING_STATUS_MAP: Record< + SecretScanningFindingStatus, + { Icon: LucideIcon; variant: TBadgeProps["variant"]; className: string } +> = { + [SecretScanningFindingStatus.Resolved]: { + Icon: CheckIcon, + variant: "success", + className: "text-success" + }, + [SecretScanningFindingStatus.Unresolved]: { + Icon: AlertTriangleIcon, + variant: "warning", + className: "text-warning" + }, + [SecretScanningFindingStatus.Ignore]: { + Icon: BanIcon, + variant: "neutral", + className: "text-neutral" + }, [SecretScanningFindingStatus.FalsePositive]: { - icon: faMagnifyingGlassMinus, - className: "text-mineshaft-400" + Icon: SearchSlashIcon, + variant: "neutral", + className: "text-neutral" } }; diff --git a/frontend/src/hooks/api/ca/constants.tsx b/frontend/src/hooks/api/ca/constants.tsx index 778656da4..16a350dbd 100644 --- a/frontend/src/hooks/api/ca/constants.tsx +++ b/frontend/src/hooks/api/ca/constants.tsx @@ -53,6 +53,6 @@ export const getCaStatusBadgeVariant = (status: CaStatus | SshCaStatus | SshCert case CaStatus.DISABLED: return "danger"; default: - return "primary"; + return "warning"; } }; diff --git a/frontend/src/hooks/api/pam/types/index.ts b/frontend/src/hooks/api/pam/types/index.ts index 23cdf389d..1b1890cbd 100644 --- a/frontend/src/hooks/api/pam/types/index.ts +++ b/frontend/src/hooks/api/pam/types/index.ts @@ -1,9 +1,9 @@ import { PamResourceType, PamSessionStatus } from "../enums"; -import { TPostgresAccount, TPostgresResource } from "./postgres-resource"; import { TMySQLAccount, TMySQLResource } from "./mysql-resource"; +import { TPostgresAccount, TPostgresResource } from "./postgres-resource"; -export * from "./postgres-resource"; export * from "./mysql-resource"; +export * from "./postgres-resource"; export type TPamResource = TPostgresResource | TMySQLResource; diff --git a/frontend/src/hooks/api/pkiSubscriber/constants.tsx b/frontend/src/hooks/api/pkiSubscriber/constants.tsx index 1de5e9ddb..768df9f52 100644 --- a/frontend/src/hooks/api/pkiSubscriber/constants.tsx +++ b/frontend/src/hooks/api/pkiSubscriber/constants.tsx @@ -15,6 +15,6 @@ export const getPkiSubscriberStatusBadgeVariant = (status: PkiSubscriberStatus) case PkiSubscriberStatus.DISABLED: return "danger"; default: - return "primary"; + return "warning"; } }; diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx index f9ef51133..014c77baa 100644 --- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx +++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx @@ -7,15 +7,12 @@ import { faCaretDown, faCheck, faChevronRight, - faCubes, faEnvelope, faExclamationTriangle, - faGlobe, faInfinity, faInfo, faInfoCircle, faPlus, - faServer, faSignOut, faToolbox, faUser, @@ -30,7 +27,6 @@ import { Mfa } from "@app/components/auth/Mfa"; import { createNotification } from "@app/components/notifications"; import SecurityClient from "@app/components/utilities/SecurityClient"; import { - Badge, BreadcrumbContainer, Button, DropdownMenu, @@ -46,6 +42,7 @@ import { TBreadcrumbFormat, Tooltip } from "@app/components/v2"; +import { Badge, InstanceIcon, OrgIcon, SubOrgIcon } from "@app/components/v3"; import { envConfig } from "@app/config/env"; import { useOrganization, useSubscription, useUser } from "@app/context"; import { isInfisicalCloud } from "@app/helpers/platform"; @@ -271,9 +268,7 @@ export const Navbar = () => { to="/admin" className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary" > -
- -
+
Server Console

/

@@ -288,24 +283,31 @@ export const Navbar = () => {
{ - navigate({ - to: "/organization/projects", - search: (search) => ({ ...search, subOrganization: undefined }) - }); - if (isSubOrganization) { - await router.invalidate({ sync: true }).catch(() => null); - } - }} + asChild variant="org" + isTruncatable + // TODO(scott): either add badge size/style variant or create designated component for namespace/org nav bar className={twMerge( - "max-w-full min-w-0 cursor-pointer text-sm", + "gap-x-1.5 text-sm", (!isOrgScope || isSubOrganization) && - "bg-transparent text-mineshaft-200 hover:bg-transparent hover:underline" + "bg-transparent text-mineshaft-200 hover:!bg-transparent hover:underline [&>svg]:!text-org" )} > - -

{currentOrg?.name}

+
{getPlan(subscription)} @@ -443,19 +445,22 @@ export const Navbar = () => { <>

/

- - - -

{currentOrg.subOrganization.name}

- - + svg]:!text-sub-org" + )} + > + + + {currentOrg.subOrganization.name} + +
{ )} {user.superAdmin && !location.pathname.startsWith("/admin") && ( - + Server Console )} diff --git a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx index 72430fec6..c26333332 100644 --- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx +++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx @@ -3,7 +3,6 @@ import { faStar } from "@fortawesome/free-regular-svg-icons"; import { faCaretDown, faCheck, - faCube, faMagnifyingGlass, faPlus, faStar as faSolidStar @@ -16,7 +15,6 @@ import { createNotification } from "@app/components/notifications"; import { OrgPermissionCan } from "@app/components/permissions"; import { NewProjectModal } from "@app/components/projects"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -25,6 +23,7 @@ import { Input, Tooltip } from "@app/components/v2"; +import { Badge, ProjectIcon } from "@app/components/v3"; import { OrgPermissionActions, OrgPermissionSubjects, @@ -120,11 +119,9 @@ export const ProjectSelect = () => {

{currentWorkspace?.name}

- - - - {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"} - + + + {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"} diff --git a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx index f3737a2dc..47a2333c7 100644 --- a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx +++ b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx @@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Link, Outlet, useLocation } from "@tanstack/react-router"; import { motion } from "framer-motion"; -import { Badge, Tab, TabList, Tabs } from "@app/components/v2"; +import { Tab, TabList, Tabs } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useProject, useProjectPermission } from "@app/context"; import { useGetAccessRequestsCount, @@ -88,7 +89,7 @@ export const SecretManagerLayout = () => { {Boolean( secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount ) && ( - + {pendingRequestsCount} )} diff --git a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx index 227f7ae70..0a1fd14f4 100644 --- a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx +++ b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx @@ -1,7 +1,8 @@ import { Link, Outlet, useLocation } from "@tanstack/react-router"; import { motion } from "framer-motion"; -import { Badge, Tab, TabList, Tabs } from "@app/components/v2"; +import { Tab, TabList, Tabs } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionSub, useProject, @@ -66,7 +67,7 @@ export const SecretScanningLayout = () => { Findings {Boolean(unresolvedFindings) && ( - + {unresolvedFindings} )} diff --git a/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx b/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx index 5b34aa029..7e207fbc5 100644 --- a/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx +++ b/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx @@ -7,16 +7,15 @@ import { faTrash, faUsers, faUserXmark, - faWarning, faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { AlertTriangleIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { createNotification } from "@app/components/notifications"; import { - Badge, Button, Checkbox, DeleteActionModal, @@ -38,6 +37,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useSubscription, useUser } from "@app/context"; import { getUserTablePreference, @@ -451,7 +451,7 @@ export const ServerAdminsTable = () => { const email = user.email ?? user.username; return (
  • -
    +

    {user.firstName || user.lastName ? ( <> @@ -464,15 +464,10 @@ export const ServerAdminsTable = () => {

    {userId === user.id && ( -
    - - - Deleting Yourself - -
    + + + Deleting Yourself +     )}
    diff --git a/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx b/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx index cac64d135..fbf956b7b 100644 --- a/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx +++ b/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from "react"; -import { faRotate } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { RefreshCwIcon } from "lucide-react"; import { createNotification } from "@app/components/notifications"; -import { Badge, Button, DeleteActionModal } from "@app/components/v2"; +import { Button, DeleteActionModal } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useUser } from "@app/context"; import { usePopUp } from "@app/hooks"; import { useInvalidateCache } from "@app/hooks/api"; @@ -62,11 +62,8 @@ export const CachingPageForm = () => {
    Secrets Cache {isInvalidating && ( - - + + Invalidating Cache )} diff --git a/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx b/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx index 69f4139a2..238671d40 100644 --- a/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx +++ b/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx @@ -1,13 +1,13 @@ import { useCallback } from "react"; import { Controller, useForm } from "react-hook-form"; -import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; +import { InfoIcon } from "lucide-react"; import { z } from "zod"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { createNotification } from "@app/components/notifications"; -import { Badge, Button, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2"; +import { Button, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useServerConfig, useSubscription } from "@app/context"; import { usePopUp } from "@app/hooks"; import { @@ -132,12 +132,10 @@ export const EncryptionPageForm = () => { {config.fipsEnabled && ( -
    - - FIPS Mode: Enabled - - -
    + + FIPS Mode: Enabled + +     )}
    diff --git a/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx b/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx index 59df496af..5f74593a3 100644 --- a/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx +++ b/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx @@ -1,8 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { Control, Controller, useForm, useWatch } from "react-hook-form"; import { - faArrowUpRightFromSquare, - faBookOpen, faChevronRight, faExclamationTriangle, faMagnifyingGlass @@ -14,6 +12,7 @@ import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { Button, FormControl, Input, SecretInput, Tooltip } from "@app/components/v2"; import { HighlightText } from "@app/components/v2/HighlightText"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { useGetEnvOverrides, useUpdateServerConfig } from "@app/hooks/api"; type TForm = Record; @@ -213,22 +212,9 @@ export const EnvironmentPageForm = () => { >
    -
    +

    Overrides

    - -
    - - Docs - -
    -     +

    Override specific environment variables. After saving, it may take up to 5 minutes for diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx index c493fe24d..9929d7500 100644 --- a/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx +++ b/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx @@ -7,10 +7,10 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ServerCogIcon } from "lucide-react"; import { createNotification } from "@app/components/notifications"; import { - Badge, DeleteActionModal, DropdownMenu, DropdownMenuContent, @@ -29,6 +29,7 @@ import { THead, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { getUserTablePreference, PreferenceKey, @@ -110,7 +111,8 @@ const IdentityPanelTable = ({ {name} {isInstanceAdmin && ( - + + Server Admin )} diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx index 9405505c8..fbb9462d0 100644 --- a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx +++ b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx @@ -3,7 +3,6 @@ import { faArrowDown, faArrowUp, faBuilding, - faCircleQuestion, faEllipsisV, faEnvelope, faEye, @@ -19,11 +18,11 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; +import { CircleQuestionMarkIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { - Badge, Button, DeleteActionModal, DropdownMenu, @@ -46,6 +45,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useUser } from "@app/context"; import { OrgMembershipRole } from "@app/helpers/roles"; import { @@ -295,15 +295,17 @@ const ViewMembersModalContent = ({ )}

    - - -

    {member.role.replace("-", " ")}

    - {Boolean(member.roleId) && ( - - - - )} -     + +
    + + + {member.role.replace("-", " ")} + {Boolean(member.roleId) && } + + +
    diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx index 7b5b2c3d5..05d07d426 100644 --- a/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx +++ b/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx @@ -9,16 +9,15 @@ import { faUsers, faUserShield, faUserXmark, - faWarning, faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { AlertTriangleIcon, UserCogIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { createNotification } from "@app/components/notifications"; import { - Badge, Button, Checkbox, DeleteActionModal, @@ -41,6 +40,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useSubscription, useUser } from "@app/context"; import { getUserTablePreference, @@ -218,7 +218,8 @@ const UserPanelTable = ({ {name ?? Not Set}

    {superAdmin && ( - + + Server Admin )} @@ -548,7 +549,7 @@ export const UserIdentitiesTable = () => { const email = user.email ?? user.username; return (
  • -
    +

    {user.firstName || user.lastName ? ( <> @@ -561,15 +562,10 @@ export const UserIdentitiesTable = () => {

    {userId === user.id && ( -
    - - - Deleting Yourself - -
    + + + Deleting Yourself +     )}
    diff --git a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesTable.tsx b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesTable.tsx index e9f65c4f6..c04b8525a 100644 --- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesTable.tsx +++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesTable.tsx @@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -22,6 +21,7 @@ import { THead, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; import { useGetCaCerts } from "@app/hooks/api"; @@ -60,7 +60,7 @@ export const CaCertificatesTable = ({ caId }: Props) => {
    CA Certificate {caCert.version} {isLastItem && ( - + Current )} diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx index 81fce98c6..09fe39af6 100644 --- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx +++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx @@ -6,7 +6,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -22,6 +21,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context"; import { CaStatus, CaType, useListCasByTypeAndProjectId } from "@app/hooks/api"; import { diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx index a948473e8..0f3fca6cd 100644 --- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx +++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx @@ -10,7 +10,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -26,6 +25,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context"; import { CaStatus, CaType, useListExternalCasByProjectId } from "@app/hooks/api"; import { caStatusToNameMap, getCaStatusBadgeVariant } from "@app/hooks/api/ca/constants"; diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx index cd0b3fa5a..8b26e2d1a 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx @@ -13,7 +13,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -30,6 +29,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionCertificateActions, ProjectPermissionSub, diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.utils.ts b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.utils.ts index 93b408bbe..2ac7ec9ce 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.utils.ts +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.utils.ts @@ -5,13 +5,13 @@ export const getCertValidUntilBadgeDetails = (notAfter: string) => { const notAfterDate = new Date(notAfter).getTime(); const diffInMs = notAfterDate - currentDate; - let variant: "success" | "primary" | "danger" = "success"; + let variant: "success" | "warning" | "danger" = "success"; let label = "Healthy"; if (diffInMs > ms("60d")) { variant = "success"; } else if (diffInMs > ms("30d")) { - variant = "primary"; + variant = "warning"; } else { variant = "danger"; } diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx index eb16166fc..1c5bff98c 100644 --- a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx +++ b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx @@ -1,7 +1,6 @@ import { useCallback, useMemo } from "react"; import { subject } from "@casl/ability"; import { - faBan, faCalendarCheck, faCheck, faCopy, @@ -19,6 +18,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { format } from "date-fns"; +import { BanIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; @@ -29,7 +29,6 @@ import { PkiSyncStatusBadge } from "@app/components/pki-syncs"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -39,6 +38,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ROUTE_PATHS } from "@app/const/routes"; import { ProjectPermissionSub } from "@app/context"; import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types"; @@ -172,10 +172,7 @@ export const PkiSyncRow = ({
    - + Source Deleted @@ -234,12 +231,10 @@ export const PkiSyncRow = ({ className="text-xs" content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination." > -
    - - - {!syncStatus && "Auto-Sync Disabled"} - -
    + + + {!syncStatus && "Auto-Sync Disabled"} + )} {syncOption?.canImportCertificates && } diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx index 564eeb789..1c1141382 100644 --- a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx +++ b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx @@ -1,11 +1,12 @@ import { useCallback, useEffect, useMemo } from "react"; -import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate, useSearch } from "@tanstack/react-router"; import { ProjectPermissionCan } from "@app/components/permissions"; import { CreatePkiSyncModal } from "@app/components/pki-syncs"; import { Button, Spinner } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { ROUTE_PATHS } from "@app/const/routes"; import { ProjectPermissionSub, useProject } from "@app/context"; import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types"; @@ -64,21 +65,10 @@ export const PkiSyncsTab = () => {
    -

    Certificate Syncs

    - -
    - - Docs - -
    -     +
    +

    Certificate Syncs

    + +

    Use App Connections to sync certificates to third-party services. diff --git a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx index d3533d71d..129af29d3 100644 --- a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx +++ b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx @@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -24,6 +23,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionPkiSubscriberActions, ProjectPermissionSub, @@ -93,7 +93,7 @@ export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen } if (daysUntilExpiry < 30) { - return Expiring Soon; + return Expiring Soon; } return Valid; diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx index d28c2d3a2..89dfd5f02 100644 --- a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx +++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx @@ -11,7 +11,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -27,6 +26,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionPkiSubscriberActions, ProjectPermissionSub, diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx index 462678280..bb8e9d02a 100644 --- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx +++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx @@ -1,7 +1,6 @@ import { useCallback } from "react"; import { subject } from "@casl/ability"; import { - faBan, faCheck, faCopy, faDownload, @@ -15,6 +14,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; +import { BanIcon, RefreshCwIcon } from "lucide-react"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; @@ -26,7 +26,6 @@ import { PkiSyncRemoveStatusBadge } from "@app/components/pki-syncs"; import { - Badge, Button, DropdownMenu, DropdownMenuContent, @@ -35,6 +34,7 @@ import { IconButton, Tooltip } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ROUTE_PATHS } from "@app/const/routes"; import { ProjectPermissionSub } from "@app/context"; import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types"; @@ -136,24 +136,19 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => { {syncOption?.canImportCertificates && } {pkiSync.isAutoSyncEnabled ? ( - - - Auto-Sync Enabled + + + Auto-Sync Enabled ) : ( -

    - - - Auto-Sync Disabled - -
    + + + Auto-Sync Disabled + )}
    diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx index 3af7bf189..b6365f1cd 100644 --- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx +++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx @@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ProjectPermissionCan } from "@app/components/permissions"; import { GenericFieldLabel } from "@app/components/secret-syncs"; -import { Badge, IconButton } from "@app/components/v2"; +import { IconButton } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionSub } from "@app/context"; import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types"; import { TPkiSync } from "@app/hooks/api/pkiSyncs"; diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx index 5885795e2..c9dc041df 100644 --- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx +++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx @@ -1,10 +1,12 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ import { subject } from "@casl/ability"; -import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; +import { faEdit } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { AlertTriangleIcon } from "lucide-react"; import { ProjectPermissionCan } from "@app/components/permissions"; -import { Badge, IconButton, Tooltip } from "@app/components/v2"; +import { IconButton, Tooltip } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionSub } from "@app/context"; import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types"; import { TPkiSync } from "@app/hooks/api/pkiSyncs"; @@ -36,15 +38,10 @@ export const PkiSyncSourceSection = ({ pkiSync, onEditSource }: Props) => {
    {!subscriberId && ( -
    - - - Source Deleted - -
    + + + Source Deleted +     )} diff --git a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx index 27a1e7cd1..ab7eb549e 100644 --- a/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx +++ b/frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx @@ -12,7 +12,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { createNotification } from "@app/components/notifications"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -21,6 +20,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useProjectPermission } from "@app/context"; import { ProjectPermissionActions, @@ -45,42 +45,26 @@ const MetricsBadges = ({ }; }) => { if (!metrics) { - return ( - - No metrics - - ); + return No metrics; } if (metrics.totalCertificates === 0) { - return ( - - No certificates - - ); + return No certificates; } return ( <> {metrics.activeCertificates > 0 && ( - - {metrics.activeCertificates} active - + {metrics.activeCertificates} active )} {metrics.expiringCertificates > 0 && ( - - {metrics.expiringCertificates} expiring - + {metrics.expiringCertificates} expiring )} {metrics.expiredCertificates > 0 && ( - - {metrics.expiredCertificates} expired - + {metrics.expiredCertificates} expired )} {metrics.revokedCertificates > 0 && ( - - {metrics.revokedCertificates} revoked - + {metrics.revokedCertificates} revoked )} ); @@ -135,7 +119,7 @@ export const ProfileRow = ({ profile, onEditProfile, onDeleteProfile }: Props) = const getEnrollmentTypeBadge = (enrollmentType: string) => { const config = { api: { variant: "success" as const, label: "API" }, - est: { variant: "primary" as const, label: "EST" } + est: { variant: "warning" as const, label: "EST" } } as const; const configKey = Object.keys(config).includes(enrollmentType) diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx index bf721edfb..a6675ea88 100644 --- a/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx +++ b/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx @@ -23,7 +23,6 @@ import { motion } from "framer-motion"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, Button, DropdownMenu, DropdownMenuContent, @@ -44,7 +43,7 @@ import { Tooltip, Tr } from "@app/components/v2"; -import { BadgeProps } from "@app/components/v2/Badge/Badge"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionCmekActions, @@ -72,7 +71,7 @@ import { DeleteCmekModal } from "./DeleteCmekModal"; const getStatusBadgeProps = ( isDisabled: boolean -): { variant: BadgeProps["variant"]; label: string } => { +): { variant: TBadgeProps["variant"]; label: string } => { if (isDisabled) { return { variant: "danger", diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx index 4163beb5a..5c9eac072 100644 --- a/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx +++ b/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx @@ -7,7 +7,6 @@ import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { decodeBase64 } from "@app/components/utilities/cryptography/crypto"; import { - Badge, Button, FormControl, Modal, @@ -19,6 +18,7 @@ import { TextArea, Tooltip } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { SigningAlgorithm, TCmek, useCmekVerify } from "@app/hooks/api/cmeks"; import { isBase64 } from "@app/lib/fn/base64"; @@ -112,30 +112,22 @@ const VerifyForm = ({ cmek }: FormProps) => {
    Signature Status: - - - {signatureValid ? ( -
    -

    Valid

    -
    - ) : ( -
    -

    Invalid

    -
    - )} -     -     + + + {signatureValid ? "Valid" : "Invalid"} + +
    Signing Algorithm: - {signingAlgorithm} + {signingAlgorithm}
    Signature:{" "} diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx index 753ebd93c..03621f8e4 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx @@ -5,6 +5,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { createNotification } from "@app/components/notifications"; import { OrgPermissionCan } from "@app/components/permissions"; import { Button, DeleteActionModal } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { OrgPermissionGroupActions, OrgPermissionSubjects, useSubscription } from "@app/context"; import { useDeleteGroup } from "@app/hooks/api"; import { usePopUp } from "@app/hooks/usePopUp"; @@ -57,7 +58,10 @@ export const OrgGroupsSection = () => { return (
    -

    Groups

    +
    +

    Groups

    + +
    {(isAllowed) => (
    diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx index 8e5d223ca..572de9eba 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx @@ -11,19 +11,18 @@ import { faMagnifyingGlass, faSearch, faUsers, - faUserShield, faUserSlash, faUserXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; +import { UserCogIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { LastLoginSection } from "@app/components/organization/LastLoginSection"; import { OrgPermissionCan } from "@app/components/permissions"; import { - Badge, Button, Checkbox, DropdownMenu, @@ -50,6 +49,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { OrgPermissionActions, OrgPermissionSubjects, @@ -519,17 +519,17 @@ export const OrgMembersTable = ({ -
    +

    {name ?? Not Set}

    {u.superAdmin && ( - - Server Admin - - - - + + + + Server Admin + + )} {lastLoginAuthMethod && lastLoginTime && ( { return (
    -

    - {isSubOrganization ? "Sub-" : ""}Organization Roles -

    +
    +

    + {isSubOrganization ? "Sub-" : ""}Organization Roles +

    + +
    {(isAllowed) => (
    {workspace.isMember ? ( - - - Joined + + + Joined ) : ( Expired ) : ( - + {row.encryptedSecret ? "Secret Provided" : "Pending Secret"} )} - - -
    - {row.accessType === SecretSharingAccessType.Anyone - ? "Anyone" - : "Organization Members"} -
    -     -     + + + {row.accessType === SecretSharingAccessType.Anyone ? "Anyone" : "Organization Members"} + + {`${format(new Date(row.createdAt), "yyyy-MM-dd - HH:mm a")}`} {row.expiresAt ? format(new Date(row.expiresAt), "yyyy-MM-dd - HH:mm a") : "-"} diff --git a/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretsRow.tsx b/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretsRow.tsx index 2394253e7..d4b40723b 100644 --- a/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretsRow.tsx +++ b/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretsRow.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { format } from "date-fns"; import { IconButton, Td, Tooltip, Tr } from "@app/components/v2"; -import { Badge } from "@app/components/v2/Badge"; +import { Badge } from "@app/components/v3"; import { TSharedSecret } from "@app/hooks/api/secretSharing"; import { UsePopUpState } from "@app/hooks/usePopUp"; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx index 1d5cbc4f0..2d473892a 100644 --- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx @@ -1,6 +1,6 @@ -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams"; import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; @@ -34,20 +34,9 @@ export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Prop )}
    -
    +
    {providerDetails.name} - -
    - - Docs - -
    -     +

    {logStreamExists diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx index ef47f3195..251cebcbe 100644 --- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx @@ -2,7 +2,8 @@ import { Controller, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { createNotification } from "@app/components/notifications"; -import { Badge, Button, FormControl, Input, Select, SelectItem } from "@app/components/v2"; +import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useOrganization } from "@app/context"; import { useAddExternalKms, useUpdateExternalKms } from "@app/hooks/api"; import { @@ -244,7 +245,7 @@ export const AwsKmsForm = ({ onCompleted, onCancel, kms }: Props) => { > {AWS_REGIONS.map((awsRegion) => ( - {awsRegion.name} {awsRegion.slug} + {awsRegion.name} {awsRegion.slug} ))} diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx index 07711d306..610ac823e 100644 --- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx @@ -3,7 +3,8 @@ import { Controller, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { createNotification } from "@app/components/notifications"; -import { Badge, Button, FilterableSelect, FormControl, Input } from "@app/components/v2"; +import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useOrganization } from "@app/context"; import { useAddExternalKms, @@ -71,7 +72,7 @@ const GCP_REGIONS = [ const formatOptionLabel = ({ value, label }: { value: string; label: string }) => (

    {label} - {value} + {value}
    ); diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx index 8ad40ae4b..c244caa81 100644 --- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx @@ -1,5 +1,4 @@ -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { DocumentationLinkBadge } from "@app/components/v3"; type ProviderDetails = { label: string; @@ -24,23 +23,9 @@ export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => { className="h-12 w-12 rounded-md bg-bunker-500 p-2" />
    -
    +
    {providerDetails.label} - -
    - - Docs - -
    -     +

    {isConnected diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx index bfdd27c02..2bf8fd5d3 100644 --- a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx @@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { OrgPermissionCan } from "@app/components/permissions"; import { - Badge, Button, DeleteActionModal, DropdownMenu, @@ -24,6 +23,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context"; import { withPermission } from "@app/hoc"; import { usePopUp } from "@app/hooks"; @@ -48,7 +48,7 @@ const renderStatus = (status: WorkflowIntegrationStatus) => { } if (status === WorkflowIntegrationStatus.Pending) { - return Pending; + return Pending; } return Failed; diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx index 8d524c41c..ee6120d09 100644 --- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx @@ -1,10 +1,11 @@ import { useState } from "react"; -import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { OrgPermissionCan } from "@app/components/permissions"; import { Button } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context"; import { TProjectTemplate } from "@app/hooks/api/projectTemplates"; import { usePopUp } from "@app/hooks/usePopUp"; @@ -33,22 +34,9 @@ export const ProjectTemplatesSection = () => { project setup

    -
    +

    Project Templates

    - -
    - - Docs - -
    -     + - - + + {isFlatView && accountPath && ( - - + + )} {account.lastRotatedAt && ( - - + + Rotated {formatDistance(new Date(), account.lastRotatedAt)} ago )} diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx index 06c04e019..278ac3a62 100644 --- a/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx +++ b/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx @@ -3,7 +3,7 @@ import { faCheckCircle } from "@fortawesome/free-regular-svg-icons"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Badge } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { PAM_RESOURCE_TYPE_MAP, PamResourceType } from "@app/hooks/api/pam"; export const PamResourceOption = ({ @@ -27,7 +27,7 @@ export const PamResourceOption = ({ <>

    {children}

    - + {`${name} - + diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx index c527c2716..f53803ce8 100644 --- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx +++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx @@ -1,7 +1,9 @@ -import { faBoxOpen, faCheck, faCopy, faUser } from "@fortawesome/free-solid-svg-icons"; +import { faCheck, faCopy, faUser } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { PackageOpenIcon } from "lucide-react"; -import { Badge, IconButton, Tooltip } from "@app/components/v2"; +import { IconButton, Tooltip } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useTimedReset } from "@app/hooks"; import { PAM_RESOURCE_TYPE_MAP, TPamSession } from "@app/hooks/api/pam"; @@ -76,8 +78,8 @@ export const PamSessionDetailsSection = ({ className="size-4" />

    {accountName}

    - - + + {resourceName}
    diff --git a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionStatusBadge.tsx b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionStatusBadge.tsx index bbdb3c391..1b347210e 100644 --- a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionStatusBadge.tsx +++ b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionStatusBadge.tsx @@ -1,45 +1,38 @@ import { - faBan, - faCircle, - faGavel, - faHourglass, - IconDefinition -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { twMerge } from "tailwind-merge"; + ActivityIcon, + BanIcon, + ChevronsLeftRightEllipsisIcon, + GavelIcon, + LucideIcon +} from "lucide-react"; -import { Badge } from "@app/components/v2"; +import { Badge, TBadgeProps } from "@app/components/v3"; import { PamSessionStatus } from "@app/hooks/api/pam"; interface StatusConfig { - bgColor: string; - textColor: string; - icon: IconDefinition; - iconClassName?: string; + variant: TBadgeProps["variant"]; + icon: LucideIcon; + className?: string; } const PAM_SESSION_STATUS_CONFIG: Record = { [PamSessionStatus.Active]: { - bgColor: "bg-green/20", - textColor: "text-green", - icon: faCircle, - iconClassName: "size-2 animate-pulse" + variant: "success", + icon: ActivityIcon, + className: "animate-pulse" }, [PamSessionStatus.Terminated]: { - bgColor: "bg-red/20", - textColor: "text-red", - icon: faGavel + variant: "danger", + icon: GavelIcon }, [PamSessionStatus.Starting]: { - bgColor: "bg-yellow/20", - textColor: "text-yellow", - icon: faHourglass, - iconClassName: "animate-spin" + variant: "info", + icon: ChevronsLeftRightEllipsisIcon, + className: "animate-pulse" }, [PamSessionStatus.Ended]: { - bgColor: "bg-bunker-300/20", - textColor: "text-bunker-300", - icon: faBan + variant: "neutral", + icon: BanIcon } }; @@ -48,15 +41,11 @@ export const PamSessionStatusBadge = ({ status }: { status: PamSessionStatus }) const displayName = status[0].toUpperCase() + status.slice(1); + const Icon = config.icon; + return ( - - + + {displayName} ); diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx index b2a2b7cf3..f4eb9e52a 100644 --- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx @@ -5,6 +5,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { Button, DeleteActionModal } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionSub, @@ -68,7 +69,10 @@ export const GroupsSection = () => { return (
    -

    User Groups

    +
    +

    User Groups

    + +
    {(isAllowed) => ( ) : lastScanStatus === SecretScanningScanStatus.Failed ? ( No findings ) : ( - + No Secrets Detected @@ -209,12 +200,10 @@ export const SecretScanningResourceRow = ({ resource, dataSource }: Props) => { className="text-xs" content={`This ${resourceDetails.singularNoun} will not be scanned due to exclusion in Data Source configuration.`} > -
    - - - Inactive - -
    + + + Inactive + )} diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx index e174aa0ed..a89402c15 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx +++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx @@ -1,14 +1,14 @@ import { useCallback } from "react"; -import { faCheck, faCopy, faEllipsisV, faWarning } from "@fortawesome/free-solid-svg-icons"; +import { faCheck, faCopy, faEllipsisV } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { format } from "date-fns"; +import { AlertTriangleIcon, CheckIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { SecretScanningScanStatusBadge } from "@app/components/secret-scanning"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -18,6 +18,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useProject } from "@app/context"; import { useToggle } from "@app/hooks"; import { @@ -92,40 +93,33 @@ export const SecretScanningScanRow = ({ scan }: Props) => { ) : // eslint-disable-next-line no-nested-ternary totalFindings ? (
    - - navigate({ - to: "/projects/secret-scanning/$projectId/findings", - params: { - projectId: currentProject.id - }, - search: { - search: `scanId:${id}` - } - }) - } - variant={unresolvedFindings ? "primary" : undefined} - className={twMerge( - "flex h-5 w-min cursor-pointer items-center gap-1.5 whitespace-nowrap", - !unresolvedFindings && "bg-mineshaft-400/50 text-bunker-300" - )} - > - - + +
    ) : status === SecretScanningScanStatus.Failed ? ( No findings ) : ( - + No Secrets Detected diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx index d14d3a656..af298ecdc 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx +++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx @@ -1,6 +1,5 @@ import { useCallback } from "react"; import { - faBan, faCheck, faCopy, faEdit, @@ -8,22 +7,20 @@ import { faExpand, faInfoCircle, faPlugCircleXmark, - faSearch, faToggleOff, faToggleOn, - faTrash, - faWarning + faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { formatDistance } from "date-fns"; +import { AlertTriangleIcon, BanIcon, ScanTextIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { SecretScanningScanStatusBadge } from "@app/components/secret-scanning"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -33,6 +30,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ROUTE_PATHS } from "@app/const/routes"; import { ProjectPermissionSub } from "@app/context"; import { ProjectPermissionSecretScanningDataSourceActions } from "@app/context/ProjectPermissionContext/types"; @@ -139,46 +137,39 @@ export const SecretScanningDataSourceRow = ({ {/* eslint-disable-next-line no-nested-ternary */} {lastScanStatus?.match(/queued|scanning/) ? ( - - - Scanning For Leaks + + + Scanning For Leaks ) : // eslint-disable-next-line no-nested-ternary lastScannedAt ? ( // eslint-disable-next-line no-nested-ternary unresolvedFindings ? ( - { - e.stopPropagation(); - navigate({ - to: "/projects/secret-scanning/$projectId/findings", - params: { - projectId - }, - search: { - search: name, - status: SecretScanningFindingStatus.Unresolved - } - }); - }} - > - - + + ) : lastScanStatus === SecretScanningScanStatus.Failed ? ( No findings ) : ( - + No Secrets Detected @@ -206,12 +197,10 @@ export const SecretScanningDataSourceRow = ({ className="text-xs" content={`Auto-Scan is disabled. Scans will not be automatically triggered when a ${autoScanDescription.verb} occurs to ${autoScanDescription.pluralNoun} associated with this data source`} > -
    - - - Auto-Scan Disabled - -
    + + + Auto-Scan Disabled +     )} {isDisconnected && ( diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx index 380ac70bd..a238f87b5 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx +++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx @@ -1,10 +1,11 @@ -import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { ProjectPermissionCan } from "@app/components/permissions"; import { CreateSecretScanningDataSourceModal } from "@app/components/secret-scanning"; import { Button, Spinner } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { ProjectPermissionSub, useProject, useSubscription } from "@app/context"; import { ProjectPermissionSecretScanningDataSourceActions } from "@app/context/ProjectPermissionContext/types"; import { usePopUp } from "@app/hooks"; @@ -40,22 +41,9 @@ export const SecretScanningDataSourcesSection = () => {
    -
    +

    Data Sources

    - -
    - - Docs - -
    -     +

    Configure Data Sources to scan for secret leaks from third-party services. diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx index 579c4ee12..92e77daae 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx +++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx @@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, Button, Checkbox, DropdownMenu, @@ -20,19 +19,17 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionSecretScanningFindingActions, ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types"; import { SECRET_SCANNING_DATA_SOURCE_MAP, - SECRET_SCANNING_FINDING_STATUS_ICON_MAP + SECRET_SCANNING_FINDING_STATUS_MAP } from "@app/helpers/secretScanningV2"; import { useToggle } from "@app/hooks"; -import { - SecretScanningFindingStatus, - TSecretScanningFinding -} from "@app/hooks/api/secretScanningV2"; +import { TSecretScanningFinding } from "@app/hooks/api/secretScanningV2"; type Props = { isSelected: boolean; @@ -83,6 +80,8 @@ export const SecretScanningFindingRow = ({ const [isExpanded, setIsExpanded] = useToggle(false); + const StatusIcon = SECRET_SCANNING_FINDING_STATUS_MAP[status].Icon; + return ( <> {rule} -

    - - - {status.replace("-", " ")} - -
    + + + {status.replace("-", " ")} + @@ -172,7 +161,7 @@ export const SecretScanningFindingRow = ({ - +
    } > diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx index d66dc46cb..1ac526dfc 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx +++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx @@ -1,7 +1,5 @@ -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - import { ContentLoader } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { useProject } from "@app/context"; import { useListSecretScanningFindings } from "@app/hooks/api/secretScanningV2"; @@ -23,22 +21,9 @@ export const SecretScanningFindingsSection = () => {
    -
    +

    Findings

    - -
    - - Docs - -
    -     +

    Secret leaks discovered across your data sources diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx index d9ae0e433..cf48ab2c2 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx +++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx @@ -38,7 +38,7 @@ import { } from "@app/context/ProjectPermissionContext/types"; import { SECRET_SCANNING_DATA_SOURCE_MAP, - SECRET_SCANNING_FINDING_STATUS_ICON_MAP + SECRET_SCANNING_FINDING_STATUS_MAP } from "@app/helpers/secretScanningV2"; import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -219,34 +219,40 @@ export const SecretScanningFindingsTable = ({ findings }: Props) => { Status - {Object.values(SecretScanningFindingStatus).map((status) => ( - { - e.preventDefault(); - setFilters((prev) => ({ - ...prev, - status: prev.status.includes(status) - ? prev.status.filter((s) => s !== status) - : [...prev.status, status] - })); - }} - key={status} - icon={ - filters.status.includes(status) && ( - - ) - } - iconPos="right" - > -

    - - {status.replace("-", " ")} -
    - - ))} + {Object.values(SecretScanningFindingStatus).map((status) => { + const { Icon } = SECRET_SCANNING_FINDING_STATUS_MAP[status]; + + return ( + { + e.preventDefault(); + setFilters((prev) => ({ + ...prev, + status: prev.status.includes(status) + ? prev.status.filter((s) => s !== status) + : [...prev.status, status] + })); + }} + key={status} + icon={ + filters.status.includes(status) && ( + + ) + } + iconPos="right" + > +
    + + {status.replace("-", " ")} +
    +     + ); + })} Platform {findings.length ? ( [...new Set(findings.map(({ dataSourceType: type }) => type))].map((type) => { diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx index 11894db7e..484cbcf36 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx +++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx @@ -13,7 +13,7 @@ import { SelectItem, TextArea } from "@app/components/v2"; -import { SECRET_SCANNING_FINDING_STATUS_ICON_MAP } from "@app/helpers/secretScanningV2"; +import { SECRET_SCANNING_FINDING_STATUS_MAP } from "@app/helpers/secretScanningV2"; import { SecretScanningFindingStatus, TSecretScanningFinding, @@ -105,9 +105,9 @@ const Content = ({ findings, onComplete }: ContentProps) => { className="w-full border border-mineshaft-500 capitalize" position="popper" dropdownContainerClassName="max-w-none" - icon={value ? SECRET_SCANNING_FINDING_STATUS_ICON_MAP[value].icon : undefined} + LucideIcon={value ? SECRET_SCANNING_FINDING_STATUS_MAP[value].Icon : undefined} iconClassName={ - value ? SECRET_SCANNING_FINDING_STATUS_ICON_MAP[value].className : undefined + value ? SECRET_SCANNING_FINDING_STATUS_MAP[value].className : undefined } > {Object.values(SecretScanningFindingStatus).map((status) => { diff --git a/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx b/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx index b87b29b7c..c9df333c4 100644 --- a/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx +++ b/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx @@ -1,12 +1,11 @@ import { Controller, useForm } from "react-hook-form"; -import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { Button, FormControl, TextArea } from "@app/components/v2"; +import { DocumentationLinkBadge } from "@app/components/v3"; import { ProjectPermissionSub } from "@app/context"; import { ProjectPermissionSecretScanningConfigActions } from "@app/context/ProjectPermissionContext/types"; import { @@ -62,21 +61,7 @@ export const SecretScanningConfigForm = ({ config }: Props) => {

    Project Configuration

    - -
    - - Docs - -
    -     +

    Configure rules and exceptions to customize scanning diff --git a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesTable.tsx b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesTable.tsx index 4581e7ca9..8f2b71b03 100644 --- a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesTable.tsx +++ b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesTable.tsx @@ -10,7 +10,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -26,6 +25,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; import { SshCertTemplateStatus, useGetSshCaCertTemplates } from "@app/hooks/api"; import { caStatusToNameMap, getCaStatusBadgeVariant } from "@app/hooks/api/ca/constants"; diff --git a/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx b/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx index c94f73664..c00679a1f 100644 --- a/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx +++ b/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx @@ -5,7 +5,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -21,6 +20,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context"; import { SshCaStatus, useListWorkspaceSshCas } from "@app/hooks/api"; import { caStatusToNameMap, getCaStatusBadgeVariant } from "@app/hooks/api/ca/constants"; diff --git a/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesTable.tsx b/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesTable.tsx index 1ebf3112c..19aefb92a 100644 --- a/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesTable.tsx +++ b/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesTable.tsx @@ -3,7 +3,6 @@ import { faCertificate } from "@fortawesome/free-solid-svg-icons"; import { format } from "date-fns"; import { - Badge, EmptyState, Pagination, Table, @@ -15,6 +14,7 @@ import { THead, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { useProject } from "@app/context"; import { useListWorkspaceSshCertificates } from "@app/hooks/api"; diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx index b568b9fd1..92cc0d68c 100644 --- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx +++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx @@ -12,7 +12,6 @@ import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -28,6 +27,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context"; import { useListWorkspaceSshHostGroups } from "@app/hooks/api"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -98,7 +98,7 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => { className="text-xs text-yellow/80" /> {username} - user + user

    ))} diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx index 182ceebb2..448e62300 100644 --- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx +++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx @@ -3,18 +3,16 @@ import { faEllipsis, faPencil, faServer, - faTrash, - faUser, - faUsers + faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import FileSaver from "file-saver"; +import { UserIcon, UsersIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { - Badge, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -30,6 +28,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { Badge } from "@app/components/v3"; import { ProjectPermissionSshHostActions, ProjectPermissionSub, useProject } from "@app/context"; import { fetchSshHostUserCaPublicKey, useListWorkspaceSshHosts } from "@app/hooks/api"; import { LoginMappingSource } from "@app/hooks/api/sshHost/types"; @@ -166,15 +165,14 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => { className="flex items-center gap-2" >
    - └─ + └
    - {username} - user + + + User +
    ))} @@ -184,15 +182,14 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => { className="flex items-center gap-2" >
    - └─ + └
    - {group} - group + + + Group +
    ))}