chore: Reorganise feature tabs (#6660)

kyle-ssg · web-flow · commit 6c6828979420 · 2026-02-05T10:42:00.000-03:00
diff --git a/docs/docs/deployment-self-hosting/scaling-and-performance/using-influxdb-for-analytics.md b/docs/docs/deployment-self-hosting/scaling-and-performance/using-influxdb-for-analytics.md
@@ -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.
 
diff --git a/docs/docs/managing-flags/code-references.md b/docs/docs/managing-flags/code-references.md
@@ -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)
 
diff --git a/docs/docs/managing-flags/code-references/feature-details.png b/docs/docs/managing-flags/code-references/feature-details.png
diff --git a/docs/docs/managing-flags/flag-analytics.md b/docs/docs/managing-flags/flag-analytics.md
@@ -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)
 
diff --git a/docs/static/img/flag-analytics.png b/docs/static/img/flag-analytics.png
diff --git a/frontend/common/constants.ts b/frontend/common/constants.ts
@@ -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: {
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx
@@ -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>
     )
   }
diff --git a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
@@ -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>
         )}
diff --git a/frontend/web/components/feature-summary/FeatureTags.tsx b/frontend/web/components/feature-summary/FeatureTags.tsx
@@ -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'
         >
diff --git a/frontend/web/components/modals/create-feature/index.js b/frontend/web/components/modals/create-feature/index.js
@@ -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'
@@ -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) {
@@ -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}
@@ -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
diff --git a/frontend/web/styles/project/_modals.scss b/frontend/web/styles/project/_modals.scss
@@ -39,7 +39,7 @@
   left: auto;
   right: 0;
 }
-$side-width: 750px;
+$side-width: 800px;
 .dark {
   .inline-modal {
     background: $modal-bg-dark;

Original file line number	Diff line number	Diff line change
`@@ -44,10 +44,8 @@ const FeatureCodeReferencesContainer: React.FC<`
`44`	`44`
`45`	`45`	`if (!data \|\| data.length === 0) {`
`46`	`46`	`return (`
`47`		`- <div className='d-flex justify-content-center items-center'>`
`48`		`- <h6 className='text-gray-500'>`
`49`		`- No code references found for this feature`
`50`		`- </h6>`
	`47`	`+ <div className='text-center text-muted'>`
	`48`	`+ No code references found for this feature.`
`51`	`49`	`</div>`
`52`	`50`	`)`
`53`	`51`	`}`