fix: button destroy states in 3000 (#19086)

PostHog · Dec 6, 2023 · 748ac55 · 748ac55
1 parent 0a3c604
commit 748ac55
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 15 deletions.
diff --git a/frontend/src/lib/components/NotFound/index.tsx b/frontend/src/lib/components/NotFound/index.tsx
@@ -2,6 +2,7 @@ import './NotFound.scss'
 
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { Link } from 'lib/lemon-ui/Link'
 import { capitalizeFirstLetter } from 'lib/utils'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
@@ -17,6 +18,7 @@ interface NotFoundProps {
 export function NotFound({ object, caption }: NotFoundProps): JSX.Element {
     const { preflight } = useValues(preflightLogic)
     const { openSupportForm } = useActions(supportLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const nodeLogic = useNotebookNode()
 
@@ -47,7 +49,11 @@ export function NotFound({ object, caption }: NotFoundProps): JSX.Element {
             </p>
             <div className="flex justify-center">
                 {nodeLogic && (
-                    <LemonButton type="primary" status="danger" onClick={() => nodeLogic.actions.deleteNode()}>
+                    <LemonButton
+                        type={is3000 ? 'secondary' : 'primary'}
+                        status="danger"
+                        onClick={() => nodeLogic.actions.deleteNode()}
+                    >
                         Remove from Notebook
                     </LemonButton>
                 )}

diff --git a/frontend/src/scenes/billing/BillingLimitInput.tsx b/frontend/src/scenes/billing/BillingLimitInput.tsx
@@ -140,7 +140,6 @@ export const BillingLimitInput = ({ product }: { product: BillingProductV2Type }
                             </LemonButton>
                             {customLimitUsd ? (
                                 <LemonButton
-                                    // icon={<IconDelete />}
                                     status="danger"
                                     size="small"
                                     tooltip="Remove billing limit"

diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -94,9 +94,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                                 data-attr="delete-cohort"
                                                 fullWidth
                                                 status="danger"
-                                                onClick={() => {
-                                                    deleteCohort()
-                                                }}
+                                                onClick={deleteCohort}
                                             >
                                                 Delete cohort
                                             </LemonButton>

diff --git a/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx b/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx
@@ -1,5 +1,6 @@
 import { LemonButton, LemonModal } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { pluralize } from 'lib/utils'
 
@@ -56,6 +57,7 @@ export function InstanceConfigSaveModal({ onClose, isOpen }: { onClose: () => vo
         useValues(systemStatusLogic)
     const { saveInstanceConfig } = useActions(systemStatusLogic)
     const loading = updatedInstanceConfigCount !== null
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const isChangingEnabledEmailSettings =
         instanceConfigEditingState.EMAIL_ENABLED !== false &&
@@ -79,7 +81,12 @@ export function InstanceConfigSaveModal({ onClose, isOpen }: { onClose: () => vo
                     >
                         Cancel
                     </LemonButton>
-                    <LemonButton type="primary" status="danger" loading={loading} onClick={saveInstanceConfig}>
+                    <LemonButton
+                        type={is3000 ? 'secondary' : 'primary'}
+                        status="danger"
+                        loading={loading}
+                        onClick={saveInstanceConfig}
+                    >
                         Apply {changeNoun}
                     </LemonButton>
                 </>

diff --git a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
@@ -54,7 +54,7 @@ export function StaffUsersTab(): JSX.Element {
                         data-attr="invite-delete"
                         icon={<IconDelete />}
                         status="danger"
-                        disabled={staffUsers.length < 2}
+                        disabledReason={staffUsers.length < 2 && 'At least one staff user must remain'}
                         title={
                             staffUsers.length < 2
                                 ? 'You should always have at least one staff user.'

diff --git a/frontend/src/scenes/persons/PersonDeleteModal.tsx b/frontend/src/scenes/persons/PersonDeleteModal.tsx
@@ -1,5 +1,6 @@
 import { LemonButton, LemonModal, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { personDeleteModalLogic } from 'scenes/persons/personDeleteModalLogic'
 
 import { PersonType } from '~/types'
@@ -9,6 +10,7 @@ import { asDisplay } from './person-utils'
 export function PersonDeleteModal(): JSX.Element | null {
     const { personDeleteModal } = useValues(personDeleteModalLogic)
     const { deletePerson, showPersonDeleteModal } = useActions(personDeleteModalLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     return (
         <LemonModal
@@ -35,7 +37,7 @@ export function PersonDeleteModal(): JSX.Element | null {
                 <>
                     <LemonButton
                         status="danger"
-                        type="secondary"
+                        type={is3000 ? 'tertiary' : 'secondary'}
                         onClick={() => {
                             deletePerson(personDeleteModal as PersonType, true)
                         }}
@@ -51,7 +53,7 @@ export function PersonDeleteModal(): JSX.Element | null {
                         Cancel
                     </LemonButton>
                     <LemonButton
-                        type="primary"
+                        type={is3000 ? 'secondary' : 'primary'}
                         status="danger"
                         onClick={() => {
                             deletePerson(personDeleteModal as PersonType, false)

diff --git a/frontend/src/scenes/pipeline/AppsManagement.tsx b/frontend/src/scenes/pipeline/AppsManagement.tsx
@@ -1,6 +1,7 @@
 import { LemonBanner, LemonDivider, LemonTable, Tooltip } from '@posthog/lemon-ui'
 import { Popconfirm } from 'antd'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconDelete, IconLock, IconLockOpen } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonInput } from 'lib/lemon-ui/LemonInput'
@@ -74,6 +75,7 @@ type RenderAppsTable = {
 function AppsTable({ plugins }: RenderAppsTable): JSX.Element {
     const { unusedPlugins } = useValues(appsManagementLogic)
     const { uninstallPlugin, patchPlugin } = useActions(appsManagementLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     // TODO: row expansion to show the source code and allow updating source apps
 
@@ -174,7 +176,7 @@ function AppsTable({ plugins }: RenderAppsTable): JSX.Element {
                                         className="Plugins__Popconfirm"
                                     >
                                         <LemonButton
-                                            type="primary"
+                                            type={is3000 ? 'secondary' : 'primary'}
                                             status="danger"
                                             size="small"
                                             icon={<IconDelete />}

diff --git a/frontend/src/scenes/plugins/tabs/apps/AppManagementView.tsx b/frontend/src/scenes/plugins/tabs/apps/AppManagementView.tsx
@@ -1,6 +1,7 @@
 import { LemonButton, Link } from '@posthog/lemon-ui'
 import { Popconfirm } from 'antd'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconCheckmark, IconCloudDownload, IconDelete, IconReplay, IconWeb } from 'lib/lemon-ui/icons'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { canGloballyManagePlugins } from 'scenes/plugins/access'
@@ -19,6 +20,7 @@ export function AppManagementView({
     plugin: PluginTypeWithConfig | PluginType | PluginRepositoryEntry
 }): JSX.Element {
     const { user } = useValues(userLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     if (!canGloballyManagePlugins(user?.organization)) {
         return <></>
@@ -69,7 +71,7 @@ export function AppManagementView({
                             className="Plugins__Popconfirm"
                         >
                             <LemonButton
-                                type="primary"
+                                type={is3000 ? 'secondary' : 'primary'}
                                 status="danger"
                                 size="small"
                                 icon={<IconDelete />}

diff --git a/frontend/src/scenes/settings/organization/OrganizationDangerZone.tsx b/frontend/src/scenes/settings/organization/OrganizationDangerZone.tsx
@@ -2,6 +2,7 @@ import { LemonButton, LemonInput, LemonModal } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { useRestrictedArea } from 'lib/components/RestrictedArea'
 import { OrganizationMembershipLevel } from 'lib/constants'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconDelete } from 'lib/lemon-ui/icons'
 import { Dispatch, SetStateAction, useState } from 'react'
 import { organizationLogic } from 'scenes/organizationLogic'
@@ -15,6 +16,7 @@ export function DeleteOrganizationModal({
 }): JSX.Element {
     const { currentOrganization, organizationBeingDeleted } = useValues(organizationLogic)
     const { deleteOrganization } = useActions(organizationLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const [isDeletionConfirmed, setIsDeletionConfirmed] = useState(false)
     const isDeletionInProgress = !!currentOrganization && organizationBeingDeleted?.id === currentOrganization.id
@@ -29,7 +31,7 @@ export function DeleteOrganizationModal({
                         Cancel
                     </LemonButton>
                     <LemonButton
-                        type="primary"
+                        type={is3000 ? 'secondary' : 'primary'}
                         disabled={!isDeletionConfirmed}
                         loading={isDeletionInProgress}
                         data-attr="delete-organization-ok"

diff --git a/frontend/src/scenes/settings/project/ProjectDangerZone.tsx b/frontend/src/scenes/settings/project/ProjectDangerZone.tsx
@@ -2,6 +2,7 @@ import { LemonButton, LemonInput, LemonModal } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { RestrictionScope, useRestrictedArea } from 'lib/components/RestrictedArea'
 import { OrganizationMembershipLevel } from 'lib/constants'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconDelete } from 'lib/lemon-ui/icons'
 import { Dispatch, SetStateAction, useState } from 'react'
 import { teamLogic } from 'scenes/teamLogic'
@@ -17,6 +18,7 @@ export function DeleteProjectModal({
 }): JSX.Element {
     const { currentTeam, teamBeingDeleted } = useValues(teamLogic)
     const { deleteTeam } = useActions(teamLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const [isDeletionConfirmed, setIsDeletionConfirmed] = useState(false)
     const isDeletionInProgress = !!currentTeam && teamBeingDeleted?.id === currentTeam.id
@@ -31,7 +33,7 @@ export function DeleteProjectModal({
                         Cancel
                     </LemonButton>
                     <LemonButton
-                        type="primary"
+                        type={is3000 ? 'secondary' : 'primary'}
                         disabled={!isDeletionConfirmed}
                         loading={isDeletionInProgress}
                         data-attr="delete-project-ok"

diff --git a/frontend/src/scenes/settings/user/PersonalAPIKeys.tsx b/frontend/src/scenes/settings/user/PersonalAPIKeys.tsx
@@ -1,5 +1,6 @@
 import { LemonDialog, LemonInput, LemonModal, LemonTable, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconPlus } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -73,6 +74,7 @@ function CreateKeyModal({
 function PersonalAPIKeysTable(): JSX.Element {
     const { keys } = useValues(personalAPIKeysLogic) as { keys: PersonalAPIKeyType[] }
     const { deleteKey, loadKeys } = useActions(personalAPIKeysLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     useEffect(() => loadKeys(), [])
 
@@ -121,8 +123,8 @@ function PersonalAPIKeysTable(): JSX.Element {
                         return (
                             <LemonButton
                                 status="danger"
-                                type="primary"
-                                size="small"
+                                type={is3000 ? 'tertiary' : 'primary'}
+                                size="xsmall"
                                 onClick={() => {
                                     LemonDialog.open({
                                         title: `Permanently delete key "${key.label}"?`,