chore: remove antd from plugins (#19481)

PostHog · Dec 21, 2023 · b1e3699 · b1e3699
1 parent ce48493
commit b1e3699
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 33 deletions.
diff --git 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
@@ -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,32 +50,35 @@ export function PluginField({
         (value === SECRET_FIELD_VALUE || value.name === SECRET_FIELD_VALUE)
     ) {
         return (
-            <Button
+            <LemonButton
+                type="secondary"
                 icon={<IconEdit />}
                 onClick={() => {
                     onChange(fieldConfig.default || '')
                     setEditingSecret(true)
                 }}
             >
                 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
@@ -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
@@ -56,7 +56,7 @@ interface ButtonProps {
     children: React.ReactNode
 }
 
-const Button = ({
+const SurveyButton = ({
     link,
     type,
     onSubmit,
@@ -351,15 +351,15 @@ 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}
                             onSubmit={onSubmit}
                             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
@@ -163,15 +163,15 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                 </Group>
             )}
 
-            <Button
+            <LemonButton
                 loading={isFeatureFlagSubmitting}
                 icon={<SaveOutlined />}
                 htmlType="submit"
                 type="primary"
                 data-attr="feature-flag-submit-bottom"
             >
                 Save changes
-            </Button>
+            </LemonButton>
         </Form>
     )
 }