Function WorkspacesPageView

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx:60–241

({
	workspaces,
	error,
	limit,
	count,
	filterState,
	onPageChange,
	page,
	checkedWorkspaces,
	onCheckChange,
	onBatchDeleteTransition,
	onBatchUpdateTransition,
	onBatchStopTransition,
	onBatchStartTransition,
	isRunningBatchAction,
	templates,
	templatesFetchStatus,
	canCreateTemplate,
	canChangeVersions,
	onActionSuccess,
	onActionError,
	chatsByWorkspace,
})

}

export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
	workspaces,
	error,
	limit,
	count,
	filterState,
	onPageChange,
	page,
	checkedWorkspaces,
	onCheckChange,
	onBatchDeleteTransition,
	onBatchUpdateTransition,
	onBatchStopTransition,
	onBatchStartTransition,
	isRunningBatchAction,
	templates,
	templatesFetchStatus,
	canCreateTemplate,
	canChangeVersions,
	onActionSuccess,
	onActionError,
	chatsByWorkspace,
}) => {
	// Let's say the user has 5 workspaces, but tried to hit page 100, which
	// does not exist. In this case, the page is not valid and we want to show a
	// better error message.
	const pageNumberIsInvalid = page !== 1 && workspaces?.length === 0;

	return (
		<Margins className="pb-12">
			<PageHeader
				actions={
					<WorkspacesButton
						templates={templates}
						templatesFetchStatus={templatesFetchStatus}
					>
						New workspace
					</WorkspacesButton>
				}
			>
				<PageHeaderTitle>
					<div className="flex flex-row gap-2 items-center">
						<span>Workspaces</span>
						<WorkspaceHelpPopover />
					</div>
				</PageHeaderTitle>
			</PageHeader>

			<div className="flex flex-col gap-4">
				{hasError(error) && !isApiValidationError(error) && (
					<ErrorAlert error={error} />
				)}
				<WorkspacesFilter
					filter={filterState.filter}
					error={error}
					statusMenu={filterState.menus.status}
					templateMenu={filterState.menus.template}
					userMenu={filterState.menus.user}