refactor(site): remove template parameters insights out of experimental (#9126)

coderd/apidoc/docs.go

@@ -8091,7 +8091,6 @@ const docTemplate = `{
                 "single_tailnet",
                 "template_restart_requirement",
                 "deployment_health_page",
-                "template_parameters_insights",
                 "workspaces_batch_actions"
             ],
             "x-enum-varnames": [
@@ -8101,7 +8100,6 @@ const docTemplate = `{
                 "ExperimentSingleTailnet",
                 "ExperimentTemplateRestartRequirement",
                 "ExperimentDeploymentHealthPage",
-                "ExperimentTemplateParametersInsights",
                 "ExperimentWorkspacesBatchActions"
             ]
         },

coderd/apidoc/swagger.json

@@ -7246,7 +7246,6 @@
         "single_tailnet",
         "template_restart_requirement",
         "deployment_health_page",
-        "template_parameters_insights",
         "workspaces_batch_actions"
       ],
       "x-enum-varnames": [
@@ -7256,7 +7255,6 @@
         "ExperimentSingleTailnet",
         "ExperimentTemplateRestartRequirement",
         "ExperimentDeploymentHealthPage",
-        "ExperimentTemplateParametersInsights",
         "ExperimentWorkspacesBatchActions"
       ]
     },

codersdk/deployment.go

@@ -1928,9 +1928,6 @@ const (
 	// Deployment health page
 	ExperimentDeploymentHealthPage Experiment = "deployment_health_page"
 
-	// Template parameters insights
-	ExperimentTemplateParametersInsights Experiment = "template_parameters_insights"
-
 	// Workspaces batch actions
 	ExperimentWorkspacesBatchActions Experiment = "workspaces_batch_actions"
 
@@ -1944,7 +1941,6 @@ const (
 // not be included here and will be essentially hidden.
 var ExperimentsAll = Experiments{
 	ExperimentDeploymentHealthPage,
-	ExperimentTemplateParametersInsights,
 	ExperimentWorkspacesBatchActions,
 }
 

docs/api/schemas.md

@@ -2710,7 +2710,6 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
 | `single_tailnet`               |
 | `template_restart_requirement` |
 | `deployment_health_page`       |
-| `template_parameters_insights` |
 | `workspaces_batch_actions`     |
 
 ## codersdk.Feature

site/src/api/typesGenerated.ts

@@ -1598,7 +1598,6 @@ export type Experiment =
   | "moons"
   | "single_tailnet"
   | "tailnet_pg_coordinator"
-  | "template_parameters_insights"
   | "template_restart_requirement"
   | "workspace_actions"
   | "workspaces_batch_actions"
@@ -1607,7 +1606,6 @@ export const Experiments: Experiment[] = [
   "moons",
   "single_tailnet",
   "tailnet_pg_coordinator",
-  "template_parameters_insights",
   "template_restart_requirement",
   "workspace_actions",
   "workspaces_batch_actions",

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx

@@ -36,7 +36,6 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
           "workspace_actions",
           "single_tailnet",
           "deployment_health_page",
-          "template_parameters_insights",
         ],
         flag_shorthand: "",
         hidden: false,

site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

@@ -30,12 +30,12 @@ import { subDays, isToday } from "date-fns"
 import "react-date-range/dist/styles.css"
 import "react-date-range/dist/theme/default.css"
 import { DateRange, DateRangeValue } from "./DateRange"
-import { useDashboard } from "components/Dashboard/DashboardProvider"
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"
 import Link from "@mui/material/Link"
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"
 import CancelOutlined from "@mui/icons-material/CancelOutlined"
 import { getDateRangeFilter } from "./utils"
+import Tooltip from "@mui/material/Tooltip"
 
 export default function TemplateInsightsPage() {
   const now = new Date()
@@ -61,10 +61,6 @@ export default function TemplateInsightsPage() {
     queryKey: ["templates", template.id, "user-latency", insightsFilter],
     queryFn: () => getInsightsUserLatency(insightsFilter),
   })
-  const dashboard = useDashboard()
-  const shouldDisplayParameters =
-    dashboard.experiments.includes("template_parameters_insights") ||
-    process.env.NODE_ENV === "development"
 
   return (
     <>
@@ -77,7 +73,6 @@ export default function TemplateInsightsPage() {
         }
         templateInsights={templateInsights}
         userLatency={userLatency}
-        shouldDisplayParameters={shouldDisplayParameters}
       />
     </>
   )
@@ -86,12 +81,10 @@ export default function TemplateInsightsPage() {
 export const TemplateInsightsPageView = ({
   templateInsights,
   userLatency,
-  shouldDisplayParameters,
   dateRange,
 }: {
   templateInsights: TemplateInsightsResponse | undefined
   userLatency: UserLatencyInsightsResponse | undefined
-  shouldDisplayParameters: boolean
   dateRange: ReactNode
 }) => {
   return (
@@ -114,12 +107,10 @@ export const TemplateInsightsPageView = ({
           sx={{ gridColumn: "span 3" }}
           data={templateInsights?.report.apps_usage}
         />
-        {shouldDisplayParameters && (
-          <TemplateParametersUsagePanel
-            sx={{ gridColumn: "span 3" }}
-            data={templateInsights?.report.parameters_usage}
-          />
-        )}
+        <TemplateParametersUsagePanel
+          sx={{ gridColumn: "span 3" }}
+          data={templateInsights?.report.parameters_usage}
+        />
       </Box>
     </>
   )
@@ -349,25 +340,34 @@ const TemplateParametersUsagePanel = ({
                   </Box>
                 </Box>
                 <Box sx={{ flex: 1, fontSize: 14 }}>
+                  <ParameterUsageRow
+                    sx={{
+                      color: (theme) => theme.palette.text.secondary,
+                      fontWeight: 500,
+                      fontSize: 13,
+                      cursor: "default",
+                    }}
+                  >
+                    <Box>Value</Box>
+                    <Tooltip
+                      title="The number of workspaces using this value"
+                      placement="top"
+                    >
+                      <Box>Count</Box>
+                    </Tooltip>
+                  </ParameterUsageRow>
                   {parameter.values
                     .sort((a, b) => b.count - a.count)
                     .map((usage, usageIndex) => (
-                      <Box
+                      <ParameterUsageRow
                         key={`${parameterIndex}-${usageIndex}`}
-                        sx={{
-                          display: "flex",
-                          alignItems: "baseline",
-                          justifyContent: "space-between",
-                          py: 0.5,
-                          gap: 5,
-                        }}
                       >
                         <ParameterUsageLabel
                           usage={usage}
                           parameter={parameter}
                         />
                         <Box sx={{ textAlign: "right" }}>{usage.count}</Box>
-                      </Box>
+                      </ParameterUsageRow>
                     ))}
                 </Box>
               </Box>
@@ -378,6 +378,14 @@ const TemplateParametersUsagePanel = ({
   )
 }
 
+const ParameterUsageRow = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "baseline",
+  justifyContent: "space-between",
+  padding: theme.spacing(0.5, 0),
+  gap: theme.spacing(5),
+}))
+
 const ParameterUsageLabel = ({
   usage,
   parameter,
@@ -386,16 +394,7 @@ const ParameterUsageLabel = ({
   parameter: TemplateParameterUsage
 }) => {
   if (usage.value.trim() === "") {
-    return (
-      <Box
-        component="span"
-        sx={{
-          color: (theme) => theme.palette.text.secondary,
-        }}
-      >
-        Not set
-      </Box>
-    )
+    return <Box component="span">Not set</Box>
   }
 
   if (parameter.options) {