refactor: parameterize button language

Parkreiner · Parkreiner · commit 2aee4fe791ed · 2023-10-05T14:07:44.000Z
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useState, ReactElement } from "react";
 import { useOrganizationId, usePermissions } from "hooks";
 
 import { useQuery } from "@tanstack/react-query";
@@ -113,7 +113,15 @@ function WorkspaceResultsRow({ template }: { template: Template }) {
   );
 }
 
-export function WorkspacesButton() {
+type WorkspacesButtonProps = {
+  children: string | ReactElement;
+  seeMoreTemplatesText: string | ReactElement;
+};
+
+export function WorkspacesButton({
+  children,
+  seeMoreTemplatesText,
+}: WorkspacesButtonProps) {
   const organizationId = useOrganizationId();
   const permissions = usePermissions();
   const templatesQuery = useQuery(templates(organizationId));
@@ -152,7 +160,7 @@ export function WorkspacesButton() {
       sx={{ display: "flex", flexFlow: "column nowrap" }}
       anchorButton={
         <Button startIcon={<AddIcon />} variant="contained">
-          Create Workspace&hellip;
+          {children}
         </Button>
       }
     >
@@ -211,7 +219,7 @@ export function WorkspacesButton() {
                 sx={{ fontSize: "16px", marginX: "auto", display: "block" }}
               />
             </Box>
-            <span>See all templates</span>
+            <span>{seeMoreTemplatesText}</span>
           </Box>
         </Link>
       )}
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -25,7 +25,8 @@ export const Language = {
   yourWorkspacesButton: "Your workspaces",
   allWorkspacesButton: "All workspaces",
   runningWorkspacesButton: "Running workspaces",
-  createANewWorkspace: `Create a new workspace from a `,
+  createWorkspace: <>Create Workspace&hellip;</>,
+  moreTemplates: "See all templates",
   template: "Template",
 };
 
@@ -73,7 +74,13 @@ export const WorkspacesPageView: FC<
 
   return (
     <Margins>
-      <PageHeader actions={<WorkspacesButton />}>
+      <PageHeader
+        actions={
+          <WorkspacesButton seeMoreTemplatesText={Language.moreTemplates}>
+            {Language.createWorkspace}
+          </WorkspacesButton>
+        }
+      >
         <PageHeaderTitle>
           <Stack direction="row" spacing={1} alignItems="center">
             <span>{Language.pageTitle}</span>
