Aug 30, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 29, 2023
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
 FeatureAdvancedTemplateScheduling  FeatureName = "advanced_template_scheduling"
 FeatureTemplateAutostopRequirement FeatureName = "template_autostop_requirement"
 FeatureWorkspaceProxy              FeatureName = "workspace_proxy"
 FeatureWorkspaceBatchActions       FeatureName = "workspace_batch_actions"
 )

 // FeatureNames must be kept in-sync with the Feature enum above.
 FeatureAdvancedTemplateScheduling,
 FeatureWorkspaceProxy,
 FeatureUserRoleManagement,
 FeatureWorkspaceBatchActions,
 }

 // Humanize returns the feature name in a human-readable format.
 // Deployment health page
 ExperimentDeploymentHealthPage Experiment = "deployment_health_page"

 // Workspaces batch actions
 ExperimentWorkspacesBatchActions Experiment = "workspaces_batch_actions"

 // Add new experiments here!
 // ExperimentExample Experiment = "example"
 )
 // not be included here and will be essentially hidden.
 var ExperimentsAll = Experiments{
 ExperimentDeploymentHealthPage,
 ExperimentWorkspacesBatchActions,
 }

 // Experiments is a list of experiments that are enabled for the deployment.
diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx
 import { makeStyles } from "@mui/styles"
 import TableCell from "@mui/material/TableCell"
 import TableRow from "@mui/material/TableRow"
 import Skeleton from "@mui/material/Skeleton"
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
 import { FC } from "react"
 import TableRow, { TableRowProps } from "@mui/material/TableRow"
 import { FC, ReactNode, cloneElement, isValidElement } from "react"
 import { Loader } from "../Loader/Loader"

 export const TableLoader: FC = () => {
  },
 }))

 export const TableLoaderSkeleton: FC<{
  columns: number
 export const TableLoaderSkeleton = ({
  rows = 4,
  children,
 }: {
  rows?: number
  useAvatarData?: boolean
 }> = ({ columns, rows = 4, useAvatarData = false }) => {
  const placeholderColumns = Array(columns).fill(undefined)
  const placeholderRows = Array(rows).fill(undefined)

  children: ReactNode
 }) => {
  if (!isValidElement(children)) {
    throw new Error(
      "TableLoaderSkeleton children must be a valid React element",
    )
  }
  return (
    <>
      {placeholderRows.map((_, rowIndex) => (
        <TableRow key={rowIndex} role="progressbar" data-testid="loader">
          {placeholderColumns.map((_, columnIndex) => {
            if (useAvatarData && columnIndex === 0) {
              return (
                <TableCell key={columnIndex}>
                  <AvatarDataSkeleton />
                </TableCell>
              )
            }

            return (
              <TableCell key={columnIndex}>
                <Skeleton variant="text" width="25%" />
              </TableCell>
            )
          })}
        </TableRow>
      ))}
      {Array.from({ length: rows }, (_, i) =>
        cloneElement(children, { key: i }),
      )}
    </>
  )
 }

 export const TableRowSkeleton = (props: TableRowProps) => {
  return <TableRow role="progressbar" data-testid="loader" {...props} />
 }
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
 import { combineClasses } from "../../utils/combineClasses"
 import { AvatarData } from "../AvatarData/AvatarData"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { TableLoaderSkeleton } from "../TableLoader/TableLoader"
 import {
  TableLoaderSkeleton,
  TableRowSkeleton,
 } from "../TableLoader/TableLoader"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
 import { Stack } from "components/Stack/Stack"
 import PasswordOutlined from "@mui/icons-material/PasswordOutlined"
 import relativeTime from "dayjs/plugin/relativeTime"
 import ShieldOutlined from "@mui/icons-material/ShieldOutlined"
 import Skeleton from "@mui/material/Skeleton"
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"

 dayjs.extend(relativeTime)

  return (
    <ChooseOne>
      <Cond condition={Boolean(isLoading)}>
        <TableLoaderSkeleton columns={canEditUsers ? 5 : 4} useAvatarData />
        <TableLoaderSkeleton>
          <TableRowSkeleton>
            <TableCell>
              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                <AvatarDataSkeleton />
              </Box>
            </TableCell>
            <TableCell>
              <Skeleton variant="text" width="25%" />
            </TableCell>
            <TableCell>
              <Skeleton variant="text" width="25%" />
            </TableCell>
            <TableCell>
              <Skeleton variant="text" width="25%" />
            </TableCell>
            {canEditUsers && (
              <TableCell>
                <Skeleton variant="text" width="25%" />
              </TableCell>
            )}
          </TableRowSkeleton>
        </TableLoaderSkeleton>
      </Cond>
      <Cond condition={!users || users.length === 0}>
        <ChooseOne>
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { EmptyState } from "components/EmptyState/EmptyState"
 import { Stack } from "components/Stack/Stack"
 import { TableLoaderSkeleton } from "components/TableLoader/TableLoader"
 import {
  TableLoaderSkeleton,
  TableRowSkeleton,
 } from "components/TableLoader/TableLoader"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { FC } from "react"
 import { Link as RouterLink, useNavigate } from "react-router-dom"
 import { Paywall } from "components/Paywall/Paywall"
 import { Group } from "api/typesGenerated"
 import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
 import { docs } from "utils/docs"
 import Skeleton from "@mui/material/Skeleton"
 import { Box } from "@mui/system"
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"

 export type GroupsPageViewProps = {
  groups: Group[] | undefined
              <TableBody>
                <ChooseOne>
                  <Cond condition={isLoading}>
                    <TableLoaderSkeleton columns={3} useAvatarData />
                    <TableLoader />
                  </Cond>

                  <Cond condition={isEmpty}>
  )
 }

 const TableLoader = () => {
  return (
    <TableLoaderSkeleton>
      <TableRowSkeleton>
        <TableCell>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            <AvatarDataSkeleton />
          </Box>
        </TableCell>
        <TableCell>
          <Skeleton variant="text" width="25%" />
        </TableCell>
        <TableCell>
          <Skeleton variant="text" width="25%" />
        </TableCell>
      </TableRowSkeleton>
    </TableLoaderSkeleton>
  )
 }

 const useStyles = makeStyles((theme) => ({
  clickableTableRow: {
    cursor: "pointer",
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
  PageHeaderTitle,
 } from "../../components/PageHeader/PageHeader"
 import { Stack } from "../../components/Stack/Stack"
 import { TableLoaderSkeleton } from "../../components/TableLoader/TableLoader"
 import {
  TableLoaderSkeleton,
  TableRowSkeleton,
 } from "../../components/TableLoader/TableLoader"
 import {
  HelpTooltip,
  HelpTooltipLink,
 import { Avatar } from "components/Avatar/Avatar"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { docs } from "utils/docs"
 import Skeleton from "@mui/material/Skeleton"
 import { Box } from "@mui/system"
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"

 export const Language = {
  developerCount: (activeCount: number): string => {
              </TableHead>
              <TableBody>
                <Maybe condition={isLoading}>
                  <TableLoaderSkeleton columns={5} useAvatarData />
                  <TableLoader />
                </Maybe>

                <ChooseOne>
  )
 }

 const TableLoader = () => {
  return (
    <TableLoaderSkeleton>
      <TableRowSkeleton>
        <TableCell>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            <AvatarDataSkeleton />
          </Box>
        </TableCell>
        <TableCell>
          <Skeleton variant="text" width="25%" />
        </TableCell>
        <TableCell>
          <Skeleton variant="text" width="25%" />
        </TableCell>
        <TableCell>
          <Skeleton variant="text" width="25%" />
        </TableCell>
        <TableCell>
          <Skeleton variant="text" width="25%" />
        </TableCell>
      </TableRowSkeleton>
    </TableLoaderSkeleton>
  )
 }

 const useStyles = makeStyles((theme) => ({
  templateIconWrapper: {
    // Same size then the avatar component
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx

    await user.click(getWorkspaceCheckbox(workspaces[0]))
    await user.click(getWorkspaceCheckbox(workspaces[1]))
    await user.click(screen.getByRole("button", { name: /deleteall/i }))
    await user.click(screen.getByRole("button", { name: /deleteselected/i }))
    await user.type(screen.getByLabelText(/type delete to confirm/i), "DELETE")
    await user.click(screen.getByTestId("confirm-button"))

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
  const [checkedWorkspaces, setCheckedWorkspaces] = useState<Workspace[]>([])
  const [isDeletingAll, setIsDeletingAll] = useState(false)
  const [urlSearchParams] = searchParamsResult
  const dashboard = useDashboard()
  const isWorkspaceBatchActionsEnabled =
    dashboard.experiments.includes("workspaces_batch_actions") ||
    process.env.NODE_ENV === "development"
  const { entitlements } = useDashboard()
  const canCheckWorkspaces =
    entitlements.features["workspace_batch_actions"].enabled

  // We want to uncheck the selected workspaces always when the url changes
  // because of filtering or pagination
      </Helmet>

      <WorkspacesPageView
        isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
        checkedWorkspaces={checkedWorkspaces}
        onCheckChange={setCheckedWorkspaces}
        canCheckWorkspaces={canCheckWorkspaces}
        workspaces={data?.workspaces}
        dormantWorkspaces={dormantWorkspaces}
        error={error}
  const confirmDeletion = async () => {
    setConfirmError(false)

    if (confirmValue.toLowerCase() !== "delete") {
    if (confirmValue !== "DELETE") {
      setConfirmError(true)
      return
    }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -48,6 +48,7 @@ const (
		FeatureAdvancedTemplateScheduling FeatureName = "advanced_template_scheduling"
		FeatureTemplateAutostopRequirement FeatureName = "template_autostop_requirement"
		FeatureWorkspaceProxy FeatureName = "workspace_proxy"
		FeatureWorkspaceBatchActions FeatureName = "workspace_batch_actions"
		)

		// FeatureNames must be kept in-sync with the Feature enum above.
Expand All		@@ -64,6 +65,7 @@ var FeatureNames = []FeatureName{
		FeatureAdvancedTemplateScheduling,
		FeatureWorkspaceProxy,
		FeatureUserRoleManagement,
		FeatureWorkspaceBatchActions,
		}

		// Humanize returns the feature name in a human-readable format.
Expand DownExpand Up		@@ -1941,9 +1943,6 @@ const (
		// Deployment health page
		ExperimentDeploymentHealthPage Experiment = "deployment_health_page"

		// Workspaces batch actions
		ExperimentWorkspacesBatchActions Experiment = "workspaces_batch_actions"

		// Add new experiments here!
		// ExperimentExample Experiment = "example"
		)
Expand All		@@ -1954,7 +1953,6 @@ const (
		// not be included here and will be essentially hidden.
		var ExperimentsAll = Experiments{
		ExperimentDeploymentHealthPage,
		ExperimentWorkspacesBatchActions,
		}

		// Experiments is a list of experiments that are enabled for the deployment.
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,9 +1,7 @@
		import { makeStyles } from "@mui/styles"
		import TableCell from "@mui/material/TableCell"
		import TableRow from "@mui/material/TableRow"
		import Skeleton from "@mui/material/Skeleton"
		import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
		import { FC } from "react"
		import TableRow, { TableRowProps } from "@mui/material/TableRow"
		import { FC, ReactNode, cloneElement, isValidElement } from "react"
		import { Loader } from "../Loader/Loader"

		export const TableLoader: FC = () => {
Expand All		@@ -25,35 +23,27 @@ const useStyles = makeStyles((theme) => ({
		},
		}))

		export const TableLoaderSkeleton: FC<{
		columns: number
		export const TableLoaderSkeleton = ({
		rows = 4,
		children,
		}: {
		rows?: number
		useAvatarData?: boolean
		}> = ({ columns, rows = 4, useAvatarData = false }) => {
		const placeholderColumns = Array(columns).fill(undefined)
		const placeholderRows = Array(rows).fill(undefined)

		children: ReactNode
		}) => {
		if (!isValidElement(children)) {
		throw new Error(
		"TableLoaderSkeleton children must be a valid React element",
		)
		}
		return (
		<>
		{placeholderRows.map((_, rowIndex) => (
		<TableRow key={rowIndex} role="progressbar" data-testid="loader">
		{placeholderColumns.map((_, columnIndex) => {
		if (useAvatarData && columnIndex === 0) {
		return (
		<TableCell key={columnIndex}>
		<AvatarDataSkeleton />
		</TableCell>
		)
		}

		return (
		<TableCell key={columnIndex}>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		)
		})}
		</TableRow>
		))}
		{Array.from({ length: rows }, (_, i) =>
		cloneElement(children, { key: i }),
		)}
		</>
		)
		}

		export const TableRowSkeleton = (props: TableRowProps) => {
		return <TableRow role="progressbar" data-testid="loader" {...props} />
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,10 @@ import * as TypesGen from "../../api/typesGenerated"
		import { combineClasses } from "../../utils/combineClasses"
		import { AvatarData } from "../AvatarData/AvatarData"
		import { EmptyState } from "../EmptyState/EmptyState"
		import { TableLoaderSkeleton } from "../TableLoader/TableLoader"
		import {
		TableLoaderSkeleton,
		TableRowSkeleton,
		} from "../TableLoader/TableLoader"
		import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
		import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
		import { Stack } from "components/Stack/Stack"
Expand All		@@ -23,6 +26,8 @@ import GitHub from "@mui/icons-material/GitHub"
		import PasswordOutlined from "@mui/icons-material/PasswordOutlined"
		import relativeTime from "dayjs/plugin/relativeTime"
		import ShieldOutlined from "@mui/icons-material/ShieldOutlined"
		import Skeleton from "@mui/material/Skeleton"
		import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"

		dayjs.extend(relativeTime)

Expand DownExpand Up		@@ -91,7 +96,29 @@ export const UsersTableBody: FC<
		return (
		<ChooseOne>
		<Cond condition={Boolean(isLoading)}>
		<TableLoaderSkeleton columns={canEditUsers ? 5 : 4} useAvatarData />
		<TableLoaderSkeleton>
		<TableRowSkeleton>
		<TableCell>
		<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
		<AvatarDataSkeleton />
		</Box>
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		{canEditUsers && (
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		)}
		</TableRowSkeleton>
		</TableLoaderSkeleton>
		</Cond>
		<Cond condition={!users \|\| users.length === 0}>
		<ChooseOne>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,14 +15,20 @@ import { AvatarData } from "components/AvatarData/AvatarData"
		import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
		import { EmptyState } from "components/EmptyState/EmptyState"
		import { Stack } from "components/Stack/Stack"
		import { TableLoaderSkeleton } from "components/TableLoader/TableLoader"
		import {
		TableLoaderSkeleton,
		TableRowSkeleton,
		} from "components/TableLoader/TableLoader"
		import { UserAvatar } from "components/UserAvatar/UserAvatar"
		import { FC } from "react"
		import { Link as RouterLink, useNavigate } from "react-router-dom"
		import { Paywall } from "components/Paywall/Paywall"
		import { Group } from "api/typesGenerated"
		import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
		import { docs } from "utils/docs"
		import Skeleton from "@mui/material/Skeleton"
		import { Box } from "@mui/system"
		import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"

		export type GroupsPageViewProps = {
		groups: Group[] \| undefined
Expand DownExpand Up		@@ -83,7 +89,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
		<TableBody>
		<ChooseOne>
		<Cond condition={isLoading}>
		<TableLoaderSkeleton columns={3} useAvatarData />
		<TableLoader />
		</Cond>

		<Cond condition={isEmpty}>
Expand DownExpand Up		@@ -184,6 +190,26 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
		)
		}

		const TableLoader = () => {
		return (
		<TableLoaderSkeleton>
		<TableRowSkeleton>
		<TableCell>
		<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
		<AvatarDataSkeleton />
		</Box>
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		</TableRowSkeleton>
		</TableLoaderSkeleton>
		)
		}

		const useStyles = makeStyles((theme) => ({
		clickableTableRow: {
		cursor: "pointer",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,7 +24,10 @@ import {
		PageHeaderTitle,
		} from "../../components/PageHeader/PageHeader"
		import { Stack } from "../../components/Stack/Stack"
		import { TableLoaderSkeleton } from "../../components/TableLoader/TableLoader"
		import {
		TableLoaderSkeleton,
		TableRowSkeleton,
		} from "../../components/TableLoader/TableLoader"
		import {
		HelpTooltip,
		HelpTooltipLink,
Expand All		@@ -42,6 +45,9 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"
		import { Avatar } from "components/Avatar/Avatar"
		import { ErrorAlert } from "components/Alert/ErrorAlert"
		import { docs } from "utils/docs"
		import Skeleton from "@mui/material/Skeleton"
		import { Box } from "@mui/system"
		import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"

		export const Language = {
		developerCount: (activeCount: number): string => {
Expand DownExpand Up		@@ -196,7 +202,7 @@ export const TemplatesPageView: FC<
		</TableHead>
		<TableBody>
		<Maybe condition={isLoading}>
		<TableLoaderSkeleton columns={5} useAvatarData />
		<TableLoader />
		</Maybe>

		<ChooseOne>
Expand All		@@ -222,6 +228,32 @@ export const TemplatesPageView: FC<
		)
		}

		const TableLoader = () => {
		return (
		<TableLoaderSkeleton>
		<TableRowSkeleton>
		<TableCell>
		<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
		<AvatarDataSkeleton />
		</Box>
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		<TableCell>
		<Skeleton variant="text" width="25%" />
		</TableCell>
		</TableRowSkeleton>
		</TableLoaderSkeleton>
		)
		}

		const useStyles = makeStyles((theme) => ({
		templateIconWrapper: {
		// Same size then the avatar component
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -63,7 +63,7 @@ describe("WorkspacesPage", () => {

		await user.click(getWorkspaceCheckbox(workspaces[0]))
		await user.click(getWorkspaceCheckbox(workspaces[1]))
		await user.click(screen.getByRole("button", { name: /deleteall/i }))
		await user.click(screen.getByRole("button", { name: /deleteselected/i }))
		await user.type(screen.getByLabelText(/type delete to confirm/i), "DELETE")
		await user.click(screen.getByTestId("confirm-button"))

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -68,10 +68,9 @@ const WorkspacesPage: FC = () => {
		const [checkedWorkspaces, setCheckedWorkspaces] = useState<Workspace[]>([])
		const [isDeletingAll, setIsDeletingAll] = useState(false)
		const [urlSearchParams] = searchParamsResult
		const dashboard = useDashboard()
		const isWorkspaceBatchActionsEnabled =
		dashboard.experiments.includes("workspaces_batch_actions") \|\|
		process.env.NODE_ENV === "development"
		const { entitlements } = useDashboard()
		const canCheckWorkspaces =
		entitlements.features["workspace_batch_actions"].enabled

		// We want to uncheck the selected workspaces always when the url changes
		// because of filtering or pagination
Expand All		@@ -86,9 +85,9 @@ const WorkspacesPage: FC = () => {
		</Helmet>

		<WorkspacesPageView
		isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
		checkedWorkspaces={checkedWorkspaces}
		onCheckChange={setCheckedWorkspaces}
		canCheckWorkspaces={canCheckWorkspaces}
		workspaces={data?.workspaces}
		dormantWorkspaces={dormantWorkspaces}
		error={error}
Expand DownExpand Up		@@ -198,7 +197,7 @@ const BatchDeleteConfirmation = ({
		const confirmDeletion = async () => {
		setConfirmError(false)

		if (confirmValue.toLowerCase() !== "delete") {
		if (confirmValue !== "DELETE") {
		setConfirmError(true)
		return
		}
Expand Down