chore: replace remaining prompts (#21218)

PostHog · Apr 3, 2024 · 4a15065 · 4a15065
1 parent 7b1611e
commit 4a15065
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 178 deletions.
diff --git a/cypress/e2e/insights-duplication.cy.ts b/cypress/e2e/insights-duplication.cy.ts
@@ -47,7 +47,7 @@ describe('Insights', () => {
 
             cy.get('[data-attr="insight-save-dropdown"]').click()
             cy.get('[data-attr="insight-save-as-new-insight"]').click()
-            cy.get('.ant-modal-content .ant-btn-primary').click()
+            cy.get('button[type=submit]').click()
             cy.get('[data-attr="top-bar-name"] .EditableField__display').should('contain', `${insightName} (copy)`)
 
             savedInsights.checkInsightIsInListView(`${insightName} (copy)`)

diff --git a/frontend/src/lib/logic/promptLogic.tsx b/frontend/src/lib/logic/promptLogic.tsx
diff --git a/frontend/src/models/insightsModel.tsx b/frontend/src/models/insightsModel.tsx
@@ -30,23 +30,23 @@ export const insightsModel = kea<insightsModelType>([
         renameInsight: async ({ item }) => {
             LemonDialog.openForm({
                 title: 'Rename insight',
-                initialValues: { name: item.name },
+                initialValues: { insightName: item.name },
                 content: (
-                    <LemonField name="name">
+                    <LemonField name="insightName">
                         <LemonInput data-attr="insight-name" placeholder="Please enter the new name" autoFocus />
                     </LemonField>
                 ),
                 errors: {
-                    name: (name) => (!name ? 'You must enter a name' : undefined),
+                    insightName: (name) => (!name ? 'You must enter a name' : undefined),
                 },
-                onSubmit: async ({ name }) => {
+                onSubmit: async ({ insightName }) => {
                     const updatedItem = await api.update(
                         `api/projects/${teamLogic.values.currentTeamId}/insights/${item.id}`,
-                        { name }
+                        { name: insightName }
                     )
                     lemonToast.success(
                         <>
-                            Renamed insight from <b>{item.name}</b> to <b>{name}</b>
+                            Renamed insight from <b>{item.name}</b> to <b>{insightName}</b>
                         </>
                     )
                     actions.renameInsightSuccess(updatedItem)

diff --git a/...nodes/HogQLQuery/hogQLQueryEditorLogic.ts → ...odes/HogQLQuery/hogQLQueryEditorLogic.tsx b/...nodes/HogQLQuery/hogQLQueryEditorLogic.ts → ...odes/HogQLQuery/hogQLQueryEditorLogic.tsx
@@ -1,8 +1,9 @@
 import type { Monaco } from '@monaco-editor/react'
+import { LemonDialog, LemonInput } from '@posthog/lemon-ui'
 import { actions, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { combineUrl } from 'kea-router'
 import api from 'lib/api'
-import { promptLogic } from 'lib/logic/promptLogic'
+import { LemonField } from 'lib/lemon-ui/LemonField'
 // Note: we can oly import types and not values from monaco-editor, because otherwise some Monaco code breaks
 // auto reload in development. Specifically, on this line:
 // `export const suggestWidgetStatusbarMenu = new MenuId('suggestWidgetStatusBar')`
@@ -45,7 +46,6 @@ export const hogQLQueryEditorLogic = kea<hogQLQueryEditorLogicType>([
     }),
     connect({
         actions: [dataWarehouseSavedQueriesLogic, ['createDataWarehouseSavedQuery']],
-        logic: [promptLogic({ key: `save-as-view` })],
     }),
     actions({
         saveQuery: true,
@@ -170,12 +170,18 @@ export const hogQLQueryEditorLogic = kea<hogQLQueryEditorLogicType>([
             }
         },
         saveAsView: async () => {
-            promptLogic({ key: `save-as-view` }).actions.prompt({
+            LemonDialog.openForm({
                 title: 'Save as view',
-                placeholder: 'Please enter the name of the view',
-                value: '',
-                error: 'You must enter a name',
-                success: actions.saveAsViewSuccess,
+                initialValues: { viewName: '' },
+                content: (
+                    <LemonField name="viewName">
+                        <LemonInput placeholder="Please enter the name of the view" autoFocus />
+                    </LemonField>
+                ),
+                errors: {
+                    viewName: (name) => (!name ? 'You must enter a name' : undefined),
+                },
+                onSubmit: ({ viewName }) => actions.saveAsViewSuccess(viewName),
             })
         },
         saveAsViewSuccess: async ({ name }) => {

diff --git a/...d/src/scenes/insights/insightDataLogic.ts → .../src/scenes/insights/insightDataLogic.tsx b/...d/src/scenes/insights/insightDataLogic.ts → .../src/scenes/insights/insightDataLogic.tsx
@@ -1,7 +1,8 @@
+import { LemonDialog, LemonInput } from '@posthog/lemon-ui'
 import { actions, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { LemonField } from 'lib/lemon-ui/LemonField'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { promptLogic } from 'lib/logic/promptLogic'
 import { objectsEqual } from 'lib/utils'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import { filterTestAccountsDefaultsLogic } from 'scenes/settings/project/filterTestAccountDefaultsLogic'
@@ -79,7 +80,7 @@ export const insightDataLogic = kea<insightDataLogicType>([
             dataNodeLogic({ key: insightVizDataNodeKey(props) } as DataNodeLogicProps),
             ['loadData', 'loadDataSuccess', 'loadDataFailure', 'setResponse as setInsightData'],
         ],
-        logic: [insightDataTimingLogic(props), promptLogic({ key: `save-as-insight` })],
+        logic: [insightDataTimingLogic(props)],
     })),
 
     actions({
@@ -256,12 +257,18 @@ export const insightDataLogic = kea<insightDataLogicType>([
             actions.insightLogicSaveInsight(redirectToViewMode)
         },
         saveAs: async () => {
-            promptLogic({ key: `save-as-insight` }).actions.prompt({
+            LemonDialog.openForm({
                 title: 'Save as new insight',
-                placeholder: 'Please enter the new name',
-                value: `${values.insight.name || values.insight.derived_name} (copy)`,
-                error: 'You must enter a name',
-                success: actions.saveAsNamingSuccess,
+                initialValues: { insightName: `${values.insight.name || values.insight.derived_name} (copy)` },
+                content: (
+                    <LemonField name="insightName">
+                        <LemonInput data-attr="insight-name" placeholder="Please enter the new name" autoFocus />
+                    </LemonField>
+                ),
+                errors: {
+                    insightName: (name) => (!name ? 'You must enter a name' : undefined),
+                },
+                onSubmit: async ({ insightName }) => actions.saveAsNamingSuccess(insightName),
             })
         },
         saveAsNamingSuccess: ({ name }) => {