chore: add no implicit coercion eslint rule (#3909)

* chore: add no-implicit-coercion ESLint rule

This adds a new ESLint rule to prevent us from using implicit coercion
in the codebase. See https://eslint.org/docs/latest/rules/no-implicit-coercion

* chore: fix implicit coercion errors

* fixup: formatting

site/.eslintrc.yaml

@@ -78,6 +78,7 @@ rules:
         - info
         - debug
   no-dupe-class-members: "off"
+  no-implicit-coercion: "error"
   no-restricted-imports:
     - error
     - paths:

site/src/AppRouter.tsx

@@ -145,7 +145,7 @@ export const AppRouter: FC = () => {
                 <AuthAndFrame>
                   <RequirePermission
                     isFeatureVisible={
-                      featureVisibility[FeatureNames.AuditLog] && !!permissions?.viewAuditLog
+                      featureVisibility[FeatureNames.AuditLog] && Boolean(permissions?.viewAuditLog)
                     }
                   >
                     <AuditPage />

site/src/components/ErrorSummary/ErrorSummary.tsx

@@ -49,7 +49,7 @@ export const ErrorSummary: FC<React.PropsWithChildren<ErrorSummaryProps>> = ({
       <Stack direction="row" alignItems="center" className={styles.messageBox}>
         <Stack direction="row" spacing={0}>
           <span className={styles.errorMessage}>{message}</span>
-          {!!detail && <Expander expanded={showDetails} setExpanded={setShowDetails} />}
+          {Boolean(detail) && <Expander expanded={showDetails} setExpanded={setShowDetails} />}
         </Stack>
         {dismissible && (
           <IconButton onClick={closeError} className={styles.iconButton}>

site/src/components/LoadingButton/LoadingButton.tsx

@@ -23,7 +23,7 @@ export const LoadingButton: FC<React.PropsWithChildren<LoadingButtonProps>> = ({
   children,
   ...rest
 }) => {
-  const styles = useStyles({ hasLoadingLabel: !!loadingLabel })
+  const styles = useStyles({ hasLoadingLabel: Boolean(loadingLabel) })
   const hidden = loading ? { opacity: 0 } : undefined
 
   return (
@@ -34,7 +34,7 @@ export const LoadingButton: FC<React.PropsWithChildren<LoadingButtonProps>> = ({
           <CircularProgress size={18} className={styles.spinner} />
         </div>
       )}
-      {!!loadingLabel && loadingLabel}
+      {Boolean(loadingLabel) && loadingLabel}
     </Button>
   )
 }

site/src/components/Navbar/Navbar.tsx

@@ -14,7 +14,8 @@ export const Navbar: React.FC = () => {
     selectFeatureVisibility,
     shallowEqual,
   )
-  const canViewAuditLog = featureVisibility[FeatureNames.AuditLog] && !!permissions?.viewAuditLog
+  const canViewAuditLog =
+    featureVisibility[FeatureNames.AuditLog] && Boolean(permissions?.viewAuditLog)
   const onSignOut = () => authSend("SIGN_OUT")
 
   return <NavbarView user={me} onSignOut={onSignOut} canViewAuditLog={canViewAuditLog} />

site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx

@@ -42,7 +42,7 @@ export const SearchBarWithFilter: React.FC<React.PropsWithChildren<SearchBarWith
   presetFilters,
   error,
 }) => {
-  const styles = useStyles({ error: !!error })
+  const styles = useStyles({ error: Boolean(error) })
 
   const form = useFormik<FilterFormValues>({
     enableReinitialize: true,
@@ -108,7 +108,7 @@ export const SearchBarWithFilter: React.FC<React.PropsWithChildren<SearchBarWith
             id="query"
             name="query"
             value={form.values.query}
-            error={!!error}
+            error={Boolean(error)}
             className={styles.inputStyles}
             onChange={form.handleChange}
             startAdornment={

site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx

@@ -40,7 +40,7 @@ export const HelpTooltip: React.FC<React.PropsWithChildren<HelpTooltipProps>> =
 }) => {
   const styles = useStyles({ size })
   const anchorRef = useRef<HTMLButtonElement>(null)
-  const [isOpen, setIsOpen] = useState(!!open)
+  const [isOpen, setIsOpen] = useState(Boolean(open))
   const id = isOpen ? "help-popover" : undefined
 
   const onClose = () => {

site/src/components/UserDropdown/UsersDropdown.tsx

@@ -51,7 +51,7 @@ export const UserDropdown: React.FC<React.PropsWithChildren<UserDropdownProps>>
       <BorderedMenu
         anchorEl={anchorEl}
         getContentAnchorEl={null}
-        open={!!anchorEl}
+        open={Boolean(anchorEl)}
         anchorOrigin={{
           vertical: "bottom",
           horizontal: "right",

site/src/components/Workspace/Workspace.tsx

@@ -131,7 +131,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 
         <WorkspaceStats workspace={workspace} handleUpdate={handleUpdate} />
 
-        {!!resources && !!resources.length && (
+        {typeof resources !== "undefined" && resources.length > 0 && (
           <Resources
             resources={resources}
             getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}

site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx

@@ -18,7 +18,7 @@ export const WorkspaceActionButton: FC<React.PropsWithChildren<WorkspaceActionBu
 }) => {
   return (
     <Button className={className} startIcon={icon} onClick={onClick} aria-label={ariaLabel}>
-      {!!label && label}
+      {Boolean(label) && label}
     </Button>
   )
 }

site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

@@ -164,7 +164,7 @@ export const validationSchema = Yup.object({
     .test("positive-if-auto-stop", Language.errorNoStop, function (value) {
       const parent = this.parent as WorkspaceScheduleFormValues
       if (parent.autoStopEnabled) {
-        return !!value
+        return Boolean(value)
       } else {
         return true
       }

site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx

@@ -33,7 +33,7 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
 
   return (
     <FullPageForm title={Language.title} onCancel={onCancel}>
-      {!!errors.getTemplateError && <ErrorSummary error={errors.getTemplateError} />}
+      {Boolean(errors.getTemplateError) && <ErrorSummary error={errors.getTemplateError} />}
       {isLoading && <Loader />}
       {template && (
         <TemplateSettingsForm

site/src/pages/WorkspacePage/WorkspacePage.tsx

@@ -48,7 +48,7 @@ export const WorkspacePage: FC = () => {
     cancellationError,
   } = workspaceState.context
 
-  const canUpdateWorkspace = !!permissions?.updateWorkspace
+  const canUpdateWorkspace = Boolean(permissions?.updateWorkspace)
 
   const [bannerState, bannerSend] = useMachine(workspaceScheduleBannerMachine)
   const [buildInfoState] = useActor(xServices.buildInfoXService)
@@ -66,9 +66,9 @@ export const WorkspacePage: FC = () => {
   if (workspaceState.matches("error")) {
     return (
       <div className={styles.error}>
-        {!!getWorkspaceError && <ErrorSummary error={getWorkspaceError} />}
-        {!!refreshTemplateError && <ErrorSummary error={refreshTemplateError} />}
-        {!!checkPermissionsError && <ErrorSummary error={checkPermissionsError} />}
+        {Boolean(getWorkspaceError) && <ErrorSummary error={getWorkspaceError} />}
+        {Boolean(refreshTemplateError) && <ErrorSummary error={refreshTemplateError} />}
+        {Boolean(checkPermissionsError) && <ErrorSummary error={checkPermissionsError} />}
       </div>
     )
   } else if (!workspace || !permissions) {

site/src/util/events.ts

@@ -45,5 +45,5 @@ export type AnnotatedEventListener<E extends Event> = (event: E) => void
 export const isCustomEvent = <D = unknown>(
   event: CustomEvent<D> | Event,
 ): event is CustomEvent<D> => {
-  return !!(event as CustomEvent).detail
+  return Boolean((event as CustomEvent).detail)
 }