Skip to content

chore: Reorganise feature tabs #6660

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emyller merged 2 commits into from
Feb 5, 2026
+78 −63
Merged

chore: Reorganise feature tabs #6660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
981ecc4
Reorganise feature tabs
kyle-ssg Feb 4, 2026
c895c93
Adjust docs
kyle-ssg Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...deployment-self-hosting/scaling-and-performance/using-influxdb-for-analytics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ data
|> to(bucket: "default_downsampled_15m")
```

Once this task has run, and you have made some flag evaluations with analytics enabled (see documentation [here](/managing-flags/flag-analytics) for information on this), you should see data in the 'Analytics' tab against each feature in your dashboard.
Once this task has run, and you have made some flag evaluations with analytics enabled (see documentation [here](/managing-flags/flag-analytics) for information on this), you should see data in the 'Usage' tab against each feature in your dashboard.

8. Create another new task with the following query. This will downsample your per-millisecond API request data down to 1-hour blocks for faster queries. Set it to run every 1 hour.

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/managing-flags/code-references.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ Integrating with Code References **does not** expose your source code to Flagsmi

:::

Feature details will expand on the _Code References_ tab, and list locations of each code reference:
Feature details will expand on the _Usage_ tab, and list locations of each code reference:

![Code References listed for each repository within Feature details](./code-references/feature-details.png)

Expand Down
Binary file modified docs/docs/managing-flags/code-references/feature-details.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/docs/managing-flags/flag-analytics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ sidebar_position: 20

Flag analytics allow you to track how often individual flags are evaluated within the Flagsmith SDK.

To view Analytics for a particular flag, browse to the relevant environment and click on a single flag to edit that flag.
To view Analytics for a particular flag, browse to the relevant environment and click on a single flag to edit that flag. Analytics are displayed in the _Usage_ tab alongside Code References.

![Image](/img/flag-analytics.png)

Expand Down
Binary file modified docs/static/img/flag-analytics.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/common/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,13 +441,13 @@ const Constants = {
unhealthyColor: '#D35400',
},
featurePanelTabs: {
ANALYTICS: 'analytics',
FEATURE_HEALTH: 'feature-health',
HISTORY: 'history',
IDENTITY_OVERRIDES: 'identity-overrides',
LINKS: 'links',
SEGMENT_OVERRIDES: 'segment-overrides',
SETTINGS: 'settings',
USAGE: 'usage',
VALUE: 'value',
},
forms: {
Expand Down
6 changes: 2 additions & 4 deletions ...b/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,8 @@ const FeatureCodeReferencesContainer: React.FC<

if (!data || data.length === 0) {
return (
<div className='d-flex justify-content-center items-center'>
<h6 className='text-gray-500'>
No code references found for this feature
</h6>
<div className='text-center text-muted'>
No code references found for this feature.
</div>
)
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,10 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
)}
{!isLoading && data && !hasData && (
<div
style={{ height: 400 }}
style={{ height: 200 }}
className='text-center justify-content-center align-items-center text-muted mt-4 d-flex'
>
No analytics data available for the selected environment
No analytics data available for the selected environments
{environmentIds?.length > 1 ? 's' : ''}.
</div>
)}
Expand Down
18 changes: 13 additions & 5 deletions frontend/web/components/feature-summary/FeatureTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,19 @@ const FeatureTags: FC<FeatureTagsType> = ({ editFeature, projectFlag }) => {
{isCodeReferencesEnabled && hasScannedCodeReferences && (
<Tooltip
title={
<VCSProviderTag
count={codeReferencesCounts}
isWarning={codeReferencesCounts === 0}
vcsProvider={VCSProvider.GITHUB}
/>
<div
onClick={(e) => {
e.stopPropagation()
editFeature(Constants.featurePanelTabs.USAGE)
}}
style={{ cursor: 'pointer' }}
>
<VCSProviderTag
count={codeReferencesCounts}
isWarning={codeReferencesCounts === 0}
vcsProvider={VCSProvider.GITHUB}
/>
</div>
}
place='top'
>
Expand Down
103 changes: 56 additions & 47 deletions frontend/web/components/modals/create-feature/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,9 @@ import { FlagValueFooter } from 'components/modals/FlagValueFooter'
import { getPermission } from 'common/services/usePermission'
import { getChangeRequests } from 'common/services/useChangeRequest'
import FeatureHealthTabContent from 'components/feature-health/FeatureHealthTabContent'
import { IonIcon } from '@ionic/react'
import { warning } from 'ionicons/icons'
import FeaturePipelineStatus from 'components/release-pipelines/FeaturePipelineStatus'
import FeatureInPipelineGuard from 'components/release-pipelines/FeatureInPipelineGuard'
import FeatureCodeReferencesContainer from 'components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer'
import BetaFlag from 'components/BetaFlag'
import ProjectProvider from 'common/providers/ProjectProvider'
import CreateFeature from './tabs/CreateFeature'
import FeatureSettings from './tabs/FeatureSettings'
Expand Down Expand Up @@ -629,6 +626,8 @@ const Index = class extends Component {
const isCodeReferencesEnabled = Utils.getFlagsmithHasFeature(
'git_code_references',
)
const hasCodeReferences =
isCodeReferencesEnabled || projectFlag?.code_references_counts?.length > 0

try {
if (!isEdit && projectFlag.name && regex) {
Expand Down Expand Up @@ -1567,41 +1566,65 @@ const Index = class extends Component {
)
}
</Permission>
{!Project.disableAnalytics && (
<TabItem tabLabel={'Analytics'}>
<div className='mb-4'>
<FeatureAnalytics
projectId={`${project.id}`}
featureId={`${projectFlag.id}`}
defaultEnvironmentIds={[
`${environment.id}`,
]}
/>
</div>
{(!Project.disableAnalytics ||
hasCodeReferences) && (
<TabItem
tabLabelString='Usage'
tabLabel={
<Row className='justify-content-center'>
Usage
</Row>
}
>
{!Project.disableAnalytics && (
<div className='mb-4'>
<FeatureAnalytics
projectId={`${project.id}`}
featureId={`${projectFlag.id}`}
defaultEnvironmentIds={[
`${environment.id}`,
]}
/>
</div>
)}
{hasCodeReferences && (
<FormGroup className='mb-4'>
<div className='d-flex align-items-center gap-2 mb-2'>
<h5 className='mb-0'>
Code references
</h5>
<span
className='chip chip--xs bg-primary text-white'
style={{ border: 'none' }}
>
New
</span>
</div>
<div className='text-muted mb-2'>
Code references allow you to track
where feature flags are being used
within your code.{' '}
<a
target='_blank'
href='https://docs.flagsmith.com/managing-flags/code-references'
rel='noreferrer'
>
Learn more
</a>
</div>
<FeatureCodeReferencesContainer
featureId={projectFlag.id}
projectId={this.props.projectId}
/>
</FormGroup>
)}
</TabItem>
)}
{
<TabItem
data-test='feature_health'
tabLabelString='Feature Health'
tabLabel={
<Row className='d-flex justify-content-center align-items-center pr-1 gap-1'>
<BetaFlag flagName={'feature_health'}>
Feature Health
{this.props.hasUnhealthyEvents && (
<IonIcon
icon={warning}
style={{
color:
Constants.featureHealth
.unhealthyColor,
marginBottom: -2,
}}
/>
)}
</BetaFlag>
</Row>
}
tabLabelString='Health'
tabLabel={'Health'}
>
<FeatureHealthTabContent
projectId={projectFlag.project}
Expand All @@ -1610,20 +1633,6 @@ const Index = class extends Component {
/>
</TabItem>
}
{isCodeReferencesEnabled && (
<TabItem
tabLabel={
<Row className='justify-content-center'>
Code References
</Row>
}
>
<FeatureCodeReferencesContainer
featureId={projectFlag.id}
projectId={this.props.projectId}
/>
</TabItem>
)}
{hasIntegrationWithGithub &&
projectFlag?.id && (
<TabItem
Expand Down
2 changes: 1 addition & 1 deletion frontend/web/styles/project/_modals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
left: auto;
right: 0;
}
$side-width: 750px;
$side-width: 800px;
.dark {
.inline-modal {
background: $modal-bg-dark;
Expand Down
Loading