From b1e3699ca36797e224eac11f837fe574de3aeee2 Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Thu, 21 Dec 2023 16:33:44 +0000
Subject: [PATCH] chore: remove antd from plugins (#19481)

---
 .../AsyncMigrations/AsyncMigrations.tsx       |  8 +++---
 .../src/scenes/plugins/edit/PluginField.tsx   | 25 +++++++++++--------
 .../scenes/plugins/source/PluginSource.tsx    | 12 ++++-----
 .../src/scenes/surveys/SurveyAppearance.tsx   | 22 +++++++++-------
 .../stories/How to build a form.stories.mdx   |  4 +--
 5 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
index 4bc890c80f38a..30ca2815d47f0 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
+++ b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@posthog/lemon-ui'
-import { Button, Progress } from 'antd'
+import { Progress } from 'antd'
 import { useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { IconPlayCircle, IconRefresh, IconReplay } from 'lib/lemon-ui/icons'
@@ -151,13 +151,13 @@ export function AsyncMigrations(): JSX.Element {
                 <div>
                     {status === AsyncMigrationStatus.NotStarted || status === AsyncMigrationStatus.FailedAtStartup ? (
                         <Tooltip title="Start">
-                            <Button
-                                type="link"
+                            <LemonButton
+                                size="small"
                                 icon={<IconPlayCircle />}
                                 onClick={() => triggerMigration(asyncMigration)}
                             >
                                 Run
-                            </Button>
+                            </LemonButton>
                         </Tooltip>
                     ) : status === AsyncMigrationStatus.Starting || status === AsyncMigrationStatus.Running ? (
                         <More
diff --git a/frontend/src/scenes/plugins/edit/PluginField.tsx b/frontend/src/scenes/plugins/edit/PluginField.tsx
index 48773fc765898..bfd03a84b1221 100644
--- a/frontend/src/scenes/plugins/edit/PluginField.tsx
+++ b/frontend/src/scenes/plugins/edit/PluginField.tsx
@@ -1,5 +1,5 @@
+import { LemonButton, LemonInput, LemonSelect } from '@posthog/lemon-ui'
 import { PluginConfigSchema } from '@posthog/plugin-scaffold/src/types'
-import { Button, Input, Select } from 'antd'
 import { CodeEditor } from 'lib/components/CodeEditors'
 import { IconEdit } from 'lib/lemon-ui/icons'
 import { useState } from 'react'
@@ -50,7 +50,8 @@ export function PluginField({
         (value === SECRET_FIELD_VALUE || value.name === SECRET_FIELD_VALUE)
     ) {
         return (
-            <Button
+            <LemonButton
+                type="secondary"
                 icon={<IconEdit />}
                 onClick={() => {
                     onChange(fieldConfig.default || '')
@@ -58,24 +59,26 @@ export function PluginField({
                 }}
             >
                 Reset secret {fieldConfig.type === 'attachment' ? 'attachment' : 'field'}
-            </Button>
+            </LemonButton>
         )
     }
 
     return fieldConfig.type === 'attachment' ? (
         <UploadField value={value} onChange={onChange} />
     ) : fieldConfig.type === 'string' ? (
-        <Input value={value} onChange={onChange} autoFocus={editingSecret} className="ph-no-capture" />
+        <LemonInput value={value} onChange={onChange} autoFocus={editingSecret} className="ph-no-capture" />
     ) : fieldConfig.type === 'json' ? (
         <JsonConfigField value={value} onChange={onChange} autoFocus={editingSecret} className="ph-no-capture" />
     ) : fieldConfig.type === 'choice' ? (
-        <Select dropdownMatchSelectWidth={false} value={value} className="ph-no-capture" onChange={onChange} showSearch>
-            {fieldConfig.choices.map((choice) => (
-                <Select.Option value={choice} key={choice}>
-                    {choice}
-                </Select.Option>
-            ))}
-        </Select>
+        <LemonSelect
+            fullWidth
+            value={value}
+            className="ph-no-capture"
+            onChange={onChange}
+            options={fieldConfig.choices.map((choice) => {
+                return { label: choice, value: choice }
+            })}
+        />
     ) : (
         <strong className="text-danger">
             Unknown field type "<code>{fieldConfig.type}</code>".
diff --git a/frontend/src/scenes/plugins/source/PluginSource.tsx b/frontend/src/scenes/plugins/source/PluginSource.tsx
index ad47b039462bf..11c0dccb39155 100644
--- a/frontend/src/scenes/plugins/source/PluginSource.tsx
+++ b/frontend/src/scenes/plugins/source/PluginSource.tsx
@@ -2,7 +2,7 @@ import './PluginSource.scss'
 
 import { useMonaco } from '@monaco-editor/react'
 import { Link } from '@posthog/lemon-ui'
-import { Button, Skeleton } from 'antd'
+import { Skeleton } from 'antd'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { CodeEditor } from 'lib/components/CodeEditors'
@@ -81,13 +81,11 @@ export function PluginSource({
             title={pluginSourceLoading ? 'Loading...' : `Edit App: ${name}`}
             placement={placement ?? 'left'}
             footer={
-                <div className="text-right">
-                    <Button onClick={closePluginSource} style={{ marginRight: 16 }}>
-                        Close
-                    </Button>
-                    <Button type="primary" loading={isPluginSourceSubmitting} onClick={submitPluginSource}>
+                <div className="text-right space-x-2">
+                    <LemonButton onClick={closePluginSource}>Close</LemonButton>
+                    <LemonButton type="primary" loading={isPluginSourceSubmitting} onClick={submitPluginSource}>
                         Save
-                    </Button>
+                    </LemonButton>
                 </div>
             }
         >
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index ef0d568f3ceb4..dbf5349ad3f8f 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -56,7 +56,7 @@ interface ButtonProps {
     children: React.ReactNode
 }
 
-const Button = ({
+const SurveyButton = ({
     link,
     type,
     onSubmit,
@@ -351,7 +351,7 @@ export function BaseAppearance({
 
                 <div className="bottom-section">
                     <div className="buttons">
-                        <Button
+                        <SurveyButton
                             {...(preview ? { tabIndex: -1 } : null)}
                             appearance={appearance}
                             link={question.type === SurveyQuestionType.Link ? question.link : null}
@@ -359,7 +359,7 @@ export function BaseAppearance({
                             type={question.type}
                         >
                             {question.buttonText || appearance.submitButtonText}
-                        </Button>
+                        </SurveyButton>
                     </div>
 
                     {!preview && !appearance.whiteLabel && (
@@ -572,13 +572,13 @@ export function SurveyRatingAppearance({
 
                     <div className="bottom-section">
                         <div className="buttons">
-                            <Button
+                            <SurveyButton
                                 {...(preview ? { tabIndex: -1 } : null)}
                                 appearance={appearance}
                                 onSubmit={onSubmit}
                             >
                                 {ratingSurveyQuestion.buttonText || appearance.submitButtonText}
-                            </Button>
+                            </SurveyButton>
                         </div>
 
                         {!preview && !appearance.whiteLabel && (
@@ -739,9 +739,13 @@ export function SurveyMultipleChoiceAppearance({
                 </div>
                 <div className="bottom-section">
                     <div className="buttons">
-                        <Button {...(preview ? { tabIndex: -1 } : null)} appearance={appearance} onSubmit={onSubmit}>
+                        <SurveyButton
+                            {...(preview ? { tabIndex: -1 } : null)}
+                            appearance={appearance}
+                            onSubmit={onSubmit}
+                        >
                             {multipleChoiceQuestion.buttonText || appearance.submitButtonText}
-                        </Button>
+                        </SurveyButton>
                     </div>
 
                     {!preview && !appearance.whiteLabel && (
@@ -797,9 +801,9 @@ export function SurveyThankYou({ appearance }: { appearance: SurveyAppearanceTyp
                     className="thank-you-message-body"
                     dangerouslySetInnerHTML={{ __html: sanitizeHTML(appearance?.thankYouMessageDescription || '') }}
                 />
-                <Button appearance={appearance} onSubmit={() => undefined}>
+                <SurveyButton appearance={appearance} onSubmit={() => undefined}>
                     Close
-                </Button>
+                </SurveyButton>
                 {!appearance.whiteLabel && (
                     <Link to="https://posthog.com" target="_blank" className="footer-branding">
                         Survey by {posthogLogoSVG}
diff --git a/frontend/src/stories/How to build a form.stories.mdx b/frontend/src/stories/How to build a form.stories.mdx
index 37b69133ab6eb..504cd7714e08c 100644
--- a/frontend/src/stories/How to build a form.stories.mdx	
+++ b/frontend/src/stories/How to build a form.stories.mdx	
@@ -163,7 +163,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                 </Group>
             )}
 
-            <Button
+            <LemonButton
                 loading={isFeatureFlagSubmitting}
                 icon={<SaveOutlined />}
                 htmlType="submit"
@@ -171,7 +171,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                 data-attr="feature-flag-submit-bottom"
             >
                 Save changes
-            </Button>
+            </LemonButton>
         </Form>
     )
 }