Consolidate template state machines

coder · ammario · Sep 1, 2022 · Aug 29, 2022 · Aug 29, 2022 · Sep 1, 2022
commit 39170cfe10e70b5c8c3d58479bc944820a9b42e3
diff --git a/...src/pages/TemplatePage/DAUCharts.test.tsx → .../src/pages/TemplatePage/DAUChart.test.tsx b/...src/pages/TemplatePage/DAUCharts.test.tsx → .../src/pages/TemplatePage/DAUChart.test.tsx
@@ -1,5 +1,5 @@
 import { render } from "testHelpers/renderHelpers"
-import { DAUChart, Language } from "./DAUCharts"
+import { DAUChart, Language } from "./DAUChart"
 
 import { screen } from "@testing-library/react"
 import { ResizeObserver } from "resize-observer"
@@ -12,7 +12,7 @@ describe("DAUChart", () => {
   it("renders a helpful paragraph on empty state", async () => {
     render(
       <DAUChart
-        templateMetricsData={{
+        templateDAUs={{
           entries: [],
         }}
       />,
@@ -23,7 +23,7 @@ describe("DAUChart", () => {
   it("renders a graph", async () => {
     render(
       <DAUChart
-        templateMetricsData={{
+        templateDAUs={{
           entries: [{ date: "2020-01-01", daus: 1 }],
         }}
       />,

diff --git a/site/src/pages/TemplatePage/DAUCharts.tsx → site/src/pages/TemplatePage/DAUChart.tsx b/site/src/pages/TemplatePage/DAUCharts.tsx → site/src/pages/TemplatePage/DAUChart.tsx
@@ -24,19 +24,21 @@ import * as TypesGen from "../../api/typesGenerated"
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
 
 export interface DAUChartProps {
-  templateMetricsData: TypesGen.TemplateDAUsResponse
+  templateDAUs: TypesGen.TemplateDAUsResponse
 }
 export const Language = {
   loadingText: "DAU stats are loading. Check back later.",
   chartTitle: "Daily Active Users",
 }
 
-export const DAUChart: FC<DAUChartProps> = ({ templateMetricsData }) => {
+export const DAUChart: FC<DAUChartProps> = ({ templateDAUs: templateMetricsData }) => {
   const theme: Theme = useTheme()
 
   if (templateMetricsData.entries.length === 0) {
     return (
-      <div style={{ marginTop: "-20px" }}>
+      // We generate hidden element to prove this path is taken in the test
+      // and through site inspection.
+      <div style={{ display: "none" }}>
         <p>{Language.loadingText}</p>
       </div>
     )

diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -28,9 +28,9 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     },
   })
 
-  const { template, activeTemplateVersion, templateResources, templateVersions } =
+  const { template, activeTemplateVersion, templateResources, templateVersions, templateDAUs } =
     templateState.context
-  const isLoading = !template || !activeTemplateVersion || !templateResources
+  const isLoading = !template || !activeTemplateVersion || !templateResources || !template
 
   if (isLoading) {
     return <Loader />
@@ -46,6 +46,7 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
         activeTemplateVersion={activeTemplateVersion}
         templateResources={templateResources}
         templateVersions={templateVersions}
+        templateDAUs={templateDAUs}
       />
     </>
   )

diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
@@ -4,14 +4,17 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
-import { useMachine } from "@xstate/react"
 import frontMatter from "front-matter"
 import { FC } from "react"
 import ReactMarkdown from "react-markdown"
 import { Link as RouterLink } from "react-router-dom"
 import { firstLetter } from "util/firstLetter"
-import { templateMetricsMachine } from "xServices/templateMetrics/templateMetricsXService"
-import { Template, TemplateVersion, WorkspaceResource } from "../../api/typesGenerated"
+import {
+  Template,
+  TemplateDAUsResponse,
+  TemplateVersion,
+  WorkspaceResource,
+} from "../../api/typesGenerated"
 import { Margins } from "../../components/Margins/Margins"
 import {
   PageHeader,
@@ -23,7 +26,7 @@ import { TemplateResourcesTable } from "../../components/TemplateResourcesTable/
 import { TemplateStats } from "../../components/TemplateStats/TemplateStats"
 import { VersionsTable } from "../../components/VersionsTable/VersionsTable"
 import { WorkspaceSection } from "../../components/WorkspaceSection/WorkspaceSection"
-import { DAUChart } from "./DAUCharts"
+import { DAUChart } from "./DAUChart"
 
 const Language = {
   settingsButton: "Settings",
@@ -39,25 +42,20 @@ export interface TemplatePageViewProps {
   activeTemplateVersion: TemplateVersion
   templateResources: WorkspaceResource[]
   templateVersions?: TemplateVersion[]
+  templateDAUs?: TemplateDAUsResponse
 }
 
 export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>> = ({
   template,
   activeTemplateVersion,
   templateResources,
   templateVersions,
+  templateDAUs,
 }) => {
   const styles = useStyles()
   const readme = frontMatter(activeTemplateVersion.readme)
   const hasIcon = template.icon && template.icon !== ""
 
-  const [metricsState] = useMachine(templateMetricsMachine, {
-    context: {
-      templateId: template.id,
-    },
-  })
-  const { templateMetricsData } = metricsState.context
-
   const getStartedResources = (resources: WorkspaceResource[]) => {
     return resources.filter((resource) => resource.workspace_transition === "start")
   }
@@ -105,7 +103,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
         </Stack>
       </PageHeader>
 
-      {templateMetricsData && <DAUChart templateMetricsData={templateMetricsData} />}
+      {templateDAUs && <DAUChart templateDAUs={templateDAUs} />}
 
       <Stack spacing={2.5}>
         <TemplateStats template={template} activeVersion={activeTemplateVersion} />