fix: fix formatting

coder · jaaydenh · Jul 19, 2024 · Jul 1, 2024 · Jul 2, 2024 · Jul 3, 2024
commit be3708598b58551ae89e4528ff8264465047f3d2
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -30,16 +30,19 @@ export const templateByName = (
   };
 };
 
-const getTemplatesByOrganizationIdQueryKey = (organizationId: string, deprecated?: boolean) => [
-  organizationId,
-  "templates",
-  deprecated,
-];
+const getTemplatesByOrganizationIdQueryKey = (
+  organizationId: string,
+  deprecated?: boolean,
+) => [organizationId, "templates", deprecated];
 
-export const templatesByOrganizationId = (organizationId: string, deprecated?: boolean) => {
+export const templatesByOrganizationId = (
+  organizationId: string,
+  deprecated?: boolean,
+) => {
   return {
     queryKey: getTemplatesByOrganizationIdQueryKey(organizationId, deprecated),
-    queryFn: () => API.getTemplatesByOrganizationId(organizationId, { deprecated }),
+    queryFn: () =>
+      API.getTemplatesByOrganizationId(organizationId, { deprecated }),
   };
 };
 
@@ -104,7 +107,10 @@ export const setGroupRole = (
 
 export const templateExamples = (organizationId: string) => {
   return {
-    queryKey: [...getTemplatesByOrganizationIdQueryKey(organizationId), "examples"],
+    queryKey: [
+      ...getTemplatesByOrganizationIdQueryKey(organizationId),
+      "examples",
+    ],
     queryFn: () => API.getTemplateExamples(organizationId),
   };
 };

diff --git a/site/src/modules/templates/TemplateCard/TemplateCard.stories.tsx b/site/src/modules/templates/TemplateCard/TemplateCard.stories.tsx
@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { chromatic } from "testHelpers/chromatic";
-import {
-  MockTemplate,
-} from "testHelpers/entities";
+import { MockTemplate } from "testHelpers/entities";
 import { TemplateCard } from "./TemplateCard";
 
 const meta: Meta<typeof TemplateCard> = {
@@ -19,21 +17,24 @@ type Story = StoryObj<typeof TemplateCard>;
 
 export const Template: Story = {};
 
-export const DeprecatedTemplate: Story = {  args: {
-  template: {
-    ...MockTemplate,
-    deprecated: true
-  }
-},};
+export const DeprecatedTemplate: Story = {
+  args: {
+    template: {
+      ...MockTemplate,
+      deprecated: true,
+    },
+  },
+};
 
 export const LongContentTemplate: Story = {
   args: {
     template: {
       ...MockTemplate,
-      display_name: 'Very Long Template Name',
-      organization_name: 'Very Long Organization Name',
-      description: 'This is a very long test description. This is a very long test description. This is a very long test description. This is a very long test description',
-      active_user_count: 999
-    }
+      display_name: "Very Long Template Name",
+      organization_name: "Very Long Organization Name",
+      description:
+        "This is a very long test description. This is a very long test description. This is a very long test description. This is a very long test description",
+      active_user_count: 999,
+    },
   },
 };
diff --git a/site/src/modules/templates/TemplateCard/TemplateCard.tsx b/site/src/modules/templates/TemplateCard/TemplateCard.tsx
@@ -21,7 +21,7 @@ export const TemplateCard: FC<TemplateCardProps> = ({
   return (
     <div css={styles.card} {...divProps}>
       <div css={styles.header}>
-        <div >
+        <div>
           <AvatarData
             title={
               template.display_name.length > 0
@@ -37,7 +37,8 @@ export const TemplateCard: FC<TemplateCardProps> = ({
           />
         </div>
         <div>
-          {template.active_user_count} {template.active_user_count === 1 ? "user" : "users" }
+          {template.active_user_count}{" "}
+          {template.active_user_count === 1 ? "user" : "users"}
         </div>
       </div>
 
@@ -52,16 +53,16 @@ export const TemplateCard: FC<TemplateCardProps> = ({
           <DeprecatedBadge />
         ) : (
           <Button
-          component={RouterLink}
-          css={styles.actionButton}
-          className="actionButton"
-          fullWidth
-          startIcon={<ArrowForwardOutlined />}
-          title={`Create a workspace using the ${template.display_name} template`}
-          to={`/templates/${template.name}/workspace`}
-        >
-          Create Workspace
-        </Button>
+            component={RouterLink}
+            css={styles.actionButton}
+            className="actionButton"
+            fullWidth
+            startIcon={<ArrowForwardOutlined />}
+            title={`Create a workspace using the ${template.display_name} template`}
+            to={`/templates/${template.name}/workspace`}
+          >
+            Create Workspace
+          </Button>
         )}
       </div>
     </div>

diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx
@@ -59,21 +59,21 @@ export type TemplatesByOrg = Record<string, number>;
 
 const getTemplatesByOrg = (templates: Template[]): TemplatesByOrg => {
   const orgs: TemplatesByOrg = {
-    all: 0
-  }
+    all: 0,
+  };
 
   templates.forEach((template) => {
     if (orgs[template.organization_name]) {
-      orgs[template.organization_name] += 1
+      orgs[template.organization_name] += 1;
     } else {
       orgs[template.organization_name] = 1;
     }
 
     orgs.all += 1;
-  })
+  });
 
   return orgs;
-}
+};
 
 export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
   templates,
@@ -112,24 +112,19 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
       {Boolean(error) && <ErrorAlert error={error} />}
 
       <Stack direction="row" spacing={4} alignItems="flex-start">
-          <Stack
-            css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}
-          >
-            <span css={styles.filterCaption}>ORGANIZATION</span>
-            {Object.keys(templatesByOrg).map((org) => (
-              <Link
-                key={org}
-                to={`?org=${org}`}
-                css={[
-                  styles.tagLink,
-                  org === activeOrg && styles.tagLinkActive,
-                ]}
-              >
-                {org === 'all' ? 'All Organizations' : org} ({templatesByOrg[org] ?? 0})
-              </Link>
-            ))}
-          </Stack>
-
+        <Stack css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}>
+          <span css={styles.filterCaption}>ORGANIZATION</span>
+          {Object.keys(templatesByOrg).map((org) => (
+            <Link
+              key={org}
+              to={`?org=${org}`}
+              css={[styles.tagLink, org === activeOrg && styles.tagLinkActive]}
+            >
+              {org === "all" ? "All Organizations" : org} (
+              {templatesByOrg[org] ?? 0})
+            </Link>
+          ))}
+        </Stack>
 
         <div
           css={{
@@ -140,20 +135,22 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
           }}
         >
           {isEmpty ? (
-                <EmptyTemplates
-                  canCreateTemplates={canCreateTemplates}
-                  examples={examples ?? []}
-                />
-              ) : (templates &&
-                templates.map((template) => (
-                  <TemplateCard
-                    css={(theme) => ({
-                      backgroundColor: theme.palette.background.paper,
-                    })}
-                    template={template}
-                    key={template.id}
-                  />
-                )))}
+            <EmptyTemplates
+              canCreateTemplates={canCreateTemplates}
+              examples={examples ?? []}
+            />
+          ) : (
+            templates &&
+            templates.map((template) => (
+              <TemplateCard
+                css={(theme) => ({
+                  backgroundColor: theme.palette.background.paper,
+                })}
+                template={template}
+                key={template.id}
+              />
+            ))
+          )}
         </div>
       </Stack>
     </Margins>

diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -1,7 +1,11 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
-import { templateExamples, templatesByOrganizationId, templates, } from "api/queries/templates";
+import {
+  templateExamples,
+  templatesByOrganizationId,
+  templates,
+} from "api/queries/templates";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
@@ -12,13 +16,18 @@ export const TemplatesPage: FC = () => {
   const { permissions } = useAuthenticated();
   const { organizationId, experiments } = useDashboard();
 
-  const templatesByOrganizationIdQuery = useQuery(templatesByOrganizationId(organizationId));
+  const templatesByOrganizationIdQuery = useQuery(
+    templatesByOrganizationId(organizationId),
+  );
   const templatesQuery = useQuery(templates());
   const examplesQuery = useQuery({
     ...templateExamples(organizationId),
     enabled: permissions.createTemplates,
   });
-  const error = templatesByOrganizationIdQuery.error || examplesQuery.error || templatesQuery.error;
+  const error =
+    templatesByOrganizationIdQuery.error ||
+    examplesQuery.error ||
+    templatesQuery.error;
   const multiOrgExperimentEnabled = experiments.includes("multi-organization");
 
   return (
@@ -33,14 +42,14 @@ export const TemplatesPage: FC = () => {
           examples={examplesQuery.data}
           templates={templatesQuery.data}
         />
-    ) : (
+      ) : (
         <TemplatesPageView
           error={error}
           canCreateTemplates={permissions.createTemplates}
           examples={examplesQuery.data}
           templates={templatesByOrganizationIdQuery.data}
         />
-    )}
+      )}
     </>
   );
 };

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -41,7 +41,9 @@ const WorkspacesPage: FC = () => {
   const { permissions } = useAuthenticated();
   const { entitlements, organizationId } = useDashboard();
 
-  const templatesQuery = useQuery(templatesByOrganizationId(organizationId, false));
+  const templatesQuery = useQuery(
+    templatesByOrganizationId(organizationId, false),
+  );
 
   const filterProps = useWorkspacesFilter({
     searchParamsResult,