coder · aslilac · Sep 27, 2023 · Sep 26, 2023 · Sep 26, 2023 · Sep 26, 2023
diff --git a/site/src/components/Conditionals/Maybe.stories.tsx b/site/src/components/Conditionals/Maybe.stories.tsx
diff --git a/site/src/components/Conditionals/Maybe.tsx b/site/src/components/Conditionals/Maybe.tsx
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -1,6 +1,5 @@
 import makeStyles from "@mui/styles/makeStyles";
 import TextField from "@mui/material/TextField";
-import { Maybe } from "components/Conditionals/Maybe";
 import { ChangeEvent, useState, PropsWithChildren, FC } from "react";
 import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog";
 
@@ -34,9 +33,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
   const content = (
     <>
       <p>Deleting this {entity} is irreversible!</p>
-      <Maybe condition={info !== undefined}>
-        <p className={styles.warning}>{info}</p>
-      </Maybe>
+      {info !== undefined && <p className={styles.warning}>{info}</p>}
       <p>Are you sure you want to proceed?</p>
       <p>Type {name} below to confirm.</p>
 

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
@@ -1,10 +1,10 @@
 import { makeStyles } from "@mui/styles";
-import { PropsWithChildren, FC } from "react";
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
 import { combineClasses } from "../../utils/combineClasses";
 import { Stack } from "../Stack/Stack";
 
 export interface PageHeaderProps {
-  actions?: JSX.Element;
+  actions?: ReactNode;
   className?: string;
 }
 

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -5,7 +5,6 @@ import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import { useActor } from "@xstate/react";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
-import { Maybe } from "components/Conditionals/Maybe";
 import { CSSProperties } from "react";
 import { PaginationMachineRef } from "xServices/pagination/paginationXService";
 import { PageButton } from "./PageButton";
@@ -40,57 +39,59 @@ export const PaginationWidget = ({
   // if beyond page 1, show pagination widget even if there's only one true page, so user can navigate back
   const showWidget = numPages > 1 || currentPage > 1;
 
+  if (!showWidget) {
+    return null;
+  }
+
   return (
-    <Maybe condition={showWidget}>
-      <div style={containerStyle} className={styles.defaultContainerStyles}>
-        <Button
-          className={styles.prevLabelStyles}
-          aria-label="Previous page"
-          disabled={firstPageActive}
-          onClick={() => send({ type: "PREVIOUS_PAGE" })}
-        >
-          <KeyboardArrowLeft />
-          <div>{prevLabel}</div>
-        </Button>
-        <ChooseOne>
-          <Cond condition={isMobile}>
-            <PageButton
-              activePage={currentPage}
-              page={currentPage}
-              numPages={numPages}
-            />
-          </Cond>
-          <Cond>
-            {buildPagedList(numPages, currentPage).map((page) =>
-              typeof page !== "number" ? (
-                <PageButton
-                  key={`Page${page}`}
-                  activePage={currentPage}
-                  placeholder="..."
-                  disabled
-                />
-              ) : (
-                <PageButton
-                  key={`Page${page}`}
-                  activePage={currentPage}
-                  page={page}
-                  numPages={numPages}
-                  onPageClick={() => send({ type: "GO_TO_PAGE", page })}
-                />
-              ),
-            )}
-          </Cond>
-        </ChooseOne>
-        <Button
-          aria-label="Next page"
-          disabled={lastPageActive}
-          onClick={() => send({ type: "NEXT_PAGE" })}
-        >
-          <div>{nextLabel}</div>
-          <KeyboardArrowRight />
-        </Button>
-      </div>
-    </Maybe>
+    <div style={containerStyle} className={styles.defaultContainerStyles}>
+      <Button
+        className={styles.prevLabelStyles}
+        aria-label="Previous page"
+        disabled={firstPageActive}
+        onClick={() => send({ type: "PREVIOUS_PAGE" })}
+      >
+        <KeyboardArrowLeft />
+        <div>{prevLabel}</div>
+      </Button>
+      <ChooseOne>
+        <Cond condition={isMobile}>
+          <PageButton
+            activePage={currentPage}
+            page={currentPage}
+            numPages={numPages}
+          />
+        </Cond>
+        <Cond>
+          {buildPagedList(numPages, currentPage).map((page) =>
+            typeof page !== "number" ? (
+              <PageButton
+                key={`Page${page}`}
+                activePage={currentPage}
+                placeholder="..."
+                disabled
+              />
+            ) : (
+              <PageButton
+                key={`Page${page}`}
+                activePage={currentPage}
+                page={page}
+                numPages={numPages}
+                onPageClick={() => send({ type: "GO_TO_PAGE", page })}
+              />
+            ),
+          )}
+        </Cond>
+      </ChooseOne>
+      <Button
+        aria-label="Next page"
+        disabled={lastPageActive}
+        onClick={() => send({ type: "NEXT_PAGE" })}
+      >
+        <div>{nextLabel}</div>
+        <KeyboardArrowRight />
+      </Button>
+    </div>
   );
 };
 

diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
@@ -1,9 +1,8 @@
 import { makeStyles } from "@mui/styles";
 import { AppPreviewLink } from "components/Resources/AppLink/AppPreviewLink";
-import { Maybe } from "components/Conditionals/Maybe";
 import { FC } from "react";
 import { combineClasses } from "utils/combineClasses";
-import { WorkspaceAgent } from "../../api/typesGenerated";
+import { WorkspaceAgent } from "api/typesGenerated";
 import { Stack } from "../Stack/Stack";
 
 interface AgentRowPreviewStyles {
@@ -90,9 +89,9 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
               {agent.apps.map((app) => (
                 <AppPreviewLink key={app.slug} app={app} />
               ))}
-              <Maybe condition={agent.apps.length === 0}>
+              {agent.apps.length === 0 && (
                 <span className={styles.agentDataValue}>None</span>
-              </Maybe>
+              )}
             </Stack>
           </Stack>
         </Stack>

diff --git a/site/src/components/TemplateVersionWarnings/TemplateVersionWarnings.tsx b/site/src/components/TemplateVersionWarnings/TemplateVersionWarnings.tsx
@@ -1,7 +1,6 @@
 import { FC } from "react";
 import * as TypesGen from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
-import { Maybe } from "components/Conditionals/Maybe";
 
 export interface TemplateVersionWarningsProps {
   warnings?: TypesGen.TemplateVersionWarning[];
@@ -14,14 +13,16 @@ export const TemplateVersionWarnings: FC<
     return <></>;
   }
 
+  if (!warnings.includes("UNSUPPORTED_WORKSPACES")) {
+    return null;
+  }
+
   return (
-    <Maybe condition={Boolean(warnings.includes("UNSUPPORTED_WORKSPACES"))}>
-      <div data-testid="error-unsupported-workspaces">
-        <Alert severity="error">
-          This template uses legacy parameters which are not supported anymore.
-          Contact your administrator for assistance.
-        </Alert>
-      </div>
-    </Maybe>
+    <div data-testid="error-unsupported-workspaces">
+      <Alert severity="error">
+        This template uses legacy parameters which are not supported anymore.
+        Contact your administrator for assistance.
+      </Alert>
+    </div>
   );
 };
diff --git a/site/src/components/WorkspaceDeletion/DormantDeletionStat.tsx b/site/src/components/WorkspaceDeletion/DormantDeletionStat.tsx
@@ -1,47 +1,51 @@
-import { Maybe } from "components/Conditionals/Maybe";
 import { StatsItem } from "components/Stats/Stats";
 import Link from "@mui/material/Link";
 import { Link as RouterLink } from "react-router-dom";
 import styled from "@emotion/styled";
 import { Workspace } from "api/typesGenerated";
 import { displayDormantDeletion } from "./utils";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
+import { type FC } from "react";
 
-export const DormantDeletionStat = ({
-  workspace,
-}: {
+interface DormantDeletionStatProps {
   workspace: Workspace;
-}): JSX.Element => {
+}
+
+export const DormantDeletionStat: FC<DormantDeletionStatProps> = ({
+  workspace,
+}) => {
   const { entitlements, experiments } = useDashboard();
   const allowAdvancedScheduling =
     entitlements.features["advanced_template_scheduling"].enabled;
   // This check can be removed when https://github.com/coder/coder/milestone/19
   // is merged up
   const allowWorkspaceActions = experiments.includes("workspace_actions");
 
+  if (
+    !displayDormantDeletion(
+      workspace,
+      allowAdvancedScheduling,
+      allowWorkspaceActions,
+    )
+  ) {
+    return null;
+  }
+
   return (
-    <Maybe
-      condition={displayDormantDeletion(
-        workspace,
-        allowAdvancedScheduling,
-        allowWorkspaceActions,
-      )}
-    >
-      <StyledStatsItem
-        label="Deletion on"
-        className="containerClass"
-        value={
-          <Link
-            component={RouterLink}
-            to={`/templates/${workspace.template_name}/settings/schedule`}
-            title="Schedule settings"
-          >
-            {/* We check for string existence in the conditional */}
-            {new Date(workspace.deleting_at as string).toLocaleString()}
-          </Link>
-        }
-      />
-    </Maybe>
+    <StyledStatsItem
+      label="Deletion on"
+      className="containerClass"
+      value={
+        <Link
+          component={RouterLink}
+          to={`/templates/${workspace.template_name}/settings/schedule`}
+          title="Schedule settings"
+        >
+          {/* We check for string existence in the conditional */}
+          {new Date(workspace.deleting_at!).toLocaleString()}
+        </Link>
+      }
+    />
   );
 };
 

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -1,6 +1,5 @@
 import { useMachine } from "@xstate/react";
 import { isApiValidationError } from "api/errors";
-import { Maybe } from "components/Conditionals/Maybe";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm";
 import { Loader } from "components/Loader/Loader";
@@ -55,14 +54,12 @@ const CreateTemplatePage: FC = () => {
       </Helmet>
 
       <FullPageHorizontalForm title="Create Template" onCancel={onCancel}>
-        <Maybe condition={state.hasTag("loading")}>
-          <Loader />
-        </Maybe>
+        {state.hasTag("loading") && <Loader />}
 
         <Stack spacing={6}>
-          <Maybe condition={Boolean(error && !isApiValidationError(error))}>
+          {Boolean(error) && !isApiValidationError(error) && (
             <ErrorAlert error={error} />
-          </Maybe>
+          )}
 
           {shouldDisplayForm && (
             <CreateTemplateForm