feat: variant dependencies ui #6739
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
There was a problem hiding this comment.
❌ Code Health Quality Gates: FAILED
- Declining Code Health: 3 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Detailed -- Inspect the code that degrades in code health.
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Complex Method AddDependencyDialogue.tsx: AddDependencyDialogue
- Complex Method DependencyRow.tsx: DependencyRow:FC<{feature:IFeatureToggle}>
- Complex Method AddDependencyDialogue.tsx: useManageDependency
There was a problem hiding this comment.
❌ Code Health Quality Gates: FAILED
- Declining Code Health: 3 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Detailed -- Inspect the code that degrades in code health.
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Complex Method AddDependencyDialogue.tsx: AddDependencyDialogue
- Complex Method DependencyRow.tsx: DependencyRow:FC<{feature:IFeatureToggle}>
- Complex Method AddDependencyDialogue.tsx: useManageDependency
There was a problem hiding this comment.
❌ Code Health Quality Gates: FAILED
- Declining Code Health: 3 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Detailed -- Inspect the code that degrades in code health.
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Complex Method AddDependencyDialogue.tsx: AddDependencyDialogue
- Complex Method DependencyRow.tsx: DependencyRow:FC<{feature:IFeatureToggle}>
- Complex Method AddDependencyDialogue.tsx: useManageDependency
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 1 findings(s) 🚩
- Improving Code Health: 2 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Detailed -- Increased risk for defects: The risk is higher as much of the code in this repo (99% of all commits) is written by other authors.
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Complex Method AddDependencyDialogue.tsx: AddDependencyDialogue
✅ Improving Code Health:
- Complex Method AddDependencyDialogue.tsx: useManageDependency
- Excess Number of Function Arguments AddDependencyDialogue.tsx: useManageDependency
| export const AddDependencyDialogue = ({ | ||
| project, | ||
| featureId, | ||
| parentFeatureId, | ||
| parentFeatureValue, | ||
| parentDependency, |
There was a problem hiding this comment.
❌ Getting worse: Complex Method
AddDependencyDialogue increases in cyclomatic complexity from 10 to 22, threshold = 10
Why does this problem occur?
This function has many conditional statements (e.g. if, for, while), leading to lower code health. Avoid adding more conditionals and code to it without refactoring. Read more.
To ignore this warning click here.
Comment on lines
-85
to
-186
| featureId: string, | ||
| parent: string, | ||
| parentValue: ParentValue, | ||
| onClose: () => void, | ||
| ) => { | ||
| const { trackEvent } = usePlausibleTracker(); | ||
| const { addChange } = useChangeRequestApi(); | ||
| const { refetch: refetchChangeRequests } = | ||
| usePendingChangeRequests(project); | ||
| const { setToastData, setToastApiError } = useToast(); | ||
| const { refetchFeature } = useFeature(project, featureId); | ||
| const environment = useHighestPermissionChangeRequestEnvironment(project)(); | ||
| const { isChangeRequestConfiguredInAnyEnv } = | ||
| useChangeRequestsEnabled(project); | ||
| const { addDependency, removeDependencies } = | ||
| useDependentFeaturesApi(project); | ||
|
|
||
| const handleAddChange = async ( | ||
| actionType: 'addDependency' | 'deleteDependency', | ||
| ) => { | ||
| if (!environment) { | ||
| console.error('No change request environment'); | ||
| return; | ||
| } | ||
| if (actionType === 'addDependency') { | ||
| await addChange(project, environment, [ | ||
| { | ||
| action: actionType, | ||
| feature: featureId, | ||
| payload: { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| }, | ||
| }, | ||
| ]); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| } | ||
| if (actionType === 'deleteDependency') { | ||
| await addChange(project, environment, [ | ||
| { action: actionType, feature: featureId, payload: undefined }, | ||
| ]); | ||
| } | ||
| void refetchChangeRequests(); | ||
| setToastData({ | ||
| text: | ||
| actionType === 'addDependency' | ||
| ? `${featureId} will depend on ${parent}` | ||
| : `${featureId} dependency will be removed`, | ||
| type: 'success', | ||
| title: 'Change added to a draft', | ||
| }); | ||
| }; | ||
|
|
||
| return async () => { | ||
| try { | ||
| if (isChangeRequestConfiguredInAnyEnv()) { | ||
| const actionType = | ||
| parent === REMOVE_DEPENDENCY_OPTION.key | ||
| ? 'deleteDependency' | ||
| : 'addDependency'; | ||
| await handleAddChange(actionType); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: | ||
| actionType === 'addDependency' | ||
| ? 'add dependency added to change request' | ||
| : 'delete dependency added to change request', | ||
| }, | ||
| }); | ||
| } else if (parent === REMOVE_DEPENDENCY_OPTION.key) { | ||
| await removeDependencies(featureId); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency removed', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency removed', type: 'success' }); | ||
| } else { | ||
| await addDependency(featureId, { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| }); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency added', type: 'success' }); | ||
| } | ||
| } catch (error) { | ||
| setToastApiError(formatUnknownError(error)); | ||
| } | ||
| void refetchFeature(); | ||
| onClose(); | ||
| }; | ||
| }; |
There was a problem hiding this comment.
✅ No longer an issue: Complex Method
useManageDependency is no longer above the threshold for cyclomatic complexity
Why does this problem occur?
This function has many conditional statements (e.g. if, for, while), leading to lower code health. Avoid adding more conditionals and code to it without refactoring. Read more.
Comment on lines
-85
to
-186
| featureId: string, | ||
| parent: string, | ||
| parentValue: ParentValue, | ||
| onClose: () => void, | ||
| ) => { | ||
| const { trackEvent } = usePlausibleTracker(); | ||
| const { addChange } = useChangeRequestApi(); | ||
| const { refetch: refetchChangeRequests } = | ||
| usePendingChangeRequests(project); | ||
| const { setToastData, setToastApiError } = useToast(); | ||
| const { refetchFeature } = useFeature(project, featureId); | ||
| const environment = useHighestPermissionChangeRequestEnvironment(project)(); | ||
| const { isChangeRequestConfiguredInAnyEnv } = | ||
| useChangeRequestsEnabled(project); | ||
| const { addDependency, removeDependencies } = | ||
| useDependentFeaturesApi(project); | ||
|
|
||
| const handleAddChange = async ( | ||
| actionType: 'addDependency' | 'deleteDependency', | ||
| ) => { | ||
| if (!environment) { | ||
| console.error('No change request environment'); | ||
| return; | ||
| } | ||
| if (actionType === 'addDependency') { | ||
| await addChange(project, environment, [ | ||
| { | ||
| action: actionType, | ||
| feature: featureId, | ||
| payload: { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| }, | ||
| }, | ||
| ]); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| } | ||
| if (actionType === 'deleteDependency') { | ||
| await addChange(project, environment, [ | ||
| { action: actionType, feature: featureId, payload: undefined }, | ||
| ]); | ||
| } | ||
| void refetchChangeRequests(); | ||
| setToastData({ | ||
| text: | ||
| actionType === 'addDependency' | ||
| ? `${featureId} will depend on ${parent}` | ||
| : `${featureId} dependency will be removed`, | ||
| type: 'success', | ||
| title: 'Change added to a draft', | ||
| }); | ||
| }; | ||
|
|
||
| return async () => { | ||
| try { | ||
| if (isChangeRequestConfiguredInAnyEnv()) { | ||
| const actionType = | ||
| parent === REMOVE_DEPENDENCY_OPTION.key | ||
| ? 'deleteDependency' | ||
| : 'addDependency'; | ||
| await handleAddChange(actionType); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: | ||
| actionType === 'addDependency' | ||
| ? 'add dependency added to change request' | ||
| : 'delete dependency added to change request', | ||
| }, | ||
| }); | ||
| } else if (parent === REMOVE_DEPENDENCY_OPTION.key) { | ||
| await removeDependencies(featureId); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency removed', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency removed', type: 'success' }); | ||
| } else { | ||
| await addDependency(featureId, { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| }); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency added', type: 'success' }); | ||
| } | ||
| } catch (error) { | ||
| setToastApiError(formatUnknownError(error)); | ||
| } | ||
| void refetchFeature(); | ||
| onClose(); | ||
| }; | ||
| }; |
There was a problem hiding this comment.
✅ No longer an issue: Excess Number of Function Arguments
useManageDependency is no longer above the threshold for number of arguments
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 3 findings(s) 🚩
- Improving Code Health: 2 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Detailed -- Increased risk for defects: The change is more wide-spread in terms of lines of code than 97% of the historic high-risk change sets. The risk is higher as much of the code in this repo (99% of all commits) is written by other authors.
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Complex Method AddDependencyDialogue.tsx: AddDependencyDialogue
- Complex Method useManageDependency.ts: useManageDependency
- Excess Number of Function Arguments useManageDependency.ts: useManageDependency
✅ Improving Code Health:
- Complex Method AddDependencyDialogue.tsx: useManageDependency
- Excess Number of Function Arguments AddDependencyDialogue.tsx: useManageDependency
Comment on lines
+12
to
+121
| usePendingChangeRequests(project); | ||
| const { setToastData, setToastApiError } = useToast(); | ||
| const { refetchFeature } = useFeature(project, featureId); | ||
| const environment = useHighestPermissionChangeRequestEnvironment(project)(); | ||
| const { isChangeRequestConfiguredInAnyEnv } = | ||
| useChangeRequestsEnabled(project); | ||
| const { addDependency, removeDependencies } = | ||
| useDependentFeaturesApi(project); | ||
|
|
||
| const handleAddChange = async ( | ||
| actionType: 'addDependency' | 'deleteDependency', | ||
| ) => { | ||
| if (!environment) { | ||
| console.error('No change request environment'); | ||
| return; | ||
| } | ||
| if (actionType === 'addDependency') { | ||
| await addChange(project, environment, [ | ||
| { | ||
| action: actionType, | ||
| feature: featureId, | ||
| payload: { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| variants: | ||
| parentValue.status === 'enabled_with_variants' | ||
| ? parentValue.variants | ||
| : [], | ||
| }, | ||
| }, | ||
| ]); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| } | ||
| if (actionType === 'deleteDependency') { | ||
| await addChange(project, environment, [ | ||
| { action: actionType, feature: featureId, payload: undefined }, | ||
| ]); | ||
| } | ||
| void refetchChangeRequests(); | ||
| setToastData({ | ||
| text: | ||
| actionType === 'addDependency' | ||
| ? `${featureId} will depend on ${parent}` | ||
| : `${featureId} dependency will be removed`, | ||
| type: 'success', | ||
| title: 'Change added to a draft', | ||
| }); | ||
| }; | ||
|
|
||
| return async () => { | ||
| try { | ||
| if (isChangeRequestConfiguredInAnyEnv()) { | ||
| const actionType = | ||
| parent === REMOVE_DEPENDENCY_OPTION.key | ||
| ? 'deleteDependency' | ||
| : 'addDependency'; | ||
| await handleAddChange(actionType); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: | ||
| actionType === 'addDependency' | ||
| ? 'add dependency added to change request' | ||
| : 'delete dependency added to change request', | ||
| }, | ||
| }); | ||
| } else if (parent === REMOVE_DEPENDENCY_OPTION.key) { | ||
| await removeDependencies(featureId); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency removed', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency removed', type: 'success' }); | ||
| } else { | ||
| await addDependency(featureId, { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| variants: | ||
| parentValue.status === 'enabled_with_variants' | ||
| ? parentValue.variants | ||
| : [], | ||
| }); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency added', type: 'success' }); | ||
| } | ||
| } catch (error) { | ||
| setToastApiError(formatUnknownError(error)); | ||
| } | ||
| void refetchFeature(); | ||
| onClose(); | ||
| }; | ||
| }; |
There was a problem hiding this comment.
❌ New issue: Complex Method
useManageDependency has a cyclomatic complexity of 12, threshold = 9
Why does this problem occur?
This function has many conditional statements (e.g. if, for, while), leading to lower code health. Avoid adding more conditionals and code to it without refactoring. Read more.
To ignore this warning click here.
Comment on lines
+12
to
+121
| usePendingChangeRequests(project); | ||
| const { setToastData, setToastApiError } = useToast(); | ||
| const { refetchFeature } = useFeature(project, featureId); | ||
| const environment = useHighestPermissionChangeRequestEnvironment(project)(); | ||
| const { isChangeRequestConfiguredInAnyEnv } = | ||
| useChangeRequestsEnabled(project); | ||
| const { addDependency, removeDependencies } = | ||
| useDependentFeaturesApi(project); | ||
|
|
||
| const handleAddChange = async ( | ||
| actionType: 'addDependency' | 'deleteDependency', | ||
| ) => { | ||
| if (!environment) { | ||
| console.error('No change request environment'); | ||
| return; | ||
| } | ||
| if (actionType === 'addDependency') { | ||
| await addChange(project, environment, [ | ||
| { | ||
| action: actionType, | ||
| feature: featureId, | ||
| payload: { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| variants: | ||
| parentValue.status === 'enabled_with_variants' | ||
| ? parentValue.variants | ||
| : [], | ||
| }, | ||
| }, | ||
| ]); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| } | ||
| if (actionType === 'deleteDependency') { | ||
| await addChange(project, environment, [ | ||
| { action: actionType, feature: featureId, payload: undefined }, | ||
| ]); | ||
| } | ||
| void refetchChangeRequests(); | ||
| setToastData({ | ||
| text: | ||
| actionType === 'addDependency' | ||
| ? `${featureId} will depend on ${parent}` | ||
| : `${featureId} dependency will be removed`, | ||
| type: 'success', | ||
| title: 'Change added to a draft', | ||
| }); | ||
| }; | ||
|
|
||
| return async () => { | ||
| try { | ||
| if (isChangeRequestConfiguredInAnyEnv()) { | ||
| const actionType = | ||
| parent === REMOVE_DEPENDENCY_OPTION.key | ||
| ? 'deleteDependency' | ||
| : 'addDependency'; | ||
| await handleAddChange(actionType); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: | ||
| actionType === 'addDependency' | ||
| ? 'add dependency added to change request' | ||
| : 'delete dependency added to change request', | ||
| }, | ||
| }); | ||
| } else if (parent === REMOVE_DEPENDENCY_OPTION.key) { | ||
| await removeDependencies(featureId); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency removed', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency removed', type: 'success' }); | ||
| } else { | ||
| await addDependency(featureId, { | ||
| feature: parent, | ||
| enabled: parentValue.status !== 'disabled', | ||
| variants: | ||
| parentValue.status === 'enabled_with_variants' | ||
| ? parentValue.variants | ||
| : [], | ||
| }); | ||
| trackEvent('dependent_features', { | ||
| props: { | ||
| eventType: 'dependency added', | ||
| }, | ||
| }); | ||
| setToastData({ title: 'Dependency added', type: 'success' }); | ||
| } | ||
| } catch (error) { | ||
| setToastApiError(formatUnknownError(error)); | ||
| } | ||
| void refetchFeature(); | ||
| onClose(); | ||
| }; | ||
| }; |
There was a problem hiding this comment.
❌ New issue: Excess Number of Function Arguments
useManageDependency has 5 arguments, threshold = 4
Why does this problem occur?
This function has too many arguments, indicating a lack of encapsulation. Avoid adding more arguments. Read more.
To ignore this warning click here.
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 3 findings(s) 🚩
- Improving Code Health: 2 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Detailed -- Increased risk for defects: The change is more wide-spread in terms of lines of code than 98% of the historic high-risk change sets. The risk is higher as much of the code in this repo (99% of all commits) is written by other authors.
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Complex Method AddDependencyDialogue.tsx: AddDependencyDialogue
- Complex Method useManageDependency.ts: useManageDependency
- Excess Number of Function Arguments useManageDependency.ts: useManageDependency
✅ Improving Code Health:
- Complex Method AddDependencyDialogue.tsx: useManageDependency
- Excess Number of Function Arguments AddDependencyDialogue.tsx: useManageDependency
andreas-unleash
approved these changes
Mar 29, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
About the changes
Adding variant dependencies capability (behind a flag)
Details:
variant_dependencies_small.mov
Next PR:
Important files
Discussion points