Skip to content

Commit

Permalink
chore: remove skeleton (#20042)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin authored Jan 31, 2024
1 parent 6cd7944 commit f59f775
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 129 deletions.
8 changes: 4 additions & 4 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,10 +149,6 @@ module.exports = {
element: 'Input',
message: 'use <LemonInput> instead',
},
{
element: 'Skeleton',
message: 'use <LemonSkeleton> instead',
},
{
element: 'Modal',
message: 'use <LemonModal> or `<LemonDialog> instead',
Expand Down Expand Up @@ -242,6 +238,10 @@ module.exports = {
element: 'ReactJson',
message: 'use <JSONViewer> for dark mode support instead',
},
{
element: 'Skeleton',
message: 'use <LemonSkeleton> instead',
},
{
element: 'Divider',
message: 'use <LemonDivider> instead',
Expand Down
236 changes: 114 additions & 122 deletions frontend/src/scenes/feature-flags/FeatureFlag.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import './FeatureFlag.scss'

import { LemonSegmentedButton } from '@posthog/lemon-ui'
import { Popconfirm, Skeleton } from 'antd'
import { LemonSegmentedButton, LemonSkeleton } from '@posthog/lemon-ui'
import { Popconfirm } from 'antd'
import { useActions, useValues } from 'kea'
import { Form, Group } from 'kea-forms'
import { router } from 'kea-router'
Expand All @@ -25,7 +25,6 @@ import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
import { Link } from 'lib/lemon-ui/Link'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
import { featureFlagLogic as enabledFeaturesLogic } from 'lib/logic/featureFlagLogic'
import { alphabet, capitalizeFirstLetter } from 'lib/utils'
import { PostHogFeature } from 'posthog-js/react'
Expand Down Expand Up @@ -124,8 +123,12 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
}
if (featureFlagLoading) {
return (
// TODO: This should be skeleton loaders
<SpinnerOverlay sceneLevel />
<div className="space-y-2">
<LemonSkeleton active className="h-4 w-2/5" />
<LemonSkeleton active className="h-4 w-full" />
<LemonSkeleton active className="h-4 w-full" />
<LemonSkeleton active className="h-4 w-3/5" />
</div>
)
}

Expand Down Expand Up @@ -475,127 +478,116 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
</Form>
) : (
<>
{featureFlagLoading ? (
<Skeleton active />
) : (
<>
<PageHeader
notebookProps={{
href: urls.featureFlag(id),
}}
caption={
<>
<span>{featureFlag.name || <i>Description (optional)</i>}</span>
{featureFlag?.tags && (
<>
{featureFlag.can_edit ? (
<ObjectTags
tags={featureFlag.tags}
onChange={(_, tags) => {
triggerFeatureFlagUpdate({ tags })
}}
saving={featureFlagLoading}
tagsAvailable={tags.filter(
(tag) => !featureFlag.tags?.includes(tag)
)}
className="mt-2"
/>
) : featureFlag.tags.length ? (
<ObjectTags
tags={featureFlag.tags}
saving={featureFlagLoading}
staticOnly
className="mt-2"
/>
) : null}
</>
)}
</>
}
buttons={
<PageHeader
notebookProps={{
href: urls.featureFlag(id),
}}
caption={
<>
<span>{featureFlag.name || <i>Description (optional)</i>}</span>
{featureFlag?.tags && (
<>
<div className="flex items-center gap-2">
<More
loading={newCohortLoading}
overlay={
<>
<LemonButton
to={urls.replay(
ReplayTabs.Recent,
recordingFilterForFlag
)}
fullWidth
>
View Recordings
</LemonButton>
{featureFlags[
FEATURE_FLAGS.FEATURE_FLAG_COHORT_CREATION
] && (
<LemonButton
loading={newCohortLoading}
onClick={() => {
createStaticCohort()
}}
fullWidth
>
Create Cohort
</LemonButton>
)}
<LemonDivider />
<LemonButton
data-attr="delete-feature-flag"
status="danger"
fullWidth
onClick={() => {
deleteFeatureFlag(featureFlag)
}}
disabledReason={
featureFlagLoading
? 'Loading...'
: !featureFlag.can_edit
? "You have only 'View' access for this feature flag. To make changes, please contact the flag's creator."
: (featureFlag.features?.length || 0) > 0
? 'This feature flag is in use with an early access feature. Delete the early access feature to delete this flag'
: (featureFlag.experiment_set?.length || 0) > 0
? 'This feature flag is linked to an experiment. Delete the experiment to delete this flag'
: null
}
>
Delete feature flag
</LemonButton>
</>
}
/>
<LemonDivider vertical />
<NotebookSelectButton
resource={{
type: NotebookNodeType.FeatureFlag,
attrs: { id: featureFlag.id },
{featureFlag.can_edit ? (
<ObjectTags
tags={featureFlag.tags}
onChange={(_, tags) => {
triggerFeatureFlagUpdate({ tags })
}}
type="secondary"
saving={featureFlagLoading}
tagsAvailable={tags.filter(
(tag) => !featureFlag.tags?.includes(tag)
)}
className="mt-2"
/>
<LemonButton
data-attr="edit-feature-flag"
type="secondary"
tooltip={
featureFlags[FEATURE_FLAGS.ROLE_BASED_ACCESS] &&
!featureFlag.can_edit &&
"You have only 'View' access for this feature flag. To make changes, please contact the flag's creator."
}
onClick={() => {
editFeatureFlag(true)
}}
disabled={featureFlagLoading || !featureFlag.can_edit}
>
Edit
</LemonButton>
</div>
) : featureFlag.tags.length ? (
<ObjectTags
tags={featureFlag.tags}
saving={featureFlagLoading}
staticOnly
className="mt-2"
/>
) : null}
</>
}
/>
<LemonTabs activeKey={activeTab} onChange={setActiveTab} tabs={tabs} />
</>
)}
)}
</>
}
buttons={
<>
<div className="flex items-center gap-2">
<More
loading={newCohortLoading}
overlay={
<>
<LemonButton
to={urls.replay(ReplayTabs.Recent, recordingFilterForFlag)}
fullWidth
>
View Recordings
</LemonButton>
{featureFlags[FEATURE_FLAGS.FEATURE_FLAG_COHORT_CREATION] && (
<LemonButton
loading={newCohortLoading}
onClick={() => {
createStaticCohort()
}}
fullWidth
>
Create Cohort
</LemonButton>
)}
<LemonDivider />
<LemonButton
data-attr="delete-feature-flag"
status="danger"
fullWidth
onClick={() => {
deleteFeatureFlag(featureFlag)
}}
disabledReason={
featureFlagLoading
? 'Loading...'
: !featureFlag.can_edit
? "You have only 'View' access for this feature flag. To make changes, please contact the flag's creator."
: (featureFlag.features?.length || 0) > 0
? 'This feature flag is in use with an early access feature. Delete the early access feature to delete this flag'
: (featureFlag.experiment_set?.length || 0) > 0
? 'This feature flag is linked to an experiment. Delete the experiment to delete this flag'
: null
}
>
Delete feature flag
</LemonButton>
</>
}
/>
<LemonDivider vertical />
<NotebookSelectButton
resource={{
type: NotebookNodeType.FeatureFlag,
attrs: { id: featureFlag.id },
}}
type="secondary"
/>
<LemonButton
data-attr="edit-feature-flag"
type="secondary"
tooltip={
featureFlags[FEATURE_FLAGS.ROLE_BASED_ACCESS] &&
!featureFlag.can_edit &&
"You have only 'View' access for this feature flag. To make changes, please contact the flag's creator."
}
onClick={() => {
editFeatureFlag(true)
}}
disabled={featureFlagLoading || !featureFlag.can_edit}
>
Edit
</LemonButton>
</div>
</>
}
/>
<LemonTabs activeKey={activeTab} onChange={setActiveTab} tabs={tabs} />
</>
)}
</div>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/scenes/plugins/source/PluginSource.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export function PluginSource({
</p>

{pluginSourceLoading ? (
// eslint-disable-next-line react/forbid-elements
<Skeleton />
) : (
<>
Expand Down
Loading

0 comments on commit f59f775

Please sign in to comment.